Custom Element Document Styling and LESS/SASS

[Robert Stone]

I'm gradually adding polymer components to an existing application that makes heavy use of LESS files and have found a bit of a 'pain' point.

We have a LESS file that contains a lot of theme style declarations (colours, font sizes etc.), this file is then included in various other LESS files where necessary.

One of the polymer components I'm using is the progress bar, and I wish to change the 'active' colour to match a colour defined in one of our LESS files. Initially I did this the 'wrong' way by forcing the background colour of element used in the progress-bar to the value I want via standard LESS/CSS ie.

    paper-progress {
        #activeProgress {
            background-color: @hilite-blue !important;
        }
    }

This worked OK, but obviously when Shadow DOM finally becomes the norm my custom styling would end up being broken.

I've now investigated styling it the 'correct' way using a custom style import (as described here https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-style). This works perfectly and should (I hope) be future proof.

The problem I have is that I now have to declare my style constants in two different places, the LESS file and the custom style .html file. This could cause maintenance issues if the colours aren't both changed at the same time.

What would be ideal is if there was a way of 'importing' CSS declarations into the custom styling file from an external resource. This would allow LESS/SASS to be used to create the CSS portion of the custom style file.

Any thoughts on this, or suggestions as to how integration with existing styling could be handled in a better way?

[Eric Bidelman]

Unfortunately, I don't the styling system supports this very well today. It would be a different story if we supported <style is="custom-style" href="file.css">. That way you could compile file.css with your sass/less variables and it would still

be processed by polymer's styling system on the client.

+Steve Orvell if he has ideas

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/993af31e-cb06-4e85-932c-eecc9c460c78%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Robert Stone]

Thanks Eric, yes I think being able to specify a 'src' attribute on the style element would help a lot.

At the moment I'm just including comments next to styles that are 'common' between the 2 systems to hint that they need to be changed in 2 places.

[Robert Stone]

Would it be worth me filing an enhancement request for this ?

On Wednesday, 12 August 2015 16:57:12 UTC+1, Eric Bidelman wrote:

[Eric Bidelman]

Possibly. I think this is on Steve's radar though. Waiting for him to give us the next move :)

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/1977ee33-760a-4b86-af08-f47fbb6f4f93%40googlegroups.com.