Support PostCSS insertBefore

[papandreou]

• Webpack Version: n/a
• Operating System (or Browser): Ubuntu Linux 18.04
• Node Version: 10.15.1
• postcss-values-parser Version: 3.0.1

How Do We Reproduce?

const postcssValuesParser = require('postcss-values-parser');
const node = postcssValuesParser.parse('sans-serif');

node.insertBefore(node.nodes[0], '12px');

Expected Behavior

That the string 12px turns into a Numeric token and gets added at the start so that n.toString() would return 12px sans-serif.

Actual Behavior

{ CssSyntaxError: <css input>:1:1: Unknown word

> 1 | 12px
    | ^

    at Input.error (/home/andreas/work/postcss-values-parser/node_modules/postcss/lib/input.js:130:16)
    at Parser.unknownWord (/home/andreas/work/postcss-values-parser/node_modules/postcss/lib/parser.js:563:22)
    at Parser.other (/home/andreas/work/postcss-values-parser/node_modules/postcss/lib/parser.js:168:12)
    at Parser.parse (/home/andreas/work/postcss-values-parser/node_modules/postcss/lib/parser.js:77:16)
    at parse (/home/andreas/work/postcss-values-parser/node_modules/postcss/lib/parse.js:17:12)
    at Root.normalize (/home/andreas/work/postcss-values-parser/node_modules/postcss/lib/container.js:738:27)
    at Root.normalize (/home/andreas/work/postcss-values-parser/node_modules/postcss/lib/root.js:49:48)
    at Root.insertBefore (/home/andreas/work/postcss-values-parser/node_modules/postcss/lib/container.js:494:22)
  name: 'CssSyntaxError',
  reason: 'Unknown word',
  source: '12px',
  line: 1,
  column: 1,
  input: { line: 1, column: 1, source: '12px' } }

If I try with an entire valid CSS rule, eg. body { color: maroon }, it works -- so it seems like this hits the regular postcss parser rather than the postcss-values-parser one.

[papandreou]

Come to think of it, the documentation for this module doesn't mention that manipulating the parsed representation is even supported. I just inferred that it would work based on having used postcss and the presence of these methods.

[shellscape]

Thanks for opening an issue for this 🍺

True, the docs don't mention using insertBefore nor do they mention that the AST can be manipulated. That's partially a documentation omission and partially something that could reasonably be inferred from the fact that we state openly that the module now inherits from PostCSS's classes directly. But! This is something that should be supported.

I've changed the title of the issue and labeled it for enhancement. I see no reason why we can't support insertNode in the same ways that PostCSS does. For reference., here's the code from PostCSS https://github.com/postcss/postcss/blob/c3c3a5d7a0b285b5bbf85f30fedb2531cd7a5f61/lib/container.es6#L381-L397