fix: mixin bug with experimentalSelectorInference (#2909)

wix · Oct 1, 2023 · 0a5facd · 0a5facd
1 parent 08b0ecc
commit 0a5facd
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 3 deletions.
diff --git a/packages/core/src/features/feature.ts b/packages/core/src/features/feature.ts
@@ -1,5 +1,10 @@
 import type { StylableMeta } from '../stylable-meta';
-import type { ScopeContext, StylableExports, StylableTransformer } from '../stylable-transformer';
+import type {
+    InferredSelector,
+    ScopeContext,
+    StylableExports,
+    StylableTransformer,
+} from '../stylable-transformer';
 import type { StylableResolver, MetaResolvedSymbols } from '../stylable-resolver';
 import type { StylableEvaluator, EvalValueData } from '../functions';
 import type * as postcss from 'postcss';
@@ -22,6 +27,7 @@ export interface FeatureTransformContext extends FeatureContext {
     evaluator: StylableEvaluator;
     getResolvedSymbols: (meta: StylableMeta) => MetaResolvedSymbols;
     passedThrough?: string[];
+    inferredSelectorMixin?: InferredSelector;
 }
 
 export interface NodeTypes {

diff --git a/packages/core/src/features/st-scope.ts b/packages/core/src/features/st-scope.ts
@@ -42,12 +42,14 @@ export const hooks = createFeature<{ IMMUTABLE_SELECTOR: ImmutablePseudoClass }>
             toRemove.push(() => node.replaceWith(node.nodes || []));
         }
     },
-    transformAtRuleNode({ context: { meta }, atRule, transformer }) {
+    transformAtRuleNode({ context: { meta, inferredSelectorMixin }, atRule, transformer }) {
         if (isStScopeStatement(atRule)) {
             const { selector, inferredSelector } = transformer.scopeSelector(
                 meta,
                 atRule.params,
-                atRule
+                atRule,
+                undefined,
+                inferredSelectorMixin
             );
             // transform selector in params
             atRule.params = selector;

diff --git a/packages/core/src/stylable-transformer.ts b/packages/core/src/stylable-transformer.ts
@@ -208,6 +208,7 @@ export class StylableTransformer {
             evaluator,
             getResolvedSymbols: this.getResolvedSymbols,
             passedThrough: path.slice(),
+            inferredSelectorMixin,
         };
         const transformResolveOptions = {
             context: transformContext,

diff --git a/packages/core/test/features/st-mixin.spec.ts b/packages/core/test/features/st-mixin.spec.ts
@@ -2019,6 +2019,51 @@ describe(`features/st-mixin`, () => {
 
             const { meta } = sheets['/entry.st.css'];
 
+            shouldReportNoDiagnostics(meta);
+        });
+        it('should collect mixin from st-sope selector (experimentalSelectorInference)', () => {
+            const { sheets } = testStylableCore(
+                {
+                    '/mix.st.css': `
+                    @st-scope .mix {
+                        .part { color: green; }
+                        .part2 { color: purple; }
+                        &:state { color: gold; }
+                    }
+                    @st-scope .mix.compoundAfter {
+                        .part { color: blue; }
+                    }
+                    @st-scope .compoundBefore.mix {
+                        .part { color: pink; }
+                    }
+                    @st-scope .mix, .notMix, .mix[extra] {
+                        .part { color: white; }
+                    }
+                    .mix {
+                        -st-states: state;
+                    }
+                `,
+                    '/entry.st.css': `
+                    @st-import [mix] from './mix.st.css';
+
+                    /* 
+                        @rule(descendant)[1] .entry__into .mix__part {color: green;} 
+                        @rule(descendant2)[2] .entry__into .mix__part2 {color: purple;} 
+                        @rule(state)[3] .entry__into.mix--state {color: gold;} 
+                        @rule(+after)[4] .entry__into.mix__compoundAfter .mix__part {color: blue;} 
+                        @rule(+before)[5] .entry__into.mix__compoundBefore .mix__part {color: pink;} 
+                        @rule(multi selector)[6] .entry__into .mix__part, .entry__into[extra] .mix__part {color: white;}
+                    */
+                    .into {
+                        -st-mixin: mix;
+                    }
+                `,
+                },
+                { stylableConfig: { experimentalSelectorInference: true } }
+            );
+
+            const { meta } = sheets['/entry.st.css'];
+
             shouldReportNoDiagnostics(meta);
         });
     });