svelte-preprocess-cssmodules - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

CHANGELOG.md

 # 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)
@@ -5,0 +8,0 @@

index.js

@@ -9,2 +9,3 @@ const path = require('path');
   getLocalIdent: getLocalIdent,
+  strict: false,
 };
@@ -17,4 +18,7 @@
   class: (className) => {
-    return new RegExp(`\\.(${className})\\b(?![-_])`, 'gm')
-  }
+    return new RegExp(`\\.(${className})\\b(?![-_])`, 'gm');
+  },
+  classSelector: (className) => {
+    return new RegExp(`\\S*\\.(${className})\\b(?![-_])\\S*`, 'gm');
+  },
 };
@@ -40,3 +44,3 @@
   );
-  
+
   // replace unwanted characters from [path]
@@ -78,16 +82,34 @@ if (regex.pathUnallowed.test(interpolatedName)) {
 
-  return { code: content.replace(regex.module, (match, key, className) => {
-    let replacement = '';
-    if (styles.length) {
-      if (regex.class(className).test(styles[0])) {
-        const interpolatedName = generateName(
-          filename,
-          styles[0],
-          className
+  return {
+    code: content.replace(regex.module, (match, key, className) => {
+      let replacement = '';
+      if (!className.length) {
+        throw new Error(
+          `Invalid class name in file ${filename}.\n`+
+          'This usually happens when using dynamic classes with svelte-preprocess-cssmodules.'
         );
+      }
 
+      if (!regex.class(className).test(`.${className}`)) {
+        throw new Error(`Classname "${className}" in file ${filename} is not valid`);
+      }
+
+      if (styles.length) {
+        if (!regex.class(className).test(styles[0])) {
+          if (pluginOptions.strict) {
+            throw new Error(
+              `Classname "${className}" was not found in declared ${filename} <style>`
+            );
+          } else {
+            // In non-strict mode, we just remove $style classes that don't have a definition
+            return '';
+          }
+        }
+
+        const interpolatedName = generateName(filename, styles[0], className);
+
         const customInterpolatedName = pluginOptions.getLocalIdent(
           {
             context: path.dirname(filename),
-            resourcePath :filename,
+            resourcePath: filename,
           },
@@ -108,5 +130,5 @@ {
       }
-    }
-    return replacement;
-  })};
+      return replacement;
+    }),
+  };
 };
@@ -120,3 +142,3 @@
   }
-  
+
   const classes = moduleClasses[filename];
@@ -130,4 +152,13 @@
     code = code.replace(
-      regex.class(className),
-      () => `:global(.${classes[className]})`
+      regex.classSelector(className),
+      (match) => {
+        const generatedClass = match.replace(
+          regex.class(className),
+          () => `.${classes[className]}`
+        );
+
+        return generatedClass.indexOf(':global(') !== -1
+          ? generatedClass
+          : `:global(${generatedClass})`;
+      }
     );
@@ -146,3 +177,3 @@ }
     style,
-  }
-};
+  };
+};

package.json

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

README.md

@@ -69,6 +69,7 @@ # Svelte preprocess CSS Modules
 | `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>`
 
 #### `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.
 
@@ -153,3 +154,3 @@ ```js
 
-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.
 
@@ -173,9 +174,9 @@ *Before*
 <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>
 ```
@@ -185,3 +186,3 @@
 
-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.
 
@@ -202,6 +203,6 @@ *Before*
 <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>
 ```
@@ -412,3 +413,3 @@
   }
-  section {
+  section.svelte-1s2ez3w {
     flex: 0 1 auto;
@@ -419,3 +420,3 @@ flex-direction: column;
   }
-  header {
+  header.svelte-1s2ez3w {
     padding: 1rem;
@@ -428,7 +429,7 @@ border-bottom: 1px solid #d9d9d9;
   }
-  footer {
+  footer.svelte-1s2ez3w {
     padding: 1rem;
     border-top: 1px solid #d9d9d9;
   }
-  button {
+  button.svelte-1s2ez3w {
     background: #fff;
@@ -457,7 +458,7 @@ border: 1px solid #ccc;
 
-**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.
 
@@ -464,0 +465,0 @@ ## License

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17051

increased by9.65%

Lines of code

142

increased by24.56%

Number of lines in readme file

458

increased by0.22%

No dependency changes