Repository navigation
postcss-nested stack overflow #5756
Description
🐛 bug report
I have been having trouble getting postcss-nested to work with parcelv2 + tailwind
🎛 Configuration (.babelrc, package.json, cli command)
node v14.8.0
package.json {
...
"dependencies": {
"@babel/runtime": "^7.12.5",
},
"devDependencies": {
"@babel/cli": "^7.10.1",
"@babel/core": "^7.10.2",
"@babel/node": "^7.10.1",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-transform-react-jsx": "^7.12.12",
"@babel/plugin-transform-runtime": "^7.12.1",
"@babel/preset-env": "^7.10.2",
"@babel/preset-react": "^7.10.1",
"autoprefixer": "^10.1.0",
"parcel": "^2.0.0-nightly.562",
"parcel-reporter-static-files-copy": "^1.1.1",
"postcss": "^8.2.4",
"postcss-cli": "^8.3.1",
"postcss-import": "^14.0.0",
"postcss-nested": "^5.0.3",
"purgecss": "^4.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"tailwindcss": "^2.0.2"
},
...
}The CSS I'm trying to build
#unique_id {
all: initial;
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
.popup {
border-radius: 8px;
}
...
}postcss.config.js
module.exports = {
plugins: [
require("postcss-import"),
require("tailwindcss"),
require("postcss-nested"),
require("autoprefixer")
]
};🤔 Expected Behavior
I expected parcel to process the css file to emit a flattened version
😯 Current Behavior
🚨 Build failed.
@parcel/transformer-postcss: Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded
at Proxy.toJSON (/Users/pasha/git/everywhere/node_modules/postcss/lib/node.js:173:27)
at Proxy.toJSON (/Users/pasha/git/everywhere/node_modules/postcss/lib/node.js:192:29)
at Proxy.toJSON (/Users/pasha/git/everywhere/node_modules/postcss/lib/node.js:192:29)
🔦 Context
My goal is to create scoped CSS by using all:initial and all the tailwind and custom rules nested inside a unique #id css selector. postcss-nest is supposed to flatten the nested css into a usable form.
My work around has been to generate the scoped css using postcss-cli and postcss-nested outside of parcel's build pipeline. But this solution is messy and can't make use of the dev server and HMR :-(
Activity
toastal commentedon Feb 4, 2021
I'm having the same issue with
postcss-nestedas well aspostcss-simple-vars.postcssrc.json{ "plugins": { "postcss-mixins": {}, "postcss-simple-vars": {}, "postcss-nested": {}, "postcss-flexbugs-fixes": {}, "postcss-preset-env": { "stage": false, "features": { "media-query-ranges": true } }, "autoprefixer": { "flexbox": "no-2009", "grid": true } } }package.json{ "dependencies": { "@toastal/parcel-transformer-dhall-json": "^0.0.2", "@toastal/parcel-transformer-dhall-webmanifest": "^0.0.5", "@toastal/parcel-utils-dhall": "^0.0.1", "autoprefixer": "^10.2.4", "hash-wasm": "^4.4.1", "parcel": "^2.0.0-beta.1", "postcss": "^8.2.4", "postcss-flexbugs-fixes": "^5.0.2", "postcss-import": "^14.0.0", "postcss-mixins": "^7.0.1", "postcss-nested": "^5.0.3", "postcss-simple-vars": "^6.0.3", "sugarss": "^3.0.3" }, "devDependencies": { "concurrently": "^5.3.0", "rimraf": "^3.0.2" } }Error also. This stack trace is just as unhelpful as the above.
🚨 Build failed. @parcel/transformer-postcss: Maximum call stack size exceeded RangeError: Maximum call stack size exceeded at Proxy.toJSON (/home/USER/PROJECT/frontends/pwa/node_modules/postcss/lib/node.js:173:27) at Proxy.toJSON (/home/USER/PROJECT/frontends/pwa/node_modules/postcss/lib/node.js:192:29) at Proxy.toJSON (/home/USER/PROJECT/frontends/pwa/node_modules/postcss/lib/node.js:192:29) at Proxy.toJSON (/home/USER/PROJECT/frontends/pwa/node_modules/postcss/lib/node.js:192:29) at Proxy.toJSON (/home/USER/PROJECT/frontends/pwa/node_modules/postcss/lib/node.js:192:29) at Proxy.toJSON (/home/USER/PROJECT/frontends/pwa/node_modules/postcss/lib/node.js:192:29) at Proxy.toJSON (/home/USER/PROJECT/frontends/pwa/node_modules/postcss/lib/node.js:192:29) at Proxy.toJSON (/home/USER/PROJECT/frontends/pwa/node_modules/postcss/lib/node.js:192:29) at Proxy.toJSON (/home/USER/PROJECT/frontends/pwa/node_modules/postcss/lib/node.js:192:29) at Proxy.toJSON (/home/USER/PROJECT/frontends/pwa/node_modules/postcss/lib/node.js:192:29)My workaround
I moved from
postcss-nestedtopostcss-nestingand removed the few case of simple vars.mischnic commentedon Feb 10, 2021
This might be fixed with postcss/postcss@5797a43.
Can you try it with
postcss@8.2.6?damianobarbati commentedon Jan 24, 2023
@mischnic same problem with
"postcss": "^8.4.21",but honesly I don't know if in my project it's related to postcss