Merge branch 'class-object-array'

Author: micantoine

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Svelte preprocess CSS Modules, changelog
 
+## 3.0.1 (Feb 7 2025)
+
+### Fixes
+
+- Add support to class objects and arrays
+
 ## 3.0.0 (Jan 17 2025)
 
 ### Update

README.md

@@ -12,6 +12,7 @@ for `svelte 4` and below, use version 2 of the preprocessor.
 
 - [Usage](#usage)
   - [Approach](#approach)
+  - [Class objects and arrays](#class-object-and-arrays)
   - [Class directive](#class-directive)
   - [Local selector](#local-selector)
   - [CSS binding](#css-binding)
@@ -109,6 +110,70 @@ _transformed to_
 </style>
 ```
 
+### Class objects and arrays
+
+#### Object with thruthy values
+
+```html
+<script>
+	let active = $state(true);
+</script>
+
+<div class={{ active, red: !active, 'bold': active }}>...</div>
+
+<style module>
+  .active { color: green; }
+  .red { color: red; }
+  .bold { font-weight: bold; }
+</style>
+```
+
+*generating*
+
+```html
+<div class="active-aft3ew bold-sfkje6">...</div>
+<!-- OR -->
+<div class="red-bft3ed">...</div>
+
+<style>
+  .active-aft3ew { color: green; }
+  .red-bft3ed { color: red; }
+  .bold-sfkje6 { font-weight: bold; }
+</style>
+```
+
+#### Array with thruthy values
+
+```html
+<script>
+	let active = $state(true);
+</script>
+
+<div class={[ active && 'green bold', 'italic', !active && 'red' ]}>...</div>
+
+<style module>
+  .green { color: green; }
+  .red { color: red; }
+  .bold { font-weight: bold; }
+  .italic { font-style: italic; }
+</style>
+```
+
+*generating*
+
+```html
+<div class="green-dhy6wu bold-uytsge italic-b65wfq">...</div>
+<!-- OR -->
+<div class="red-uyqrw4 italic-b65wfq">...</div>
+
+<style>
+  .green-dhy6wu { color: green; }
+  .red-uyqrw4 { color: red; }
+  .bold-uytsge { font-weight: bold; }
+  .italic-b65wfq { font-style: italic; }
+</style>
+```
+
 ### Class directive
 
 Toggle a class on an element.
@@ -357,11 +422,11 @@ CSS Modules allows you to pass a scoped classname to a child component giving th
 ```html
 <!-- Child Component Button.svelte -->
 <script>
-  let { class: className } = $props();
+  let props = $props();
 </script>
 
-<button class="btn {className}">
-  <slot />
+<button class={['btn', props.class]}>
+  {@render props.children?.()}
 </button>
 
 <style module>

example/webpack/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-preprocess-cssmodules",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Svelte preprocessor to generate CSS Modules classname on Svelte components",
   "keywords": [
     "svelte",

package-lock.json

@@ -31,13 +31,13 @@ const updateMultipleClasses = (processor: Processor, classNames: string): string
 };
 
 /**
- * Parse and update classes of a js expression element
+ * Parse and update literal expression element
  * @param processor: The CSS Module Processor
- * @param expression The expression node (consequent, alternate)
+ * @param expression The expression node
  */
-const parseExpression = (
+const parseLiteralExpression = (
   processor: Processor,
-  expression: AST.ExpressionTag['expression']
+  expression: AST.ExpressionTag['expression'] | null
 ): void => {
   const exp = expression as typeof expression & AST.BaseNode;
   if (exp.type === 'Literal' && typeof exp.value === 'string') {
@@ -46,6 +46,77 @@ const parseExpression = (
   }
 };
 
+/**
+ * Parse and update conditional expression
+ * @param processor: The CSS Module Processor
+ * @param expression The expression node
+ */
+const parseConditionalExpression = (
+  processor: Processor,
+  expression: AST.ExpressionTag['expression']
+): void => {
+  if (expression.type === 'ConditionalExpression') {
+    const { consequent, alternate } = expression;
+    parseLiteralExpression(processor, consequent);
+    parseLiteralExpression(processor, alternate);
+  }
+};
+
+/**
+ * Parse and update object expression
+ * @param processor: The CSS Module Processor
+ * @param expression The expression node
+ */
+const parseObjectExpression = (
+  processor: Processor,
+  expression: AST.ExpressionTag['expression']
+): void => {
+  if (expression.type === 'ObjectExpression') {
+    expression?.properties.forEach((property) => {
+      if (property.type === 'Property') {
+        const key = property.key as (typeof property)['key'] & AST.BaseNode;
+
+        if (property.shorthand) {
+          if (key.type === 'Identifier') {
+            processor.magicContent.overwrite(
+              key.start,
+              key.end,
+              `'${processor.cssModuleList[key.name]}': ${key.name}`
+            );
+          }
+        } else if (key.type === 'Identifier') {
+          processor.magicContent.overwrite(
+            key.start,
+            key.end,
+            `'${processor.cssModuleList[key.name]}'`
+          );
+        } else if (key.type !== 'PrivateIdentifier') {
+          parseLiteralExpression(processor, key);
+        }
+      }
+    });
+  }
+};
+/**
+ * Parse and update array expression
+ * @param processor: The CSS Module Processor
+ * @param expression The expression node
+ */
+const parseArrayExpression = (
+  processor: Processor,
+  expression: AST.ExpressionTag['expression']
+): void => {
+  if (expression.type === 'ArrayExpression') {
+    expression.elements.forEach((el) => {
+      if (el?.type === 'LogicalExpression') {
+        parseLiteralExpression(processor, el.right);
+      } else if (el?.type !== 'SpreadElement') {
+        parseLiteralExpression(processor, el);
+      }
+    });
+  }
+};
+
 /**
  * Add the dynamic variables to elements
  * @param processor The CSS Module Processor
@@ -151,28 +222,25 @@ export default (processor: Processor): void => {
         (node as AST.Component | AST.RegularElement).attributes.length > 0
       ) {
         (node as AST.Component | AST.RegularElement).attributes.forEach((item) => {
-          if (
-            item.type === 'Attribute' &&
-            allowedAttributes.includes(item.name) &&
-            Array.isArray(item.value)
-          ) {
-            item.value.forEach((classItem) => {
-              if (classItem.type === 'Text' && classItem.data.length > 0) {
-                const generatedClassNames = updateMultipleClasses(processor, classItem.data);
-                processor.magicContent.overwrite(
-                  classItem.start,
-                  classItem.start + classItem.data.length,
-                  generatedClassNames
-                );
-              } else if (
-                classItem.type === 'ExpressionTag' &&
-                classItem?.expression?.type === 'ConditionalExpression'
-              ) {
-                const { consequent, alternate } = classItem.expression;
-                parseExpression(processor, consequent);
-                parseExpression(processor, alternate);
-              }
-            });
+          if (item.type === 'Attribute' && allowedAttributes.includes(item.name)) {
+            if (Array.isArray(item.value)) {
+              item.value.forEach((classItem) => {
+                if (classItem.type === 'Text' && classItem.data.length > 0) {
+                  const generatedClassNames = updateMultipleClasses(processor, classItem.data);
+                  processor.magicContent.overwrite(
+                    classItem.start,
+                    classItem.start + classItem.data.length,
+                    generatedClassNames
+                  );
+                } else if (classItem.type === 'ExpressionTag') {
+                  parseConditionalExpression(processor, classItem.expression);
+                }
+              });
+            } else if (typeof item.value === 'object' && item.value.type === 'ExpressionTag') {
+              parseObjectExpression(processor, item.value.expression);
+              parseArrayExpression(processor, item.value.expression);
+              parseConditionalExpression(processor, item.value.expression);
+            }
           }
           if (item.type === 'ClassDirective') {
             const classNames = item.name.split('.');