CODEWITHSUNDEEP
javascripthtmlcssweb-applicationspolymer
bitpshr
bitpshr

Reputation: 1063

Why is polymer preprocessing my CSS?

When using Polymer with using Chrome version 34.0.1847.116 I notice that my CSS rules are being preprocessed in some way. For example:

background: url(...) 50% 50%;

becomes

background-image: url(...);
background-position:  50% 50%;
...

Is this the result of the polyfill? Is there any way around this?

Upvotes: 2

Views: 536

Answers (1)

ebidel
ebidel

Reputation: 24109

Polymer processes stylesheets and <style> inside a <polymer-element> in order to shim styles for the Shadow DOM polyfill to work. Under native Shadow DOM, they won't be touched.

Polymer's shimmer uses the CSSOM to fix-up and adjust styles. I suspect what you're seeing is the result of that process.

BTW, if you know for a fact, the styles inside the sheet don't use any shadow dom features, you can add the no-shim attribute to tell Polymer to leave the contents alone:

<link rel="stylesheet"  href="main.css" no-shim>

Docs:

Upvotes: 3

Related Questions