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);
      │               ^

• Semantic-UI/dist/semantic.css

  Line 15088 in deb275d

  left: calc(--0.05rem - 1.2em);

• Semantic-UI/dist/semantic.css

  Line 19852 in deb275d

  width: calc(100% + (--1px * 2)) !important;

• Semantic-UI/src/themes/default/elements/step.variables

  Line 98 in deb275d

  @attachedWidth: calc(100% + (-@attachedHorizontalOffset * 2));

• Semantic-UI/src/themes/default/elements/label.variables

  Line 139 in deb275d

  @ribbonImageOffset: calc(-@ribbonImageMargin - @ribbonTriangleSize);

[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