stylis-px2rem-plugin

A Stylis 4.x plugin that translates pixel units to rem units.

Installation

With npm

$ npm install stylis-px2rem-plugin

With yarn

$ yarn add stylis-px2rem-plugin

Options

1{
2  remSize?: number
3  allowList?: string[]
4  blockList?: string[]
5} | undefined

Default

Transforms all px units to rem units on a 16:1 basis.

Example

1stylisPx2RemPlugin()
2
3font-size: 12px;
4height: 64px;
5
6... becomes ...
7
8font-size: 0.75rem;
9height: 8rem;

remSize

Changes the conversion basis of how many px units per rem unit.

Example

1stylisPx2RemPlugin({ remSize: 10 })
2
3font-size: 12px;
4height: 64px;
5
6... becomes ...
7
8font-size: 1.2rem;
9height: 6.4rem;

allowList

Only convert CSS properties in the allowlist.

Example

1stylisPx2RemPlugin({ allowList: ['font-size'] })
2
3font-size: 12px;
4height: 64px;
5
6... becomes ...
7
8font-size: 0.75rem;
9height: 64px;

blockList

Changes the conversion basis of how many px units per rem unit.

Example

1stylisPx2RemPlugin({ blockList: ['font-size'] })
2
3font-size: 12px;
4height: 64px;
5
6... becomes ...
7
8font-size: 12px;
9height: 8rem;

Using with emotion/cache

1import { CacheProvider } from '@emotion/react'
2import createCache from '@emotion/cache'
3import { prefixer } from 'stylis'
4import stylisPx2RemPlugin from 'stylis-px2rem-plugin'
5
6const myCache = createCache({
7  key: 'your-key',
8  stylisPlugins: [stylisPx2RemPlugin()],
9})
10
11render(
12  <CacheProvider value={myCache}>
13  	...
14  </CacheProvider>
15)

Aknowledgements

Our thanks go out to stylis-pxtorem and stylis-rtl for inspiration when developing this plugin.