Merge pull request #7 from micantoine/6-support-for-getlocalident

Support for getLocalIdent

Author: micantoine

example/webpack/App.svelte

@@ -1,5 +1,5 @@
 <script>
-  import Time from './Time.svelte';
+  import Time from './components/Time.svelte';
 </script>
 
 <style>

example/webpack/Time.svelte example/webpack/components/Time.svelteexample/webpack/Time.svelte renamed to example/webpack/components/Time.svelte

@@ -21,7 +21,7 @@ module.exports = {
             options: {
               preprocess: [
                 cssModules({
-                  includePaths: ['./']
+                  includePaths: ['./'],
                 })
               ],
               emitCss: false

example/webpack/webpack.config.js

@@ -4,7 +4,8 @@ const { interpolateName } = require('loader-utils');
 
 const pluginOptions = {
   includePaths: [],
-  localIdentName: '[local]-[hash:base64:6]'
+  localIdentName: '[local]-[hash:base64:6]',
+  getLocalIdent: getLocalIdent,
 };
 
 const regex = {
@@ -18,14 +19,17 @@ const regex = {
 
 let moduleClasses = {};
 
+function getLocalIdent(context, localIdentName, localName, options) {
+  return localIdentName.interpolatedName;
+}
+
 function generateName(resourcePath, styles, className) {
   const filePath = resourcePath;
-  const fileName = path.basename(filePath);
   const localName = pluginOptions.localIdentName.length
     ? pluginOptions.localIdentName.replace(/\[local\]/gi, () => className)
     : className;
 
-  const content = `${styles}-${filePath}-${fileName}-${className}`;
+  const content = `${styles}-${filePath}-${className}`;
 
   let interpolatedName = cssesc(
     interpolateName({ resourcePath }, localName, { content })
@@ -77,8 +81,25 @@ const markup = async ({ content, filename }) => {
           styles[0],
           className
         );
-        moduleClasses[filename][className] = interpolatedName;
-        replacement = interpolatedName;
+
+        const customInterpolatedName = pluginOptions.getLocalIdent(
+          {
+            context: path.dirname(filename),
+            resourcePath :filename,
+          },
+          {
+            interpolatedName,
+            template: pluginOptions.localIdentName,
+          },
+          className,
+          {
+            markup: code,
+            style: styles[0],
+          }
+        );
+
+        moduleClasses[filename][className] = customInterpolatedName;
+        replacement = customInterpolatedName;
       }
     }
     return replacement;

index.js

@@ -1,13 +1,11 @@
 const svelte = require('svelte/compiler');
 const cssModules = require('../index.js');
 
-module.exports = async ({ source, localIdentName }) => {
- const { code } = await svelte.preprocess(
+module.exports = async ({ source }, options) => {
+  const { code } = await svelte.preprocess(
     source,
     [
-      cssModules({
-        localIdentName,
-      })
+      cssModules(options)
     ],
     { filename : 'src/App.svelte' }
   );

package-lock.json

@@ -0,0 +1,16 @@
+const compiler = require('./compiler.js');
+
+const source = '<style>.red { color: red; }</style>\n<span class="$style.red">Red</span>';
+
+test('Customize generated classname from getLocalIdent', async () => {
+  const output = await compiler({
+    source,
+  }, {
+    localIdentName: '[local]-123456MC',
+    getLocalIdent: (context, { interpolatedName }) => {
+      return interpolatedName.toLowerCase();
+    }
+  });
+
+  expect(output).toBe('<style>:global(.red-123456mc) { color: red; }</style>\n<span class="red-123456mc">Red</span>');
+});

test/compiler.js

@@ -6,6 +6,7 @@ const sourceReactiveClass = '<style>.red { color: red; }</style>\n<span class:$.
 test('Replace path on regular class', async () => {
   const output = await compiler({
     source,
+  }, {
     localIdentName: '[path][name]__[local]',
   });
 
@@ -15,6 +16,7 @@ test('Replace path on regular class', async () => {
 test('Replace path on reactive class', async () => {
   const output = await compiler({
     source: sourceReactiveClass,
+  }, {
     localIdentName: '[path][name]__[local]',
   });
 

test/getlocalident.test.js

@@ -7,6 +7,7 @@ const expectedOutput = '<style>.red { color: red; }</style>\n<span class="">Blue
 test('Remove unused CSS Modules from HTML attribute', async () => {
   const output = await compiler({
     source,
+  }, {
     localIdentName: '[local]-123456',
   });
 
@@ -15,6 +16,7 @@ test('Remove unused CSS Modules from HTML attribute', async () => {
 test('[Shorthand] Remove unused CSS Modules from HTML attribute', async () => {
   const output = await compiler({
     source: sourceShorthand,
+  }, {
     localIdentName: '[local]-123456',
   });
 

test/path.test.js

@@ -6,6 +6,7 @@ const sourceShorthand = '<style>.red { color: red; }</style>\n<span class="$.red
 test('Generate CSS Modules from HTML attributes, Replace CSS className', async () => {
   const output = await compiler({
     source,
+  }, {
     localIdentName: '[local]-123456',
   });
 
@@ -14,6 +15,7 @@ test('Generate CSS Modules from HTML attributes, Replace CSS className', async (
 test('[Shorthand] Generate CSS Modules from HTML attributes, Replace CSS className', async () => {
   const output = await compiler({
     source: sourceShorthand,
+  }, {
     localIdentName: '[local]-123456',
   });
 
@@ -23,13 +25,15 @@ test('[Shorthand] Generate CSS Modules from HTML attributes, Replace CSS classNa
 test('Avoid generated class to start with a non character', async () => {
   const output = await compiler({
     source,
+  }, {
     localIdentName: '1[local]',
   });
   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>');
@@ -38,13 +42,15 @@ test('[Shorthand] Avoid generated class to start with a non character', async ()
 test('Avoid generated class to end with a hyphen', async () => {
   const output = await compiler({
     source,
+  }, {
     localIdentName: '[local]-',
   });
   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>');