Merge branch 'release/1.1.0'

Author: Michael Vurchio

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Svelte preprocess CSS Modules, changelog
 
+# 1.1.0
+- Add optional shortand syntax `$.MY_CLASSNAME` to increase development speed and remove verbosity.
+
 # 1.0.1
 - Fix style parsing on empty cssModules class
 

README.md

@@ -67,10 +67,9 @@ Pass an object of the following properties
 | `includePaths` | `{Array}` | `[]` (Any) | An array of paths to be processed |
 
 
-
 ## Usage on Svelte Component
 
-**On the HTML markup** (not the CSS), Prefix any class name that require CSS Modules by *$style.*  => `$style.My_CLASSNAME`
+**On the HTML markup** (not the CSS), Prefix any class name that require CSS Modules by *$style.*  => `$style.MY_CLASSNAME`
 
 ```html
 <style>
@@ -209,6 +208,10 @@ A class can be naturally used on multiple elements.
 Toggling a class on an element.
 
 ```html
+<script>
+  let isActive = true;
+</script>
+
 <style>
   .bold { font-weight: bold; }
 </style>
@@ -217,6 +220,41 @@ Toggling a class on an element.
 <p class="{isActive ? '$style.bold' : ''}">My blue text</p>
 ```
 
+### Shorthand
+To remove verbosity the shorthand `$.MY_CLASSNAME` can be used instead of the regular `$style.MY_CLASSNAME`.
+
+*before*
+
+```html
+<script>
+  let isActive = true;
+</script>
+
+<style>
+  .red { color: red; }
+  .blue { color: blue; }
+  .bold { font-weight: bold; }
+</style>
+
+<p
+  class:$.bold={isActive}
+  class="$.red">My red text</p>
+<p class="{isActive ? '$.bold' : ''} $.blue">My blue text</p>
+```
+
+*After*
+
+```html
+<style>
+  .red-en-6pb { color: red; }
+  .blue-oVk-n1 { color: blue; }
+  .bold-2jIMhI { font-weight: bold; }
+</style>
+
+<p class="red-en-6pb bold-2jIMhI">My red text</p>
+<p class="bold-2jIMhI blue-oVk-n1">My blue text</p>
+```
+
 ## Example
 
 *Rollup Config*

example/webpack/App.svelte

@@ -70,7 +70,7 @@ button {
 }
 </style>
 
-<div class="$style.overlay" />
+<div class="$.overlay" />
 <div class="$style.modal">
   <section>
     <header class="$style.active">My Modal title</header>

example/webpack/Time.svelte

@@ -24,5 +24,5 @@
 </style>
 
 <div
-  class="$style.datetime"
-  class:$style.bold={true}>{time}</div>
+  class="$.datetime"
+  class:$.bold={true}>{time}</div>

index.js

@@ -7,7 +7,7 @@ const pluginOptions = {
 }
 
 const regex = {
-  module: /\$style\.(:?[\w\d-]*)/gm,
+  module: /\$(style)?\.(:?[\w\d-]*)/gm,
   style: /<style(\s[^]*?)?>([^]*?)<\/style>/gi,
   class: (className) => {
     return new RegExp(`\\.(${className})\\b(?![-_])`, 'gm')
@@ -58,7 +58,7 @@ const markup = async ({ content, filename }) => {
   const styles = content.match(regex.style);
   moduleClasses[filename] = {};
 
-  return { code: content.replace(regex.module, (match, className) => {
+  return { code: content.replace(regex.module, (match, key, className) => {
     let replacement = '';
     if (styles.length) {
       if (regex.class(className).test(styles[0])) {

package-lock.json

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

package.json

@@ -1,12 +1,22 @@
 const compiler = require('./compiler.js');
 
 const source = '<style>.red { color: red; }</style>\n<span class="$style.blue">Blue</span>';
+const sourceShorthand = '<style>.red { color: red; }</style>\n<span class="$.blue">Blue</span>';
+const expectedOutput = '<style>.red { color: red; }</style>\n<span class="">Blue</span>';
 
 test('Remove unused CSS Modules from HTML attribute', async () => {
   const output = await compiler({
     source,
     localIdentName: '[local]-123456',
   });
 
-  expect(output).toBe('<style>.red { color: red; }</style>\n<span class="">Blue</span>');
-});
+  expect(output).toBe(expectedOutput);
+});
+test('[Shorthand] Remove unused CSS Modules from HTML attribute', async () => {
+  const output = await compiler({
+    source: sourceShorthand,
+    localIdentName: '[local]-123456',
+  });
+
+  expect(output).toBe(expectedOutput);
+});

test/remove.test.js

@@ -1,6 +1,7 @@
 const compiler = require('./compiler.js');
 
 const source = '<style>.red { color: red; }</style>\n<span class="$style.red">Red</span>';
+const sourceShorthand = '<style>.red { color: red; }</style>\n<span class="$.red">Red</span>';
 
 test('Generate CSS Modules from HTML attributes, Replace CSS className', async () => {
   const output = await compiler({
@@ -10,6 +11,14 @@ test('Generate CSS Modules from HTML attributes, Replace CSS className', async (
 
   expect(output).toBe('<style>:global(.red-123456) { color: red; }</style>\n<span class="red-123456">Red</span>');
 });
+test('[Shorthand] Generate CSS Modules from HTML attributes, Replace CSS className', async () => {
+  const output = await compiler({
+    source: sourceShorthand,
+    localIdentName: '[local]-123456',
+  });
+
+  expect(output).toBe('<style>:global(.red-123456) { color: red; }</style>\n<span class="red-123456">Red</span>');
+});
 
 test('Avoid generated class to start with a non character', async () => {
   const output = await compiler({
@@ -18,6 +27,13 @@ test('Avoid generated class to start with a non character', async () => {
   });
   expect(output).toBe('<style>:global(._1red) { color: red; }</style>\n<span class="_1red">Red</span>');
 });
+test('[Shorthand] Avoid generated class to start with a non character', async () => {
+  const output = await compiler({
+    source: sourceShorthand,
+    localIdentName: '1[local]',
+  });
+  expect(output).toBe('<style>:global(._1red) { color: red; }</style>\n<span class="_1red">Red</span>');
+});
 
 test('Avoid generated class to end with a hyphen', async () => {
   const output = await compiler({
@@ -26,3 +42,10 @@ test('Avoid generated class to end with a hyphen', async () => {
   });
   expect(output).toBe('<style>:global(.red) { color: red; }</style>\n<span class="red">Red</span>');
 });
+test('[Shorthand] Avoid generated class to end with a hyphen', async () => {
+  const output = await compiler({
+    source: sourceShorthand,
+    localIdentName: '[local]-',
+  });
+  expect(output).toBe('<style>:global(.red) { color: red; }</style>\n<span class="red">Red</span>');
+});

test/replace.test.js

@@ -10,19 +10,40 @@ const source =
 <span class="$style.red-crimson">Crimson</span>
 <span class="$style.redMajenta">Majenta</span>`;
 
