New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inline CSS Prefixer #325

Closed
Tanbouz opened this Issue Aug 23, 2015 · 3 comments

Comments

Projects
None yet
4 participants
@Tanbouz

Tanbouz commented Aug 23, 2015

From what I understand the Polymeric way is including styles inline in elements. However, it seems the included autoprefixer in the gulp file isn't processing inline css. Shouldn't an inline prefixer be included?

@addyosmani

This comment has been minimized.

Show comment
Hide comment
@addyosmani

addyosmani Aug 27, 2015

Member

This is a good point. With our increasing move towards in-import styles, we really need to either figure out an inline prefixing solution or drop Autoprefixer. https://github.com/RebelMail/html-autoprefixer may be what we're looking for.

var htmlAutoprefixer = require("html-autoprefixer");
var htmlString = "<html><head><style>:fullscreen a { transition: transform 1s; }</style></head><body><h1 style='font-feature-settings: \"liga\", \"dlig\";'>Hello</h1><my-element></my-element></body></html>";

var prefixed = htmlAutoprefixer.process(htmlString);

It would be awesome if we could find someone to explore how well this works in practice. My current concerns are how well this setup might work with CSS custom properties in Polymer stylesheets and whether it causes the tool to choke or it's able to work fine here.

Member

addyosmani commented Aug 27, 2015

This is a good point. With our increasing move towards in-import styles, we really need to either figure out an inline prefixing solution or drop Autoprefixer. https://github.com/RebelMail/html-autoprefixer may be what we're looking for.

var htmlAutoprefixer = require("html-autoprefixer");
var htmlString = "<html><head><style>:fullscreen a { transition: transform 1s; }</style></head><body><h1 style='font-feature-settings: \"liga\", \"dlig\";'>Hello</h1><my-element></my-element></body></html>";

var prefixed = htmlAutoprefixer.process(htmlString);

It would be awesome if we could find someone to explore how well this works in practice. My current concerns are how well this setup might work with CSS custom properties in Polymer stylesheets and whether it causes the tool to choke or it's able to work fine here.

@addyosmani

This comment has been minimized.

Show comment
Hide comment
@addyosmani

addyosmani Aug 27, 2015

Member

This is the only Polymer project I was able to find using it. Unfortunately it's using Brocolli and Ember in the mix too: https://github.com/pk4media/ember-cli-polymer-toolchain/blob/3c614b6420b6a8116f4571a302826a5a634542d5/index.js

Member

addyosmani commented Aug 27, 2015

This is the only Polymer project I was able to find using it. Unfortunately it's using Brocolli and Ember in the mix too: https://github.com/pk4media/ember-cli-polymer-toolchain/blob/3c614b6420b6a8116f4571a302826a5a634542d5/index.js

@robdodson

This comment has been minimized.

Show comment
Hide comment
@robdodson

robdodson Aug 27, 2016

Contributor

Closing this as a PSK issue. You should be able to add autoprefixr to inline CSS using the new Custom Build project https://github.com/PolymerElements/generator-polymer-init-custom-build

Contributor

robdodson commented Aug 27, 2016

Closing this as a PSK issue. You should be able to add autoprefixr to inline CSS using the new Custom Build project https://github.com/PolymerElements/generator-polymer-init-custom-build

@robdodson robdodson closed this Aug 27, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment