search

postcss / postcss-nested

PostCSS plugin to unwrap nested rules like how Sass does it.
MIT License
1.16k stars 67 forks source link

Unexpected exception on upgrading from 5.0.1 to 5.0.2 #106

Closed niwinz closed 3 years ago

niwinz commented 3 years ago

I noticed that after upgrade the exact version of postcss-neested from 5.0.1 to 5.0.2 I start having this exception.

[12:39:21] TypeError in plugin "gulp-postcss"
Message:                                  
    node.getIterator is not a function     
Details:                                             
    fileName: /home/sereno/sereno/frontend/resources/styles/main/00-normalice.css
    domainEmitter: [object Object]                                                                       
    domainThrown: false                                                                                 

Stack:                               
TypeError: node.getIterator is not a function
    at LazyResult.visitTick (/home/sereno/sereno/frontend/node_modules/postcss/lib/lazy-result.js:465:33)
    at LazyResult.runAsync (/home/sereno/sereno/frontend/node_modules/postcss/lib/lazy-result.js:349:30)
    at processTicksAndRejections (node:internal/process/task_queues:93:5)

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.

ai commented 3 years ago

Do you have any other PostCSS plugins in pipeline?

niwinz commented 3 years ago

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/"));
});
ai commented 3 years ago
  1. Try to remove clean plugin
  2. Be sure that you are using the latest versions of Autoprefixer
pixelastic commented 3 years ago

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

pavelloz commented 3 years ago

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.
nigimaxx commented 3 years ago

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;
    }
  }
}
tyteen4a03 commented 3 years ago

Can reproduce this issue on 5.0.3.

pavelloz commented 3 years ago

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.

tyteen4a03 commented 3 years ago

@pavelloz unfortunately as this has blocked me for too long I've decided to switch back to SCSS.

pavelloz commented 3 years ago

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 :)

pixelastic commented 3 years ago

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.