Plugging in CSS preprocessor in component files

[p3k]

What would be the best way to enable CSS dialects like LESS or SASS in a component file’s <style> element?

Example (LESS):

<div class='foo'>Hello, World!</div>

<style>
  @color: yellow;

  .foo {
    background-color: @color;
  }
</style>

The content’s of the <style> element should then be compiled to this (and then of course further processed as scoped component CSS):

.foo {
  background-color: yellow;
}

[fskreuz]

With the tools we currently have, rcu should be able to facilitate this. rcu.parse is the function you're looking for. It extracts the templates (pre-parsed), styles and scripts (both untouched) from the component file. You can then compile the styles and use the compiled output for the component css.

Tools like ractiveify have already attempted to do this. It does this by adding type on <style> and <script> to tell the tool that the contents of <style> and <script> aren't vanilla CSS and JS.

[p3k]

Thanks for the pointer to ractiveify! That looks exactly like what I am looking for 😺