search

postcss / autoprefixer

Parse CSS and add vendor prefixes to rules by Can I Use
https://twitter.com/autoprefixer
MIT License
21.73k stars 1.26k forks source link

Difference between the Autoprefixer tool and online version #1006

Closed alucardu closed 6 years ago

alucardu commented 6 years ago

If I run this code: 

    #grid-wrapper {
        height: 100vh;
        display: grid;
        grid-template-areas: 
            "header header header" 66px
            "subheader subheader subheader" 55px
            "left main right" auto / 18.75% auto 25%;
    }

    header {
        grid-area: header;
        display: grid;    
        grid-template: 
            "logo searchbar hamburgermenu" auto / 18.75% auto 25%;
    }

This is the conversion:

    #grid-wrapper {
        height: 100vh;
        display: -ms-grid;
        display: grid;
            grid-template-areas: 
            "header header header" 66px
            "subheader subheader subheader" 55px
            "left main right" auto / 18.75% auto 25%;
    }

    header {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 3;
        grid-area: header;
        display: -ms-grid;
        display: grid;    
        grid-template: 
            "logo searchbar hamburgermenu" auto / 18.75% auto 25%;
    }

As you can see the conversion added the row, column and span properties to the header element.

When I run the same code through the Autoprefixer tool I get:

    #grid-wrapper {
        height: 100vh;
        display: -ms-grid;
        display: grid;
        grid-template-areas: 
            "header header header" 66px
            "subheader subheader subheader" 55px
            "left main right" auto / 18.75% auto 25%;
    }

    header {
        grid-area: header;
        display: -ms-grid;
        display: grid;    
        grid-template: 
            "logo searchbar hamburgermenu" auto / 18.75% auto 25%;
    }

As you can see I'm missing the row, column and span properties on the header element that the online tool did process.

ai commented 6 years ago

You need to enable Grid support by grid: true option.

Open a issue in Autoprefixer online repository. It is not official website, I can't safe opinion there, sorry.

alucardu commented 6 years ago

As you can see in the converted CSS it does add certain ms properties suchs as display -ms-grid.

ai commented 6 years ago

Oops. Check that you use latest version of Autoprefixer.

alucardu commented 6 years ago

I'm using Autoprefixer 8.1.0. I guess the grid-template-areas property is not working correctly in the Autoprefixer.

ai commented 6 years ago

Strange. It should work.

I will try to run it on my machine. Try to be sure, that you use Autoprefixer correctly. Maybe somewhere you have old Autoprefixer. Try npm ls.

alucardu commented 6 years ago

I couldn't find my Autoprefix in the npm ls, so I installed and saved it to my package file. Now when I run postcss -w default.css -w default.css --use autoprefixer --output build/default.css to watch and process my default.css file I don't get any grid changes. So it looks like grid is still disabled. I'm expecting the error being the reference to the postcss.config.js file.

ai commented 6 years ago

Show me your configs

alucardu commented 6 years ago 
module.exports = {
    plugins: [
      require('autoprefixer')({grid: true})
    ]
}

The postcss.config.js file is in the root of the project. But I'm wondering how would postcss know where to look the config file? Or should I run the CLI command from the folder that has the postcss.config.js?

ai commented 6 years ago

postcss-cli just check every folder in CSS file path

ai commented 6 years ago

Show me also package.json

