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

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




$3

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

#### Example

`css
stylisPx2RemPlugin()

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

... becomes ...

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

$3

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

#### Example

`css
stylisPx2RemPlugin({ remSize: 10 })

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

... becomes ...

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

$3

Only convert CSS properties in the allowlist.

#### Example

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

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

... becomes ...

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

$3

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

#### Example

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

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

... becomes ...

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

Using with emotion/cache


`jsx
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(

...

)
``

Aknowledgements

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