styled-jsx-plugin-sass-pxtorem
Use Sass and pxtorem with styled-jsx 💥
The code fork for styled-jsx-plugin-sass
Usage
Install the package first.
npm install --save-dev styled-jsx-plugin-sass-pxtorem
Install the sass
version you need (it is a peer dependency).
npm install --save-dev sass
Next, add styled-jsx-plugin-sass-pxtorem
to the styled-jsx
's plugins
in your babel configuration:
{
"plugins": [
[
"styled-jsx/babel",
{
"plugins": [
"styled-jsx-plugin-sass-pxtorem",
{
"sassOptions": {
"data": "@import '$path/variables.scss';"
},
"rem": {
"rootValue": 100,
"unitPrecision": 2,
"mediaQuery": false,
"minPixelValue": 2,
"selectorIgnore": [
"html",
".ignore-test**"
],
"commentIgnore": "@pxtorem-ignore",
"keyValueIgnore": {
"font-size": "12px"
}
}
}
]
}
]
]
}
next.js
{
"presets": [
[
"next/babel",
{
"styled-jsx": {
"plugins": [
[
"styled-jsx-plugin-sass-pxtorem",
{
"sassOptions": {
"data": "@import '$path/variables.scss';"
},
"rem": {
"rootValue": 100,
"unitPrecision": 2,
"mediaQuery": false,
"minPixelValue": 2,
"selectorIgnore": [
"html",
".ignore-test**"
],
"commentIgnore": "@pxtorem-ignore",
"keyValueIgnore": {
"font-size": "12px"
}
}
}
]
]
}
}
]
],
"plugins": []
}
examples styled-jsx
.hello {
padding: 100px;
:global(.button-50px) {
background-image: none;
}
}
.hello {
padding: 1rem;
:global(.button-50px) {
background-image: none;
}
}
.test {
margin: 10px;
padding: 10px;
font-size: 12px;
background: url(10px.jpg);
}
.test {
margin: 10px;
padding: 10px;
font-size: 12px;
background: url(10px.jpg);
}
:root {
--a12px: 12px;
}
.var-test {
padding: var(--a12px);
}
:root {
--a12px: 0.12rem;
}
.var-test {
padding: var(--a12px);
}
html {
font-size: 30px;
margin: 30px;
.b {
font-size: 25px;
}
}
html {
padding: 24px;
}
.b {
font-size: 30px;
}
html {
font-size: 30px;
margin: 30px;
.b {
font-size: 0.25rem;
}
}
html {
padding: 24px;
}
.b {
font-size: 0.3rem;
}
.ignore-test {
font-size: 30px;
.b {
font-size: 25px;
}
}
.a {
font-size: 30px;
}
.ignore-test {
font-size: 30px;
.b {
font-size: 25px;
}
}
.a {
font-size: 0.3rem;
}
@media screen and (min-width: 1000px) and (max-width: 1280px) {
.a {
color: #fff;
background: url("20px.jpg");
}
}
License
MIT