[INSTALL] LESS errors on gulp build on fresh install

[designosis]

Steps

% cd semantic
% gulp build

Result

Two errors:

1. [Error: variable @googleProtocol is undefined in file /Users/n/webroot/semantic/src/definitions/globals/site.less line no. 25]
2. [Error: Operation on an invalid type in file /Users/n/webroot/semantic/src/themes/default/elements/label.variables line no. 133]

Complete Output

[16:47:23] Using gulpfile ~/webroot/semantic/gulpfile.js
[16:47:23] Starting 'build'...
Building Semantic
[16:47:23] Starting 'build-javascript'...
Building Javascript
[16:47:23] Starting 'build-css'...
Building CSS
[16:47:23] Starting 'build-assets'...
Building assets
[16:47:23] Created: dist/components/site.js
[16:47:23] Created: dist/components/site.min.js
[16:47:23] Created: dist/components/form.js
[16:47:24] Created: dist/components/form.min.js
[16:47:24] Created: dist/components/accordion.js
[16:47:24] Created: dist/components/accordion.min.js
[16:47:24] Created: dist/components/checkbox.js
[16:47:24] Created: dist/components/checkbox.min.js
[16:47:24] Created: dist/components/dimmer.js
{ [Error: variable @googleProtocol is undefined in file /Users/n/webroot/semantic/src/definitions/globals/site.less line no. 25]
  message:
   'variable @googleProtocol is undefined in file /Users/n/webroot/semantic/src/definitions/globals/site.less line no. 25',
  stack: undefined,
  type: 'Syntax',
  filename:
   '/Users/n/webroot/semantic/src/definitions/globals/site.less',
  index: 415,
  line: 25,
  column: 0,
  callLine: NaN,
  callExtract: undefined,
  extract: [ '', '.loadFonts();', '' ],
  lineNumber: 25,
  fileName:
   '/Users/n/webroot/semantic/src/definitions/globals/site.less',
  name: 'Error',
  plugin: 'gulp-less',
  showProperties: true,
  showStack: false,
  __safety: { toString: [Function: bound ] } }
[16:47:24] Created: dist/components/reset.css
[16:47:24] Starting 'package uncompressed css'...
[16:47:24] Created: dist/components/reset.min.css
[16:47:24] Starting 'package compressed css'...
[16:47:24] Created: dist/components/dimmer.min.js
[16:47:24] Created: dist/components/dropdown.js
[16:47:25] Created: dist/semantic.css
[16:47:25] Finished 'package uncompressed css' after 626 ms
[16:47:25] Created: dist/semantic.min.css
[16:47:25] Finished 'package compressed css' after 618 ms
[16:47:25] Finished 'build-css' after 1.97 s
[16:47:25] Created: dist/components/dropdown.min.js
[16:47:25] Created: dist/components/embed.js
[16:47:25] Created: dist/components/embed.min.js
[16:47:25] Created: dist/components/modal.js
[16:47:25] Created: dist/components/nag.js
[16:47:25] Created: dist/components/modal.min.js
[16:47:25] Created: dist/components/popup.js
[16:47:25] Created: dist/components/nag.min.js
[16:47:26] Created: dist/components/popup.min.js
[16:47:26] Created: dist/components/progress.js
[16:47:26] Created: dist/components/progress.min.js
[16:47:26] Created: dist/components/rating.js
[16:47:26] Created: dist/components/rating.min.js
[16:47:26] Created: dist/components/search.js
[16:47:26] Created: dist/components/sidebar.js
[16:47:26] Created: dist/components/search.min.js
[16:47:26] Created: dist/components/sticky.js
[16:47:26] Created: dist/components/sidebar.min.js
[16:47:26] Created: dist/components/tab.js
[16:47:26] Created: dist/components/sticky.min.js
[16:47:26] Created: dist/components/transition.js
[16:47:26] Created: dist/components/tab.min.js
[16:47:27] Created: dist/components/visibility.js
[16:47:27] Created: dist/components/transition.min.js
[16:47:27] Created: dist/components/visibility.min.js
[16:47:27] Starting 'package compressed js'...
[16:47:27] Starting 'package uncompressed js'...
[16:47:27] Finished 'build-javascript' after 3.97 s
{ [Error: Operation on an invalid type in file /Users/n/webroot/semantic/src/themes/default/elements/label.variables line no. 133]
  message:
   'Operation on an invalid type in file /Users/n/webroot/semantic/src/themes/default/elements/label.variables line no. 133',
  stack: undefined,
  type: 'Operation',
  filename:
   '/Users/n/webroot/semantic/src/themes/default/elements/label.variables',
  index: 3663,
  line: 133,
  column: 0,
  callLine: NaN,
  callExtract: undefined,
  extract:
   [ '@ribbonMargin: 1rem;',
     '@ribbonOffset: ~"calc("-@ribbonMargin~" - "@ribbonTriangleSize~")";',
     '@ribbonDistance: ~"calc("@ribbonMargin~" + "@ribbonTriangleSize~")";' ],
  lineNumber: 133,
  fileName:
   '/Users/n/webroot/semantic/src/themes/default/elements/label.variables',
  name: 'Error',
  plugin: 'gulp-less',
  showProperties: true,
  showStack: false,
  __safety: { toString: [Function: bound ] } }
[16:47:29] Created: dist/semantic.min.js
[16:47:29] Finished 'package compressed js' after 2.05 s
[16:47:29] Created: dist/semantic.js
[16:47:29] Finished 'package uncompressed js' after 2.05 s
[16:47:29] Finished 'build-assets' after 5.99 s
[16:47:29] Finished 'build' after 6.02 s

Versions

Local:
Semantic UI 2.3.2
gulp 3.9.1
gulp-less 4.0.0

Global:
Node 10.5.0
NPM 6.1.0
LESS 3.5.3

[designosis]

This is either causing or related to another problem I'm having:

In previous builds, after running gulp build, /semantic/dist/semantics.css was ~698k.
In Semantic UI 2.3.2, /semantic/dist/semantics.css ends up at ~8.6k. That ain't right.
(The .min files are of course smaller in each case.)

Why would gulp build generate such a crippled semantic.css on a fresh install?

[danrubins]

FWIW, I get the same as your error # 2 using semantic ui 2.3.3 when running the build task. Oddly enough, a fresh install is fine. Though, it means every time I want to change any tiny little thing I have to uninstall and reinstall semantic :-/

UPDATE: for me, this only seems to happen in a folder where I already have a gulpfile. Workaround: just put semantic into a clean folder. It's annoying, but workable.

[designosis]

For anyone else having this problem, @sciyoshi pointed out the fix.
I had been using gulp-less 4.0.0 ... running npm install [email protected] --save-dev allowed semantic to compile.

[hugopeek]

This happened to me also after gulp-less got updated to 4.0.0.

It seems that escaping things with ~"something" is not needed anymore in many scenarios as of LESS 3.5: http://lesscss.org/#escaping

I tried this on the cases with the errors and succeeded to build again after "unescaping" variables in about 4 or 5 places. Only calc() instances with a negative variable inside (as shown in the error) seem to be affected..

[hugopeek]

Dang, didn't see this PR until now: #6512

That should take care of it :)

[jlukic]

This will be fixed with #6512

Please see my note on that PR