Semantic-Org / Semantic-UI

Semantic is a UI component framework based around useful principles from natural language.
http://www.semantic-ui.com
MIT License
51.07k stars 4.96k forks source link

semantic.css not generating valid CSS #7065

Open githubbob42 opened 2 years ago

githubbob42 commented 2 years ago

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

image

lubber-de commented 2 years ago

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 commented 1 year ago

+1

flipmcswiss commented 1 year ago

+1

BryanBerger98 commented 1 year ago

+1

poof86 commented 1 year ago

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

bordernone commented 1 year ago

edit package.json and change the sass version to 1.39.0