8

From looking at a fresh install of Magento 2 (v2.1.8) I see from their Gruntfile.js and package.json files that Magento is using grunt-autoprefixer

  1. This is great, CSS autoprefixers are really useful. But I can't see how to use it with Magento's Gruntfile, does anyone have an idea how it works?
  2. Also, how would this work in production mode on a live environment? Doesn't Magento2 use use a PHP LESS compiler in production mode, while Grunt is just used for developing with.

Gruntfile.js

/**
 * Production preparation task.
 */
prod: function (component) {
    var tasks = [
        'less',
        'autoprefixer',
        'cssmin',
        'usebanner'
    ]

package.json

"devDependencies": {
    "glob": "^5.0.14",
    "grunt": "^0.4.5",
    "grunt-autoprefixer": "^2.0.0",

I ran grunt autoprefixer and it does not seem to work either.

$ grunt autoprefixer
Running "autoprefixer:setup" (autoprefixer) task
Autoprefixer's process() method is deprecated and will removed in next major release. Use postcss([autoprefixer]).process() instead
File setup/pub/styles/setup.css created.

Running "autoprefixer:updater" (autoprefixer) task
Warning: No source files were found. Use --force to continue.

Aborted due to warnings.


Execution Time (2017-10-29 11:12:01 UTC-0)
loading tasks               145ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 30%
loading grunt-autoprefixer  118ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 24%
autoprefixer:setup          216ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 45%
autoprefixer:updater          5ms  ▇▇ 1%
Total 485ms
4
+25
  1. Customize dev/tools/grunt/configs/autoprefixer.json and run grunt autoprefixer.
  2. You need to setup it manually in you the deployment pipeline, b/c there is no way to run Grunt tasks from Magento.
  • running grunt autoprefixer aborted with out completing with the message Autoprefixer's process() method is deprecated and will removed in next major release. Use postcss([autoprefixer]).process() instead. Which suggests that Magento does not support auto-prefixing at all? – Holly Oct 24 '17 at 21:04
  • Even if Grunt was setup to run in the deployment pipeline, it would not be reliable, if an admin user cleared the CSS cache. – Holly Oct 24 '17 at 21:05
  • Also, how is it possible to set up a grunt task in a .json file? Doesn't Grunt need to be set up in a .js file – Holly Oct 24 '17 at 21:10
  • 1. It works, that's just a deprecation warning. Few lines below you have an info about processed files. – igloczek Oct 25 '17 at 7:48
  • 2. Cache dosen't remove files in pub themes directory, so it's 100% safe. – igloczek Oct 25 '17 at 7:50
4

Please perform above changes, I hope it will work out well.

package.json

{
  "name": "Project",
  "author": "Vendor",
  "description": "Node modules dependencies for local development",
  "version": "2.0.0",
  "license": "(OSL-3.0 OR AFL-3.0)",
  "repository": {
    "type": "git",
    "url": "https://github.com/magento/magento2.git"
  },
  "homepage": "http://magento.com/",
  "devDependencies": {
    "autoprefixer": "^7.1.1",
    "glob": "^5.0.14",
    "grunt": "^0.4.5",
    "grunt-banner": "^0.4.0",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-connect": "^0.9.0",
    "grunt-contrib-cssmin": "^0.10.0",
    "grunt-contrib-imagemin": "^0.9.2",
    "grunt-contrib-jasmine": "^0.8.1",
    "grunt-contrib-less": "^0.12.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-eslint": "17.3.1",
    "grunt-exec": "^0.4.6",
    "grunt-jscs": "2.2.0",
    "grunt-postcss": "^0.8.0",
    "grunt-replace": "^0.9.2",
    "grunt-styledocco": "^0.1.4",
    "grunt-template-jasmine-requirejs": "^0.2.3",
    "grunt-text-replace": "^0.4.0",
    "imagemin-svgo": "^4.0.1",
    "load-grunt-config": "^0.16.0",
    "morgan": "^1.5.0",
    "node-minify": "^1.0.1",
    "path": "^0.11.14",
    "serve-static": "^1.7.1",
    "strip-json-comments": "^1.0.2",
    "time-grunt": "^1.0.0",
    "underscore": "^1.7.0"
  },
  "engines": {
    "node": ">=0.10.0"
  }
}

postcss.js

/**
 * PostCSS autoprefixer initialisation
 *
 * Docs: https://github.com/postcss/autoprefixer
 * Config: dev/tools/grunt/configs/postcss.json
 * Usage: grunt autoprefixer:themename [--verbose] [--debug]
 * To do: load src from themes.js
 *
 * @param grunt
 */

module.exports = function(grunt) {
    grunt.loadNpmTasks('grunt-postcss');

    grunt.registerTask('autoprefixer', function (target) {
        var currentTarget = target || 'dist';

        /*** configuration tweaks ***/
        var config = grunt.config.get('postcss');

        // set 'processors' options (not possible to set function in json config)
        config['options'].processors = [require('autoprefixer')({browsers: ['last 2 versions']})];

        // apply theme source and destination dynamically
        if (target) {
            config[target] = {
                src: ['pub/static/frontend/*/'+target+'/*/css/*.css']
            };
        }
        grunt.config.set('postcss', config);

        grunt.option('force', true);
        grunt.task.run('postcss:'+currentTarget);
    });
};

postcss.json

{
    "options": {
        "map": true
    },
    "dist": {
      "src": ["pub/static/frontend/*/*/*/css/*.css"]
    }
}

After setup above files, run grunt autoprefixer

  • You should submit this as a PR to the core, replacing current outdated setup – igloczek Oct 25 '17 at 7:52
0

To be really clear for everyone: postcss.js & postcss.json - go in /dev/tools/grunt/configs package.json - in the website root - just check it includes autoprefixer under devDependencies

Once done run exec / less / watch / setup in the usual way.

Then access your website in a browser to create the CSS cache files.

then, run: grunt autoprefixer

this will check the resulting css files and add -webkit- and other browser support

This is a good fix for development but I have not found a way to use this in production.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.