search

postcss / postcss-custom-properties

Use Custom Properties in CSS
https://postcss.github.io/postcss-custom-properties
MIT License
597 stars 77 forks source link

Unable to parse font property when using font-size and line-height #225

Open jrschumacher opened 3 years ago

jrschumacher commented 3 years ago

Issue

When using variables like

:root {
  --vds-font-heading-xxs: normal normal bold normal var(--vds-font-size-heading-xxs)/var(--vds-line-height-heading-xxs) var(--vds-font-family-display);

  --vds-font-family-display: 'Raleway', Helvetica, Arial, sans-serif;
  --vds-font-scale-base: 1.6rem;
  --vds-font-scale-multiplier: 1.25;
  --vds-font-size-heading-xxs: var(--vds-font-scale-base);
  --vds-line-height-heading-xxs: 1.50;
}

an error will occur:

Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(1:1) Unknown word

> 1 | normal normal normal normal var(--vds-font-size-xs)/var(--vds-line-height-xs) var(--vds-font-family-body)
                                                                                    ^

Problem

The problem is with var(--vds-font-size-xs)/var(--vds-line-height-xs).

Workaround

Adding space between the variables and slash resolves the issue 

:root {
  --vds-font-heading-xxs: normal normal bold normal var(--vds-font-size-heading-xxs) / var(--vds-line-height-heading-xxs) var(--vds-font-family-display);
}
jrschumacher commented 3 years ago

This is actually an issue with shellscape/postcss-values-parser#121

romainmenke commented 2 years ago

This should be fixed as we switched to a different value parser.