Styles are not processed by `postcss-nested` or `postcss-simple-vars`
markus101 opened this issue · 10 comments
markus101 commented
I've just upgraded to PostCSS 8 along with updating the various postcss plugins to their latest versions and I'm not sure if I'm holding something wrong or if there is an issue, but nested elements and variables are not being replaced when they're injected from a mixin.
postcss.config.js :
const reload = require('require-nocache')(module);
const cssVarsFiles = [
'./src/Styles/Variables/colors',
'./src/Styles/Variables/dimensions',
'./src/Styles/Variables/fonts',
'./src/Styles/Variables/animations',
'./src/Styles/Variables/zIndexes'
].map(require.resolve);
const mixinsFiles = [
'frontend/src/Styles/Mixins/cover.css',
'frontend/src/Styles/Mixins/linkOverlay.css',
'frontend/src/Styles/Mixins/scroller.css',
'frontend/src/Styles/Mixins/truncate.css'
];
module.exports = {
plugins: [
['postcss-mixins', {
mixinsFiles
}],
['postcss-simple-vars', {
variables: () =>
cssVarsFiles.reduce((acc, vars) => {
return Object.assign(acc, reload(vars));
}, {})
}],
'postcss-color-function',
'postcss-nested'
]
};
CSS related config from webpack.js:
{
test: /\.css$/,
exclude: /(node_modules|globals.css)/,
use: [
{ loader: MiniCssExtractPlugin.loader },
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: {
localIdentName: '[name]/[local]/[hash:base64:5]'
}
}
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
config: 'frontend/postcss.config.js'
}
}
}
]
}
This is the mixin:
@define-mixin scrollbarThumb {
&::-webkit-scrollbar-thumb {
min-height: 100px;
&:hover {
background-color: $scrollbarHoverBackgroundColor;
}
}
}
Which is used in several places, but one example is:
.scroller {
@add-mixin scrollbarThumb;
-webkit-overflow-scrolling: touch;
}
Which prior to upgrading would generate this CSS:
.Scroller\/scroller\/26MBT {
-webkit-overflow-scrolling: touch;
}
.Scroller\/scroller\/26MBT::-webkit-scrollbar-thumb {
min-height: 100px;
}
.Scroller\/scroller\/26MBT::-webkit-scrollbar-thumb:hover {
background-color: #656d8c;
}
Now it's generating:
.Scroller-scroller-_8_uO {
&::-webkit-scrollbar-thumb {
min-height: 100px;
&:hover {
background-color: $scrollbarHoverBackgroundColor;
}
}
-webkit-overflow-scrolling: touch;
}
Other variables and nested elements are being extracted as expected and according to the documentation I have the plugins in the correct order (same as they were before the package upgrades).
ai commented
Can you replace Once to Root in postcss-nested sources? Will it solve the problem with nesting syntax for mixins?
markus101 commented
Doing so lead to these errors:
Message:
./frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot set property 'parent' of undefined
at C:\Dev\Sv3\frontend\src\Components\Filter\Builder\FilterBuilderRowValueTag.css:1:1
at Root.removeChild (C:\Dev\Sv3\node_modules\postcss\lib\container.js:238:38)
at Root.removeChild (C:\Dev\Sv3\node_modules\postcss\lib\root.js:21:18)
at Proxy.remove (C:\Dev\Sv3\node_modules\postcss\lib\node.js:72:19)
at processRule (C:\Dev\Sv3\node_modules\postcss-nested\index.js:168:39)
at C:\Dev\Sv3\node_modules\postcss-nested\index.js:197:13
at C:\Dev\Sv3\node_modules\postcss\lib\container.js:378:44
at Root.each (C:\Dev\Sv3\node_modules\postcss\lib\container.js:60:16)
at Proxy.<anonymous> (C:\Dev\Sv3\node_modules\postcss\lib\container.js:375:30)
at process (C:\Dev\Sv3\node_modules\postcss-nested\index.js:195:14)
at Root (C:\Dev\Sv3\node_modules\postcss-nested\index.js:203:7)
at LazyResult.visitTick (C:\Dev\Sv3\node_modules\postcss\lib\lazy-result.js:433:16)
at LazyResult.runAsync (C:\Dev\Sv3\node_modules\postcss\lib\lazy-result.js:345:30)
at async Object.loader (C:\Dev\Sv3\node_modules\postcss-loader\dist\index.js:94:14)
at C:\Dev\Sv3\node_modules\webpack\lib\NormalModule.js:316:20
at C:\Dev\Sv3\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\Dev\Sv3\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\Dev\Sv3\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at Object.loader (C:\Dev\Sv3\node_modules\postcss-loader\dist\index.js:103:7)
@ ./frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.js 9:0-52 13:15-21 30:15-21
@ ./frontend/src/Components/Filter/Builder/FilterBuilderRowValue.js
@ ./frontend/src/Components/Filter/Builder/TagFilterBuilderRowValueConnector.js
@ ./frontend/src/Components/Filter/Builder/FilterBuilderRow.js
@ ./frontend/src/Components/Filter/Builder/FilterBuilderModalContent.js
@ ./frontend/src/Components/Filter/Builder/FilterBuilderModalContentConnector.js
@ ./frontend/src/Components/Filter/FilterModal.js
@ ./frontend/src/SeasonPass/SeasonPassFilterModalConnector.js
@ ./frontend/src/SeasonPass/SeasonPass.js
@ ./frontend/src/SeasonPass/SeasonPassConnector.js
@ ./frontend/src/App/AppRoutes.js
@ ./frontend/src/App/App.js
@ ./frontend/src/index.js
./frontend/src/Series/Index/Overview/SeriesIndexOverviews.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot set property 'parent' of undefined
at C:\Dev\Sv3\frontend\src\Series\Index\Overview\SeriesIndexOverviews.css:1:1
at Root.removeChild (C:\Dev\Sv3\node_modules\postcss\lib\container.js:238:38)
at Root.removeChild (C:\Dev\Sv3\node_modules\postcss\lib\root.js:21:18)
at Proxy.remove (C:\Dev\Sv3\node_modules\postcss\lib\node.js:72:19)
at processRule (C:\Dev\Sv3\node_modules\postcss-nested\index.js:168:39)
at C:\Dev\Sv3\node_modules\postcss-nested\index.js:197:13
at C:\Dev\Sv3\node_modules\postcss\lib\container.js:378:44
at Root.each (C:\Dev\Sv3\node_modules\postcss\lib\container.js:60:16)
at Proxy.<anonymous> (C:\Dev\Sv3\node_modules\postcss\lib\container.js:375:30)
at process (C:\Dev\Sv3\node_modules\postcss-nested\index.js:195:14)
at Root (C:\Dev\Sv3\node_modules\postcss-nested\index.js:203:7)
at LazyResult.visitTick (C:\Dev\Sv3\node_modules\postcss\lib\lazy-result.js:433:16)
at LazyResult.runAsync (C:\Dev\Sv3\node_modules\postcss\lib\lazy-result.js:345:30)
at async Object.loader (C:\Dev\Sv3\node_modules\postcss-loader\dist\index.js:94:14)
at C:\Dev\Sv3\node_modules\webpack\lib\NormalModule.js:316:20
at C:\Dev\Sv3\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\Dev\Sv3\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\Dev\Sv3\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at Object.loader (C:\Dev\Sv3\node_modules\postcss-loader\dist\index.js:103:7)
@ ./frontend/src/Series/Index/Overview/SeriesIndexOverviews.js 16:0-48 107:19-25 250:19-25
@ ./frontend/src/Series/Index/Overview/SeriesIndexOverviewsConnector.js
@ ./frontend/src/Series/Index/SeriesIndex.js
@ ./frontend/src/Series/Index/SeriesIndexConnector.js
@ ./frontend/src/App/AppRoutes.js
@ ./frontend/src/App/App.js
@ ./frontend/src/index.js
./frontend/src/Settings/MediaManagement/Naming/NamingOption.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot set property 'parent' of undefined
at C:\Dev\Sv3\frontend\src\Settings\MediaManagement\Naming\NamingOption.css:1:1
at Root.removeChild (C:\Dev\Sv3\node_modules\postcss\lib\container.js:238:38)
at Root.removeChild (C:\Dev\Sv3\node_modules\postcss\lib\root.js:21:18)
at Proxy.remove (C:\Dev\Sv3\node_modules\postcss\lib\node.js:72:19)
at processRule (C:\Dev\Sv3\node_modules\postcss-nested\index.js:168:39)
at C:\Dev\Sv3\node_modules\postcss-nested\index.js:197:13
at C:\Dev\Sv3\node_modules\postcss\lib\container.js:378:44
at Root.each (C:\Dev\Sv3\node_modules\postcss\lib\container.js:60:16)
at Proxy.<anonymous> (C:\Dev\Sv3\node_modules\postcss\lib\container.js:375:30)
at process (C:\Dev\Sv3\node_modules\postcss-nested\index.js:195:14)
at Root (C:\Dev\Sv3\node_modules\postcss-nested\index.js:203:7)
at LazyResult.visitTick (C:\Dev\Sv3\node_modules\postcss\lib\lazy-result.js:433:16)
at LazyResult.runAsync (C:\Dev\Sv3\node_modules\postcss\lib\lazy-result.js:345:30)
at async Object.loader (C:\Dev\Sv3\node_modules\postcss-loader\dist\index.js:94:14)
at C:\Dev\Sv3\node_modules\webpack\lib\NormalModule.js:316:20
at C:\Dev\Sv3\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\Dev\Sv3\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\Dev\Sv3\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at Object.loader (C:\Dev\Sv3\node_modules\postcss-loader\dist\index.js:103:7)
@ ./frontend/src/Settings/MediaManagement/Naming/NamingOption.js 10:0-40 63:18-24 63:49-55 63:79-85 63:131-137 72:17-23 80:17-23 88:17-23
@ ./frontend/src/Settings/MediaManagement/Naming/NamingModal.js
@ ./frontend/src/Settings/MediaManagement/Naming/Naming.js
@ ./frontend/src/Settings/MediaManagement/Naming/NamingConnector.js
@ ./frontend/src/Settings/MediaManagement/MediaManagement.js
@ ./frontend/src/Settings/MediaManagement/MediaManagementConnector.js
@ ./frontend/src/App/AppRoutes.js
@ ./frontend/src/App/App.js
@ ./frontend/src/index.js
Details:
domainThrown: true
Each of the files that failed have a nested value in the one of the selectors, but they’re not the only files that do.
colinhowells commented
I’m in the same boat – upgrading to postcss 8 and the latest postcss-mixins and -nested (called in that order) will result in css as above ...
It’s as if -mixins prevents subsequent plugins in the pipeline from processing; the mixins seem to be dealt with correctly, but any nesting isn't handled at all, so your css is packed with &: references.
postcss 7.0.35, -mixins 6.2.3 and -nested 4.2.3 work perfectly together, if that helps.
ai commented
Sorry, I am burned out after PostCSS 8 release.
Will return to PostCSS a little later.
IYA-UFO commented
FYI
I had the same issue, and downgrading just postcss-mixins worked fine!
Combination as a whole was
"postcss": "8.x",
"postcss-mixins": "6.x",
"postcss-nested": "5.x",
dan2k3k4 commented
There's a PR open for postcss-nesting: csstools/postcss-nesting#72 - I presume postcss-nested will need similar changes?
Related issue for postcss-nested: postcss/postcss-nested#81
dan2k3k4 commented
Hmm, @IYA-UFO that seems to work for me too, thanks!
+ "postcss": "^8.1.2",
- "postcss-loader": "^3",
+ "postcss-loader": "^4.0.4",
"postcss-mixins": "^6",
- "postcss-nested": "^4",
+ "postcss-nested": "^5.0.1",I upgraded postcss-nested and postcss-loader (and required postcss), kept postcss-mixins at v6 and the following:
.nesting-example {
&__sample {
@mixin component-margin-bottom;
display: flex;
flex-wrap: wrap;
margin: calc(-1 * var(--space-100));
}
}
.nesting-example-2 {
.nesting-teaser {
@media (--tablet-up) {
width: 50%;
}
}
}Compiles correctly to:
.nesting-example__sample {
margin-bottom: 40px;
margin-bottom: var(--space-500);
display: flex;
flex-wrap: wrap;
margin: calc(-1 * 8px);
margin: calc(-1 * var(--space-100));
}
@media (min-width: 1024px) {
.nesting-example__sample {
margin-bottom:80px;
margin-bottom: var(--space-1000);
}
}
@media (min-width: 768px) {
.nesting-example-2 .nesting-teaser {
width:50%
}
}ai commented
Similar, bit not equal because of the syntax changes
ai commented
To solve this issue we need to replace Once in postcss-nested to Rule/AtRule according to Step 3 in Plugin Migration guide
ai commented
I moved issue to postcss-nested postcss/postcss-nested#101 (comment)