fix: handle boolean state as well

wix · Jul 13, 2023 · e9461bf · e9461bf
1 parent a9ba758
commit e9461bf
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 20 deletions.
diff --git a/packages/core/src/helpers/custom-state.ts b/packages/core/src/helpers/custom-state.ts
@@ -861,10 +861,7 @@ export function transformPseudoClassToCustomState(
     diagnostics: Diagnostics,
     selectorNode?: postcss.Node
 ) {
-    if (stateDef === null) {
-        convertToClass(stateNode).value = createBooleanStateClassName(name, namespace);
-        delete stateNode.nodes;
-    } else if (typeof stateDef === 'string') {
+    if (stateDef === null || typeof stateDef === 'string') {
         if (stateNode.nodes && selectorNode) {
             diagnostics.report(
                 stateDiagnostics.NO_PARAM_REQUIRED(name, stringifySelector(stateNode.nodes)),
@@ -874,8 +871,14 @@ export function transformPseudoClassToCustomState(
                 }
             );
         }
-        // simply concat global mapped selector - ToDo: maybe change to 'selector'
-        convertToInvalid(stateNode).value = stateDef;
+        if (stateDef === null) {
+            // boolean
+            convertToClass(stateNode).value = createBooleanStateClassName(name, namespace);
+        } else {
+            // static template selector
+            // simply concat global mapped selector - ToDo: maybe change to 'selector'
+            convertToInvalid(stateNode).value = stateDef;
+        }
         delete stateNode.nodes;
     } else if (typeof stateDef === 'object') {
         if (isTemplateState(stateDef)) {

diff --git a/packages/core/test/features/css-pseudo-class.spec.ts b/packages/core/test/features/css-pseudo-class.spec.ts
@@ -34,24 +34,40 @@ describe('features/css-pseudo-class', () => {
     });
     describe('st-custom-state', () => {
         it('should transform boolean state', () => {
-            const { sheets } = testStylableCore(`
-                .root {
-                    /* @transform-remove(removed decl) */
-                    -st-states: bool,
-                                exBool(boolean);
-                }
+            const { sheets } = testStylableCore({
+                '/valid.st.css': `
+                    .root {
+                        /* @transform-remove(removed decl) */
+                        -st-states: bool,
+                                    exBool(boolean);
+                    }
 
-                /* @rule(boolean) .entry__root.entry--bool */
-                .root:bool {}
+                    /* @rule(boolean) .valid__root.valid--bool */
+                    .root:bool {}
 
-                /* @rule(explicit boolean) .entry__root.entry--exBool */
-                .root:exBool {}
+                    /* @rule(explicit boolean) .valid__root.valid--exBool */
+                    .root:exBool {}
 
-                /* @rule(nested) .entry__root:not(.entry--bool) */
-                .root:not(:bool) {}
-            `);
+                    /* @rule(nested) .valid__root:not(.valid--bool) */
+                    .root:not(:bool) {}
+                `,
+                '/invalid.st.css': `
+                    .root {
+                        -st-states: bool;
+                    }
+                    
+                    /* 
+                        @transform-error ${stCustomStateDiagnostics.NO_PARAM_REQUIRED(
+                            'bool',
+                            'unknown-param'
+                        )}
+                        @rule .invalid__root.invalid--bool
+                    */
+                    .root:bool(unknown-param) {}
+                `,
+            });
 
-            const { meta } = sheets['/entry.st.css'];
+            const { meta } = sheets['/valid.st.css'];
             shouldReportNoDiagnostics(meta);
         });
         describe('string parameter', () => {