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

2. Install stylelint-require-units:

yarn add stylelint-require-units -dev

or

npm install stylelint-require-units -save-dev

2. 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: allowlist properties

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

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

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

Option: disallow 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 disallowedProperties and only those properties listed in the default array will not be checked.

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

NOTE: This can not be used with allowedProperties. 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 allowedProperties or disallowedProperties.

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