Bugs in handling @scope rule - "to" as a part of a selector + complex local selectors

[ChrisKuBa]

Hi,

I found two bugs that together make it impossible to use the @scope rule in my case:

@scope (.innerActionsWrapper) to (.inputInnerButtons > * > *, :global(.tkx-inputComponentButtons) > * > *) {
    --button-variant: 'transparent';
}

1. postcss-modules-scope/src/index.js

   Line 320 in e803dc7

   .split("to")

   
   This line do not split by token, it splits by word. The word "to" is included in the selector itselft also.
   So splitting by token will fix this issue

const valueParser = require("postcss-value-parser");


const splitScopeParams = (params) => {
    const ast = valueParser(params);

    const before = [];
    const after = [];
    let current = before;

    for (const node of ast.nodes) {
        if (node.type === 'word' && node.value === 'to') {
            current = after;
            continue;
        }
        current.push(node);
    }

    return [
        valueParser.stringify(before).trim(),
        valueParser.stringify(after).trim()
    ];
}


root.walkAtRules(/scope$/i, (atRule) => {
  if (atRule.params) {
    atRule.params = splitScopeParams(atRule.params)
      .map((item) => {

2. postcss-modules-scope/src/index.js

   Line 324 in e803dc7

   const localMatch = /^\s*:local\s*\((.+?)\)\s*$/.exec(selector);

Detection of :local classNames is to strict
This, copied from your own code is a gracefuller check

          if (!/:local\s*\((.+?)\)/.test(selector)) {
              return;
          }

All in one this can be the fix

const valueParser = require("postcss-value-parser");

...

const splitScopeParams = (params) => {
    const ast = valueParser(params);

    const before = [];
    const after = [];
    let current = before;

    for (const node of ast.nodes) {
        if (node.type === 'word' && node.value === 'to') {
            current = after;
            continue;
        }
        current.push(node);
    }

    return [
        valueParser.stringify(before).trim(),
        valueParser.stringify(after).trim()
    ];
}

...

root.walkAtRules(/scope$/i, (atRule) => {
  if (atRule.params) {
    atRule.params = splitScopeParams(atRule.params)
      .map((item) => {
        const selector = item.trim().slice(1, -1).trim();

          if (!/:local\s*\((.+?)\)/.test(selector)) {
              return;
          }

        let parsedSelector = selectorParser().astSync(selector);

        return `(${traverseNode(parsedSelector).toString()})`;
      })
      .join(" to ");
  }
});

Thanks

[alexander-akait]

PR welcome