stylelint-no-px

A stylelint custom rule to ensure rem instead of px.
If you are using rem
(instead of px
) as 1px solution or for other purposes, you should need a stylelint rule to enforce using rem. Thats it.
width: 10px;
border: 1px solid #eee;
Installation
npm install stylelint-no-px --save-dev
Usage
Add it to your stylelint config
{
"plugins": [
"stylelint-no-px"
],
"rules": {
"meowtec/no-px": [true, { "ignore": ["1px"] }],
"meowtec/no-px": true,
}
}
Options
ignore: Item[]
ignore value check.
Valid value of Item: propertyName
| '1px'
| '${propertyName} 1px'
ignoreFunctions: string[]
Ignore check for functions.
remSize: number
Specify a base size for converting px to rem. If this option is provided, the plugin will automatically convert pixel values to rem using the provided base size.
example(1) (the default options)
"meowtec/no-px": [true, { "ignore": ["1px"] }],
@padding-base: 20px;
.foo {
border-top: 1px solid #ccc;
padding: 10px;
height: 1px;
padding: @padding-base * 2;
}
example(2)
"meowtec/no-px": [true, { "ignore": ["1px", "font"], "ignoreFunctions": ["rem"] }],
.foo {
border-top: 1px solid #ccc;
height: 1px;
font-size: 24px;
padding: 10px;
width: calc(100% - 10px);
font-size: rem(10px);
}
example(3)
"meowtec/no-px": [true, { "ignore": ["border 1px"] }],
.foo {
border-top: 1px solid #ccc;
height: 1px;
}
example(4)
"meowtec/no-px": [true, { "ignore": ["1px"], "remSize": 16 }],
.foo {
height: 16px;
}