Notable Pottery Manufacturer

    stylelint-require-units

    1.0.2 • Public • Published

    stylelint-require-units

    A customizable stylelint rule to require units for certain css properties.

    By default the properties that are checked for units are:

    border, border-bottom, border-bottom-left-radius, border-bottom-right-radius, border-bottom-width, border-image-outset, border-image-width, border-left, border-left-width, border-radius, border-right, border-right-width, border-spacing, border-top, border-top-left-radius, border-top-right-radius, border-top-width, border-width, bottom, box-shadow, column-rule-width, column-width, columns, font-size, grid-auto-columns, grid-auto-rows, grid-column-gap, grid-gap, grid-row-gap, grid-template, height, left, letter-spacing, line-height, margin, margin-bottom, margin-left, margin-right, margin-top, max-height, max-width, min-height, min-width, object-position, outline, outline-offset, outline-width, padding, padding-bottom, padding-left, padding-right, padding-top, perspective, perspective-origin, right, text-indent, text-shadow, top, transform, transform-origin, width, word-spacing

    It will only check when numbers, or in the case of styled components, variables are used.

    Functions are skipped by default, but there is an option to specify functions that are desired to be checked.

    Installation

    1. Install stylelint (if you have not done so yet):
    yarn add stylelint --dev

    or

    npm install stylelint --save-dev
    1. Install stylelint-require-units:
    yarn add stylelint-require-units -dev

    or

    npm install stylelint-require-units -save-dev
    1. Create the .stylelintrc config file (if you have not done so yet), add matterialize/stylelint-require-units to the plugins array with the desired options as shown below.

    Default activation

    NOTE: true is required to activate the plugin

    {
      "plugins": ["stylelint-require-units"],
      "rules": {
        "matterialize/stylelint-require-units": true
      }
    }

    Custom options

    All of the options below need to be keys in the second element object of the array with the first element of the array being true.

    Option: Check unknown units

    By default the type of units are not checked by this plugin, just that the units exist. This option is added because styled components units are not linted when variables are used before a unit. This is an extra check to ensure variables are followed by units.

    {
      "plugins": ["stylelint-require-units"],
      "rules": {
        "matterialize/stylelint-require-units": [true, {
          "checkUnknownUnits": true
        }]
      }
    }

    Option: Force 0 to require units

    By default 0 is not required to have units. If you have a stylist preference to include units for 0 this flag can be set to throw an error if 0 does not have units.

    {
      "plugins": ["stylelint-require-units"],
      "rules": {
        "matterialize/stylelint-require-units": [true, {
          "forceZeroToRequireUnits": true
        }]
      }
    }

    Option: Whitelisted properties

    If you only want to check certain properties then you can use whitelistedProperties and only those properties listed in the array will be checked.

    NOTE: This can not be used with blackListedProperties. It is either or.

    {
      "plugins": ["stylelint-require-units"],
      "rules": {
        "matterialize/stylelint-require-units": [true, {
          "whitelistedProperties": ["width", "border"],
        }]
      }
    }

    Option: Blacklisted properties

    If you only want to check all default properties, but want to remove one or more properties from the default list, then you can use blacklistedProperties and only those properties listed in the default array will not be checked.

    {
      "plugins": ["stylelint-require-units"],
      "rules": {
        "matterialize/stylelint-require-units": [true, {
          "blacklistedProperties": ["width", "border"],
        }]
      }
    }

    NOTE: This can not be used with whiteListedProperties. It is either or.

    Option: Checked functions

    If you want to check specific functions and you pass the function name(s) in the checkedFunctions array.

    {
      "plugins": ["stylelint-require-units"],
      "matterialize/stylelint-require-units": [true, {
        "checkedFunctions": ["myCustomFunction1", "myCustomFunction2"],
      }]
    }

    Option: Additional Properties

    New properties are added periodically and in order to future proof or provide extended properties that are not here, add these properties to additionalProperties.

    NOTE: These properties are additional to whitelistedProperties or blacklistedProperties.

    {
      "plugins": ["stylelint-require-units"],
      "matterialize/stylelint-require-units": [true, {
        "additionalProperties": ["newProperty1", "newProperty2"],
      }]
    }

    Install

    npm i stylelint-require-units

    DownloadsWeekly Downloads

    48

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    24.6 kB

    Total Files

    12

    Last publish

    Collaborators

    • matterialize