
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
@signal-noise/stylelint-scales
Advanced tools
A Stylelint plugin pack of rules for enforcing scales.
npm install @signal-noise/stylelint-scales --save-dev
Add stylelint-scales
to your Stylelint config plugins array, then add the rules you need to the rules list. All rules from stylelint-scales
need to be namespaced with scales
.
Like so:
{
"plugins": ["@signal-noise/stylelint-scales"],
"rules": {
"scales/alpha-values": [80, 90],
"scales/border-widths": [{ "scale": [1, 2], "units": ["px"] }],
"scales/font-families": ["system-ui"],
"scales/font-sizes": [
{ "scale": [1, 1.5, 2], "units": ["em", "rem"] },
{ "scale": [12, 14, 16], "units": ["px"] }
],
"scales/font-weights": [400, 600],
"scales/line-heights": [1, 1.5],
"scales/radii": [{ "scale": [2, 4], "units": ["px"] }],
"scales/space": [{ "scale": [0.5, 1, 2, 4], "units": ["rem"] }]
}
}
To enforce this:
p {
border: 1px solid hsl(var(--accent) / 90%));
border-radius: 2px;
font: 400 1rem/1.5 system-ui;
margin-block: 2rem;
}
This plugin can automatically fix all the numeric scales.
alpha-values
: Specify a scale for alpha values (Autofixable).border-widths
: Specify a scale for border widths (Autofixable).font-families
: Specify a scale for font families.font-sizes
: Specify a scale for font sizes (Autofixable).font-weights
: Specify a scale for font weights (Autofixable).letter-spacings
: Specify a scale for letter spacings (Autofixable).line-heights
: Specify a scale for line heights (Autofixable).radii
: Specify a scale for radii (Autofixable).sizes
: Specify a scale for sizes (Autofixable).space
: Specify a scale for space (Autofixable).word-spacings
: Specify a scale for word spacings (Autofixable).z-indices
: Specify a scale for z-indices (Autofixable).Ref: Styled System Keys Reference
You and the designers should define the scales together. You'll want to strike a balance between code consistency and design flexibility.
This plugin can help you create:
When designers review websites in the browser, they generally use relative terms. For example, "The space between that heading and that paragraph feels too tight, can we make it bigger?"
You can then pick the next value on the scale and be confident that it'll be consistent with the overall design.
While you can achieve something similar with variables, with this plugin you:
unit-allowed-list
to enforce consistent units. By using this plugin, you avoid adding a second mechanism (variables) to ensure design consistency. Additionally, you'll need to enforce the use of variables with linting anyway to avoid relying on developer discipline.Thanks goes to these wonderful people (emoji key):
Richard Hallows 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
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"]
..
}
}
font-families
rulestylelint-scales
ignoreFunctionArguments: []
option to font-sizes
ruleFAQs
A plugin pack to enforce scales within Stylelint
We found that @signal-noise/stylelint-scales demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.