Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "RPAREN".

[luckylooke]

Hello,

I am getting following error:

 ERROR  Error: CSS minification error: Parse error on line 1: 
...--ws-input-height-md, calc(54px + calc(var(--ws-thick-line, 1px) * 2))) * 0.685...
------------------------------------------------------------------------^
Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "RPAREN". File: css/app.02c38798.css
Error: CSS minification error: Parse error on line 1: 
...--ws-input-height-md, calc(54px + calc(var(--ws-thick-line, 1px) * 2))) * 0.685...
------------------------------------------------------------------------^
Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "RPAREN". File: css/app.02c38798.css
    at /mnt/AA36F40936F3D473/projects/cart-client/node_modules/@intervolga/optimize-cssnano-plugin/index.js:106:21
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Promise.all (index 0)

the CSS is perfectly fine, running locally, it generates valid CSS rules, but your minificator, preinstalled by Vue CLI cannot handle same code 🤷‍♂️

Any idea? Thanks

I have made temporary fix.. to save calculation result into temporary value

// $ws-input-height-xl: var(--ws-input-height-xl, calc(93px + #{$ws-thick-line-twice})) !default;
// $ws-input-height-md: var(--ws-input-height-md, calc(54px + #{$ws-thick-line-twice})) !default;
// $ws-input-height-sm: var(--ws-input-height-sm, calc(36px + #{$ws-thick-line-twice})) !default;

:root {
  --ws-tmp1: calc(93px + var(--ws-thick-line-twice));
  --ws-tmp2: calc(54px + var(--ws-thick-line-twice));
  --ws-tmp3: calc(36px + var(--ws-thick-line-twice));
}

$ws-input-height-xl: var(--ws-input-height-xl, var(--ws-tmp1)) !default;
$ws-input-height-md: var(--ws-input-height-md, var(--ws-tmp2)) !default;
$ws-input-height-sm: var(--ws-input-height-sm, var(--ws-tmp3)) !default;

[REInVent650]

I too have just gotten a similar error, would really appreciate a fix

If I remove my styles from my component then it works

[REInVent650]

ERROR Error: CSS minification error: Parse error on line 1:
50% - calc(1em / 2) calc(1em /...
--------------------^
Expecting end of input, "RPAREN", "ADD", "SUB", "MUL", "DIV", got unexpected "CALC". File: css/app.0c0d97c7.css
Error: CSS minification error: Parse error on line 1:
50% - calc(1em / 2) calc(1em /...
--------------------^
Expecting end of input, "RPAREN", "ADD", "SUB", "MUL", "DIV", got unexpected "CALC". File: css/app.0c0d97c7.css
at C:\Users\User\Documents\vue\myproject\node_modules@intervolga\optimize-cssnano-plugin\index.js:106:21
at async Promise.all (index 0)

[nailuox]

cssnano/cssnano#894

config.when(process.env.NODE_ENV === 'production', config => {
config.plugin('optimize-css').tap(args => {
args[0].cssnanoOptions = {
preset: [
'default',
{
calc: false, // 主要是这里, 另外cssnano 4.x.x中在计算时为0px -> 0,单位没了，可以将0px设置成0.01px
autoprefixer: { disable: true },
mergeLonghand: false,
cssDeclarationSorter: false
}
]
}
return args
})
})