fix: better handle invalid usage (#17)

css-modules · Jun 4, 2019 · 4b765b1 · 4b765b1
1 parent 8c306e6
commit 4b765b1
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 0 deletions.
diff --git a/index.js b/index.js
@@ -119,6 +119,10 @@ function localizeNode(rule, mode, localAliasMap) {
         // :local(.foo)
         if (isNested) {
           if (isScoped) {
+            if (node.nodes.length === 0) {
+              throw new Error(`${node.value}() can't be empty`);
+            }
+
             if (context.inside) {
               throw new Error(
                 `A ${node.value} is not allowed inside of a ${
@@ -206,6 +210,10 @@ function localizeNode(rule, mode, localAliasMap) {
       }
       case 'id':
       case 'class': {
+        if (!node.value) {
+          throw new Error('Invalid class or id selector syntax');
+        }
+
         if (context.global) {
           break;
         }

diff --git a/test.js b/test.js
@@ -616,6 +616,44 @@ const tests = [
       :local(.foo) { animation-name: a_value; }
     `,
   },
+  {
+    should: 'throw on invalid syntax id usage',
+    input: '. {}',
+    error: /Invalid class or id selector syntax/,
+  },
+  {
+    should: 'throw on invalid syntax class usage',
+    input: '# {}',
+    error: /Invalid class or id selector syntax/,
+  },
+  {
+    should: 'throw on invalid syntax local class usage',
+    input: ':local(.) {}',
+    error: /Invalid class or id selector syntax/,
+  },
+  {
+    should: 'throw on invalid syntax local id usage',
+    input: ':local(#) {}',
+    error: /Invalid class or id selector syntax/,
+  },
+  {
+    should: 'throw on invalid global class usage',
+    input: ':global(.) {}',
+    error: /Invalid class or id selector syntax/,
+  },
+  {
+    should: 'throw on invalid global class usage',
+    input: ':global(#) {}',
+    error: /Invalid class or id selector syntax/,
+  },
+  /*
+  Bug in postcss-selector-parser
+  {
+    should: 'throw on invalid global class usage',
+    input: ':global() {}',
+    error: /:global\(\) can't be empty/
+  },
+  */
 ];
 
 function process(css, options) {