v5.0.0

Removed

• support for Stylelint less than 16.8.2 to use fix() callback for autofix (@planetmalone)

Fixed

• npm published files to exclude READMEs and tests

v4.0.0

Removed

• support for Stylelint less than 16.0.0 to migrate to ESM

v3.1.1

Fixed

• alpha-values false positives for <number>

v3.1.0

Added

• ignoreFunctionArguments: [] option to space rule

v3.0.0

Migrating from 2.0.3

The package name as been unscoped to stylelint-scales and the scoped package has been deprecated.

You should replace the deprecated package:

npm uninstall @signal-noise/stylelint-scales && npm i -D stylelint-scales

{
- "plugins": ["@signal-noise/stylelint-scales"],
+ "plugins": ["stylelint-scales"],
  "rules": {
    "scales/alpha-values": [80, 90]
    ..
  }
}

The font-families rule has been removed so that the pack is for autofixable numeric scales. You should remove the rule from your config:

{
  "rules": {
-   "scales/font-families": ["sans-serif", "serif"]
    ..
  }
}

Removed

• font-families rule

Changed

• Unscoped the package name to stylelint-scales

Added

• ignoreFunctionArguments: [] option to font-sizes rule

v2.0.3

Fixed

• stylelint@14 compatibility

v2.0.2

Fixed

• type error for system keywords in font-families

v2.0.1

Fixed

• parse error for custom properties in font-families

v2.0.0

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%);
}

v1.3.0

Border width rule no longer checks against none value.
Support non-numerical font-weights.
Handles CSS global keywords in font shorthand declarations.

v1.2.0...v1.3.0