semantic.css not generating valid CSS

[githubbob42]

Starting with v1.40.0 of SASS (dart-sass) , sass is now parsing calc() syntax more thoroughly and marking errors if there is already broken CSS.

As you can see in the lines from the dist/semantic.css file, values like --1px are not valid values and seems to come from trying to negate negative values(?). E.g.

@ribbonImageMargin: -0.05rem; /* Rounding Offset on Triangle */
@ribbonImageOffset: calc(-@ribbonImageMargin - @ribbonTriangleSize);

and it's causing our builds to fail:

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

./src/App.scss
SassError: Expected digit.
      ╷
14460 │   left: calc(--0.05rem - 1.2em);
      │               ^

• https://github.com/Semantic-Org/Semantic-UI/blob/deb275d2d5fe9a522a0b7bd8b6b6a1c939552718/dist/semantic.css#L15088

• https://github.com/Semantic-Org/Semantic-UI/blob/deb275d2d5fe9a522a0b7bd8b6b6a1c939552718/dist/semantic.css#L19852

• https://github.com/Semantic-Org/Semantic-UI/blob/deb275d2d5fe9a522a0b7bd8b6b6a1c939552718/src/themes/default/elements/step.variables#L98

• https://github.com/Semantic-Org/Semantic-UI/blob/deb275d2d5fe9a522a0b7bd8b6b6a1c939552718/src/themes/default/elements/label.variables#L139

[lubber-de]

This is fixed in the community fork Fomantic-UI https://github.com/fomantic/Fomantic-UI/blob/022588e4e6b73c9c45d77f8bc373919c2806553d/src/themes/default/elements/label.variables#L142

[bordernone]

+1

[flipmcswiss]

+1

[BryanBerger98]

+1

[poof86]

+1 had to remove the -- for it to work

[bordernone]

edit package.json and change the sass version to 1.39.0