@penskemediacorp/stylelint-config
v1.62.0
Published
Stylelint base config and customizations.
Downloads
2,089
Readme
Base stylelint Config
This is Larva's core configuration for stylelint, though it can be used in any codebase and is not dependent on other Larva packages. Key features include:
- @extends are prohibited
- BEM selector concatenation is prohibited
- Font sizes must be in
rem
- Nesting is restricted to 2 levels, excluding media queries
px
are blacklisted except in box-shadow and border
Usage
In a consuming projects stylelint.config.js, add:
{
'extends': '@penskemediacorp/stylelint-config'
'rules: { }
}
Custom Formatter
This package also includes a custom formatter for stylelint where you can additional messages to the stylelint output for certain properties.
The custom formatter must be included in the configuration for running the stylelint command. In webpack, this would be part of the plugin configuration:
// webpack.config.js
plugins: [
new stylelintPlugin({
configFile: 'stylelint.config.json',
formatter: path.resolve( '/path/to/custom-formatter.js' ),
syntax: 'scss',
context: path.resolve( './src' )
}),
]
To use it, you can add an array of messages to the stylelint config object, like so:
{
"rules": {},
"messages": [
{
"property": "font-size",
"message": "Do not use font-size directly, use a utility class generated from u-text.scss instead."
},
{
"property": "font-family",
"message": "Do not use font-family directly, a utility class from u-text.scss or the font-family mixin located in tools/mixins."
},
]
}
In the Future
This should likely be a separate repository since it has its own usage instructions, and the formatter itself needs some re-evaluating.