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

{
  remSize?: number
  allowList?: string[]
  blockList?: string[]
} | undefined

Default

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

Example

stylisPx2RemPlugin()

font-size: 12px;
height: 64px;

... becomes ...

font-size: 0.75rem;
height: 8rem;

remSize

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

Example

stylisPx2RemPlugin({ remSize: 10 })

font-size: 12px;
height: 64px;

... becomes ...

font-size: 1.2rem;
height: 6.4rem;

allowList

Only convert CSS properties in the allowlist.

Example

stylisPx2RemPlugin({ allowList: ['font-size'] })

font-size: 12px;
height: 64px;

... becomes ...

font-size: 0.75rem;
height: 64px;

blockList

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

Example

stylisPx2RemPlugin({ blockList: ['font-size'] })

font-size: 12px;
height: 64px;

... becomes ...

font-size: 12px;
height: 8rem;

Using with emotion/cache

import { CacheProvider } from '@emotion/react'
import createCache from '@emotion/cache'
import { prefixer } from 'stylis'
import stylisPx2RemPlugin from 'stylis-px2rem-plugin'

const myCache = createCache({
  key: 'your-key',
  stylisPlugins: [stylisPx2RemPlugin()],
})

render(
  <CacheProvider value={myCache}>
  	...
  </CacheProvider>
)

Aknowledgements

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