Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

calc() breaks when using 3+ variable fallbacks #104

Open
dgp1130 opened this issue Mar 12, 2020 · 5 comments
Open

calc() breaks when using 3+ variable fallbacks #104

dgp1130 opened this issue Mar 12, 2020 · 5 comments
Labels
bad-parser postcss-calc fails to parse the input bug

Comments

@dgp1130
Copy link

dgp1130 commented Mar 12, 2020

From downstream issue cssnano/cssnano#880 which is from downstream issue angular/angular-cli#16910.

Using a calc() command with 3+ variable fallbacks seems to break the parser.

For example, paste the following code into the CSS Nano playground (which I'm told uses postcss-calc via cssnano-preset-default:

.some-rule-lg {
  --width-lg: 1px;
  --width-md: 2px;
  --width-sm: 3px;
  --offset-lg: 4px;
  --offset-md: 5px;
  --offset-sm: 6px;
  width: calc(var(--width-lg, var(--width-md, var(--width-sm, 0))) + var(--offset-lg, var(--offset-md, var(--offset-sm, 0))));
}

Then look at the JavaScript console and see:

"Parse error on line 1: 
var(--width-lg, var(--width-md, var(--width-sm, 0))) + var(--...
---------------------------------------------------^
Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "RPAREN""

Work around is to use intermediary variables:

.some-rule-lg {
  --width-lg: 1px;
  --width-md: 2px;
  --width-sm: 3px;
  --offset-lg: 4px;
  --offset-md: 5px;
  --offset-sm: 6px;

  --temp-calc1: var(--width-lg, var(--width-md, var(--width-sm, 0)));
  --temp-calc2: var(--offset-lg, var(--offset-md, var(--offset-sm, 0)));
  width: calc(var(--temp-calc1) + var(--temp-calc2));
}
@Semigradsky
Copy link
Member

The same issue: #77

@chrsalbert
Copy link

Seems to be still an issue. But the workaround works for me!
Will it get fixed soon?

@ludofischer ludofischer added the bad-parser postcss-calc fails to parse the input label Jan 9, 2022
@dzcpy
Copy link

dzcpy commented Feb 7, 2022

Any updates?

@ludofischer
Copy link
Collaborator

Any updates?

Since #137 it should just warn instead of crashing. Does is still crash for you? The underlying problem is that the parser is incomplete, but to fix it we would need to duplicate the code that's already in the existing parsers (postcss-value-parser and postcss-selector-parser) so I would prefer to find a way to refactor so we don't parse multiple times (currently postcss-calc does parse -> stringify -> parse -> stringify)

@maranomynet
Copy link

maranomynet commented Oct 13, 2022

This was also reported in #119 (I'm closing that one as duplicate)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bad-parser postcss-calc fails to parse the input bug
Projects
None yet
Development

No branches or pull requests

6 participants