0.0.6 • Published 2 years ago
pxtorem-stylis-plugin v0.0.6
pxtorem-stylis-plugin
A plugin for Stylis that generates rem units from pixel units.
This is a port of the fantastic postcss-pxtorem by cuth to stylis.
Install
$ npm install pxtorem-stylis-plugin
Work with styled-components v6+
import styled, { StyleSheetManager } from "styled-components";
import usePxtoremStylisPlugin from "pxtorem-stylis-plugin";
const Box = styled.div`
font-size: 16px;
width: 100px;
`;
const pxtoremStylisPlugin = usePxtoremStylisPlugin({/* your custom options here */});
export function MakeItRem() {
return (
<StyleSheetManager stylisPlugins={[pxtoremStylisPlugin]}>
<Box>My font-size will be 1rem.</Box>
</StyleSheetManager>
);
}
If you are using styled-components v5+, you should use stylis-pxtorem by AWare package instead. The way you work with styled-component is pretty same as the demo above; simply swapping out the package and add a Object.defineProperty setting is fine.
- import usePxtoremStylisPlugin from "pxtorem-stylis-plugin";
+ import usePxtoremStylisPlugin from "stylis-pxtorem";
+ Object.defineProperty(pxtoremStylisPlugin, "name", {
+ value: "pxtoremStylisPlugin",
+ });
Options
type Options = {
/* The root element font size. */
rootValue: number;
/* The decimal numbers to allow the REM units to grow to. */
unitPrecision: number;
/**
* The properties that can change from px to rem.
* - Values need to be exact matches.
* - Use wildcard `*` to enable all properties. Example: `['*']`
* - Use `*` at the start or end of a word. (`['*position*']` will match `background-position-y`)
* - Use `!` to not match a property. Example: `['*', '!letter-spacing']`
* - Combine the "not" prefix with the other prefixes. Example: `['*', '!font*']`
*/
propList: string[];
/**
* The selectors to ignore and leave as px.
* - If value is string, it checks to see if selector contains the string.
* - `['body']` will match `.body-class`
* - If value is regexp, it checks to see if the selector matches the regexp.
* - `[/^body$/]` will match `body` but not `.body`
*/
selectorBlackList: string[];
/* replaces rules containing rems instead of adding fallbacks. */
replace: boolean;
/* Set the minimum pixel value to replace. */
minPixelValue: number;
}
Default Options
{
rootValue: 16,
unitPrecision: 5,
propList: ['font', 'font-size', 'line-height', 'letter-spacing'],
selectorBlackList: [],
replace: true,
// mediaQuery: false,
minPixelValue: 0
}
Example
With the default settings, only font related properties are targeted.
// input
h1 {
margin: 0 0 20px;
font-size: 32px;
line-height: 1.2;
letter-spacing: 1px;
}
// output
h1 {
margin: 0 0 20px;
font-size: 2rem;
line-height: 1.2;
letter-spacing: 0.0625rem;
}
A message about ignoring properties
Currently, the easiest way to have a single property ignored is to use a capital in the pixel unit declaration.
// `px` is converted to `rem`
.convert {
font-size: 16px; // converted to 1rem
}
// `Px` or `PX` is ignored by `postcss-pxtorem` but still accepted by browsers
.ignore {
border: 1Px solid; // ignored
border-width: 2PX; // ignored
}