less4j icon indicating copy to clipboard operation
less4j copied to clipboard

Semantic UI produces bad output

Open Deraen opened this issue 6 years ago • 1 comments

Related: https://github.com/SomMeri/less4j/issues/295

Semantic-UI calls a mixing, which produces url @import, inside & block. Less.js hoists this import to top-level. Less4j leaves the import inside block and prints a warning.

Example:

// src/themes/default/globals/site.variables
@importGoogleFonts: true;

// theme.less
.loadFonts() when (@importGoogleFonts) {
  @import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin');
}

// semantic.less imports site.less inside & { ... }
// https://github.com/Semantic-Org/Semantic-UI/blob/f725b162e70896e38257965424ac7f9af486b927/src/semantic.less#L15

& {
  // src/definitions/site.less
  .loadFonts();
}

Test:

❯ lessc semantic.less
@import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin');

~/Source/less4j master*
❯ java -jar less4j-1.17.2.jar semantic.less
 {
  @import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin');
}
Warnings produced by compilation of semantic.less
WARNING 6:3 Compilation resulted in incorrect CSS. The IMPORT ended up inside a body of rule set located at 12:1.
 5: .loadFonts() when (@importGoogleFonts) {
 6:   @import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin');
 7: }

Deraen avatar Aug 05 '17 23:08 Deraen

Hello folks! I stumbled upon this one today, any update/workaround?

arichiardi avatar Nov 17 '17 21:11 arichiardi