Invalid CSS generated from scaffolding.less and components.less

[tschaub]

I'm having trouble generating valid CSS from scaffolding.less and components.less. Here's a test.less that demonstrates the problem:

@import "src/less/scaffolding.less";
@import "src/less/components.less";

Compiling this with less@2.1.1 doesn't generate valid CSS. It looks like there are issues with the lesshat mixin. Here's a snippet that generates parsing errors:

.mui-flat-button .mui-flat-button-ripple.mui-is-visible lesshat-selector {
  -lh-property: 0; } 
@-webkit-keyframes flat-button-ripple-click{ 0% { background-color: rgba(0, 0, 0, 0); } 50% { background-color: rgba(0, 0, 0, 0.1); }  100% { width: 150px; height: 150px; background-color: rgba(0, 0, 0, 0); }}
@-moz-keyframes flat-button-ripple-click{ 0% { background-color: rgba(0, 0, 0, 0); } 50% { background-color: rgba(0, 0, 0, 0.1); }  100% { width: 150px; height: 150px; background-color: rgba(0, 0, 0, 0); }}
@-o-keyframes flat-button-ripple-click{ 0% { background-color: rgba(0, 0, 0, 0); } 50% { background-color: rgba(0, 0, 0, 0.1); }  100% { width: 150px; height: 150px; background-color: rgba(0, 0, 0, 0); }}
@keyframes flat-button-ripple-click{ 0% { background-color: rgba(0, 0, 0, 0); } 50% { background-color: rgba(0, 0, 0, 0.1); }  100% { width: 150px; height: 150px; background-color: rgba(0, 0, 0, 0); };
}

On the final @keyframes, there is a semicolon inserted before the closing brace.

[tschaub]

This looks like an unresolved issue with lesshat (madebysource/lesshat#129).

[plainspace]

+1

[gpbl]

Lesshat is 100% skippable when using autoprefixer. @hai-cea any plan to get rid of lesshat? :-)

[hai-cea]

Yeh, this is not good. :)

Autoprefixer sounds like a good idea. Anyone have objections to this?

[Webkadabra]

Possibly related bug: #176
I've been able to pin=point error to .lh-keyframes

[hai-cea]

Lesshat dependency has been removed: bb7a029

Thanks for the tip with using an autoprefixer - I think it's much cleaner.

[tschaub]

Thanks for the fix @hai-cea.