Merge branch 'release/1.2.1'

Author: Michael Vurchio

CHANGELOG.md

@@ -1,6 +1,9 @@
 # Svelte preprocess CSS Modules, changelog
 
-## 1.2.0 (Sept 21, 2020) 
+## 1.2.1 (Oct 31, 2020)
+- Fix class chaining and pseudo selector [pull request #8](https://github.com/micantoine/svelte-preprocess-cssmodules/pull/8)
+
+## 1.2.0 (Sept 21, 2020)
 - Add support for `getLocalIdent()` [issue #6](https://github.com/micantoine/svelte-preprocess-cssmodules/issues/6) - [pull request #7](https://github.com/micantoine/svelte-preprocess-cssmodules/pull/7)
 
 ## 1.1.1

README.md

@@ -66,11 +66,11 @@ Pass an object of the following properties
 | `localIdentName` | `{String}` | `"[local]-[hash:base64:6]"` |  A rule using any available token from [webpack interpolateName](https://github.com/webpack/loader-utils#interpolatename) |
 | `includePaths` | `{Array}` | `[]` (Any) | An array of paths to be processed |
 | `getLocalIdent` | `Function` | `undefined`  | Generate the classname by specifying a function instead of using the built-in interpolation |
-| `strict`  | `Boolean` | `false` | When true, an exception is raised when a class is used while not being defined in `<style>`
+| `strict`  | `{Boolean}` | `false` | When true, an exception is raised when a class is used while not being defined in `<style>`
 
 #### `getLocalIdent`
 
-Function to generate the classname instead of the built-in function.
+Function to generate the classname instead of relying on the built-in function.
 
 ```js
 function getLocalIdent(
@@ -150,7 +150,7 @@ The component will be transformed to
 
 ### Replace only the required class
 
-CSS Modules classname are generated to the html class values prefixed by `$style.`. The rest is left untouched.
+CSS Modules classname are generated to the html class values prefixed by `$style.`. The rest is left untouched and will use the default svelte scoped class.
 
 *Before*
 
@@ -169,18 +169,18 @@ CSS Modules classname are generated to the html class values prefixed by `$style
 
 ```html
 <style>
-  .blue { color: blue;}
+  .blue.svelte-1s2ez3w { color: blue;}
   .red-2iBDzf { color: red; }
-  .text-center { text-align: center; }
+  .text-center.svelte-1s2ez3w { text-align: center; }
 </style>
 
-<p class="blue text-center">My blue text</p>
-<p class="red-2iBDzf text-center">My red text</p>
+<p class="blue text-center svelte-1s2ez3w">My blue text</p>
+<p class="red-2iBDzf text-center svelte-1s2ez3w">My red text</p>
 ```
 
 ### Remove unspecified class
 
-If a CSS Modules class has no css style attached, it will be removed from the class attribute.
+On non strict mode, if a CSS Modules class has no css style attached, it will be removed from the class attribute.
 
 *Before*
 
@@ -196,10 +196,10 @@ If a CSS Modules class has no css style attached, it will be removed from the cl
 
 ```html
 <style>
-  .text-center { text-align: center; }
+  .text-center.svelte-1s2ez3w { text-align: center; }
 </style>
 
-<p class="text-center">My blue text</p>
+<p class="text-center svelte-1s2ez3w">My blue text</p>
 ```
 
 ### Target any classname format
@@ -405,25 +405,25 @@ export default {
     background-color: #fff;
     transform: translateX(-50%) translateY(-50%);
   }
-  section {
+  section.svelte-1s2ez3w {
     flex: 0 1 auto;
     flex-direction: column;
     display: flex;
     height: 100%;
   }
-  header {
+  header.svelte-1s2ez3w {
     padding: 1rem;
     border-bottom: 1px solid #d9d9d9;
   }
   ._1HPUBXtzNG {
     padding: 1rem;
     flex: 1 0 0;
   }
-  footer {
+  footer.svelte-1s2ez3w {
     padding: 1rem;
     border-top: 1px solid #d9d9d9;
   }
-  button {
+  button.svelte-1s2ez3w {
     background: #fff;
     border: 1px solid #ccc;
     border-radius: 5px;
@@ -447,11 +447,11 @@ export default {
 </div>
 ```
 
-**Note:** The svelte scoped classes are still being applied to the html elements with a style.
+**Note:** The svelte scoped class is still being applied to the html elements with a style.
 
 ## Why CSS Modules on Svelte
 
-While the native CSS Scoped system should be largely enough to avoid class conflict, it could find its limit when working on a hybrid project. On a non full Svelte application where it is used to enhance pieces of the page; the thought on the class naming is no less different than the one on a regular html page to avoid conflict and unwilling inheritance. For example, on the modal component above, It would have been wiser to namespace some of the classes such as `.modal-body` and `.modal-cancel` to avoid inheriting styles from other `.body` and `.cancel`.
+While the native CSS Scoped system should be largely enough to avoid class conflict, it could find its limit when working on a hybrid project. On a non full Svelte application, the thought on the class naming would not be less different than what we would do on a regular html page. For example, on the modal component above, It would have been wiser to namespace some of the classes such as `.modal-body` and `.modal-cancel` in order to prevent inheriting styles from other `.body` and `.cancel` classes.
 
 ## License
 

package.json

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

test/chaining-selector.test.js

@@ -0,0 +1,140 @@
+const compiler = require('./compiler.js');
+
+describe('combining multiple classes', () => {
+  const style = '<style>span.red.large:hover { font-size: 20px; } \n.red { color: red; }</style>';
+  const source = style + '\n<span class="$style.red $style.large">Red</span>';
+
+  const expectedStyle =
+    '<style>:global(span.red-123456.large-123456:hover) { font-size: 20px; } \n:global(.red-123456) { color: red; }</style>';
+  const expectedOutput = expectedStyle + '\n<span class="red-123456 large-123456">Red</span>';
+
+  test('Generate CSS Modules from HTML attributes, Replace CSS className', async () => {
+    const output = await compiler(
+      {
+        source,
+      },
+      {
+        localIdentName: '[local]-123456',
+      }
+    );
+
+    expect(output).toBe(expectedOutput);
+  });
+});
+
+describe('Classname is part of a selector', () => {
+  
+  test('CSS Modules class targetting children', async () => {
+    const source =
+      '<style>\n' +
+        'div.red > sup { font-size: 12px; }\n' +
+        '.red { color: red; }\n' +
+      '</style>\n' +
+      '<div class="$style.red">Red<sup>*</sup></div>';
+
+    const expectedOutput =
+      '<style>\n' +
+        ':global(div.red-123) > sup { font-size: 12px; }\n' +
+        ':global(.red-123) { color: red; }\n' +
+      '</style>\n' +
+      '<div class="red-123">Red<sup>*</sup></div>';
+
+    const output = await compiler(
+      {
+        source,
+      },
+      {
+        localIdentName: '[local]-123',
+      }
+    );
+
+    expect(output).toBe(expectedOutput);
+  });
+
+  test('CSS Modules class has a parent', async () => {
+    const source =
+      '<style>\n' +
+        'div .semibold .red { font-size: 20px; }\n' +
+        '.red { color: red; }\n' +
+        '.semibold { font-weight: 600; }\n' +
+      '</style>\n' +
+      '<div><strong class="$style.semibold"><span class="$style.red">Red</span></strong></div>';
+  
+    const expectedOutput =
+      '<style>\n' +
+        'div :global(.semibold-123) :global(.red-123) { font-size: 20px; }\n' +
+        ':global(.red-123) { color: red; }\n' +
+        ':global(.semibold-123) { font-weight: 600; }\n' +
+      '</style>\n' +
+      '<div><strong class="semibold-123"><span class="red-123">Red</span></strong></div>';
+
+    const output = await compiler(
+      {
+        source,
+      },
+      {
+        localIdentName: '[local]-123',
+      }
+    );
+
+    expect(output).toBe(expectedOutput);
+  });
+
+  test('CSS Modules class has a global parent', async () => {
+    const source =
+      '<style>\n' +
+        ':global(div) .red { font-size: 20px; }\n' +
+        '.red { color: red; }\n' +
+      '</style>\n' +
+      '<div><span class="$style.red">Red</span></div>';
+  
+    const expectedOutput =
+      '<style>\n' +
+        ':global(div) :global(.red-123) { font-size: 20px; }\n' +
+        ':global(.red-123) { color: red; }\n' +
+      '</style>\n' +
+      '<div><span class="red-123">Red</span></div>';
+
+    const output = await compiler(
+      {
+        source,
+      },
+      {
+        localIdentName: '[local]-123',
+      }
+    );
+
+    expect(output).toBe(expectedOutput);
+  });
+
+  test('CSS Modules class is used within a media query', async () => {
+    const source =
+      '<style>\n' +
+        '@media (min-width: 37.5em) {\n' +
+          '.red { color: red; }\n' +
+          'div.bold { font-weight: bold; }\n' +
+        '}\n' +
+      '</style>\n' +
+      '<div class="$style.bold"><span class="$style.red">Red</span></div>';
+  
+    const expectedOutput =
+      '<style>\n' +
+        '@media (min-width: 37.5em) {\n' +
+          ':global(.red-123) { color: red; }\n' +
+          ':global(div.bold-123) { font-weight: bold; }\n' +
+        '}\n' +
+      '</style>\n' +
+      '<div class="bold-123"><span class="red-123">Red</span></div>';
+
+    const output = await compiler(
+      {
+        source,
+      },
+      {
+        localIdentName: '[local]-123',
+      }
+    );
+
+    expect(output).toBe(expectedOutput);
+  });
+});

test/dynamic.test.js

@@ -0,0 +1,47 @@
+const compiler = require('./compiler.js');
+
+describe('using dynamic classes', () => {
+  describe('when matched class is empty', () => {
+    // The parser will identify a class named ''
+    const source =
+      '<style>.red { font-size: 20px; }</style>' + '<span class={`$style.${color}`}>Red</span>';
+
+    test('throws an exception', async () => {
+      await expect(compiler({ source })).rejects.toThrow(
+        'Invalid class name in file src/App.svelte.\nThis usually happens when using dynamic classes with svelte-preprocess-cssmodules.'
+      );
+    });
+  });
+
+  describe('when matched class could be a valid class but does not match any style definition', () => {
+    // The parser will identify a class named 'color'
+    const source =
+      '<style>.colorred { font-size: 20px; }</style>' +
+      '<span class={`$style.color${color}`}>Red</span>';
+
+    it('in strict mode, it throw an exception', async () => {
+      await expect(compiler({ source }, { strict: true })).rejects.toThrow(
+        'Classname "color" was not found in declared src/App.svelte <style>'
+      );
+    });
+
+    // TODO: fix, this is probably not a result one would expect
+    it('in non-strict mode, it removes the resulting class', async () => {
+      const output = await compiler({ source }, { strict: false });
+      expect(output).toEqual(
+        '<style>.colorred { font-size: 20px; }</style><span class={`${color}`}>Red</span>'
+      );
+    });
+  });
+
+  describe('when matched class is an invalid class', () => {
+    // The parser will identify a class named 'color-'
+    const source =
+      '<style>.color-red { font-size: 20px; }</style>' +
+      '<span class={`$style.color-${color}`}>Red</span>';
+
+    it('throws an exception when resulting class is invalid', async () => {
+      await expect(compiler({ source })).rejects.toThrow('Classname "color-" in file src/App.svelte is not valid');
+    });
+  });
+});