Skip to content

v2.0.0
Compare
Choose a tag to compare
@jeddy3 jeddy3 released this 08 Feb 18:32
2.0.0
384be9b

Removed

  • color rule

Changed

  • names to be consistently pluralised
  • options signature for rules that check values with units
  • rules now check logical properties and shorthand gap

Added

  • alpha-values rule
  • autofix to rules that check numeric scales
  • per unit scales for rules that check values with units
  • support for unenclosed array primary options

Migrating from 1.5.0

The plugin pack can now automatically fix all numeric scales!

A number of breaking changes were needed to make this possible.

Rule names

A handful of rules were renamed to consistently use plurals:

  • border-width to border-widths
  • font-family to font-families
  • font-size to font-sizes
  • font-weight to font-weights
  • letter-spacing to letter-spacings
  • line-height to line-heights
  • word-spacing to word-spacings

For example, you should change the following:

{
  "rules": {
    "scales/font-weight": [400, 600]
  }
}

To:

{
  "rules": {
    "scales/font-weights": [400, 600]
  }
}

Option signatures

Rules that check values with units now expect an array of objects for their primary option. Each object must specify two arrays:

  • scale - a numerical scale of allowed values
  • units - a list of units to apply the scale to

This replaces the unit secondary option found on many of the rules.

For example, you should change the following:

{
  "rules": {
    "scales/font-size": [[1, 2], { "unit": "rem" }]
  }
}

To:

{
  "rules": {
    "scales/font-sizes": [
      {
        "scale": [1, 2],
        "units": ["rem"]
      }
    ]
  }
}

This will allow:

a {
  font-size: 1rem;
}

You can now specify multiple units per scale, for example:

{
  "rules": {
    "scales/font-sizes": [
      {
        "scale": [1, 2],
        "units": ["em", "rem"]
      }
    ]
  }
}

This will allow:

a {
  font-size: 1em;
}

a {
  font-size: 1rem;
}

And multiple scales per rule, for example:

{
  "rules": {
    "scales/font-sizes": [
      {
        "scale": [1, 2],
        "units": ["rem"]
      },
      {
        "scale": [12, 14],
        "units": ["px"]
      }
    ]
  }
}

This will allow:

a {
  font-size: 1rem;
}

a {
  font-size: 12px;
}

Enforcing specific units

The plugin pack no longer enforces the specified units. This is particularly useful when working with percentages and viewport units, which may not sit on a scale. You should use the declaration-property-unit-allowed-list rule in stylelint if you wish to enforce specific units.

For example, you should change the following:

{
  "rules": {
    "scales/font-size": [[1, 2], { "unit": "rem" }]
  }
}

To:

{
  "rules": {
    "declaration-property-unit-allowed-list": {
      "/^font$|^font-size$/": ["rem"]
    },
    "scales/font-sizes": [
      {
        "scale": [1, 2],
        "units": ["rem"]
      }
    ]
  }
}

Appropriate regular expressions for the declaration-property-unit-allowed-list rule are documented in each of the rule READMEs.

Only numeric values

The rules now, with the exception of font-families, only accept numeric values. Non-numeric values in your CSS are now ignored.

For example, you should change the following:

{
  "rules": {
    "scales/font-weight": [400, 600, "bold"]
  }
}

To:

{
  "rules": {
    "scales/font-weights": [400, 600]
  }
}

Numeric font weights are appropriate for both non-variable fonts, e.g. 100, 200, 300 and so on, and variable fonts, which range from 1 to 1000.

Logical and gap properties

The rules now check logical properties and gap properties, so more violations may be caught (and automatically fixed).

Top-level arrays

You no longer need to enclose top-level scale arrays in an array.

For example, you should change the following:

{
  "rules": {
    "scales/font-weight": [[400, 600]]
  }
}

To:

{
  "rules": {
    "scales/font-weights": [400, 600]
  }
}

The color rule

The color rule was removed. You should use CSS Variables for colours because, unlike numeric values and font family names, hex values and colour function notation are not human-readable. You can enforce a scale for alpha values using the new alpha-values rule.

For example, you should change the following:

{
  "rules": {
    "scales/color": [
      [
        [0, 0, 0],
        [255, 255, 255]
      ],
      {
        "alphaScale": [[0.5, 0.75]]
      }
    ]
  }
}

To:

{
  "rules": {
    "scales/alpha-values": [50, 75]
  }
}

And write your CSS using CSS Variables for colour, for example:

a {
  color: hsl(var(--accent) / 50%);
}
Assets 2