@ribbonOffset: Operation on an invalid type (Less 3.5.x compatibility)

[Vages]

As noted in #30 (comment), 3.5.x versions of less breaks compatibility for inlining @-expressions within math operations.

ERROR in ./src/assets/styles/semantic/semantic.less (./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js!./src/assets/styles/semantic/semantic.less)
Module build failed: 

@ribbonMargin: 1rem;
@ribbonOffset: ~"calc("-@ribbonMargin~" - "@ribbonTriangleSize~")";
^
Operation on an invalid type
      in [project root]/node_modules/semantic-ui-less/themes/default/elements/label.variables (line 133, column 0)
 @ ./src/assets/styles/semantic/semantic.less 2:14-136 21:1-42:3 21:134-42:2 22:19-141
 @ ./src/index.jsx
 @ multi webpack-hot-middleware/client whatwg-fetch ./src/index.jsx

less/less.js#3265 (comment) states that the changes have been reverted, but a new version has yet to come out. When the next version comes out, we should assert that this version. Edit: It seems this will not fix our problem, after all (see #46 (comment)).

[ThanosSiopoudis]

@Vages the revert is for @media queries only, I don't think they plan to revert any other @-expressions

[Vages]

Aha, @ThanosSiopoudis. Then it needs to be fixed some other way. (Edited the original post to reflect this.)

[gerardmrk]

I am getting the exact same errors too. Setup is also the same as mentioned in the reference issue (followed from the theming article)

[daniel-cottone]

Getting the same error. Would love to see a fix for this.

ERROR in ../node_modules/semantic-ui-less/semantic.less (../node_modules/css-loader!../node_modules/less-loader/dist/cjs.js??ref--7-2!../node_modules/semantic-ui-less/semantic.less)
Module build failed (from ../node_modules/less-loader/dist/cjs.js):


@ribbonMargin: 1rem;
@ribbonOffset: ~"calc("-@ribbonMargin~" - "@ribbonTriangleSize~")";
^
Operation on an invalid type
      in [project root]/node_modules/semantic-ui-less/themes/default/elements/label.variables (line 133, column 0)
 @ ../node_modules/semantic-ui-less/semantic.less 2:14-102 21:1-42:3 22:19-107
 @ ./index.tsx
 @ multi babel-polyfill ./index.tsx

[haydar-can]

compatibility new less;

i found this but not test ;)

Path : themes/default/elements

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% + %S%S ",-@attachedHorizontalOffset * 2,")"));

filename:table.variables

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

[gaui]

I'm also getting this error. Is there a solution?

[krishaamer]

Same error here.

[Kovah]

If you are using Grunt (grunt-contrib-less) to compile Semantic for your project, downgrade the package to v1.4.1 if you are using v2.0.0.

"grunt-contrib-less": "^1.4.1",

[alvis]

Got the same headache here. Just hope Semantic-Org/Semantic-UI#6512 can be merged soon...

[carlosriveros]

if you remove the tildes ~ from the specific lines causing the errors. It will fix the issue.

[jlukic]

This is coming in patch today Semantic-Org/Semantic-UI#6512