Skip to content

Commit

Permalink
Allow Element Web to use cascade layers
Browse files Browse the repository at this point in the history 
This upgrades a number of PostCSS dependencies so that we can make use of cascade layers, a feature which I plan to use for theming of Compound: https://compound.element.io/?path=/docs/develop-theming--docs
  • Loading branch information
@robintown
robintown committed Feb 9, 2024
1 parent c64af56 commit 7622dd3
Show file tree
Hide file tree
Showing 3 changed files with 594 additions and 498 deletions.
8 changes: 4 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,13 +179,13 @@
"postcss": "^8.4.31",
"postcss-easings": "^2.0.0",
"postcss-hexrgba": "2.0.1",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-import": "^16.0.0",
"postcss-loader": "^8.1.0",
"postcss-mixins": "^6.2.3",
"postcss-nested": "^4.2.3",
"postcss-preset-env": "^6.7.0",
"postcss-preset-env": "^9.3.0",
"postcss-scss": "^4.0.4",
"postcss-simple-vars": "^5.0.2",
"postcss-simple-vars": "^7.0.1",
"prettier": "3.2.4",
"process": "^0.11.10",
"proxy-agent": "^6.3.0",
Expand Down
94 changes: 49 additions & 45 deletions webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -330,35 +330,37 @@ module.exports = (env, argv) => {
loader: "postcss-loader",
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.

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",
"local-plugins": true,
sourceMap: true,
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")(),

// 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",
"local-plugins": true,
}),
},
},
],
Expand Down Expand Up @@ -413,22 +415,24 @@ module.exports = (env, argv) => {
loader: "postcss-loader",
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")(),

// 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",
"local-plugins": true,
sourceMap: true,
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",
"local-plugins": true,
}),
},
},
],
Expand Down
Loading

0 comments on commit 7622dd3

Please sign in to comment.