Merge branch 'hotfix/2.1.2'

Author: micantoine

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Svelte preprocess CSS Modules, changelog
 
+## 2.1.2 (Jan 8, 2021)
+
+- Fix multiline class attribute [issue 39](https://github.com/micantoine/svelte-preprocess-cssmodules/issues/39)
+
 ## 2.1.1 (Oct 27, 2021)
 
 - Fix readme

package.json

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

src/parsers/template.ts

@@ -12,8 +12,9 @@ const updateMultipleClasses = (processor: Processor, classNames: string): string
   const classes: string[] = classNames.split(' ');
   const generatedClassNames: string = classes.reduce((accumulator, currentValue, currentIndex) => {
     let value: string = currentValue;
-    if (currentValue in processor.cssModuleList) {
-      value = processor.cssModuleList[currentValue.trim()];
+    const rawValue: string = value.trim();
+    if (rawValue in processor.cssModuleList) {
+      value = value.replace(rawValue, processor.cssModuleList[rawValue]);
     }
     if (currentIndex < classes.length - 1) {
       value += ' ';

test/globalFixtures/template.test.js

@@ -0,0 +1,22 @@
+const compiler = require('../compiler.js');
+
+test('Replace multiline class attribute', async () => {
+  const output = await compiler({
+    source: `<style module>.red { color: red; } .strong { font-weight: bold; }</style><span class="btn
+    red
+    strong
+    main
+    ">btn</span>`,
+  }, {
+    localIdentName: '[local]-123',
+  });
+
+  expect(output).toBe(
+    `<style module>:global(.red-123) { color: red; } :global(.strong-123) { font-weight: bold; }</style><span class="btn
+    red-123
+    strong-123
+    main
+    ">btn</span>`
+  );
+});
+