postcss-less icon indicating copy to clipboard operation
postcss-less copied to clipboard

Space in merge declaration causes CssSyntaxError

Open bnickel opened this issue 4 years ago • 1 comments

Less allows (or gracefully handles) spaces in merge declarations, like filter +_: blur(2px); but throws an exception in postcss. This happens inside after tokenization inside decl so it looks like the tokens could be sanitized before passing it to super.decl but I'm a bit out of my depths with whether or not that'll break something else.

  • Node Version: v12.13.1
  • NPM Version: 7.4.0
  • postcss Version: 8.1.2
  • postcss-less Version: 4.0.1

LESS

.test1
 {
   rule +_: 'value';
 }

JavaScript

const test = require('ava');
const { parse } = require('../../lib');

test('should not fail when spaces are in merge rules', (t) => {
  const less = `.test1
  {
    rule +_: 'value';
  }
`;

  parse(less);
});

Errors

CssSyntaxError

<css input>:3:11: Unknown word

Expected Behavior

The Less should parse maybe with prop: "rule+_" to match match the existing. Or both should have something like prop: "rule", merge: true. I'm just using stylelint so I'm unopinionated.

Actual Behavior

Exception thrown.

How can we reproduce the behavior?

Add the test to the repo or try it in stylelint.

bnickel avatar Jun 11 '21 18:06 bnickel

I'd welcome a pull request to resolve this.

shellscape avatar Jun 11 '21 23:06 shellscape