Gatsby: 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[bot]]

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:
https://github.com/gatsbyjs/gatsby/blob/7b1a0f29eb48f5d0b1848baa269c6764a76dc172/packages/gatsby/src/utils/webpack-utils.ts#L617

(related issues on the interwebs: https://github.com/postcss/postcss-calc/issues/91, https://github.com/cssnano/cssnano/issues/628

[marlonmarcello]

You.
I love you. ♥️

On Tue., Jul. 28, 2020, 12:39 p.m. George Tsopanoglou, <
[email protected]> 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
https://github.com/postcss/postcss-calc/issues/91, cssnano/cssnano#628
https://github.com/cssnano/cssnano/issues/628

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/9858#issuecomment-665237300,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAO5UYAH7ZPKY7YJUU7L56TR54SOBANCNFSM4GDAO6NQ
.