📅 You're Invited: Meet the Socket team at RSAC (April 28 – May 1).RSVP
Socket
Sign inDemoInstall
Socket

stylelint-no-px

Package Overview
Dependencies
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

stylelint-no-px

A stylelint custom rule to ensure using rem instead of px

2.1.0
latest
Source
npm
Version published
Weekly downloads
5.3K
37.7%
Maintainers
1
Weekly downloads
 
Created
Source

stylelint-no-px

https://travis-ci.org/meowtec/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; // error
border: 1px solid #eee; // ok

Installation

npm install stylelint-no-px --save-dev

Usage

Add it to your stylelint config

// .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)

// all 1px is ok
"meowtec/no-px": [true, { "ignore": ["1px"] }],
@padding-base: 20px; // error

.foo {
  border-top: 1px solid #ccc; // ok
  padding: 10px; // error
  height: 1px; // ok
  padding: @padding-base * 2;
}

example(2)

//  - all `1px` or `font` is ok
//  - rem(Npx) is ok
"meowtec/no-px": [true, { "ignore": ["1px", "font"], "ignoreFunctions": ["rem"] }],
.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)

// only `border + 1px` is ok
"meowtec/no-px": [true, { "ignore": ["border 1px"] }],
.foo {
  border-top: 1px solid #ccc; // ok
  height: 1px; // error
}

example(4)

// only `border + 1px` is ok
"meowtec/no-px": [true, { "ignore": ["1px"], "remSize": 16 }],
.foo {
  height: 16px; // error, auto converts to 1rem
}

Keywords

stylelint

FAQs

Package last updated on 24 Mar 2025

Did you know?

Socket

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.

Install

Related posts