Closed niwinz closed 3 years ago
Do you have any other PostCSS plugins in pipeline?
yes, this is my gulp task:
gulp.task("css:main", function() {
const autoprefixer = require("autoprefixer");
const postcss = require('gulp-postcss');
const sourcemaps = require('gulp-sourcemaps');
const neested = require("postcss-nested");
const clean = require("postcss-clean");
return gulp.src("resources/styles/main/*.css")
.pipe(sourcemaps.init())
.pipe(postcss([
neested,
autoprefixer,
clean({format: "keep-breaks", level: 1})
]))
.pipe(concat("main.css"))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest("resources/public/css/"));
});
I'm having the same issue since I upgraded postcss-nested
from 5.0.1 to 5.0.3. Error is TypeError: node.getIterator is not a function
I removed as many plugins as possible until I got to only autoprefixer
and clean
(with this test string: .foo { color: green; }
). Works fine if I only have autoprefixer
, or clean
, but not if I have both. I only have nested
as a dependency, I'm not even calling it in the plugin list.
Node: 12.12.0 postcss: 8.2.1 autoprefixer: 10.1.0 postcss-clean: 1.1.0
I have similar issues. I upgraded from 5.0.1 and my build broke. I pinpointed it to this plugin.
ERROR in ./modules/graphql/public/assets/graphql.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 read property '0' of undefined
at getPropertyDescriptor (/Users/pavel/projects/nearme-documentation/node_modules/css-tree/lib/utils/names.js:63:24)
at getPropertyFingerprint (/Users/pavel/projects/nearme-documentation/node_modules/csso/lib/restructure/6-restructBlock.js:68:20)
at List.<anonymous> (/Users/pavel/projects/nearme-documentation/node_modules/csso/lib/restructure/6-restructBlock.js:217:27)
at List.eachRight (/Users/pavel/projects/nearme-documentation/node_modules/css-tree/lib/common/List.js:181:12)
at Object.processRule (/Users/pavel/projects/nearme-documentation/node_modules/csso/lib/restructure/6-restructBlock.js:215:18)
at Object.enter (/Users/pavel/projects/nearme-documentation/node_modules/csso/lib/restructure/6-restructBlock.js:297:25)
at Object.<anonymous> (/Users/pavel/projects/nearme-documentation/node_modules/css-tree/lib/walker/create.js:11:16)
at List.walkNode (/Users/pavel/projects/nearme-documentation/node_modules/css-tree/lib/walker/create.js:167:19)
at List.eachRight (/Users/pavel/projects/nearme-documentation/node_modules/css-tree/lib/common/List.js:181:12)
at Object.StyleSheet (/Users/pavel/projects/nearme-documentation/node_modules/css-tree/lib/walker/create.js:104:29)
at processResult (/Users/pavel/projects/nearme-documentation/node_modules/webpack/lib/NormalModule.js:583:19)
at /Users/pavel/projects/nearme-documentation/node_modules/webpack/lib/NormalModule.js:676:5
at /Users/pavel/projects/nearme-documentation/node_modules/loader-runner/lib/LoaderRunner.js:397:11
at /Users/pavel/projects/nearme-documentation/node_modules/loader-runner/lib/LoaderRunner.js:252:18
at context.callback (/Users/pavel/projects/nearme-documentation/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.loader (/Users/pavel/projects/nearme-documentation/node_modules/postcss-loader/dist/index.js:103:7)
@ ./modules/graphql/public/assets/graphql.js 1:0-23
ERROR in ./src/app.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):
SyntaxError: Selector is expected
at Object.error (/Users/pavel/projects/nearme-documentation/node_modules/css-tree/lib/parser/create.js:239:19)
at Object.parse [as Selector] (/Users/pavel/projects/nearme-documentation/node_modules/css-tree/lib/syntax/node/Selector.js:20:18)
at Object.parse [as SelectorList] (/Users/pavel/projects/nearme-documentation/node_modules/css-tree/lib/syntax/node/SelectorList.js:17:32)
at Object.<anonymous> (/Users/pavel/projects/nearme-documentation/node_modules/css-tree/lib/parser/create.js:25:26)
at /Users/pavel/projects/nearme-documentation/node_modules/css-tree/lib/parser/create.js:281:39
at parseToCsso (/Users/pavel/projects/nearme-documentation/node_modules/postcss-csso/lib/postcssToCsso.js:16:26)
at postcssToCsso (/Users/pavel/projects/nearme-documentation/node_modules/postcss-csso/lib/postcssToCsso.js:40:26)
at Array.map (<anonymous>)
at processResult (/Users/pavel/projects/nearme-documentation/node_modules/webpack/lib/NormalModule.js:583:19)
at /Users/pavel/projects/nearme-documentation/node_modules/webpack/lib/NormalModule.js:676:5
at /Users/pavel/projects/nearme-documentation/node_modules/loader-runner/lib/LoaderRunner.js:397:11
at /Users/pavel/projects/nearme-documentation/node_modules/loader-runner/lib/LoaderRunner.js:252:18
at context.callback (/Users/pavel/projects/nearme-documentation/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.loader (/Users/pavel/projects/nearme-documentation/node_modules/postcss-loader/dist/index.js:103:7)
@ ./src/app.js 1:0-19
2 ERRORS in child compilations
webpack 5.11.0 compiled with 4 errors in 11968 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! platform-os-documentation@3.0.0 build: `NODE_ENV=production npx webpack-cli --no-color`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the platform-os-documentation@3.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
I also encountered an issue after upgrade to 5.0.2
TypeError: Cannot set property 'parent' of undefined
at Rule.removeChild (/a-next-project/node_modules/next/dist/compiled/postcss-loader/cjs.js:1:41738)
at /a-next-project/node_modules/next/dist/compiled/postcss-loader/cjs.js:1:43275
at Array.map (<anonymous>)
at Root.normalize (/a-next-project/node_modules/next/dist/compiled/postcss-loader/cjs.js:1:43200)
at Root.normalize (/a-next-project/node_modules/next/dist/compiled/postcss-loader/cjs.js:1:76822)
at Root.insertAfter (/a-next-project/node_modules/next/dist/compiled/postcss-loader/cjs.js:1:41468)
at Proxy.after (/a-next-project/node_modules/next/dist/compiled/postcss-loader/cjs.js:1:61319)
at /a-next-project/node_modules/postcss-nested/index.js:146:17
at /a-next-project/node_modules/next/dist/compiled/postcss-loader/cjs.js:1:43821
at Rule.each (/a-next-project/node_modules/next/dist/compiled/postcss-loader/cjs.js:1:39562)
I am using postcss-nested in a next.js project in combination with Tailwind CSS.
My postcss.config.js
module.exports = {
plugins: {
'postcss-import': {},
tailwindcss: {},
'postcss-nested': {},
autoprefixer: {},
},
};
The single CSS file i use looks like this
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind screens;
.button {
@apply relative;
@apply inline-flex;
@apply items-center;
@apply justify-center;
@apply px-4;
@apply py-2;
@apply border;
@apply text-sm;
@apply leading-5;
@apply font-medium;
@apply rounded-md;
&:focus {
@apply outline-none;
}
&-small {
@apply px-3;
@apply leading-4;
}
&-medium {
@apply px-5;
@apply py-3;
@screen md {
@apply text-base;
}
}
&-large {
@apply px-8;
@apply py-3;
@apply text-base;
@apply leading-6;
@screen md {
@apply py-4;
@apply text-lg;
}
}
&-primary {
@apply border-transparent;
@apply text-white;
@apply bg-theme-branding-base;
@apply shadow-sm;
&:hover,
&:focus,
&:active {
@apply bg-theme-branding-hover;
}
}
&-white {
@apply border-transparent;
@apply bg-white;
@apply text-theme-branding-text;
@apply shadow-sm;
&:hover,
&:focus,
&:active {
@apply text-theme-branding-text-hover;
}
}
&-link {
@apply border-transparent;
@apply bg-white;
@apply text-theme-branding-text;
&:hover,
&:focus,
&:active {
@apply text-theme-branding-text-hover;
}
}
&-neutral {
@apply border-gray-300;
@apply bg-white;
@apply text-gray-600;
@apply shadow-sm;
&:hover,
&:focus,
&:active {
@apply border-gray-400;
@apply text-gray-800;
}
}
&-destructive {
@apply border-transparent;
@apply text-white;
@apply bg-red-600;
@apply shadow-sm;
&:hover,
&:focus,
&:active {
@apply bg-red-700;
}
}
}
Can reproduce this issue on 5.0.3.
Still issue @ 5.0.5.
Rewriting to not use nested as it looks like it will be broken forever and debugging broken dep every time we upgrade is not fun.
@pavelloz unfortunately as this has blocked me for too long I've decided to switch back to SCSS.
Yeah, if nesting is necessary then its probably the best choice. I just used nesting in couple of places, more for aesthetic than necessity. Using Tailwind makes lifes so much easier nowadays :)
For anyone still having this issue, I managed to fix it on my side and it had nothing to do with postcss-nested
.
First, double check if you are really running postcss v8 and not v7 (yarn which postcss
) should let you know. My issue was that I had a dependency (postcss-clean
) that depended on postcss v7, and somehow this became the version I was running.
Then, check all you postcss plugins, and make sure they are compatible with postcss v8 (check their package.json
file on github or in your node_modules
). If not, search for an alternative (in my case, I dropped postcss-clean
for cssnano
).
Hope that helps.
I noticed that after upgrade the exact version of postcss-neested from 5.0.1 to 5.0.2 I start having this exception.
My environment is:
Upgrading to latest postcss does not fixes the issue.
If you need some more info, just ask. Meanwhile I freeze/fix to the exact 5.0.1 version.