Add configuration to postcss in Sage 10

sage
,
1

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

2

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,
      }),
    ],
  });
3

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

1 Like
4

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,
  });
5

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

6

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

7

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

8

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?

9

yes

how can I check it?

10

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?

11

In production the styles looks visually wrong

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

12

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

https://github.com/postcss/postcss-calc/issues/107
https://github.com/postcss/postcss-calc/issues/91
https://github.com/postcss/postcss-calc/issues/77
https://github.com/postcss/postcss-calc/pull/116
https://github.com/NMFR/optimize-css-assets-webpack-plugin/issues/110
https://github.com/cssnano/cssnano/issues/628

13

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.
(How to migrate from laravel mix to pure Webpack? - Stack Overflow)

14

I solved with this:

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

Thanks anyway for the support :slight_smile:

1 Like
15

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

16

This topic was automatically closed after 42 days. New replies are no longer allowed.