CODEWITHSUNDEEP
htmlcsssasspolymerweb-component
Tony Bogdanov
Tony Bogdanov

Reputation: 7686

Shared styles and external stylesheets in Polymer 1.1

I've read the new style modules recommendation in Polymer 1.1 and it works beautifully.

My issue here, again, as with the old approach is how could I move all my CSS to a CSS file and not just place it between a <style> tag in the HTML?

Here's an example.

I have a custom <ot-subscribe> element that looks like this:

<dom-module id="ot-subscribe">
    <template>
        <style>
            paper-input {
                --paper-input-container-underline: {
                    display: none;
                };
                --paper-input-container-underline-focus: {
                    display: none;
                };
            }
        </style>
        <form is="iron-form">
            <paper-input placeholder="{{labelPlaceholder}}" no-label-float></paper-input>
            <ot-button submit class="button-secondary">{{labelSubscribe}}</ot-button>
        </form>
    </template>
</dom-module>

As you can see I have a paper-input for which I want to hide the underlines.

This example works just fine.

Now, I need to move that CSS in an external CSS file, but keep it all working exactly the same. So the final markup would look something like this (I've added comments to explain the different approaches I've tried).

<dom-module id="ot-subscribe">
    <template>
        <!-- Both of these have absolutely no effect -->
        <style type="text/css" src="external.css"></style>
        <style src="external.css"></style>

        <!-- This DOES work, however only for regular CSS, no custom properties or mixins would work -->
        <!-- Also, it's deprecated: https://www.polymer-project.org/1.0/docs/devguide/styling.html#external-stylesheets -->
        <link rel="import" type="css" src="external.css">

        <!-- Using a style module DOES work, however we're just moving the issue, not solving it, since the CSS must still be in the HTML not in an external CSS file -->
        <style include="shared"></style>

        <form is="iron-form">
            <paper-input placeholder="{{labelPlaceholder}}" no-label-float></paper-input>
            <ot-button submit class="button-secondary">{{labelSubscribe}}</ot-button>
        </form>
    </template>
</dom-module>

Why do I need this? One word: Sass.

Has anyone else ever encountered this issue? Has anyone found a solution?

Or to summarize my question, how the heck does one use Sass with Polymer?

Upvotes: 4

Views: 799

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657288

As far as I know this is not supported. There are tools available that create style-modules from CSS files automatically though.

https://github.com/Polymer/polymer/issues/2429

Upvotes: 3

Related Questions