feat: validate custom state selector

wix · Sep 19, 2023 · fbcfff5 · fbcfff5
1 parent e497e90
commit fbcfff5
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 8 deletions.
diff --git a/packages/core/src/helpers/custom-state.ts b/packages/core/src/helpers/custom-state.ts
@@ -338,7 +338,21 @@ function defineTemplateState(
     const template = stripQuotation(postcssValueParser.stringify(templateDef));
     if (argsFullValue.length === 1) {
         // simple template with no params
-        mappedStates[stateName] = template.trim().replace(/\\["']/g, '"');
+        const selectorStr = template.trim().replace(/\\["']/g, '"');
+        const selectorAst = parseSelectorWithCache(selectorStr, { clone: true });
+        if (
+            !validateTemplateSelector({
+                stateName,
+                selectorStr,
+                selectorAst,
+                cssNode: decl,
+                diagnostics,
+            })
+        ) {
+            return;
+        } else {
+            mappedStates[stateName] = selectorStr;
+        }
     } else if (argsFullValue.length === 2) {
         // single parameter template
         if (!template.includes('$0')) {

diff --git a/packages/core/test/features/css-pseudo-class.spec.ts b/packages/core/test/features/css-pseudo-class.spec.ts
@@ -459,6 +459,50 @@ describe('features/css-pseudo-class', () => {
                     .root:static(unknown-param) {}
                 `);
             });
+            it('should report invalid template selector', () => {
+                testStylableCore(`
+                    .a {
+                        /* 
+                            @analyze-error(not-compound) ${stCustomStateDiagnostics.UNSUPPORTED_COMPLEX_SELECTOR(
+                                'notCompound',
+                                '.x .y'
+                            )}
+                        */
+                        -st-states: notCompound(".x .y");
+                    }
+                    .b {
+                        /* 
+                            @analyze-error(multi) ${stCustomStateDiagnostics.UNSUPPORTED_MULTI_SELECTOR(
+                                'multi',
+                                '.x, .y'
+                            )}
+                        */
+                        -st-states: multi(".x, .y");
+                    }
+                    .c {
+                        /* 
+                            @analyze-error(invalid) ${stCustomStateDiagnostics.INVALID_SELECTOR(
+                                'invalid',
+                                ':unclosed('
+                            )}
+                        */
+                        -st-states: invalid(":unclosed(");
+                    }
+                    .d {
+                        /* 
+                            @analyze-error(invalidStart) ${stCustomStateDiagnostics.UNSUPPORTED_INITIAL_SELECTOR(
+                                'invalidStartElement',
+                                'div.x'
+                            )}
+                            @analyze-error(invalidStart) ${stCustomStateDiagnostics.UNSUPPORTED_INITIAL_SELECTOR(
+                                'invalidStartWildcard',
+                                '*.x'
+                            )}
+                        */
+                        -st-states: invalidStartElement("div.x"), invalidStartWildcard("*.x");
+                    }
+                `);
+            });
         });
         describe('custom mapped parameter', () => {
             it('should transform mapped state (quoted)', () => {
@@ -517,12 +561,6 @@ describe('features/css-pseudo-class', () => {
                 shouldReportNoDiagnostics(meta);
             });
             it('should report invalid template selector', () => {
-                /**
-                 * currently only checks template with parameter
-                 * for backwards compatibility standalone template can accept
-                 * any kind of selector - we might want to limit this in a future
-                 * major version.
-                 */
                 testStylableCore(`
                     .root {
                         -st-states: classAndThenParam(".x$0", string),

diff --git a/packages/schema-extract/test/test.spec.ts b/packages/schema-extract/test/test.spec.ts
@@ -259,7 +259,7 @@ describe('Stylable JSON Schema Extractor', () => {
 
         it('schema with mapped states', () => {
             const css = `.root{
-                -st-states: state("custom");
+                -st-states: state(".custom");
             }`;
 
             const res = extractSchema(css, '/entry.st.css', '/', path);