All parentheses in calc()s being ignored in CSS

[akselinurmio]

Description

In CSS nested calc() functions must be treated as simple parentheses.^MDN In Gatsby, however all the parentheses are currently being dropped in the build process (gatsby build).

The issue persists even when the --no-uglify flag is used on gatsby build. Issue doesn't occur on development (gatsby develop).

Steps to reproduce

I wrote a small Gatsby project here that reproduces the issue. I have deployed the repo here.

Here's an outline of the reproducing process:

1. Add calc() or calculation in parentheses () in some calc() function in one of your CSS files.
2. Run gatsby build.
3. Inspect the production CSS and see that your parentheses or nested calc() are gone (and your beautiful layout too).

Expected result

Parentheses in calc() functions alter the computation order of calculations.

Actual result

Parentheses are dropped in Gatsby's production build process.

Environment

  System:
    OS: macOS 10.14.1
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.13.0 - ~/.nvm/versions/node/v10.13.0/bin/node
    npm: 6.4.1 - ~/.nvm/versions/node/v10.13.0/bin/npm
  Browsers:
    Chrome: 70.0.3538.77
    Firefox: 63.0.1
    Safari: 12.0.1
  npmPackages:
    gatsby: ^2.0.44 => 2.0.44 

[leimonio]

It seems there is an issue with the minification using optimize-css-assets-webpack-plugin.

EDIT:
cssnano is responsible for handling calc optimizations, by reducing its usage for better browser compatibility.

[gatsbot]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[akselinurmio]

No, this is not stale.

[marlonmarcello]

I just stumbled upon this same issue.
Did you find a work around @akselinurmio ?

[gtsop]

@marlonmarcello

After a longer than usual debugging session, I found this man's legendary post, enjoy:

https://www.eduard.work/adjust-css-minification-in-gatsby/

I'm reposting his solution here in the interest of future-proofing this resource:

exports.onCreateWebpackConfig = ({
  actions,
  stage,
  plugins,
  getConfig
}) => {
  // override config only during 
  // production JS & CSS build
  if (stage === 'build-javascript') {
    // get current webpack config
    const config = getConfig()
    // our new cssnano options
    // are still based on default preset
    const options = {
      cssProcessorPluginOptions: {
        preset: ['default',
          {
            discardComments: {
              removeAll: true
            },
            calc: false,
            reduceTransforms: false,
            minifySelectors: false
          }]
      }
    }
    // find CSS minimizer
    const minifyCssIndex = config.optimization.minimizer.findIndex(
      minimizer => minimizer.constructor.name ===
        'OptimizeCssAssetsWebpackPlugin'
    )
    // if found, overwrite existing CSS minimizer with the new one
    if (minifyCssIndex > -1) {
      config.optimization.minimizer[minifyCssIndex] =
        plugins.minifyCss(options)
    }
    // replace webpack config with the modified object
    actions.replaceWebpackConfig(config)
  }
}

Maybe we should see to actually make this modification on gatsby's webpack source:

gatsby/packages/gatsby/src/utils/webpack-utils.ts

Line 617 in 7b1a0f2

cssProcessorPluginOptions: {

(related issues on the interwebs: postcss/postcss-calc#91, cssnano/cssnano#628

[marlonmarcello]

You. I love you. ♥️

…

On Tue., Jul. 28, 2020, 12:39 p.m. George Tsopanoglou, < ***@***.***> wrote: @marlonmarcello <https://github.com/marlonmarcello> After a longer than usual debugging session, I found this man's legendary post, enjoy: https://www.eduard.work/adjust-css-minification-in-gatsby/ I'm reposting his solution here in the interest of future-proofing this resource: exports.onCreateWebpackConfig = ({ actions, stage, plugins, getConfig }) => { // override config only during // production JS & CSS build if (stage === 'build-javascript') { // get current webpack config const config = getConfig() // our new cssnano options // are still based on default preset const options = { cssProcessorPluginOptions: { preset: ['default', { discardComments: { removeAll: true }, calc: false, reduceTransforms: false, minifySelectors: false }] } } // find CSS minimizer const minifyCssIndex = config.optimization.minimizer.findIndex( minimizer => minimizer.constructor.name === 'OptimizeCssAssetsWebpackPlugin' ) // if found, overwrite existing CSS minimizer with the new one if (minifyCssIndex > -1) { config.optimization.minimizer[minifyCssIndex] = plugins.minifyCss(options) } // replace webpack config with the modified object actions.replaceWebpackConfig(config) } } Maybe we should see to actually make this modification on gatsby's weback source: https://github.com/gatsbyjs/gatsby/blob/7b1a0f29eb48f5d0b1848baa269c6764a76dc172/packages/gatsby/src/utils/webpack-utils.ts#L617 (related issues on the interwebs: postcss/postcss-calc#91 <postcss/postcss-calc#91>, cssnano/cssnano#628 <cssnano/cssnano#628> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#9858 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAO5UYAH7ZPKY7YJUU7L56TR54SOBANCNFSM4GDAO6NQ> .

[LekoArts]

Closing this as stale since in the meantime Gatsby v3 and updated related packages were released. Please try with the latest versions and if you still see this problem open a new bug report (it must include a minimal reproduction).