Search code examples
angularflexboxwebkitangular-clipostcss

Angular CLI removing prefixed CSS

I'm using @angular/[email protected].

Before building, i'm using gulp-postcss to autoprefix my CSS. It works a treat. Here's a sample of the CSS it creates (not minified for readability):

form.registration-form {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

Perfect! But when the CLI builds the app, the CSS created looks like this:

form.registration-form {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-flex:1;
    -ms-flex-positive:1;
    flex-grow:1;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap
}

Notice how HALF of it is missing!? :/

I'm baffled, any help and I'll be eternally grateful!

Cheers!

Solution

  • Angular cli's autoprefixer is using browserslist (https://github.com/ai/browserslist) to determine what prefixes you need in your css. You can add a browserslist property to your package.json file for browserslist to pick up what browsers you want to support

    "browserslist": [
   "> 1%",
   "last 2 versions"
]

    or you an add a .browserslistrc file to the root of your directory

    ### Supported Browsers

> 1%
last 2 versions

    Now autoprefixer will pick up what browsers you want to support and prefix accordingly. This is all outined in the angular cli doc (https://github.com/angular/angular-cli/wiki/stories-autoprefixer)

    In short, gulp-postcss & angular cli are supporting a different range of browsers, which results in the different css prefixes.