Preprocess style outside markup. multiple class use ok

Author: Michael Vurchio

README.md

@@ -1,4 +1,5 @@
 # Svelte preprocess CSS Modules
+@todo test ::before, test multiple use, test nested  
 
 Generate CSS Modules classname on Svelte components
 
@@ -79,8 +80,7 @@ CSS Modules classname are generated to the html class values prefixed by `$style
 
 ```html
 <style>
-  .blue { color: blue;
-  }
+  .blue { color: blue;}
   .red-2iBDzf { color: red; }
   .text-center { text-align: center; }
 </style>

example/webpack/App.svelte

@@ -65,19 +65,22 @@ button {
 .cancel {
   background-color: #f2f2f2;
 }
+.active {
+  font-weight: 700;
+}
 </style>
 
 <div class="$style.overlay" />
 <div class="$style.modal">
   <section>
-    <header>My Modal title</header>
+    <header class="$style.active">My Modal title</header>
     <div class="$style.body">
       <Time />
       <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat, deserunt.</p>
       <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat, deserunt. Lorem ipsum dolor sit amet. </p>
     </div>
     <footer>
-      <button>Ok</button>
+      <button class="$style.active">Ok</button>
       <button class="$style.cancel">Cancel</button>
     </footer>
   </section>

example/webpack/Time.svelte

@@ -12,6 +12,9 @@
 </script>
 
 <style>
+  .datetime {
+    color: gray;
+  }
   div {
     text-align: right;
     font-size: 1.2rem;

example/webpack/webpack.config.js

@@ -21,7 +21,6 @@ module.exports = {
             options: {
               preprocess: [
                 cssModules({
-                  localIdentName: '[hash:base64:10]',
                   includePaths: ['./']
                 })
               ],

index.js

@@ -11,6 +11,8 @@ const regex = {
   style: /<style(\s[^]*?)?>([^]*?)<\/style>/gi
 };
 
+let moduleClasses = {};
+
 function generateName(resourcePath, styles, className) {
   const filePath = resourcePath
   const fileName = path.basename(filePath)
@@ -51,38 +53,44 @@ const markup = async ({ content, filename }) => {
   }
 
   const styles = content.match(regex.style);
-  let parsedStyles = null;
+  moduleClasses[filename] = {};
 
-  let parsedSource = content.replace(regex.module, (match, className) => {
+  return { code: content.replace(regex.module, (match, className) => {
     let replacement = '';
-
     if (styles.length) {
       const classRegex = new RegExp(`\\.(${className})\\b(?![-_])`, 'gm');
-      const toBeParsed = parsedStyles ? parsedStyles : styles[0];
 
-      if (classRegex.test(toBeParsed)) {
+      if (classRegex.test(styles[0])) {
         const interpolatedName = generateName(
           filename,
           styles[0],
           className
         );
-        parsedStyles = toBeParsed.replace(
-          classRegex,
-          () => `:global(.${interpolatedName})`
-        );
+        moduleClasses[filename][className] = interpolatedName;
         replacement = interpolatedName;
       }
     }
     return replacement;
-  });
+  })};
+};
 
-  if (parsedStyles) {
-    parsedSource = parsedSource.replace(regex.style, parsedStyles);
+const style = async ({ content, filename }) => {
+  let code = content;
+  const classes = moduleClasses[filename];
+
+  if (Object.keys(classes).length === 0) {
+    return { code };
   }
 
-  return {
-    code: parsedSource
+  for (const className in classes) {
+    const classRegex = new RegExp(`\\.(${className})\\b(?![-_])`, 'gm');
+    code = code.replace(
+      classRegex,
+      () => `:global(.${classes[className]})`
+    );
   }
+
+  return { code };
 };
 
 module.exports = (options) => {
@@ -91,5 +99,6 @@ module.exports = (options) => {
   }
   return {
     markup,
+    style,
   }
 };