Roots Discourse

Add configuration to postcss in Sage 10

previously on sage 9 when I wanted to configure postcss I did so:

in postcss.config.js file:

const cssnanoConfig = {
  preset: ['default', { discardComments: { removeAll: true }, calc: false }],
};

module.exports = ({ file, options }) => {
  return {
    parser: options.enabled.optimize ? 'postcss-safe-parser' : undefined,
    plugins: {
      autoprefixer: true,
      cssnano: options.enabled.optimize ? cssnanoConfig : false,
    },
  };
};

Now on sage 10 which is the correct method to get the same result?
What I really need is to put calc: false

Sage 10 uses Laravel Mix to compose webpack configuration.

Example for adding and configuring the postcss-inline-svg PostCSS plugin:

mix
  .sass('resources/styles/app.scss', 'styles')
  // ...
  .options({
    postCss: [
      require('postcss-inline-svg')({
        removeFill: true,
      }),
    ],
  });

Mix supports using a postcss.config.js file: https://laravel-mix.com/docs/6.0/postcss#use-a-postcss-config-file

1 Like

I tried the following code but it doesn’t give me the expected result and instead on sage 9 worked correctly:

mix
  .sass('resources/styles/app.scss', 'styles')
  .sass('resources/styles/editor.scss', 'styles')
  .options({
    postCss: [
      require('cssnano')({
        preset: ['default', {discardComments: {removeAll: true}, calc: false}],
      }),
    ],
    processCssUrls: false,
  });

@alwaysblank: That’s a great hint, thanks.

@sirdoy: Do you get an error? Or is that plugin not used by PostCSS?

I have no errors.
cssnano and postcss-calc are in the yarn.lock so I think they’re used. I have to set “calc: false” that is the way cssnano uses to set the dependency postcss-calc to false.

I tried postcss.config.js but it doesn’t work and I have no errors

I noticed that my code works with yarn build but only in yarn build:production doesn’t works

Doesn’t work for production builds means that the transformations by postcss-calc are not applied to the production CSS file? Maybe the CSS minifier cssnano interferes with the result?

yes

how can I check it?

Do the applied production styles look the same in the browser (visually)?
Can you disable cssnano for the production build to exclude it as a possible cause?

In production the styles looks visually wrong

I have to use the cssnano options of yarn build also in yarn build:production

Same problem here.
I have to disable postcss-calc because in production makes wrong calc (see the reported bug below). In Sage 9 I did it as @sirdoy said but in Sage 10 I can’t. How can do the same?
Or how can remove postcss-calc at all from Sage 10?

Bug: cssnano -> postcss-calc compiling in production
doesn’t keep parenthesis inside some calc() with css variables







You can dump the whole generated webpack configuration object and find out where exactly postcss-calc is added/kept by Laravel Mix. Then you can use a Laravel Mix hook/method to remove it from the configuration object.

With recent laravel-mix you just need to invoke mix.dump() (in the webpack.mix.js script.
(https://stackoverflow.com/a/66825768/4150808)

I solved with this:

mix.options({
  processCssUrls: false,
  cssNano: {calc: false}
});

Thanks anyway for the support :slight_smile:

1 Like

So indeed cssnano was interfering and it actually hadn’t been an issue with webpack.