Skip to content
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

Autoprefixer blocks every other feature #9

Closed
designorant opened this issue Feb 17, 2015 · 2 comments · Fixed by #11
Closed

Autoprefixer blocks every other feature #9

designorant opened this issue Feb 17, 2015 · 2 comments · Fixed by #11

Comments

@designorant
Copy link
Contributor

I'm not sure whether it's related to #6 (likely not as I've tested it with the config provided in the README) or whether it was a bug in the pleeease used in grunt-pleeease but for some reason autoprefixer blocks the other pleeease goodies.

gruntfile.js
pleeease: {
    options: {
        autoprefixer: {
            'browsers': ['> 1%', 'Explorer >= 8'],
            'map': true
        },
        opacity: true,
        pseudoElements: true
    },
    dist: {
        files: [{
            expand: true,
            cwd: '<%= config.tmp %>/styles/',
            src: '{,*/}*.css',
            dest: '<%= config.tmp %>/styles/'
        }]
    }
}
style.scss
a::before {
    opacity: 0.5;
    transition: all .15s ease-out;
}
Result:
a::before {
    opacity: 0.5;
    -webkit-transition: all .15s ease-out;
            transition: all .15s ease-out;
}
Expected result:
a:before {
    opacity: 0.5;
    filter: alpha(opacity=50);
    -webkit-transition: all .15s ease-out;
            transition: all .15s ease-out;
}
Result without autoprefixer
a:before {
    opacity: 0.5;
    filter: alpha(opacity=50);
    transition: all .15s ease-out;
}
@iamvdo
Copy link
Collaborator

iamvdo commented Feb 18, 2015

It's actually a bug in Pleeease 2, fixed in Pleeease 3. This module has to be updated to use the latest version.

As a side note, the browsers key in autoprefixer automatically enables or disables other options, based on the caniuse database. So you don't need to add opacity: true nor pseudoElements: true because they are enabled as you ask for ie8 support. :)
You can try in http://pleeease.io/play by copy/pasting > 1%, Explorer >= 8 in Autoprefixer's field and enable/disable opacity, this will produce no effect.

@designorant
Copy link
Contributor Author

Yes, I meant pleeeeaee, not postcss.

Thanks for the tip! Great stuff!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants