Node Version: 7.6 NPM Version: 4.1.2 postcss-values-parser Ve

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

SASS Interpolation Not Parsed in Loose Mode about postcss-values-parser HOT 2 CLOSED

edg2s commented on August 18, 2024

SASS Interpolation Not Parsed in Loose Mode

from postcss-values-parser.

Comments (2)

shellscape commented on August 18, 2024

@edg2s revisiting this; what kind of node structure would you find reasonable for handling interpolation bracket pairs? would this require a new node type?

from postcss-values-parser.

shellscape commented on August 18, 2024

decided to go with a word-based solution here. That interpolation is pretty specific to SCSS, so those special characters are now tokenized and treated as separate words when outside strings, etc.

Here's sample tokenizer output:

[ [ 'word', 'calc', 1, 1, 1, 4, 0 ],
  [ '(', '(', 1, 5, 1, 4, 4 ],
  [ 'word', '100%', 1, 6, 1, 9, 5 ],
  [ 'space', ' ', 1, 10, 1, 11, 9 ],
  [ 'operator', '-', 1, 11, 1, 12, 10 ],
  [ 'space', ' ', 1, 12, 1, 13, 11 ],
  [ '#', '#', 1, 13, 1, 13, 12 ],
  [ '{', '{', 1, 14, 1, 13, 13 ],
  [ 'word', '$margin', 1, 15, 1, 21, 14 ],
  [ 'space', ' ', 1, 22, 1, 23, 21 ],
  [ 'operator', '*', 1, 23, 1, 24, 22 ],
  [ 'space', ' ', 1, 24, 1, 25, 23 ],
  [ 'word', '2px', 1, 25, 1, 27, 24 ],
  [ '}', '}', 1, 28, 1, 27, 27 ],
  [ ')', ')', 1, 29, 1, 27, 28 ] ]

and here's what the tests for it look like:

    {
      it: 'should parse calc function with scss interpolation #23',
      test: 'calc(100% - #{$margin * 2px})',
      expected: [
        { type: 'func', value: 'calc' },
        { type: 'paren', value: '(' },
        { type: 'number', value: '100', unit: '%' },
        { type: 'operator', value: '-' },
        { type: 'word', value: '#' },
        { type: 'word', value: '{' },
        { type: 'word', value: '$margin' },
        { type: 'operator', value: '*' },
        { type: 'number', value: '2', unit: 'px' },
        { type: 'word', value: '}' },
        { type: 'paren', value: ')' }
      ]
    }