Browserslist and extending configs

We have a config in our project, and it seems to be failing when autoprefixer attempts to use it. It looks like it’s perhaps caused by the version of browserslist bundled with autoprefixer, but I’m not sure and was hoping for some assistance.

Please let me know what else I can provide.

---

Full webpack error:

ERROR in ./packages/@projects/project-name/client/components/HighlightsCategoryList/styles.css
Module build failed: ModuleBuildError: Module build failed: BrowserslistError: Unknown browser query `extends @web-core/browserslist-config`
    at /home/user/dev/web-core/node_modules/browserslist/index.js:262:11
    at Array.forEach (native)
    at browserslist (/home/user/dev/web-core/node_modules/browserslist/index.js:229:11)
    at Browsers.parse (/home/user/dev/web-core/node_modules/autoprefixer/lib/browsers.js:61:16)
    at new Browsers (/home/user/dev/web-core/node_modules/autoprefixer/lib/browsers.js:52:30)
    at loadPrefixes (/home/user/dev/web-core/node_modules/autoprefixer/lib/autoprefixer.js:67:24)
    at plugin (/home/user/dev/web-core/node_modules/autoprefixer/lib/autoprefixer.js:78:24)
    at LazyResult.run (/home/user/dev/web-core/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.es6:322:20)
    at LazyResult.asyncTick (/home/user/dev/web-core/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.es6:249:32)
    at LazyResult.asyncTick (/home/user/dev/web-core/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.es6:261:22)
    at runLoaders (/home/user/dev/web-core/node_modules/webpack/lib/NormalModule.js:195:19)
    at /home/user/dev/web-core/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /home/user/dev/web-core/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/home/user/dev/web-core/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Promise.resolve.then.then.catch (/home/user/dev/web-core/node_modules/postcss-loader/lib/index.js:176:71)
 @ ./packages/@projects/project-name/client/components/HighlightsCategoryList/HighlightsCategoryList.js 21:14-37
 @ ./packages/@projects/project-name/client/components/HighlightsCategoryList/index.js
 @ ./packages/@projects/project-name/client/components/index.js
 @ ./packages/@projects/project-name/client/App/App.js
 @ ./packages/@projects/project-name/client/App/index.js
 @ ./packages/@projects/project-name/client/index.js
 @ multi webpack-hot-middleware/client react-hot-loader/patch ./index.js

ERROR in ./packages/@projects/project-name/client/components/HighlightsCategoryList/styles.css
Module build failed: ModuleBuildError: Module build failed: BrowserslistError: Unknown browser query `extends @web-core/browserslist-config`
    at /home/user/dev/web-core/node_modules/browserslist/index.js:262:11
    at Array.forEach (native)
    at browserslist (/home/user/dev/web-core/node_modules/browserslist/index.js:229:11)
    at Browsers.parse (/home/user/dev/web-core/node_modules/autoprefixer/lib/browsers.js:61:16)
    at new Browsers (/home/user/dev/web-core/node_modules/autoprefixer/lib/browsers.js:52:30)
    at loadPrefixes (/home/user/dev/web-core/node_modules/autoprefixer/lib/autoprefixer.js:67:24)
    at plugin (/home/user/dev/web-core/node_modules/autoprefixer/lib/autoprefixer.js:78:24)
    at LazyResult.run (/home/user/dev/web-core/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.es6:322:20)
    at LazyResult.asyncTick (/home/user/dev/web-core/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.es6:249:32)
    at LazyResult.asyncTick (/home/user/dev/web-core/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.es6:261:22)
    at runLoaders (/home/user/dev/web-core/node_modules/webpack/lib/NormalModule.js:195:19)
    at /home/user/dev/web-core/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /home/user/dev/web-core/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/home/user/dev/web-core/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Promise.resolve.then.then.catch (/home/user/dev/web-core/node_modules/postcss-loader/lib/index.js:176:71)
    at process._tickCallback (internal/process/next_tick.js:109:7)
webpack: Failed to compile.

Extract from package.json:

 "browserslist": [
    "extends @web-core/browserslist-config"
  ],
  "dependencies": {
    "@web-core/browserslist-config": "1.0.0",
    ...
    "postcss-apply": "^0.8.0",
    "postcss-cssnext": "^3.0.2",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.6",
    ...
  },
...

And the index.js from our browserslist-config:

module.exports = [
    '> 2%'
];

[mrmckeb]

OK, I’ve just done some deeper research into this and I was mistaken. It’s css-loader’s dependency css-nano (both latest versions) causing the issue.

• css-loader@^0.28.7 > cssnano@3.10.0 > autoprefixer@6.7.7 > browserslist@^1.7.6
• css-loader@^0.28.7 > cssnano@3.10.0 >postcss-merge-rules@2.1.2 > browserslist@^1.5.2
• css-loader@^0.28.7 > cssnano@3.10.0 > postcss-merge-rules@2.1.2 > caniuse-api@1.6.1 > browserslist@^1.3.6

I think the fix will be css-loader moving to cssnano@4.0.0 when it’s released, but that seems to be still be using autoprefixer@^6.0.0.

I’m not sure what the best approach is, but maybe a PR to both is needed. At a guess, the autoprefixer issue is probably the biggest.

---

Update: It looks like this will be addressed in cssnano@4.0.0, as per this issue: https://github.com/ben-eb/cssnano/issues/365

[ai]

Hm. Maybe we should ask them to update Browserslist? Do you want to send PR to babel-plugin-css-modules-transform?