feat: allow to export names from global class or id (#21)

src/index.js

@@ -86,6 +86,7 @@ const processor = postcss.plugin('postcss-modules-scope', function(options) {
       (options && options.generateScopedName) || processor.generateScopedName;
     const generateExportEntry =
       (options && options.generateExportEntry) || processor.generateExportEntry;
+    const exportGlobals = options && options.exportGlobals;
 
     const exports = Object.create(null);
 
@@ -173,6 +174,12 @@ const processor = postcss.plugin('postcss-modules-scope', function(options) {
           node.each(traverseNode);
           break;
         }
+        case 'id':
+        case 'class': 
+          if (exportGlobals) {
+            exports[node.value] = [node.value];
+          }
+          break;
       }
       return node;
     }

test/test-cases/export-global-class/expected.css

@@ -0,0 +1,22 @@
+.exportName {
+  color: green;
+}
+
+.exportName:hover {
+  color: red;
+}
+
+@media screen {
+  body {
+    background: red;
+  }
+}
+
+._input__testLocal {
+  color: blue;
+}
+
+:export {
+  exportName: exportName;
+  testLocal: _input__testLocal;
+}

test/test-cases/export-global-class/options.js

@@ -0,0 +1,3 @@
+module.exports = {
+  exportGlobals: true,
+};

test/test-cases/export-global-class/source.css

@@ -0,0 +1,17 @@
+.exportName {
+  color: green;
+}
+
+.exportName:hover {
+  color: red;
+}
+
+@media screen {
+  body {
+    background: red;
+  }
+}
+
+:local(.testLocal) {
+  color: blue;
+}

test/test-cases/export-global-id/expected.css

@@ -0,0 +1,23 @@
+#exportName {
+  color: green;
+}
+
+#exportName:hover {
+  color: red;
+}
+
+@media screen {
+  #exportName-2 {
+    background: red;
+  }
+}
+
+#_input__exportName-3 {
+  color: green;
+}
+
+:export {
+  exportName: exportName;
+  exportName-2: exportName-2;
+  exportName-3: _input__exportName-3;
+}

test/test-cases/export-global-id/options.js

@@ -0,0 +1,3 @@
+module.exports = {
+  exportGlobals: true,
+};

test/test-cases/export-global-id/source.css

@@ -0,0 +1,17 @@
+#exportName {
+  color: green;
+}
+
+#exportName:hover {
+  color: red;
+}
+
+@media screen {
+  #exportName-2 {
+    background: red;
+  }
+}
+
+:local(#exportName-3) {
+  color: green;
+}