Modules configuration with className.selectors throws error

[nickstanish]

tldr; modules object in rollup config causes .selectors { /* ... */ } to throw error

I have a (trivial for demonstration purposes) css file that looks like this:

.selectors {
  font-size: 14px;
}

with an index.js that simply imports the css:

import './index.css';

and rollup.config.js:

import autoprefixer from 'autoprefixer';
import postcss from 'rollup-plugin-postcss';
import pkg from './package.json';

export default [
  {
    input: 'src/index.js',
    output: [
      {
        name: pkg.libraryName,
        file: pkg.main,
        format: 'umd'
      },
      {
        file: pkg.module,
        format: 'esm'
      }
    ],
    plugins: [
      postcss({
        extract: pkg.styles,
        plugins: [autoprefixer],
        minimize: true,
        modules: {
          camelCase: true,
          generateScopedName: '[hash:base64]'
        }
      })
    ]
  }
];

Running rollup -c throws an error:

[!] (plugin postcss) TypeError: checker.check is not a function
src/index.css
TypeError: checker.check is not a function
PROJECT_NAME/node_modules/autoprefixer/lib/processor.js:259:30
PROJECT_NAME/node_modules/rollup-plugin-postcss/node_modules/postcss/lib/container.es6:161:18)
PROJECT_NAME/node_modules/css-modules-loader-core/node_modules/postcss/lib/container.es6:109:26)
PROJECT_NAME/node_modules/css-modules-loader-core/node_modules/postcss/lib/container.es6:77:22)
PROJECT_NAME/node_modules/css-modules-loader-core/node_modules/postcss/lib/container.es6:108:21)
PROJECT_NAME/node_modules/rollup-plugin-postcss/node_modules/postcss/lib/container.es6:121:24)
PROJECT_NAME/node_modules/rollup-plugin-postcss/node_modules/postcss/lib/container.es6:76:16)
PROJECT_NAME/node_modules/rollup-plugin-postcss/node_modules/postcss/lib/container.es6:107:17)
PROJECT_NAME/node_modules/rollup-plugin-postcss/node_modules/postcss/lib/container.es6:159:19)
PROJECT_NAME/node_modules/autoprefixer/lib/processor.js:214:20)

However, it appears that the class name "selectors" is specifically breaking it. Updating to .selector succeeds:

.selector {
  font-size: 14px;
}

created dist/sample.umd.js, dist/sample.esm.js in 1.7s

Additionally, removing the modules from rollup configuration fixes it without renaming .selectors:

import autoprefixer from 'autoprefixer';
import postcss from 'rollup-plugin-postcss';
import pkg from './package.json';

export default [
  {
    input: 'src/index.js',
    output: [
      {
        name: pkg.libraryName,
        file: pkg.main,
        format: 'umd'
      },
      {
        file: pkg.module,
        format: 'esm'
      }
    ],
    plugins: [
      postcss({
        extract: pkg.styles,
        plugins: [autoprefixer],
        minimize: true
      })
    ]
  }
];

[issue-label-bot]

Issue-Label Bot is automatically applying the label bug to this issue, with a confidence of 0.82. Please mark this comment with 👍 or 👎 to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[JakeStanger]

Ok first and foremost - I just had this same error and Google returned literally a single result - this page. So thank you, you have saved me a lot of headache.

I am using Webpack as opposed to Rollup, so I believe the problem lies with postcss or autoprefixer specifically and not this plugin.

@nickstanish would you mind giving your version of autoprefixer and the contents of the line its failing at? I'm interested in investigating this and autoprefixer/lib/processor.js:259:30 doesn't line up with either of the checker.check calls in the latest version.

[nickstanish]

@JakeStanger I wasn't sure which package was the root cause, but I agree, it sounds like autoprefixer or postcss is the issue here. My version of autoprefixer is 7.2.5 and looks like this is the affected line:

https://github.com/postcss/autoprefixer/blob/7.2.5/lib/processor.js#L259-L260

[JakeStanger]

@nickstanish I opened an issue over at postcss/autoprefixer#1269 which has subsequently been fixed by postcss/autoprefixer@33ee989. Hopefully a release containing the fix will come out soon.

Your version of autoprefixer is two major versions behind by the way.