3

We are using postcss with cssnano and autoprefixer. My problem is that postcss does not use the "grid: autoplace" in my postcss.config.js.

This is my postcss.config.js:

const cssnano = require('cssnano');
const mqpacker = require('css-mqpacker');
const postcssPresetEnv = require('postcss-preset-env');

module.exports = (ctx) => ({
  map: ctx.options.map,
  parser: false,
  plugins: [
    postcssPresetEnv(),
    mqpacker({ sort: true }),
    cssnano({
      preset: [
        'advanced',
        {
          autoprefixer: {
            add: true,
            grid: 'autoplace',
          },
          reduceIdents: false,
          zindex: false,
        },
      ],
    }),
  ],
});

On the other hand, when I add /* autoprefixer grid: autoplace */ to my css file and run:

postcss ./dist/*.css --verbose > test.css

Postcss uses grid and adds the -ms prefixes. Why is it ignoring the property in the config file?

W4ldi
  • 644
  • 5
  • 11
  • I have the same problem, did you find a solution? – electrotype Apr 24 '19 at 16:16
  • 1
    @electrotype I found a solution, but unfortunately I can't check it out, because I don't work at this company anymore. As far as I remember it had something to do with using poscss and cssnano. I think if you remove postcss or change the order of the plugins, you might find a working solution. – W4ldi Apr 29 '19 at 08:19
  • 1
    @electrotype also maybe something that helps: postcssPresetEnv also accepts options: postcssPresetEnv({ autoprefixer: { grid: true } }) I think the issue is, that both these plugins use autoprefixer and that something conflicts there. – W4ldi Apr 29 '19 at 08:22
  • Thanks for the reply, it's appreciated! I (very) quickly checked the source code of `postcss` and I think it doesn't manage "autoplace" *at all* from the configs. You have to use the comments to use it! But I may be wrong and I guess I should create a proper issue. I'm also on something else, sadly. – electrotype Apr 29 '19 at 10:12
  • @electrotype i'm not sure about postcss itself, but postcss-preset-env does handle autoprefixer: https://www.npmjs.com/package/postcss-preset-env#autoprefixer – W4ldi Apr 29 '19 at 15:12
  • 1
    In case it helps somebody one day: `autoplace` as an option *does work* using `postcss` with the `autoprefixer` plugin. The problem in my case was that `postcss` was not able to find the `autoprefixer` library even if it was installed globally! Two solutions worked for me: 1. Installing `autoprefixer` *in the working directory* when executing `postcss` **or** 2. Adding the node global root to `module.paths.push(HERE)` in `module.exports` of `postcss.config.js`! You can find this root dir with `npm root -g`. I think my node installation is messed up. – electrotype May 03 '19 at 22:16

0 Answers0