pashasadri commented 3 years ago

🐛 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 :-(

toastal commented 3 years ago

I'm having the same issue with postcss-nested as well as postcss-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)