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

[jrschumacher]

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]

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

[romainmenke]

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