vaadin / sass-compiler

A Java Sass compiler implementation
53 stars 26 forks source link

Nested classes in combination with @extend generatess invalid css #21

Open ehhc opened 8 years ago

ehhc commented 8 years ago

Hi, i would like to compile the following scss:

.font-styles-font1 { text-transform: uppercase; font-family: Helvetica,sans-serif; } .nav-tabs { border-bottom: 0; & > li { @extend .font-styles-font1;
} }

i expteced it to generate the following css (according to the official SASS language definition it is valid):

.font-styles-font1, .nav-tabs > li { text-transform: uppercase; font-family: Helvetica,sans-serif; } .nav-tabs { border-bottom: 0; }

unfortunatly i get this css instead:

.font-styles-font1, > li { text-transform: uppercase; font-family: Helvetica, sans-serif; } .nav-tabs { border-bottom: 0; }

this css is NOT valid... there is a selector expected in front of the "> li"-token...

Any suggestions why this happens and how to fix it?

EDIT: I just noticed, that @extend in combination with nested classes allways leads to incorrect CSS. The following example illustrats this:

SASS:

.font-styles-sansbold { text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; } .alphabetical-list { li { @extend .font-styles-sansbold; display: inline-block; font-size: 1.333em; margin-right: 1em; } }

Expected CSS (please notice the selectors in the first row!):

.font-styles-sansbold, .alphabetical-list li { text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; } .alphabetical-list li { display: inline-block; font-size: 1.333em; margin-right: 1em; }

Falsly generated CSS:

.font-styles-sansbold, li { text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; } .alphabetical-list li { display: inline-block; font-size: 1.333em; margin-right: 1em; }

In the first row the .alphabetical-list class name selector is missing. Because of this ALL lis are uppercase etc. This is not intended!

msosa commented 8 years ago

+1 thought it was an issue with the gradle plugin I use to compile but I believe it is the compiler it is using https://github.com/kravemir/GradleSassPlugin/issues/5

kravemir commented 8 years ago

+1, I have encountered this problem, too. I also use this compiler in my gradle plugin.