Broken resolve for @custom-at-rule

[alexander-akait]

• Node Version: 10.2.1
• NPM Version: 6.1.0
• postcss-less Version: 2.0.0

If you have a large amount of code to share which demonstrates the problem you're experiencing, please provide a link to your
repository rather than pasting code. Otherwise, please paste relevant short snippets below.

LESS

@custom-selector :--camelCase .my-css-selector;

JavaScript

import postCssLess from 'postcss-less';
const less = `
@custom-selector :--camelCase .my-css-selector;
`;
const root = postCssLess.parse(less);

Expected Behavior

Should be resolved as at-rule.

Actual Behavior

Resolved as variable

How can we reproduce the behavior?

Example above.

Maybe we should adopt this https://github.com/less/less.js/blob/e3c13121dfdca48ba8fe26335cc12dd3f7948676/lib/less/parser/parser.js for better detecting.

/cc @e-cloud @davidyorr looks like regression

[e-cloud]

@evilebottnawi could you provide more information? The context of that selector.

[alexander-akait]

@e-cloud Ref: https://github.com/postcss/postcss-custom-selectors

In new version postcss-less @custom-selector interpreted as variable, but should be at-rule node

[shellscape]

Spent a good amount of time looking at this from a high-level, and diving into the code and examining how this is parsed. postcss-custom-selectors doesn't provide a node type (as it doesn't need one) and is in conflict with the format of less variables. The less variable format is @variable-name: value.

There's a nice method here https://github.com/postcss/postcss-custom-selectors/blob/6380b0095095740f6aeade7da6a31739ecb51f5a/lib/custom-selectors-from-root.js#L34 that could be exported to make it easier to examine and determine if it's a custom selector.

I also can't justify baking in detection for every type of at-rule that may be supported by any number of other third-party postcss plugins. It's not something I want to herd, curate, nor maintain.

Your best bet now is to duplicate the isCustomSelector method or ask for it to be exported, and iterate through variable declarations to see if the css property matches, and reparse as needed on your end.

Unfortunately this isn't a fix this project is going to make.