fix: initial mapped-selector infer with experimentalSelectorInference (…

…#2908)
wix · Oct 5, 2023 · cf9706d · cf9706d
1 parent af2e587
commit cf9706d
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 2 deletions.
diff --git a/packages/core/src/stylable-transformer.ts b/packages/core/src/stylable-transformer.ts
@@ -505,7 +505,7 @@ export class StylableTransformer {
                 // reset current anchor for all except last selector
                 context.inferredSelector = new InferredSelector(
                     this,
-                    context.inferredSelectorContext
+                    context.inferredSelectorStart
                 );
             }
         }
@@ -680,7 +680,10 @@ export class InferredSelector {
     constructor(
         private api: Pick<
             StylableTransformer,
-            'getResolvedSymbols' | 'createSelectorContext' | 'scopeSelectorAst'
+            | 'getResolvedSymbols'
+            | 'createSelectorContext'
+            | 'scopeSelectorAst'
+            | 'createInferredSelector'
         >,
         resolve?: InferredResolve[] | InferredSelector
     ) {
@@ -886,6 +889,17 @@ export class InferredSelector {
                             selectorStr
                         );
                         internalContext.isStandaloneSelector = isFirstInSelector;
+                        if (!structureMode && experimentalSelectorInference) {
+                            internalContext.inferredSelectorStart.set(
+                                this.api.createInferredSelector(meta, {
+                                    name: 'root',
+                                    type: 'class',
+                                })
+                            );
+                            internalContext.inferredSelector.set(
+                                internalContext.inferredSelectorStart
+                            );
+                        }
                         const customAstSelectors = this.api.scopeSelectorAst(internalContext);
                         const inferred =
                             customAstSelectors.length === 1 || experimentalSelectorInference
@@ -1020,6 +1034,8 @@ export class ScopeContext {
     public lastInferredSelectorNode: SelectorNode | undefined;
     // selector is not a continuation of another selector
     public isStandaloneSelector = true;
+    // used as initial selector
+    public inferredSelectorStart: InferredSelector;
     // used as initial selector or after combinators
     public inferredSelectorContext: InferredSelector;
     // used for nesting selector
@@ -1072,6 +1088,7 @@ export class ScopeContext {
         // set selector data
         this.selectorStr = selectorStr || stringifySelector(selectorAst);
         this.inferredSelectorContext = new InferredSelector(this.transformer, inferredContext);
+        this.inferredSelectorStart = new InferredSelector(this.transformer, inferredContext);
         this.inferredSelectorNest = inferredSelectorNest || this.inferredSelectorContext.clone();
         this.inferredSelector = new InferredSelector(
             this.transformer,

diff --git a/packages/core/test/features/css-pseudo-element.spec.ts b/packages/core/test/features/css-pseudo-element.spec.ts
@@ -324,6 +324,32 @@ describe('features/css-pseudo-element', () => {
                     }
                 );
             });
+            it('should transform custom element with multiple selector inside nested pseudo-classes', () => {
+                // ToDo: with experimentalSelectorInference=true, the nested selector will be transformed inlined
+                testStylableCore(
+                    `
+                    @custom-selector :--part .partA, .partB;
+                    @custom-selector :--nestedPart ::part, .partC;
+    
+                    /* @rule(1 level) .entry__root:not(.entry__partA,.entry__partB) */
+                    .root:not(::part) {}
+    
+                    /*
+                        notice: partB is pushed at the end because of how custom selectors are
+                        processed atm.
+    
+                        @rule(2 levels) .entry__root:not(.entry__partA,.entry__partC,.entry__partB)
+                    */
+                    .root:not(::nestedPart) {}
+    
+                    /* @rule(custom-selector syntax)
+                            .entry__root:not(.entry__partA, .entry__partB)
+                    */
+                    .root:not(:--part) {}
+                `,
+                    { stylableConfig: { experimentalSelectorInference: true } }
+                );
+            });
         });
     });
     describe('st-import', () => {