fix: collection if mixin declaration under rule block + more (#2871)

wix · Jun 14, 2023 · 6039655 · 6039655
1 parent e0c6bd9
commit 6039655
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 16 deletions.
diff --git a/packages/core/src/features/st-mixin.ts b/packages/core/src/features/st-mixin.ts
@@ -236,20 +236,23 @@ function collectRuleMixins(
     const resolvedSymbols = context.getResolvedSymbols(context.meta);
     const { mainNamespace } = resolvedSymbols;
     const decls: postcss.Declaration[] = [];
-    rule.walkDecls((decl) => {
-        if (decl.prop === `-st-mixin` || decl.prop === `-st-partial-mixin`) {
-            decls.push(decl);
+    for (const node of rule.nodes) {
+        if (
+            node.type === 'decl' &&
+            (node.prop === `-st-mixin` || node.prop === `-st-partial-mixin`)
+        ) {
+            decls.push(node);
             mixins = collectDeclMixins(
                 context,
                 resolvedSymbols,
-                decl,
+                node,
                 (mixinSymbolName) => {
                     return mainNamespace[mixinSymbolName] === 'js' ? 'args' : 'named';
                 },
                 mixins
             );
         }
-    });
+    }
     return [decls, mixins];
 }
 

diff --git a/packages/core/src/helpers/custom-state.ts b/packages/core/src/helpers/custom-state.ts
@@ -724,23 +724,22 @@ export function validateRuleStateDefinition(
                             !!stateParam.defaultValue
                         );
                         if (errors) {
-                            selectorNode.walkDecls((decl) => {
-                                if (decl.prop === `-st-states`) {
+                            for (const node of selectorNode.nodes) {
+                                if (node.type === 'decl' && node.prop === `-st-states`) {
                                     diagnostics.report(
                                         stateDiagnostics.DEFAULT_PARAM_FAILS_VALIDATION(
                                             stateName,
                                             stateParam.defaultValue || '',
                                             errors
                                         ),
                                         {
-                                            node: decl,
-                                            word: decl.value,
+                                            node: node,
+                                            word: node.value,
                                         }
                                     );
-                                    return false;
+                                    break;
                                 }
-                                return;
-                            });
+                            }
                         }
                     }
                 }

diff --git a/packages/core/src/helpers/import.ts b/packages/core/src/helpers/import.ts
@@ -413,15 +413,18 @@ function createPseudoImportProps(
 function patchDecls(node: Rule, named: string[], pseudoImport: Imported) {
     const namedDecls: Declaration[] = [];
     const defaultDecls: Declaration[] = [];
-    node.walkDecls((decl) => {
+    for (const decl of node.nodes) {
+        if (decl.type !== 'decl') {
+            continue;
+        }
         if (decl.prop === '-st-named') {
             decl.assign({ value: named.join(', ') });
             namedDecls.push(decl);
         } else if (decl.prop === '-st-default') {
             decl.assign({ value: pseudoImport.defaultExport });
             defaultDecls.push(decl);
         }
-    });
+    }
     return { defaultDecls, namedDecls };
 }
 

diff --git a/packages/core/test/features/st-mixin.spec.ts b/packages/core/test/features/st-mixin.spec.ts
@@ -41,6 +41,62 @@ describe(`features/st-mixin`, () => {
 
         shouldReportNoDiagnostics(meta);
     });
+    it(`should append mixin declarations (within nesting)`, () => {
+        const { sheets } = testStylableCore(`
+            .mix {
+                propA: blue;
+                propB: green;
+            }
+
+            /* @rule .entry__empty {propA: blue; propB: green;} */
+            .empty {
+                -st-mixin: mix;
+            }
+
+            .insert {
+                /* @rule .entry__child {before:1; propA:blue; propB:green; after: 2} */
+                .child {
+                    before: 1;
+                    -st-mixin: mix;
+                    after: 2;
+                }
+            }
+        `);
+
+        const { meta } = sheets['/entry.st.css'];
+
+        shouldReportNoDiagnostics(meta);
+    });
+    it.skip(`should keep other nested rules`, () => {
+        const { sheets } = testStylableCore(`
+            .mix {
+                propA: blue;
+                propB: green;
+            }
+
+            /* @rule .entry__empty {propA: blue; propB: green;} */
+            .empty {
+                -st-mixin: mix;
+            }
+
+            .insert {
+                /* @rule .entry__child {before:1; propA:blue; propB:green; after: 2} */
+                .child {
+                    .grandchild-1 { z-index: 1; }
+                    before: 1;
+                    .grandchild-2 { z-index: 2; }
+                    -st-mixin: mix;
+                    .grandchild-3 { z-index: 3; }
+                    after: 2;
+                    .grandchild-4 { z-index: 4; }
+                }
+            }
+        `);
+
+        const { meta } = sheets['/entry.st.css'];
+
+        shouldReportNoDiagnostics(meta);
+    });
     it(`should append mixin rules`, () => {
         const { sheets } = testStylableCore(`
             .mix {

diff --git a/packages/webpack-extensions/src/create-metadata-stylesheet.ts b/packages/webpack-extensions/src/create-metadata-stylesheet.ts
@@ -57,8 +57,8 @@ export function rewriteImports(
                     );
                 }
                 if (rawRule.type === 'rule') {
-                    rawRule.walkDecls((decl) => {
-                        if (decl.prop === `-st-from`) {
+                    rawRule.nodes.forEach((decl) => {
+                        if (decl.type === 'decl' && decl.prop === `-st-from`) {
                             decl.value = JSON.stringify(
                                 `/${ensureHash(resolved.meta, hashes)}.st.css`
                             );