# stylelint-no-px

> A stylelint custom rule to ensure using rem instead of px

Latest version **2.1.0** (published 2025-03-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install stylelint-no-px
pnpm add stylelint-no-px
yarn add stylelint-no-px
bun add stylelint-no-px
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2025-03-24 |
| First published | 2017-07-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 8.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 32 |
| Author | meowtec |
| Maintainers | meowtec |
| Keywords | stylelint, stylelint-plugin, css, px, rem |

## Links

- npm: https://www.npmjs.com/package/stylelint-no-px
- Repository: https://github.com/meowtec/stylelint-no-px
- Issues: https://github.com/meowtec/stylelint-no-px/issues
- npm.io page: https://npm.io/package/stylelint-no-px

## Dependencies (2)

- [postcss-less](https://npm.io/package/postcss-less.md) ^6.0.0
- [postcss-value-parser](https://npm.io/package/postcss-value-parser.md) ^4.2.0

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 2.1.0 (latest) — 2025-03-24
- 2.0.0 — 2024-05-14
- 1.0.1 — 2019-12-21
- 1.0.0 — 2019-10-17
- 0.12.1 — 2019-02-23
- 0.12.0 — 2017-10-24
- 0.11.0 — 2017-07-20
- 0.10.0 — 2017-07-20

## README

# stylelint-no-px

![https://travis-ci.org/meowtec/stylelint-no-px](https://travis-ci.org/meowtec/stylelint-no-px.svg?branch=master)

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
}
```

---
_Source: https://npm.io/package/stylelint-no-px · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._