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
toborder-widths
font-family
tofont-families
font-size
tofont-sizes
font-weight
tofont-weights
letter-spacing
toletter-spacings
line-height
toline-heights
word-spacing
toword-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 valuesunits
- 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%);
}