SomMeri / less4j

Less language is an extension of css and less4j compiles it into regular css. Less adds several dynamic features into css: variables, expressions, nested rules, and so on. Less was designed to be compatible with css and any correct css file is also correct less file.
145 stars 47 forks source link

Semantic UI produces bad output #364

Open Deraen opened 6 years ago

Deraen commented 6 years ago

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: }
arichiardi commented 6 years ago

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