Table Component throws error on bundling

[blabbath]

When using the Table Component in a Vue 3 project and running npm run build the following error occurs:

Error: CSS minification error: Parse error on line 1:
...ar(--cds-global-space-5, calc((8 / var(--cds-global-base, 20)) * 1rem)) / 2
------------------------------------------------------------------------^
Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "RPAREN". File: css/chunk-vendors.ff777c58.css

When I delete the styling for the compact table from @cds/core/table/table.css

table[cds-table~=compact] {
  --cell-padding: calc(var(--cds-global-space-5, calc((8 / var(--cds-global-base, 20)) * 1rem)) / 2) calc(var(--cds-global-space-6, calc((12 / var(--cds-global-base, 20)) * 1rem)) / 2);
}

and import the table.css the build process runs as expected.

Versions

Clarity project:

• [ x] Clarity Core
• Clarity Angular/UI

Clarity version:

• v3.x
• v4.x
• [ x] v5.x

Framework:

• Angular
• React
• [ x] Vue
• Other:

Framework version:
vue3

Device:

• Type: [e.g. Notebook]
• OS: [e.g. Windows 10]
• Browser [e.g. chrome]
• Version [e.g. 22]

[mathisscott]

@blabbath
We've seen some inquiries along these lines a little while back. It seems like cssnano and postcss-calc both have issues with calc() in CSS...

cssnano/cssnano#988

postcss/postcss-calc#91

The workaround is to configure cssnano to ignore calc() declarations...

  "cssnano": {
    "preset": [
      "default",
      {
        "calc": false
      }
    ]
  }

[mathisscott]

I'm not sure there's much we can do to fix this on our end... @hippee-lee , what are your thoughts on that?

[hippee-lee]

You are correct. The workaround to disable calc for postcss-calc is the most reliable way to deal with it. I've seen it crop up in multiple frameworks now. There are several issues open on the postcss-calc repo. Here is another from March 2019.

My recommendation, @blabbath is to disable postcss-calc for the build.

@mathisscott, One our end, we could revisit the usage of nested calc's (I believe thats what causes the error). However the last time I looked into it I didn't see an easy way to do the things we need to do in the style code without them.

[blabbath]

Thank you for your fast replies!
Where exactly would I change the cssnano configuration? I am using the vue-cli with a vue.config.js file.

[hippee-lee]

It's hard to say for sure but we build the website with vuepress. There is a config.js file where we can configure things at build time. If I had this issue that is where I would start by adding:

module.exports = {
    postcss: {
            plugins: {
                'cssnano': {
                    preset: [
                        "default",
                        {
                            "calc": false
                        }
                    ]
                }
            }
    }
}

In the one of the other issues I linked to, there is a comment about adding the override to the package.json file, so that might be an option also.

[mathisscott]

Here is that config file iirc

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.