Make LESS 3.x compatible

Question

Make LESS 3.x compatible

kohlikohl opened this issue 7 years ago · 22 comments

Tried to run this with the latest LESS 3.x (3.0.0-alpha.3) release and got following error:

SyntaxError: variable @googleProtocol is undefined in C:\dev\teams-client-sdk\packages\semantic-ui-less\definitions\globals\site.less
on line 25, column 1:
24
25 .loadFonts();
26

Not yet sure why though.

Everything works fine with version 2.7.2.

Answer 1 · 2018-03-09T22:50:02.000Z

Any update on this? Less-Loader has been recently updated to support Less 3.0, so I'd assume any updates here should now be compatible with 3.0 as well.

Answer 2 · 2018-03-12T11:01:32.000Z

Same problem in less 3.0.1

Answer 3 · 2018-04-19T03:06:53.000Z

Have to roll back to less '2.7.3' to make it work.

Answer 4 · 2018-05-08T18:39:21.000Z

Trying to run npm install semantic-ui -s on my angular cli project and got this:

/Users/josue/WebDevelop/angular/ng-book/semantic/node_modules/accord/lib/index.js:29
throw new Error(name + " version " + version + " is not currently supported");
^

Error: less version 3.0.4 is not currently supported
at Object.exports.load (/Users/josue/WebDevelop/angular/ng-book/semantic/node_modules/accord/lib/index.js:29:13)
at Object. (/Users/josue/WebDevelop/angular/ng-book/semantic/node_modules/gulp-less/index.js:9:29)
at Module._compile (internal/modules/cjs/loader.js:678:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:689:10)
at Module.load (internal/modules/cjs/loader.js:589:32)
at tryModuleLoad (internal/modules/cjs/loader.js:528:12)
at Function.Module._load (internal/modules/cjs/loader.js:520:3)
at Module.require (internal/modules/cjs/loader.js:626:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object. (/Users/josue/WebDevelop/angular/ng-book/semantic/node_modules/semantic-ui/tasks/watch.js:17:18)

Answer 5 · 2018-05-08T18:44:47.000Z

Sorry for the silly question, but, how can I roll back my less version?

Answer 6 · 2018-05-08T19:38:56.000Z

npm install less@2.7.3 --save-dev

Answer 7 · 2018-05-09T15:50:03.000Z

Sorry, other silly question... If i run:
npm install --global less@2.7.3 --save-dev
It shows me:

/Users/josue/.npm-packages/bin/lessc -> /Users/josue/.npm-packages/lib/node_modules/less/bin/lessc

less@2.7.3
updated 1 package in 2.756s

Now, But If after that, I go inside the Angular project, and try
npm install semantic-ui
I got the same error:

Error: less version 3.0.4 is not currently supported
at Object.exports.load (/Users/josue/WebDevelop/angular/ng-book/semantic/node_modules/accord/lib/index.js:29:13)
at Object. (/Users/josue/WebDevelop/angular/ng-book/semantic/node_modules/gulp-less/index.js:9:29)
at Module._compile (internal/modules/cjs/loader.js:678:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:689:10)
at Module.load (internal/modules/cjs/loader.js:589:32)
at tryModuleLoad (internal/modules/cjs/loader.js:528:12)
at Function.Module._load (internal/modules/cjs/loader.js:520:3)
at Module.require (internal/modules/cjs/loader.js:626:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object. (/Users/josue/WebDevelop/angular/ng-book/semantic/node_modules/semantic-ui/tasks/watch.js:17:18)

The only way to make it work is running npm install less@2.7.3 --save-dev and getting this:

less@2.7.3
added 18 packages from 22 contributors, removed 6 packages, updated 1 package and moved 1 package in 27.923s

And now, I can start a semantic project by npm install semantic-ui

Is there any way to reinstall less@2.7.3 globally?

Answer 8 · 2018-05-24T16:22:10.000Z

Does anyone feel that the four vulnerabilities found by npm audit are any danger?

Answer 9 · 2018-05-24T16:31:33.000Z

@josuevalrob I'm pretty sure that what you'd need to do is just npm uninstall -g less, then reinstall with the correct version npm install -g less@2.7.3.

Answer 10 · 2018-05-25T02:43:55.000Z

I had the same problem as everyone, the solution I found was to install cjs and accord, then install semantic-ui and this time if it was allowed to install correctly

Answer 11 · 2018-06-07T05:23:00.000Z

I've opened a PR that fixes these issues: #44

Any theme.config will also need to be updated by adding (multiple) to the line importing theme.less.

Answer 12 · 2018-07-03T09:49:25.000Z

Great, @sciyoshi!

Just to make it darned clear to anyone:

@import "~semantic-ui-less/theme.less"; -> @import (multiple) "~semantic-ui-less/theme.less";

Answer 13 · 2018-07-03T21:37:27.000Z

Time to close this now, @kohlikohl?

Answer 14 · 2018-07-06T14:04:27.000Z

Guys, I am not sure but I am still getting an error my less version is apparently 3.x+ 😄

Error: less version 3.5.2 is not currently supported
at Object.exports.load (/Users/suy20680/Documents/Projects/test-semantic/test-app/node_modules/accord/lib/index.js:29:13)
at Object. (/Users/suy20680/Documents/Projects/test-semantic/test-app/node_modules/gulp-less/index.js:9:29)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)
at Object. (/Users/suy20680/Documents/Projects/test-semantic/test-app/node_modules/semantic-ui/tasks/watch.js:17:18)

Answer 15 · 2018-07-06T14:07:15.000Z

Remembered to change the import, @Serhansolo ?

Answer 16 · 2018-07-09T22:32:15.000Z

Looks like less 3.5.x has some breaking changes. 3.0.x works after this merge, but not 3.5.x
The problem is that in Less 3.5.x inline '@' expressions are no longer math'd (less/less.js#3265 (comment))

See error output below with Semantic-UI-Less 2.3.3 and less 3.5.3:

@ribbonOffset: ~"calc("-@ribbonMargin~" - "@ribbonTriangleSize~")";
^
Operation on an invalid type
      in /Users/[...]/node_modules/semantic-ui-less/themes/default/elements/label.variables (line 133, column 0)

Answer 17 · 2018-07-10T14:26:24.000Z

2.3.3 is also still broken on less 3.0.4 for me

Answer 18 · 2018-07-10T14:42:51.000Z

@JonRowe did you add (multiple) to your @import statement in theme.config? 2.3.3 and 3.0.4 works fine for me

Answer 19 · 2018-07-10T14:48:21.000Z

Ah my bad, totally didn't, yep 3.0.4 works, just 3.5 and 3.6 don't now.

Answer 20 · 2018-07-16T13:10:34.000Z

@Vages, sorry for the delayed reply. I just solved the isseu by downgrading my less for the project to 2.7.3 😏

Answer 21 · 2018-07-20T13:56:40.000Z

compatibility new less;

filename : label.variables

133.line

//@ribbonOffset: ~~"calc("-@ribbonMargin~~" - "@ribbonTriangleSize~")";
@ribbonOffset: e("calc(-@{ribbonMargin} - @{ribbonTriangleSize})");

143.line
//@ribbonImageOffset: ~~"calc("-@ribbonImageMargin~~" - "@ribbonTriangleSize~")";
@ribbonImageOffset: e("calc(-@{ribbonImageMargin} - @{ribbonTriangleSize})");

150.line
//@ribbonTableOffset: ~~"calc("-@ribbonTableMargin~~" - "@ribbonTriangleSize~")";
@ribbonTableOffset: e("calc(-@{ribbonTableMargin} - @{ribbonTriangleSize})");

filename:segment.variables

91.line
//@attachedWidth: ~~"calc(100% + "-@attachedHorizontalOffset * 2~~")";
@attachedWidth: e(%("calc(100% + %S%S",-@attachedHorizontalOffset * 2,")"));

filename:step.variables

98.line

//@attachedWidth: ~~"calc(100% + "-@attachedHorizontalOffset * 2~~")";
@attachedWidth: e(%("calc(100% + %S%S", -@attachedHorizontalOffset * 2,")"));

filename:menu.variables

433.line

//@attachedWidth: ~~"calc(100% + "-@attachedHorizontalOffset * 2~~")";
@attachedWidth: e(%("calc(100% + ",-@attachedHorizontalOffset * 2,")"));

Answer 22 · 2018-10-13T21:59:04.000Z

This will be fixed in patch today with Semantic-Org/Semantic-UI#6512