lightningcss icon indicating copy to clipboard operation
lightningcss copied to clipboard

WIP: css variable calc minification

Open MoritzLoewenstein opened this issue 2 years ago • 2 comments

Trying to implement the following cases:

  1. calc with one argument, just keep inner token.
:root {
  --foo: calc(1px);
}

to

:root {
  --foo: 1px;
}



2. calc inside another calc, inner calc can be converted to parenthesis tokens.

:root {
  -foo: calc(1px + calc(1px + 2px));
}

to

:root {
  -foo: calc(1px + (1px + 2px));
}



3. simplify calc with multiple tokens of the same unit(px, deg etc)

:root {
  --foo: calc(1px + 2px);
}

to

:root {
  --foo: 3px;
}



4. simplify parenthesis expression with multiple tokens of the same unit(px, deg etc)

:root {
  --foo: calc(1px + (1px + 2px));
}

to

:root {
  --foo: calc(1px + 3px);
}



5. remove parenthesis around a single token inside a calc expression

:root {
  -foo: calc(1px + (3px));
}

to

:root {
  -foo: calc(1px + 3px);
}

MoritzLoewenstein avatar Jun 26 '23 21:06 MoritzLoewenstein

Is it possible to just take the logic from crate::values::calc and apply it to all properties? That would fix those cases.

KTibow avatar Oct 11 '23 22:10 KTibow

Possibly? If you want, you can try that approach, I was struggling to implement the more useful transforms because I dont have any rust experience anyways.

P.S.: Was also struggling with the general approach, how to make it "understand" the math expression without doing too much work.

MoritzLoewenstein avatar Oct 22 '23 18:10 MoritzLoewenstein