Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/meowtec/stylelint-no-px
A stylelint custom rule to ensure using rem instead of px
https://github.com/meowtec/stylelint-no-px
css px rem stylelint
Last synced: 1 day ago
JSON representation
A stylelint custom rule to ensure using rem instead of px
- Host: GitHub
- URL: https://github.com/meowtec/stylelint-no-px
- Owner: meowtec
- License: mit
- Created: 2017-07-20T08:37:15.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-05-14T15:19:41.000Z (6 months ago)
- Last Synced: 2024-11-01T10:46:42.939Z (14 days ago)
- Topics: css, px, rem, stylelint
- Language: JavaScript
- Homepage:
- Size: 28.3 KB
- Stars: 33
- Watchers: 3
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.
```less
width: 10px; // error
border: 1px solid #eee; // ok
```
## Installation
```
npm install stylelint-no-px --save-dev
```
## Usage
Add it to your stylelint config
```javascript
// .stylelintrc
{
"plugins": [
"stylelint-no-px"
],
"rules": {
// ...
"meowtec/no-px": [true, { "ignore": ["1px"] }],
// or just:
"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)
```javascript
// all 1px is ok
"meowtec/no-px": [true, { "ignore": ["1px"] }],
```
```less
@padding-base: 20px; // error
.foo {
border-top: 1px solid #ccc; // ok
padding: 10px; // error
height: 1px; // ok
padding: @padding-base * 2;
}
```
### example(2)
```javascript
// - all `1px` or `font` is ok
// - rem(Npx) is ok
"meowtec/no-px": [true, { "ignore": ["1px", "font"], "ignoreFunctions": ["rem"] }],
```
```less
.foo {
border-top: 1px solid #ccc; // ok
height: 1px; // ok
font-size: 24px; // ok
padding: 10px; // error
width: calc(100% - 10px); // error
font-size: rem(10px); // ok
}
```
### example(3)
```javascript
// only `border + 1px` is ok
"meowtec/no-px": [true, { "ignore": ["border 1px"] }],
```
```less
.foo {
border-top: 1px solid #ccc; // ok
height: 1px; // error
}
```
### example(4)
```javascript
// only `border + 1px` is ok
"meowtec/no-px": [true, { "ignore": ["1px"], "remSize": 16 }],
```
```less
.foo {
height: 16px; // error, auto converts to 1rem
}
```