babel-plugin-styled-components-px2rem
Babel plugin for convert px
to rem
units of styled-components
-
Use postcss-plugin-px2rem to process all css text in template strings.
-
Add a runtime
px2rem
function polyfill to process expression embedded in template strings when enable transformRuntime option.
TypeScript transformer with similar functionality:typescript-styled-components-px2rem.
Table of Contents
Requirement
You need to install the following peerDependencies
of babel-plugin-styled-components-px2rem into your project at the same time:
Usage
see example
The use of React and styled-components test cases.
Configuration
babel.config.js
:
moduleexports = plugins: 'styled-components-px2rem' rootValue: 100 unitPrecision: 5 minPixelValue: 0 multiplier: 1 transformRuntime: false ;
or .babelrc
:
Composition
It should be put before babel-plugin-styled-components
Options
name | type | required | default | description |
---|---|---|---|---|
rootValue | number | false | 100 | The root element font size |
unitPrecision | number | false | 5 | The decimal numbers to allow the REM units to grow to |
minPixelValue | number | false | 0 | Set the minimum pixel value to replace |
multiplier | number | false | 1 | The multiplier of input value |
tags | string[] | false | ["styled", "css", "createGlobalStyle", "keyframes"] | styled-components template literal tagged |
transformRuntime | boolean | false | false | since 1.1.0,enable transformation of all expressions that embedded in template strings |
Simple version of the formula:
const input = '32px'; // the value in css textconst pixels = ; if Math < minPixelValue return input; const fixedVal = ; return `rem`;
Remaining options are consistent with postcss-plugin-px2rem.
Transform Runtime
If enabled transformRuntime
option, all supported expressions embedded in template strings are processed as follows:
Note: Only expression that end with px
will be processed.
FunctionExpression
source code:
; const FunctionExpression = styledbutton` height: px;`;
compiled:
; const FunctionExpression = styledbutton` height: ;`; { if typeof input === 'function' return ; var value = typeof input === 'string' ? : typeof input === 'number' ? input : 0; var pixels = Number ? 0 : value; if Math < 0 return pixels + 'px'; var mul = Math; return Math * 10 / mul + 'rem';}
ArrowFunctionExpression
source code:
; const height = '44';const ArrowFunction = styledinput` color: palevioletred; font-size: 14px; border: 1px solid palevioletred; border-radius: 8px; width: px; /* MemberExpression Body */ height: px; /* Identifier Body */ line-height: px; /* StringLiteral Body */ margin: px; /* NumericLiteral Body */ padding: ;`; const ArrowFunctionWithBlockBody = styledbutton` width: px; /* Block Body */ ;`; const ArrowFunctionWithBinaryBody = styledbutton` ; height: px; /* LogicalExpression Body */ width: px; /* BinaryExpression Body */`; const ArrowFunctionWithConditionalBody = styledbutton` height: px; /* ConditionalExpression Body */`;
compiled:
; const height = '44';const ArrowFunction = styledinput` color: palevioletred; font-size: 0.14rem; border: 1px solid palevioletred; border-radius: 0.08rem; width: ; /* PropertyAccess Body */ height: ; /* Identifier Body */ line-height: ; /* StringLiteral Body */ margin: ; /* NumericLiteral Body */ padding: ;`; const ArrowFunctionWithBlockBody = styledbutton` width: ; /* Block Body */ ;`; const ArrowFunctionWithBinaryBody = styledbutton` ; height: ; /* ArrowFunction with a LogicalExpression Body */ width: ; /* ArrowFunction with a BinaryExpression Body */`; const ArrowFunctionWithConditionalBody = styledbutton` height: ; /* ArrowFunction with a ConditionalExpression Body */`; { if typeof input === 'function' return ; var value = typeof input === 'string' ? : typeof input === 'number' ? input : 0; var pixels = Number ? 0 : value; if Math < 0 return pixels + 'px'; var mul = Math; return Math * 10 / mul + 'rem';}
MemberExpression
source code:
; const MemberExpression = styled;
compiled:
; const MemberExpression = styled; { if typeof input === 'function' return ; var value = typeof input === 'string' ? : typeof input === 'number' ? input : 0; var pixels = Number ? 0 : value; if Math < 0 return pixels + 'px'; var mul = Math; return Math * 10 / mul + 'rem';}
ConditionalExpression
source code:
import React from 'react';import styled from 'styled-components'; const ConditionalExpression = { const StyledButton = styledbutton` font-size: px; `; return <StyledButton />;};const ConditionalExpressionWhenTrue = { const StyledButton = styledbutton` font-size: px; `; return <StyledButton />;};const ConditionalExpressionWhenFalse = { const StyledButton = styledbutton` font-size: px; `; return <StyledButton />;};
compiled:
;; const ConditionalExpression = { const StyledButton = styledbutton` font-size: ; `; return React;};const ConditionalExpressionWhenTrue = { const StyledButton = styledbutton` font-size: ; `; return React;};const ConditionalExpressionWhenFalse = { const StyledButton = styledbutton` font-size: ; `; return React;}; { if typeof input === 'function' return ; var value = typeof input === 'string' ? : typeof input === 'number' ? input : 0; var pixels = Number ? 0 : value; if Math < 0 return pixels + 'px'; var mul = Math; return Math * 10 / mul + 'rem';}
Other Expressions
Identifier, CallExpression, BinaryExpress, StringLiteral, NumericLiteral, MemberExpression, LogicalExpression...
source code:
; const fontSize = 18; { const height = 100; return height / 2;}const mixins = css` padding: 0 16px; margin: 16px 32px 16px 32px;`;const GlobalStyle = createGlobalStyle` html body { ; font-size: px; /* Identifier */ width: 1024px; height: px; /* CallExpression */ }`; const condition = false; { return 20;}const BinaryAndLogicExpression = styledbutton` ; height: px; /* LogicExpression */ padding: px 8px px 16px; /* BinaryExpression */ line-height: px; /* BinaryExpression */`;
compiled:
; const fontSize = 18; { const height = 100; return height / 2;} const mixins = css` padding: 0 0.16rem; margin: 0.16rem 0.32rem 0.16rem 0.32rem;`;const GlobalStyle = createGlobalStyle` html body { ; font-size: ; /* Identifier */ width: 10.24rem; height: ; /* CallExpression */ }`; const condition = false; { return 20;} const BinaryAndLogicExpression = styledbutton` ; height: ; padding: 0.08rem 0.16rem; line-height: ;`; { if typeof input === 'function' return ; var value = typeof input === 'string' ? : typeof input === 'number' ? input : 0; var pixels = Number ? 0 : value; if Math < 0 return pixels + 'px'; var mul = Math; return Math * 10 / mul + 'rem';}