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.
2 Oct 23, 2022
19 Dec 11, 2022
3 Jun 13, 2022
7 Sep 11, 2022
5 Oct 16, 2022
1 Dec 26, 2021
2 Feb 9, 2022
20 Dec 8, 2022
8 Jan 27, 2022
161 Dec 24, 2022