Only getting -webkit- properties from stylesheet instead of un-prefixed version

[willBMAS]

Hi,

Noticed an issue with the output .css file stripping all of the class vendor prefixes and only choosing the -webkit- version. Here is an example of what I keep getting:

My class pre critical task:

.flex-box { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

The class after critical task:

.flex-box{-webkit-box-orient:horizontal}

It doesn't seem to be just with flex box, this is the output for a transform:

Before critical task:

.current-menu-item a:after { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

After critical task :

.current-menu-item a:after{opacity:1;-webkit-transform:translateY(0)}

This is my Gruntfile:

module.exports = function(grunt) { var critical = grunt.file.readJSON('critical/critical.php'); var files = []; var options = {}; critical.pages.forEach(function(page) { options[page.name + 'Desktop'] = { options: { url: page.url, width: 1200, height: 900, outputfile: "critical/critical-"+ page.name +".css", filename: "style.css", buffer: 800_1024, ignoreConsole: true, forceInclude: ['.flex-box', '.flex-end'] } }; options[page.name + 'Mobile'] = { options: { url: page.url, width: 320, height: 500, outputfile: "critical/critical-"+ page.name +"-mobile.css", filename: "style.css", buffer: 800_1024, ignoreConsole: true, forceInclude: ['.flex-box', '.flex-end'] } }; files.push('critical/critical-'+page.name+'.css', 'critical/critical-'+page.name+'-mobile.css'); }); grunt.initConfig({ criticalcss: options, postcss: { options: { processors: [ require('autoprefixer')({browsers: 'last 6 versions'}), // add vendor prefixes require('cssnano')() // minify the result ] }, dist: { src: files } } }); grunt.loadNpmTasks('grunt-criticalcss'); grunt.loadNpmTasks('grunt-postcss'); grunt.registerTask('default', ['criticalcss', 'postcss']); };

(how can I format this properly? Using the code button made it all weird and minified)

I tried using the forceRequire to try and get phantomJS to ignore the style, but I keep getting the same output.

Am I missing something important here?

Thanks in advance for any help, I really enjoy using the plugin! :)

[jefflembeck]

Answering to let you know that this error makes sense (phantomjs is a webkit browser and is therefore not recognizing those attributes), and we're not quite sure how to fix it yet - but it is important to us so we will be looking into it as soon as we can.

[stuntdawg]

i just want to say i second this issue. i have it saving the output as a scss file and then codekit automatically runs autoprefixer. but with the current settings, autoprefixer doesn't do anything and just passes the css as is with the -webkit- prefixes and not the normal css properties.

[bookwyrm]

I ran into this also and am working around it with a bit of a brute force approach.

1. Use css to parse the CSS from criticalcss and generate an AST
2. Modify the generated AST to update any properties or values to remove -webkit- from the string (theoretically leaving me with unprefixed properties and values - there may be edge cases that results in broken CSS...)
3. Run this new (unprefixed) CSS through autoprefixer to get fully-prefixed CSS
4. (Optional) Use cssnano to minify the CSS before writing it to a file for inclusion in the HTML at build/delivery time.

FWIW I've got all 4 steps wrapped up into a single custom Grunt task.

[BB-000]

Any update on this?? Really annoying to have to add all these manually :(

The above solution is a good idea but still leaves broken css, for example removing -webkit- and re-prefixing means this rule would still not be prefixed properly

.row--aife { -webkit-box-align: end; align-items: flex-end; }

[BB-000]

Came across another slightly different one, that adds a new breaking rule..

This

 .animated_things {
    -webkit-animation-duration: 0.7s;
     animation-duration: 0.7s;
  }

Compiles to this

  .animated_things {
    -webkit-animation: 0.7s;
    -webkit-animation-duration: 0.7s;
    animation-duration: 0.7s;
  }

The new '-webkit-animation' stops the element from doing its actual animation. Why is it output? Is there a non-manual workaround? 'force exclude?'

Currently I'm stripping this out as part my 'regex-replace' task, pretty yukky