Postcss: 8.0.7 fails to parse CSS that works with 8.0.6

[jbg]

I get this error when building my Svelte project that uses PostCSS, when using v8.0.7. Downgrading to v8.0.6 resolves the issue.

[!] (plugin svelte) TypeError: string is not iterable
.../src/routes/_layout.svelte
TypeError: string is not iterable
    at Object.split (.../node_modules/postcss/lib/list.js:13:24)
    at Object.comma (.../node_modules/postcss/lib/list.js:51:17)
    at Rule.get selectors [as selectors] (.../node_modules/postcss/lib/rule.js:14:17)
    at isRuleWithinRule (.../node_modules/postcss-nesting/index.cjs.js:51:102)
    at .../node_modules/postcss-nesting/index.cjs.js:114:11
    at Array.forEach (<anonymous>)
    at walk (.../node_modules/postcss-nesting/index.cjs.js:112:23)
    at .../node_modules/postcss-nesting/index.cjs.js:125:9
    at Array.forEach (<anonymous>)
    at Object.walk [as plugin] (.../node_modules/postcss-nesting/index.cjs.js:112:23)

I'm working on extracting a minimal reproduction from the project.

[ryanypm]

same issue.

[ruslan-khomiak]

I have the same

[enrique-ramirez]

Similar issue. v8.0.6 works, but v8.0.7 breaks.

 ERROR in ./src/css/style.css (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/dist/cjs.js!./src/css/style.css)
    Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
    TypeError: Cannot read property 'length' of undefined

I'm not 100% sure what exactly caused this, or what pieces of my config are useful info to have. I'll try to figure it out, but please feel free to ask for more info.

[illepic]

Note that the OP error is preceded by this kind of output during compilation:

My specific final error:

[ai]

I need an input CSS example to reproduce a case.

Or small projects with PostCSS plugins which have a problem.

[enrique-ramirez]

@ai Here's a minimal project for you that shows the issue: https://github.com/enrique-ramirez/zeus just run npm run start:dev (or npm run build).

[adamwathan]

Can confirm Tailwind won't build anymore on 8.0.7 but works on 8.0.6. We get this error:

TypeError: Cannot read property 'selector' of undefined
    at new Parser (/Users/adamwathan/Code/tailwindcss/node_modules/postcss-selector-parser/dist/parser.js:129:70)
    at Processor._root (/Users/adamwathan/Code/tailwindcss/node_modules/postcss-selector-parser/dist/processor.js:55:18)
    at Processor._runSync (/Users/adamwathan/Code/tailwindcss/node_modules/postcss-selector-parser/dist/processor.js:102:21)
    at Processor.processSync (/Users/adamwathan/Code/tailwindcss/node_modules/postcss-selector-parser/dist/processor.js:199:23)

[adamwathan]

Opened a PR that fixes the issue for us:

https://github.com/postcss/postcss/pull/1422/

[ai]

Could be fixed in PostCSS 8.0.8

[illepic]

@adamwathan still exploding on our build of Tailwind:

ERROR in ./source/default/styles/tailwind.full.css?external (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./source/default/styles/tailwind.full.css?external)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read property 'type' of undefined
    at /home/illepic/dev/phase2website/project/themes/particle/source/default/styles/tailwind.full.css:3:1

Don't know if it matters , but we use a webpack resource query in this case:

      {
        test: /\.css$/,
        resourceQuery: /external/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },

Granted, this is much LESS of an explosion than postcss 8.0.7. We only see one, final error, instead of dozens during compile.

[Ankcorn]

@illepic I am also having that problem without the webpack resourceQuery so that is not related.

[enrique-ramirez]

@ai For what is worth: issue is solved for me with v8.0.8. Thanks @adamwathan and @ai for the quick response!

[illepic]

@Ankcorn I'm going to experiment with removing postcss plugins and see if that reveals any particular collision. Do you recognize any of these plugins within your project?

const path = require('path')

const postcssPresetEnv = require('postcss-preset-env')
const postcssNested = require('postcss-nested')
const cssnano = require('cssnano')
const tailwindcss = require('tailwindcss')
const hexrgba = require('postcss-hexrgba')
const stylelint = require('stylelint')
const postcssReporter = require('postcss-reporter')

const tailwindPath = path.resolve(__dirname, 'tailwind.config.js')

module.exports = ({ mode }) => ({
  plugins: [
    stylelint(),
    // tailwindConfig is set per *design system* webpack.design.js.
    tailwindcss(tailwindPath),
    // Provide Sass-link nesting of selectors
    postcssNested(),
    // Hex in rgba like Sass
    hexrgba(),
    // Use .browserslistrc to determine CSS mutations
    postcssPresetEnv(),
    // Heavy processing for production
    mode === 'production' && cssnano(),
    // Provides pretty command line output
    postcssReporter({ clearReportedMessages: true }),
  ],
})

[illepic]

Looks like 8.0.9 is working great. Thank you all!