Joan León PRO
⚡️ Web Performance Consultant | Speaker | Staff Frontend Engineer at @AdevintaSpain | @GoogleDevExpert in #WebPerf | @cloudinary Ambassador
.CSS-Houdini { }
➜ npx cssstats [CSS_PATH]/style.css > output.json
➜ npm install --save-dev cssstats-cli
➜ cat output.json | jq '.mediaQueries.values | unique'
[
"(max-width: 1199.98px)",
"(max-width: 575.98px)",
"(max-width: 767.98px)",
"(max-width: 991.98px)",
"(min-width: 1200px)",
"(min-width: 576px)",
"(min-width: 768px)",
"(min-width: 992px)",
"print",
"screen and (prefers-reduced-motion: reduce)"
]
plugins: [
combineMediaQuery(),
extractMediaQuery({
output: {
path: path.join(__dirname, "assets/css/"),
},
queries: {
"(min-width: 576px)": "s",
"(min-width: 768px)": "m",
"(min-width: 992px)": "l",
"(min-width: 1200px)": "xl",
"screen and (prefers-reduced-motion: reduce)": "reduced-motion",
print: "print",
},
}),
],
new HtmlWebpackPlugin({ template: "./index.html" }),
new MiniCssExtractPlugin({ filename: "assets/css/[name].css" }),
new MediaQueryPlugin({
include: true,
queries: {
"(min-width: 576px)": "s",
"(min-width: 768px)": "m",
"(min-width: 992px)": "l",
"(min-width: 1200px)": "xl",
"screen and (prefers-reduced-motion: reduce)": "reduced-motion",
print: "print",
},
}),
import './example.scss';
if (window.innerWidth >= 960) {
import(/* webpackChunkName: 'example-desktop' */ './example-desktop.scss');
}
By Joan León