alucardu commented 6 years ago 
{
  "name": "***",
  "version": "1.0.0",
  "description": "*** UI",
  "author": "",
  "license": "ISC",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server --progress --colors --open --hot --inline --config webpack.dev.js --content-base src/",
    "build": "webpack --progress --colors -p --config webpack.prod.js"
  },
  "repository": {
    "type": "git",
    "url": "https://***.visualstudio.com/DefaultCollection/***/_git/***"
  },
  "dependencies": {
    "angular": "1.5.11",
    "angular-animate": "~1.5.0",
    "angular-aria": "~1.5.0",
    "angular-click-outside": "git://github.com/IamAdamJowett/angular-click-outside.git#v2.10.2",
    "angular-cookies": "~1.5.0",
    "angular-file-upload": "~2.3.1",
    "angular-focus-on": "git://github.com/kfuchs/angular-focus-on.git#0.10.0",
    "angular-i18n": "~1.5.0",
    "angular-material": "~1.1.5",
    "angular-moment": "~1.0.1",
    "angular-perfect-scrollbar": "git://github.com/itsdrewmiller/angular-perfect-scrollbar.git#v0.1.0",
    "angular-resource": "~1.5.0",
    "angular-sanitize": "~1.5.0",
    "angular-strap": "~2.1.2",
    "angular-touch": "~1.5.0",
    "angular-ui-bootstrap": "~2.5.0",
    "angular-ui-router": "~0.4.2",
    "angular-ui-router-uib-modal": "~0.0.11",
    "angular-ui-select2": "~0.0.5",
    "angular-ui-sortable": "~0.13.4",
    "angular-ui-tinymce": "~0.0.16",
    "angular-ui-tree": "~2.15.0",
    "angular-uuid2": "git://github.com/MBehtemam/angular-uuid.git",
    "angular-validator": "git://github.com/kelp404/angular-validator.git#0.2.6",
    "angular-webstorage": "git://github.com/fredricrylander/angular-webstorage.git#v0.14.0",
    "autoprefixer": "^8.1.0",
    "backbone": "~1.2.1",
    "bootstrap": "~3.3.7",
    "datejs_original": "git://github.com/dimko1/datejs-bower.git",
    "emojione": "~3.1.2",
    "gsap": "~1.20.2",
    "immutable": "~3.7.3",
    "jasmine": "2.8.0",
    "jquery": "~2.2.4",
    "jquery-ui-dist": "~1.12.1",
    "jquery.easing": "1.3.1",
    "jquery.formatDateTime": "git://github.com/agschwender/jquery.formatDateTime.git#1.0.11",
    "lodash": "3.10.1",
    "moment": "~2.18.1",
    "ng-file-upload": "^12.2.13",
    "ng-material-datetimepicker": "^1.11.0",
    "ng-resize": "~1.3.0",
    "ngUpload": "0.5.21",
    "notify.js": "git://github.com/alexgibson/notify.js.git#v1.3.0",
    "numericjs": "1.2.6",
    "openlayers": "~3.15.1",
    "pdfjs-dist": "~1.5.0",
    "perfect-scrollbar": "^0.8.1",
    "rx-lite": "^4.0.8",
    "select2": "~3.5.1",
    "signalr": "~2.2.2",
    "tinymce": "~4.3.12",
    "tinymce-i18n": "~17.8.5",
    "toastr": "~2.1.2",
    "visibilityjs": "1.2.3",
    "webpack-bundle-analyzer": "^2.10.0",
    "webpack-server": "^0.1.2"
  },
  "devDependencies": {
    "appcache-webpack-plugin": "^1.3.0",
    "clean-webpack-plugin": "0.1.16",
    "copy-webpack-plugin": "4.0.1",
    "css-loader": "0.28.0",
    "extract-text-webpack-plugin": "~2.0.0",
    "file-loader": "~0.11.0",
    "image-webpack-loader": "~3.0.0",
    "imports-loader": "~0.7.0",
    "less": "~2.1.0",
    "less-loader": "~2.0.0",
    "postcss-loader": "^2.1.1",
    "script-loader": "~0.7.0",
    "source-map-loader": "~0.2.1",
    "style-loader": "~0.18.0",
    "ts-loader": "~2.3.7",
    "typescript": "2.3.0",
    "uglifyjs-webpack-plugin": "0.4.6",
    "url-loader": "~0.5.0",
    "webpack": "^2.0.0",
    "webpack-dev-server": "^2.11.2",
    "webpack-merge": "~2.0.0"
  }
}
alucardu commented 6 years ago

Alright, looks like I figured it out. https://github.com/postcss/postcss-cli/issues/203#issuecomment-374228884. Using postcss default.css -o build/default.css -w works great. So it's not needed to specify that you are using autoprefix in the CLI since the postcss.config picks that up.