# Add configuration to postcss in Sage 10

**URL:** https://discourse.roots.io/t/add-configuration-to-postcss-in-sage-10/20542
**Category:** sage
**Tags:** webpack, sage10
**Created:** 2021-04-06T15:48:11Z
**Posts:** 15

## Post 1 by @sirdoy — 2021-04-06T15:48:11Z

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`

---

## Post 2 by @strarsis — 2021-04-06T15:58:22Z

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

---

## Post 3 by @alwaysblank — 2021-04-06T16:09:21Z

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

---

## Post 4 by @sirdoy — 2021-04-06T16:14:59Z

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

---

## Post 5 by @strarsis — 2021-04-06T16:27:58Z

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

---

## Post 6 by @strarsis — 2021-04-06T16:30:32Z

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

---

## Post 7 by @sirdoy — 2021-04-06T17:02:00Z

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**

---

## Post 8 by @strarsis — 2021-04-06T17:28:50Z

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?

---

## Post 9 by @sirdoy — 2021-04-06T17:34:52Z

> [@strarsis](#):
>
> Doesn’t work for production builds means that the transformations by `postcss-calc` are not applied to the production CSS file?

yes

> [@strarsis](#):
>
> Maybe the CSS minifier `cssnano` interferes with the result?

how can I check it?

---

## Post 10 by @strarsis — 2021-04-06T17:35:39Z

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?

---

## Post 11 by @sirdoy — 2021-04-06T17:40:05Z

> [@strarsis](#):
>
> Do the applied production styles look the same in the browser (visually)?

In production the styles looks visually wrong

> [@strarsis](#):
>
> Can you disable cssnano for the production build to exclude it as a possible cause?

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

---

## Post 12 by @dangelion — 2021-04-07T06:23:11Z

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/115>
>
> Source:
> 
> ```css
> :root {
> --fluid-min-width: 320;
> --fluid-max-width: …1140;
> --fluid-screen: 100vw;
> --fluid-bp: calc(
> (var(--fluid-screen) - ((var(--fluid-min-width) / 16) * 1rem)) /
> ((var(--fluid-max-width) / 16) - (var(--fluid-min-width) / 16))
> );
> }
> ```
> 
> 7.0.4 outputs:
> 
> ```css
> :root {
> --fluid-min-width: 320;
> --fluid-max-width: 1140;
> --fluid-screen: 100vw;
> --fluid-bp: calc(
> (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / 
> (var(--fluid-max-width) - var(--fluid-min-width)) / 16
> );
> }
> ```
> 
> The output should instead be:
> 
> ```css
> :root {
> --fluid-min-width: 320;
> --fluid-max-width: 1140;
> --fluid-screen: 100vw;
> --fluid-bp: calc(
> (var(--fluid-screen) - (var(--fluid-min-width) / 16) * 1rem)) / 
> ((var(--fluid-max-width) - var(--fluid-min-width)) / 16
> );
> }
> ```
> 
> postcss-calc is removing the necessary parentheses and affecting the operator precedence.

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

---

## Post 13 by @strarsis — 2021-04-07T15:11:57Z

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](https://stackoverflow.com/a/66825768/4150808))

---

## Post 14 by @dangelion — 2021-04-07T15:37:13Z

I solved with this:

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

Thanks anyway for the support :slight_smile:

> <https://github.com/roots/sage/issues/2668#issuecomment-814811463>
>
> Description
> I have to disable postcss-calc because in production makes wrong calc (see the reported bugs at the end).
> That library, I think,...

---

## Post 15 by @strarsis — 2021-04-07T16:22:19Z

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

---

## Post 16 by @system — 2021-05-18T15:48:13Z

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