'Unknown Word' error in CSS Minimizer and Postcss Modules causing 'Build' failure even though 'Develop' Works.

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

My Gatsby.js site runs without error when I use ‘gatsby develop’ but the build always fails returning the following error when I ‘gatsby build’:

` Generating JavaScript bundles failed

styles.1a4684d19cee467a516a.css from Css Minimizer C:\xampp\htdocs\gatsby-troubleshoot-positiveo\styles.1a4684d19cee467a516a.css:756:5 : Unknown word [styles.1a4684d19cee467a516a.css:756,5] at Input.error (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\post css\lib\input.js:123:16) at Parser.unknownWord (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modul es\postcss\lib\parser.js:518:22) at Parser.other (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\pos tcss\lib\parser.js:149:12) at Parser.parse (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\pos tcss\lib\parser.js:59:16) at parse (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\postcss\li b\parse.js:11:12) at new LazyResult (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\p ostcss\lib\lazy-result.js:133:16) at Processor.process (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_module s\postcss\lib\processor.js:36:12) at cssnanoMinify (eval at transform (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\gatsby\node_modules\css -minimizer-webpack-plugin\dist\minify.js:34:28), <anonymous>:51:61) at minify (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\gatsby\no de_modules\css-minimizer-webpack-plugin\dist\minify.js:15:32) at Object.transform (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules \gatsby\node_modules\css-minimizer-webpack-plugin\dist\minify.js:35:24)

File: styles.1a4684d19cee467a516a.css ` Link to reproduced github:

https://github.com/Dahbu7/gatsby-issue-1

I have uninstalled postcss and postcss-loader and reinstalled them as dev dependencies - that didn’t work I have uninstalled css-minimizer-webpack-plugin and reinstalled it as dev dependency - that didn’t work either.

PLEASE NOTE: After I uninstalled just postcss I ran build again so it could use the postcss package that is in the node_modules/gatsby folder as in, node_modules/gatsby/node_modules/postcss and that didn’t work either.

My Node version is: v14.15.0 My dev-dependency installed webpack version is: Everything else can be found in the github light reproduction repo:

https://github.com/Dahbu7/gatsby-issue-1

I tried hosting it on gatsby cloud and the deploy build failed there too for the exact same reason. I even did the NODE_VERSION = 16 thing as an environment variable and that didn’t work. Please try it again though. Maybe I did it wrong.

I have done several react projects but this is my first time converting over to Gatsby. Any help woud be greatly appreciated.

Reproduction Link

https://github.com/Dahbu7/gatsby-issue-1

Steps to Reproduce

1. Go to the repo I posted: https://github.com/Dahbu7/gatsby-issue-1
2. You can run gatsby build on your system or any platform of your choice.
3. Node Version is v14.15.0 …

Expected Result

Javascript bundles of node modules should build without error when ‘gatsby build’ is ran. It builds properly with ‘gatsby develop’.

Actual Result

failed Building production JavaScript and CSS bundles - 116.946s

ERROR #98123 WEBPACK

Generating JavaScript bundles failed

styles.1a4684d19cee467a516a.css from Css Minimizer C:\xampp\htdocs\gatsby-troubleshoot-positiveo\styles.1a4684d19cee467a516a.css:756:5 : Unknown word [styles.1a4684d19cee467a516a.css:756,5] at Input.error (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\post css\lib\input.js:123:16) at Parser.unknownWord (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modul es\postcss\lib\parser.js:518:22) at Parser.other (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\pos tcss\lib\parser.js:149:12) at Parser.parse (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\pos tcss\lib\parser.js:59:16) at parse (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\postcss\li b\parse.js:11:12) at new LazyResult (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\p ostcss\lib\lazy-result.js:133:16) at Processor.process (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_module s\postcss\lib\processor.js:36:12) at cssnanoMinify (eval at transform (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\gatsby\node_modules\css -minimizer-webpack-plugin\dist\minify.js:34:28), <anonymous>:51:61) at minify (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\gatsby\no de_modules\css-minimizer-webpack-plugin\dist\minify.js:15:32) at Object.transform (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules \gatsby\node_modules\css-minimizer-webpack-plugin\dist\minify.js:35:24)

File: styles.1a4684d19cee467a516a.css

Environment

System:
    OS: Windows 10 10.0.19042
    CPU: (4) x64 Intel(R) Core(TM) i5-3340M CPU @ 2.70GHz
  Binaries:
    Node: 14.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 94.0.4606.71
    Edge: Spartan (44.19041.1023.0), Chromium (94.0.992.38)
  npmPackages:
    gatsby: ^3.13.1 => 3.14.2
    gatsby-plugin-image: ^1.14.1 => 1.14.1
    gatsby-plugin-manifest: ^3.14.0 => 3.14.0
    gatsby-plugin-postcss: ^4.14.0 => 4.14.0
    gatsby-plugin-preconnect: ^1.2.1 => 1.2.1
    gatsby-plugin-preload-fonts: ^2.14.0 => 2.14.0
    gatsby-plugin-react-helmet: ^4.14.0 => 4.14.0
    gatsby-plugin-react-svg: ^3.0.1 => 3.0.1
    gatsby-plugin-sharp: ^3.14.1 => 3.14.1
    gatsby-plugin-sitemap: ^4.10.0 => 4.10.0
    gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
    gatsby-source-filesystem: ^3.14.0 => 3.14.0
    gatsby-theme-material-ui: ^2.0.1 => 2.0.1
    gatsby-transformer-sharp: ^3.14.0 => 3.14.0
  npmGlobalPackages:
    gatsby-cli: 3.14.0

Config Flags

No response

[vic08]

I’ve had a problem with dynamic string in the tailwind classNames when using the tailwind postcss plugin. Tailwind plugin takes plain strings from from classes and generates the css for it, so if you have "max-w-[${MAX_CONST}]" as a className - it will generate a broken css.

[lewismwaki]

The issue I was having was due to including CSS files for slick carousel into the scss, I changed to the scss includes instead and things started working.

I managed to fix this error by completely removing the all import lines for slick-carousel.css on all the files that had it; then adding the CDN link directly to <Helmet/>

the links https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css