Fails to parse selector with variable without leading space

[vilchik-elena]

• Node Version: v8.11.3
• NPM Version: 6.10.0
• postcss Version: 7.0.26
• postcss-less Version: 3.1.4

LESS

.foo(@i : 1 ) when (@i <= 10){
  @num : @i *10 ;
  .height-@{num}{
      height : @num * 1%;
  }
}

JavaScript

const postcss = require('postcss');
const syntax = require('postcss-less');
async function foo() {
  const less = `
  .foo(@i : 1 ) when (@i <= 10){
    @num : @i *10 ;
    .height-@{num}{
        height : @num * 1%;
    }
  }
  `;

  await postcss().process(less, { syntax });
}

foo().catch(e => console.log(e));

Errors

{ CssSyntaxError: <css input>:5:7: Unknown word
    at Input.error (/Users/elenavilchik/Projects/tmp/post-less-test/node_modules/postcss/lib/input.js:130:16)
    at LessParser.unknownWord (/Users/elenavilchik/Projects/tmp/post-less-test/node_modules/postcss/lib/parser.js:563:22)
    at LessParser.unknownWord (/Users/elenavilchik/Projects/tmp/post-less-test/node_modules/postcss-less/lib/LessParser.js:209:11)
    at LessParser.decl (/Users/elenavilchik/Projects/tmp/post-less-test/node_modules/postcss/lib/parser.js:235:16)
    at LessParser.decl (/Users/elenavilchik/Projects/tmp/post-less-test/node_modules/postcss-less/lib/LessParser.js:32:11)
    at LessParser.other (/Users/elenavilchik/Projects/tmp/post-less-test/node_modules/postcss/lib/parser.js:133:18)
    at LessParser.other (/Users/elenavilchik/Projects/tmp/post-less-test/node_modules/postcss-less/lib/LessParser.js:158:13)
    at LessParser.parse (/Users/elenavilchik/Projects/tmp/post-less-test/node_modules/postcss/lib/parser.js:77:16)
    at parse (/Users/elenavilchik/Projects/tmp/post-less-test/node_modules/postcss-less/lib/index.js:11:12)
    at new LazyResult (/Users/elenavilchik/Projects/tmp/post-less-test/node_modules/postcss/lib/lazy-result.js:60:16)
  name: 'CssSyntaxError',
  reason: 'Unknown word',
  source: '\n.foo(@i : 1 ) when (@i <= 10){\n  @num : @i *10 ;\n  .height-@{num}{\n      height : @num * 1%;\n  }\n}\n',
  line: 5,
  column: 7,
  input: 
   { line: 5,
     column: 7,
     source: '\n.foo(@i : 1 ) when (@i <= 10){\n  @num : @i *10 ;\n  .height-@{num}{\n      height : @num * 1%;\n  }\n}\n' } }

Expected Behavior

When space is added after .height-@{num} less code is parsed normally, still it is valid even without that space and should be parsed.

Actual Behavior

Parsing error is emitted.

How can we reproduce the behavior?

Execute the js script I've provided.

I checked your sources quickly, may be problem is in https://github.com/shellscape/postcss-less/blob/master/lib/nodes/interpolation.js#L7, it consumes second { as there is no space to stop consumption.

[shellscape]

Thanks for the issue. Pull Requests are welcomed!

[popov-tensor]

I just got the same bug. My description was here https://github.com/postcss/postcss/issues/1530 . I thought it was because of multiple @{substitutions}, but now tried to insert space between selector and «{», and it worked. So, thank you for workaround, but it would be nice to fix it, so than lessc and postcss work the same.

[xtpss]

me too

my index.less file

@import '~antd/es/style/themes/default.less';

.headerWrapper {
  margin: 0;
  :global {
    .@{ant-prefix}-tabs-nav {
      margin: 0;
    }
    .@{ant-prefix}-tabs-tab {
      height: 48px;
    }
  }
}

Error message

["ERROR" - 下午1:32:51] Error formatting document.
CssSyntaxError: <css input>:6:8: Unknown word
	at Input.error (f:\Rep\yifei\micro\node_modules\postcss\lib\input.js:128:16)
	at Parser.unknownWord (f:\Rep\yifei\micro\node_modules\postcss\lib\parser.js:561:22)
	at Parser.other (f:\Rep\yifei\micro\node_modules\postcss\lib\parser.js:166:12)
	at Parser.parse (f:\Rep\yifei\micro\node_modules\postcss\lib\parser.js:75:16)
	at parse (f:\Rep\yifei\micro\node_modules\postcss\lib\parse.js:17:12)
	at new LazyResult (f:\Rep\yifei\micro\node_modules\postcss\lib\lazy-result.js:64:16)
	at Processor.<anonymous> (f:\Rep\yifei\micro\node_modules\postcss\lib\processor.js:142:12)
	at Processor.process (f:\Rep\yifei\micro\node_modules\postcss\lib\processor.js:121:23)
	at module.exports (f:\Rep\yifei\micro\node_modules\prettier-plugin-style-order\src\config\sorter.js:8:6)
	at Object.preprocess (f:\Rep\yifei\micro\node_modules\prettier-plugin-style-order\src\index.js:40:18)
	at Object.parse (f:\Rep\yifei\micro\node_modules\prettier\index.js:13620:21)
	at coreFormat (f:\Rep\yifei\micro\node_modules\prettier\index.js:14899:14)
	at format (f:\Rep\yifei\micro\node_modules\prettier\index.js:15131:14)
	at f:\Rep\yifei\micro\node_modules\prettier\index.js:57542:12
	at Object.format (f:\Rep\yifei\micro\node_modules\prettier\index.js:57562:12)
	at t.default.<anonymous> (c:\Users\CRRCDT_WYF\.vscode\extensions\esbenp.prettier-vscode-5.9.2\dist\extension.js:1:17599)
	at Generator.next (<anonymous>)
	at s (c:\Users\CRRCDT_WYF\.vscode\extensions\esbenp.prettier-vscode-5.9.2\dist\extension.js:1:11597)
["INFO" - 下午1:32:51] Formatting completed in 23.6298ms.

[shellscape]

@beiifeng please don't post "me too" replies on issues. No one likes those. Use the reaction buttons instead.

[xtpss]

@beiifeng please don't post "me too" replies on issues. No one likes those. Use the reaction buttons instead.

ok.