nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

upgrade to postcss-loader 4

Browse Source
This commit is contained in:
Richard van der Hoff
2024-01-04 20:16:24 +00:00
parent 78f3c26357
commit 6b3f3a09ae
3 changed files with 62 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
webpack.config.js
View File

@@ -337,33 +337,35 @@ module.exports = (env, argv) => {
ident: "postcss",
options: {
"sourceMap": true,
"plugins": () => [
// Note that we use significantly fewer plugins on the plain
// CSS parser. If we start to parse plain CSS, we end with all
// kinds of nasty problems (like stylesheets not loading).
//
// You might have noticed that we're also sending regular CSS
// through PostCSS. This looks weird, and in fact is probably
// not what you'd expect, however in order for our CSS build
// to work nicely we have to do this. Because down the line
// our SCSS stylesheets reference plain CSS we have to load
// the plain CSS through PostCSS so it can find it safely. This
// also acts like a babel-for-css by transpiling our (S)CSS
// down/up to the right browser support (prefixes, etc).
// Further, if we don't do this then PostCSS assumes that our
// plain CSS is SCSS and it really doesn't like that, even
// though plain CSS should be compatible. The chunking options
// at the top of this webpack config help group the SCSS and
// plain CSS together for the bundler.
"postcssOptions": {
"plugins": () => [
// Note that we use significantly fewer plugins on the plain
// CSS parser. If we start to parse plain CSS, we end with all
// kinds of nasty problems (like stylesheets not loading).
//
// You might have noticed that we're also sending regular CSS
// through PostCSS. This looks weird, and in fact is probably
// not what you'd expect, however in order for our CSS build
// to work nicely we have to do this. Because down the line
// our SCSS stylesheets reference plain CSS we have to load
// the plain CSS through PostCSS so it can find it safely. This
// also acts like a babel-for-css by transpiling our (S)CSS
// down/up to the right browser support (prefixes, etc).
// Further, if we don't do this then PostCSS assumes that our
// plain CSS is SCSS and it really doesn't like that, even
// though plain CSS should be compatible. The chunking options
// at the top of this webpack config help group the SCSS and
// plain CSS together for the bundler.
require("postcss-simple-vars")(),
require("postcss-hexrgba")(),
require("postcss-simple-vars")(),
require("postcss-hexrgba")(),
// It's important that this plugin is last otherwise we end
// up with broken CSS.
require("postcss-preset-env")({ stage: 3, browsers: "last 2 versions" }),
],
"parser": "postcss-scss",
// It's important that this plugin is last otherwise we end
// up with broken CSS.
require("postcss-preset-env")({ stage: 3, browsers: "last 2 versions" }),
],
"parser": "postcss-scss",
},
},
},
],
@@ -419,20 +421,22 @@ module.exports = (env, argv) => {
ident: "postcss",
options: {
"sourceMap": true,
"plugins": () => [
// Note that we use slightly different plugins for PostCSS.
require("postcss-import")(),
require("postcss-mixins")(),
require("postcss-simple-vars")(),
require("postcss-nested")(),
require("postcss-easings")(),
require("postcss-hexrgba")(),
"postcssOptions": {
"plugins": () => [
// Note that we use slightly different plugins for PostCSS.
require("postcss-import")(),
require("postcss-mixins")(),
require("postcss-simple-vars")(),
require("postcss-nested")(),
require("postcss-easings")(),
require("postcss-hexrgba")(),
// It's important that this plugin is last otherwise we end
// up with broken CSS.
require("postcss-preset-env")({ stage: 3, browsers: "last 2 versions" }),
],
"parser": "postcss-scss",
// It's important that this plugin is last otherwise we end
// up with broken CSS.
require("postcss-preset-env")({ stage: 3, browsers: "last 2 versions" }),
],
"parser": "postcss-scss",
},
},
},
],