-test('Target proper className from lookalike classNames', async () => {
-  const output = await compiler({
-    source,
-    localIdentName: '[local]-123',
-  });
+const sourceShorthand =
+`<style>
+  .red { color: red; }
+  .red-crimson { color: crimson; }
+  .redMajenta { color: magenta; }
+</style>
+<span class="$.red">Red</span>
+<span class="$.red-crimson">Crimson</span>
+<span class="$.redMajenta">Majenta</span>`;
 
-  expect(output).toBe(
+const expectedOutput = 
 `<style>
   :global(.red-123) { color: red; }
   :global(.red-crimson-123) { color: crimson; }
   :global(.redMajenta-123) { color: magenta; }
 </style>
 <span class="red-123">Red</span>
 <span class="red-crimson-123">Crimson</span>
-<span class="redMajenta-123">Majenta</span>`);
+<span class="redMajenta-123">Majenta</span>`;
+
+test('Target proper className from lookalike classNames', async () => {
+  const output = await compiler({
+    source,
+    localIdentName: '[local]-123',
+  });
+
+  expect(output).toBe(expectedOutput);
+});
+
+test('[Shorthand] Target proper className from lookalike classNames', async () => {
+  const output = await compiler({
+    source: sourceShorthand,
+    localIdentName: '[local]-123',
+  });
+
+  expect(output).toBe(expectedOutput);
 });