Can't parse font property font-size/line-height syntax

[jrschumacher]

• Operating System (or Browser): MacOS
• Node Version: 12
• postcss-values-parser Version: 3.2.1

How Do We Reproduce?

require('postcss-values-parser').parse('var(--font-size)/var(--line-height)');

Example: font: normal normal normal var(--font-size)/var(--line-height) var(--font-family);

Expected Behavior

Parsed

Actual Behavior

/Users/ryan/Projects/postcss-values-parser/node_modules/postcss/lib/parser.js:563
    throw this.input.error('Unknown word', tokens[0][2], tokens[0][3]);
    ^

CssSyntaxError: <css input>:1:1: Unknown word
    at Input.error (/Users/ryan/Projects/postcss-values-parser/node_modules/postcss/lib/input.js:130:16)
    at ValuesParser.unknownWord (/Users/ryan/Projects/postcss-values-parser/node_modules/postcss/lib/parser.js:563:22)
    at ValuesParser.unknownWord (/Users/ryan/Projects/postcss-values-parser/lib/ValuesParser.js:196:15)
    at ValuesParser.other (/Users/ryan/Projects/postcss-values-parser/lib/ValuesParser.js:111:10)
    at ValuesParser.parse (/Users/ryan/Projects/postcss-values-parser/lib/ValuesParser.js:136:16)
    at Object.parse (/Users/ryan/Projects/postcss-values-parser/lib/index.js:21:12)
    at parse (/Users/ryan/Projects/postcss-values-parser/test.js:5:22)
    at Object.<anonymous> (/Users/ryan/Projects/postcss-values-parser/test.js:13:1)
    at Module._compile (internal/modules/cjs/loader.js:945:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:962:10) {
  name: 'CssSyntaxError',
  reason: 'Unknown word',
  source: 'var(--font-size)/var(--line-height)',
  line: 1,
  column: 1,
  input: { line: 1, column: 1, source: 'var(--font-size)/var(--line-height)' }

[jrschumacher]

Further investigation shows that when it detects the /var it is expecting to prepend the previous token (i.e. 10/var(--x)), but with the bracket it is prepending an empty string.

other [ 'word', 'var', 1, 1, 1, 3 ]
tokens [
  [ 'word', 'var', 1, 1, 1, 3 ],
  [ 'brackets', '(--font-size)', 1, 4, 1, 16 ],
  [ 'word', '/var', 1, 17, 1, 20 ],
  [ 'brackets', '(--line-height)', 1, 21, 1, 35 ]
]
other [ 'word', '--font-size', 1, 1, 1, 11 ]
tokens [ [ 'word', '--font-size', 1, 1, 1, 11 ] ]
other [ 'word', '/var', 1, 17, 1, 20 ]
tokens [
  [ 'word', '/var', 1, 17, 1, 20 ],
  [ 'brackets', '(--line-height)', 1, 21, 1, 35 ]
]
other [ 'word', '', 1, 1, 1, 4 ]
tokens [
  [ 'word', '', 1, 1, 1, 4 ],                                   <---- prepends empty string
  [ 'operator', '/', 1, 1, 1, 4 ],
  [ 'word', 'var', 1, 2, 1, 4 ],
  [ 'brackets', '(--line-height)', 1, 21, 1, 35 ]

While xx/var(--line-height)

other [ 'word', 'xx/var', 1, 1, 1, 6 ]
tokens [
  [ 'word', 'xx/var', 1, 1, 1, 6 ],
  [ 'brackets', '(--line-height)', 1, 7, 1, 21 ]
]
other [ 'word', 'xx', 1, 1, 1, 6 ]
tokens [
  [ 'word', 'xx', 1, 1, 1, 6 ],
  [ 'operator', '/', 1, 3, 1, 6 ],
  [ 'word', 'var', 1, 4, 1, 6 ],
  [ 'brackets', '(--line-height)', 1, 7, 1, 21 ]
]
other [ 'operator', '/', 1, 3, 1, 6 ]
tokens [
  [ 'operator', '/', 1, 3, 1, 6 ],
  [ 'word', 'var', 1, 4, 1, 6 ],
  [ 'brackets', '(--line-height)', 1, 7, 1, 21 ]
]
other [ 'word', 'var', 1, 4, 1, 6 ]
tokens [
  [ 'word', 'var', 1, 4, 1, 6 ],
  [ 'brackets', '(--line-height)', 1, 7, 1, 21 ]
]
other [ 'word', '--line-height', 1, 1, 1, 13 ]
tokens [ [ 'word', '--line-height', 1, 1, 1, 13 ] ]

[jrschumacher]

Workaround

Add spaces around the / separating the font-size and line-height:

font: var(--font-size) / var(--line-height) var(--font-family);

[shellscape]

Yeah how to deal with operators is an impossible battle. Fix it for one scenario, breaks it for another.

[jrschumacher]

@shellscape I'm not very familiar with the postcss parser. Is there anyway we can get the parser to look back? If the last token is a bracket and the extracted last token (I.e. empty string before /var) is an empty string then it shouldn't replace the last token.

If you could give me a pointer on understanding how the parser is working I'd be happy to explore this. Unfortunately with my limited experience I got lost.

[shellscape]

Thanks for the issue. PRs are welcome

[cherepanov]

Faced this issue with external library. What is the simplest way to fix these expressions before processing?

[shellscape]

This is resolved in the major/css-tree branch, which will be released as v7