Css in autocomplete-theme-classic removed by Webpack due to sideEffects false?

[joakimriedel]

Description

I'm experimenting with the Autocomplete in a project that uses Webpack 5 as bundling tool. When following the getting started guide, and importing the default theme like this...

import '@algolia/autocomplete-theme-classic';

... it seems as if the contained css won't be included in the final bundle.

Researching a bit shows that this could possibly be due to the sideEffects setting being false in package.json of https://github.com/algolia/autocomplete/blob/next/packages/autocomplete-theme-classic/package.json ?

See https://webpack.js.org/guides/tree-shaking/#clarifying-tree-shaking-and-sideeffects

[Haroenv]

Is this also the case if you manually import the built file? import '@algolia/autocomplete-theme-classic/dist/theme.css';

[joakimriedel]

@Haroenv no, but then I get a postcss error on column 16000 possibly because there are no line breaks in that file and it chokes. Manually including the contents of theme.css in a separate file works though, even with postcss, so that's fine for experimenting.

[Haroenv]

I've made a PR that adds the side effects for the css files, if you change manually in package.json, does that work?

[joakimriedel]

@Haroenv sorry, the sideEffects setting might be a red herring (even though it should probably not be set to false anyways). The trouble seems to be postcss, used by postcss-loader, who does not like the contents of the css file. It stops at exactly 16000, which makes me think it does not like the contents of the file being one large line without any spaces. I'll research if it's possible to extend the parsing buffer.

ERROR in ./node_modules/@algolia/autocomplete-theme-classic/dist/theme.css (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-1.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-1.use[2]!./node_modules/@algolia/autocomplete-theme-classic/dist/theme.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
ParserError: Syntax Error at line: 1, column 26
    at C:\Users\<project>\node_modules\@algolia\autocomplete-theme-classic\dist\theme.css:2:16000
    at Parser.error (C:\Users\<project>\node_modules\postcss-values-parser\lib\parser.js:127:11)
    at Parser.operator (C:\Users\<project>\node_modules\postcss-values-parser\lib\parser.js:162:20)
    at Parser.parseTokens (C:\Users\<project>\node_modules\postcss-values-parser\lib\parser.js:245:14)
    at Parser.loop (C:\Users\<project>\node_modules\postcss-values-parser\lib\parser.js:132:12)
    at Parser.parse (C:\Users\<project>\node_modules\postcss-values-parser\lib\parser.js:51:17)
    at parse (C:\Users\<project>\node_modules\postcss-custom-properties\index.cjs.js:47:30)
    at C:\Users\<project>\node_modules\postcss-custom-properties\index.cjs.js:333:24
    at C:\Users\<project>\node_modules\postcss\lib\container.js:91:18
    at C:\Users\<project>\node_modules\postcss\lib\container.js:74:18
    at Rule.each (C:\Users\<project>\node_modules\postcss\lib\container.js:60:16)
 @ ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-1.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-1.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-1.use[3]!./wwwroot/src/css/app.scss 7:0-265 12:26-59
 @ ./wwwroot/src/css/app.scss 2:12-259 9:17-24 13:15-29
 @ ./wwwroot/src/ts/app.ts 5:0-35

[Haroenv]

Does it make a difference if you break the file up into multiple lines? If you can reproduce this in a GitHub repo, it would be ideal

[joakimriedel]

@Haroenv some progress. in a fresh webpack project without any dependencies other than autocomplete-theme-classic, I can confirm that your fix

"sideEffects": ["*.css"],

will make the theme load correctly in the webpack bundle. Without the fix, it doesn't get included.

The postcss issue is reproducible when this plugin is used https://github.com/csstools/postcss-preset-env

Here's the github repository I've been playing with: https://github.com/joakimriedel/autocomplete-theme-bug

edit: oh, and the bug with postcss seems to be related to parsing the variable --aa-spacing somehow, it was just a coincidence that it was used as a margin at column 16000 of row 2.

edit2: ok found it. it seems as if postcss-preset-env does not like the following

margin:0 calc(var(--aa-spacing)/-3);

it has to be a space between the division and the minus sign like this

margin:0 calc(var(--aa-spacing)/ -3);

This explains why it started working when I formatted the css which added whitespace everywhere. You learn something new every day... 🤷‍♂️

(probably related to csstools/postcss-preset-env#184 and csstools/postcss-preset-env#163)

[Haroenv]

That's a very confusing bug, but seems like it's more something in postcss, and not something we can help much about. In the mean time, you can likely force the version of postcss' value parser here: csstools/postcss-preset-env#163 (comment)

[hansod1]

Hi @Haroenv, I can reproduce this bug with a blank Create-React-App. My organization is running into the same issue with Algolia CSS.

Here is the git repo: https://github.com/hansod1/reproduce-css-bug
Here is the output of npm run build:

➜ npm run build

> reproduce-css-bug@0.1.0 build
> react-scripts build

Creating an optimized production build...
Failed to compile.

./node_modules/@algolia/autocomplete-theme-classic/dist/theme.css
ParserError: Syntax Error at line: 1, column 26

[jfocco]

Is this also the case if you manually import the built file? import '@algolia/autocomplete-theme-classic/dist/theme.css';

This worked for me!