Fix for issue 4313 selector list not expanding

.github/workflows/ci.yml

@@ -22,7 +22,7 @@ jobs:
      - name: Print put node & npm version
        run: node --version && npm --version 
      - name: Install chromium
-       run: npx playwright install chromium
+       run: npx playwright@1.49.0 install chromium
      - name: Run unit test
        run: npm run test
 
@@ -49,7 +49,7 @@ jobs:
        # Output useful info for debugging.
        run: node --version && npm --version 
      - name: Install chromium
-       run: npx playwright install chromium
+       run: npx playwright@1.49.0 install chromium
      - name: Run unit test
        run: npm run test
 
@@ -71,7 +71,7 @@ jobs:
      - name: Print put node & npm version
        run: node --version && npm --version 
      - name: Install chromium
-       run: npx playwright install chromium
+       run: npx playwright@1.49.0 install chromium
      - name: Run unit test
        run: npm run test
 
@@ -89,6 +89,6 @@ jobs:
      - name: Print put node & npm version
        run: node --version && npm --version 
      - name: Install chromium
-       run: npx playwright install chromium
+       run: npx playwright@1.49.0 install chromium
      - name: Run unit test
        run: npm run test

package.json

@@ -28,6 +28,7 @@
   "devDependencies": {
     "github-changes": "^1.1.2",
     "lerna": "^3.22.1",
-    "npm-run-all": "^4.1.5"
+    "npm-run-all": "^4.1.5",
+    "playwright": "^1.49.0"
   }
 }

packages/less/src/less/tree/ruleset.js

@@ -748,12 +748,37 @@ Ruleset.prototype = Object.assign(new Node(), {
                             const replacementSelector = createSelector(createParenthesis(nestedPaths[k], el), el);
                             addAllReplacementsIntoPath(newSelectors, [replacementSelector], el, inSelector, replacedNewSelectors);
                         }
+                        newSelectors = replacedNewSelectors;
+                        currentElements = [];
+                    } else if (el instanceof Selector) {
+                        const nestedSelector = el;    
+
+                        // merge the current list of non parent selector elements
+                        // on to the current list of selectors to add
+                        mergeElementsOnToSelectors(currentElements, newSelectors);
+
+                        const nestedPaths = [];
+                        let replaced;
+                        let replacedNewSelectors = [];
+                        let currentReplacedSelectors = [];
+                        replaced = replaceParentSelector(nestedPaths, context, nestedSelector);
+                        hadParentSelector = hadParentSelector || replaced;
+
+                        for (k = 0; k < nestedPaths.length; k++) {
+                            for (let selectorIndex = 0; selectorIndex < nestedPaths[k].length; ++selectorIndex) {
+                                const replacementSelector = nestedPaths[k][selectorIndex];
+                                addAllReplacementsIntoPath(newSelectors, [replacementSelector], el.elements[0], inSelector, replacedNewSelectors);
+                                for (let current = 0; current < currentReplacedSelectors.length; ++current) {
+                                    replacedNewSelectors.push(currentReplacedSelectors[current]);
+                                }
+                            }
+                        }
+
                         newSelectors = replacedNewSelectors;
                         currentElements = [];
                     } else {
                         currentElements.push(el);
                     }
-
                 } else {
                     hadParentSelector = true;
                     // the new list of selectors to add

packages/test-data/css/_main/selectors.css

@@ -189,3 +189,24 @@ a:is(.b, :is(.c)) {
 a:is(.b, :is(.c), :has(div)) {
   color: red;
 }
+.multiple-not-by-comma:not(.multiple-not-by-comma--a, .multiple-not-by-comma--b):not(.multiple-not-by-comma--c, .multiple-not-by-comma--d):hover {
+  background-color: green;
+}
+.multiple-not-by-comma2 {
+  color: red;
+}
+.multiple-not-by-comma2:not(.multiple-not-by-comma2--a, .multiple-not-by-comma2--b):not(.multiple-not-by-comma2--c):hover {
+  background-color: blue;
+}
+.multiple-not:not(.multiple-not--a):not(.multiple-not--b):hover {
+  background-color: yellow;
+}
+.multiple-not-by-comma3 {
+  color: #ffdde3;
+}
+.multiple-not-by-comma3:not(.multiple-not-by-comma3--a, .multiple-not-by-comma3--b):not(.multiple-not-by-comma3--c):hover {
+  background-color: #ffed54;
+}
+.multiple-not-by-comma3:is(.multiple-not-by-comma3--g, .multiple-not-by-comma3--h) {
+  color: #eeff55;
+}

packages/test-data/less/_main/selectors.less

@@ -208,3 +208,35 @@ a:is(.b, :is(.c)) {
 a:is(.b, :is(.c), :has(div)) {
   color: red;
 }
+
+.multiple-not-by-comma {
+  &:not(&--a, &--b):not(&--c, &--d):hover {
+    background-color: green;
+  }
+}
+
+.multiple-not-by-comma2 {
+  color: red;
+
+  &:not(&--a, &--b):not(&--c):hover {
+    background-color: blue;
+  }
+}
+
+.multiple-not {
+  &:not(&--a):not(&--b):hover {
+    background-color: yellow;
+  }
+}
+
+.multiple-not-by-comma3 {
+  color: #ffdde3;
+
+  &:not(&--a, &--b):not(&--c):hover {
+    background-color: #ffed54;
+  }
+
+  &:is(&--g, &--h) {
+    color: #eeff55;
+  }
+}