Sass compilation errors about design-system HOT 7 CLOSED

@anthony-kopczyk, thanks for letting us know. Could you share the exact error you're getting? Is Sass having trouble understanding that it's a multiplication expression without the space? And could you tell us what version of Sass you're using?

from design-system.

@pwolfert When we import into our javascript we get the same error, so I don't think it's the sass compiling itself. Our sass is set to ^1.53.0, which looks like it's the same as the DS.

import '@cmsgov/ds-medicare-gov/dist/css/index.css';

The exact error looks like postcss is unable to load the css file.

ERROR in ./node_modules/@cmsgov/ds-medicare-gov/dist/css/index.css (./node_modules/react-scripts/node_modules/css-loader/dist/cjs.js??ref--9-oneOf-4-1!./node_modules/react-scripts/node_modules/postcss-loader/src??postcss!./node_modules/@cmsgov/ds-medicare-gov/dist/css/index.css)
Module build failed (from ./node_modules/react-scripts/node_modules/postcss-loader/src/index.js):
ParserError: Syntax Error at line: 1, column 31
    at .../node_modules/@cmsgov/ds-medicare-gov/dist/css/index.css:1:39006
    at Parser.error (.../node_modules/postcss-values-parser/lib/parser.js:127:11)
    at Parser.operator (.../node_modules/postcss-values-parser/lib/parser.js:162:20)
    at Parser.parseTokens (.../node_modules/postcss-values-parser/lib/parser.js:245:14)
    at Parser.loop (.../node_modules/postcss-values-parser/lib/parser.js:132:12)
    at Parser.parse (.../node_modules/postcss-values-parser/lib/parser.js:51:17)
    at parse (.../node_modules/postcss-custom-properties/index.cjs.js:47:30)
    at .../node_modules/postcss-custom-properties/index.cjs.js:333:24
    at .../node_modules/postcss/lib/container.js:194:18
    at .../node_modules/postcss/lib/container.js:139:18
    at Rule.each (.../node_modules/postcss/lib/container.js:105:16)

Our version of postcss is 7.0.39, while it looks like the design system is using 8. I don't see any breaking changes listed in the postcss changelog.

from design-system.

@anthony-kopczyk, I have modified one of our examples to...

1. Import the ds-medicare-gov styles within a Sass file as Sass and not as CSS
2. Backtrack to a version of react-scripts that uses WebPack 4 and Postcss 7.0.39

Unfortunately this didn't reproduce the error, though. While we still don't know why this is happening, it doesn't change the fact that it is. If you were to reverse the order of the operands, would it give the same error? I think the following regex should work to flip them all in that minifed CSS file:

• Search: calc\((var\([a-z\-]*\))\*-(.*?)\)
• Replace: calc(-$2*$1)

That replace pattern is what the search and replace tool in vscode expects. I'm not sure how universal that is.

from design-system.

Do you have a postcss configuration you could share? It looks like versions 7.x.x of postcss required a config? I'm curious what parsers you're using with postcss and what versions they're set to.

from design-system.

I found this issue which seems similar, which is what makes me wonder if one of the postcss dependencies needs upgrading as well.

from design-system.

We're using react-scripts, and it manages the config for us by default. We're behind a major version on react-scripts. Updating react-scripts should update our config to at least v3 of the postcss parser (might go to 4 it looks like). I think if we upgrade react-scripts on our app, it may resolve this, and we've been wanting to update react-scripts for a while now.

I think we can close this issue, but if there's a simple patch or other teams run into this, it's maybe something to consider.

from design-system.

Closing!

from design-system.