Semantic UI produces bad output #364
Description
Related: #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: }