feat!: strict class -st-global mapping (#2910)

* feat!: disallow complex global mapping * feat!: no transform or global for multi selector
wix · Oct 1, 2023 · 2d2e5b4 · 2d2e5b4
1 parent 0a5facd
commit 2d2e5b4
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 17 deletions.
diff --git a/packages/core/src/features/css-class.ts b/packages/core/src/features/css-class.ts
@@ -99,6 +99,11 @@ export const diagnostics = {
         'error',
         () => `unsupported multi selector in -st-global`
     ),
+    UNSUPPORTED_COMPLEX_SELECTOR: createDiagnosticReporter(
+        '00010',
+        'error',
+        () => `unsupported complex selector`
+    ),
     IMPORT_ISNT_EXTENDABLE: createDiagnosticReporter(
         '00005',
         'error',
@@ -663,6 +668,16 @@ function parseStGlobal(
         context.diagnostics.report(diagnostics.UNSUPPORTED_MULTI_SELECTORS_ST_GLOBAL(), {
             node: decl,
         });
+        return;
+    } else {
+        for (const node of selector[0].nodes) {
+            if (node.type === 'combinator') {
+                context.diagnostics.report(diagnostics.UNSUPPORTED_COMPLEX_SELECTOR(), {
+                    node: decl,
+                });
+                return;
+            }
+        }
     }
     return selector[0].nodes;
 }
diff --git a/packages/core/test/features/css-class.spec.ts b/packages/core/test/features/css-class.spec.ts
@@ -147,12 +147,6 @@ describe(`features/css-class`, () => {
                 /* @transform-remove */
                 -st-global: "[attr=val]";
             }
-            
-            /* @rule(complex) .y .z */
-            .d {
-                /* @transform-remove */
-                -st-global: ".y .z";
-            }
 
             /* @rule(not only classes compound) .yy[attr] */
             .e {
@@ -176,9 +170,6 @@ describe(`features/css-class`, () => {
         expect(CSSClass.get(meta, `c`), `c symbol`).to.contain({
             name: 'c',
         });
-        expect(CSSClass.get(meta, `d`), `d symbol`).to.contain({
-            name: 'd',
-        });
         expect(CSSClass.get(meta, `e`), `e symbol`).to.contain({
             name: 'e',
         });
@@ -188,7 +179,6 @@ describe(`features/css-class`, () => {
             x: true,
             z: true,
             zz: true,
-            y: true,
             yy: true,
         });
 
@@ -208,23 +198,28 @@ describe(`features/css-class`, () => {
                 -st-global: "";
             }
 
-            /* @rule(empty) .y */
+            /* @rule(multi) .entry__b */
             .b {
                 /* @analyze-error(multi) ${classDiagnostics.UNSUPPORTED_MULTI_SELECTORS_ST_GLOBAL()} */
                 -st-global: ".y , .z";
             }
+
+            /* @rule(complex) .entry__c */
+            .c {
+                /* @analyze-error(complex) ${classDiagnostics.UNSUPPORTED_COMPLEX_SELECTOR()} */
+                -st-global: ".y .z";
+            }
         `);
 
         const { meta, exports } = sheets['/entry.st.css'];
 
         // meta.globals
-        expect(meta.globals).to.eql({
-            y: true,
-        });
+        expect(meta.globals).to.eql({});
 
         // JS exports
         expect(exports.classes.a, `a (empty) JS export`).to.eql(`entry__a`);
-        expect(exports.classes.b, `b (multi) JS export`).to.eql(`y`);
+        expect(exports.classes.b, `b (multi) JS export`).to.eql(`entry__b`);
+        expect(exports.classes.c, `c (complex) JS export`).to.eql(`entry__c`);
     });
     it(`should escape`, () => {
         const { sheets } = testStylableCore(

diff --git a/packages/core/test/stylable-transformer/global.spec.ts b/packages/core/test/stylable-transformer/global.spec.ts
@@ -13,7 +13,7 @@ describe('Stylable postcss transform (Global)', () => {
                         @st-import [test] from './imported.st.css';
                         .root {}
                         .test {}
-                        .x { -st-global: '.a .b'; }
+                        .x { -st-global: '.a.b'; }
                         :global(.c .d) {}
                         :global(.e) {}
                     `,
@@ -38,7 +38,7 @@ describe('Stylable postcss transform (Global)', () => {
             e: true,
         });
         expect((meta.targetAst!.nodes[1] as postcss.Rule).selector).to.equal('.global-test');
-        expect((meta.targetAst!.nodes[2] as postcss.Rule).selector).to.equal('.a .b');
+        expect((meta.targetAst!.nodes[2] as postcss.Rule).selector).to.equal('.a.b');
         expect((meta.targetAst!.nodes[3] as postcss.Rule).selector).to.equal('.c .d');
         expect((meta.targetAst!.nodes[4] as postcss.Rule).selector).to.equal('.e');
     });