Semantic-ui: Gulp build outputs invalid CSS.

[sanny-io]

Gulp build outputs invalid CSS.

The -- in the "Actual Result" area below is a CSS error. There are a couple more areas where those hyphens show up. I've taken a random one as an example.

Steps

npm install semantic-ui --save
cd semantic/
gulp build

Expected Result (from downloaded zip)

.ui.card .image > .ui.ribbon.label,
.ui.image > .ui.ribbon.label {
  left: calc( 0.05rem  -  1.2em );
}

Actual Result (from gulp build)

.ui.card .image > .ui.ribbon.label,
.ui.image > .ui.ribbon.label {
  left: calc(--0.05rem - 1.2em);
}

Version

gulp 4.0.0
gulp CLI 2.0.1
npm 6.7.0
Ubuntu 18.04

[hammy2899]

Try using the following commands

$ npm install --save semantic-ui
$ cd semantic/
$ npx gulp build

This will use the gulp version installed with semantic and should therefore build correctly.

[sanny-io]

Doesn't appear to fix the problem, unfortunately. Still builds with the hyphens.

[sanny-io]

So I started a new project and installed semantic there. Somehow, it properly built itself with gulp build.

Here is a comparison of the old project's (bad) CSS and the new project's (good) CSS.

It looks like some expressions aren't being simplified, and as result, produce invalid CSS.

Oddly enough, when I try making yet another project and building semantic, it goes back to the old bad way.

[hammy2899]

@sannysc Try using Fomantic-UI because we have fixed a lot of invalid CSS/LESS errors.

[sanny-io]

Thanks, that works for me. I didn't know this repo was stale. You might want to leave this issue open, though.