Merge pull request #28 from mohsenshafiei/dev

Dev

examples/sass-example/style.scss

@@ -1,7 +1,9 @@
 @import 'margin';
 
-.maintainer {
+html, div, .classic, h1, h2, h3, h4 {
   top: 100px;
+}
+.maintainer {
   left: 100px;
   right: 100px;
   transform: translate(-50%);

src/plugins/postcss-module-composer.js

@@ -8,6 +8,7 @@ const {
   createModuleDeclaration,
   isGlobal,
   removeSpace,
+  removeNotGlobals,
 } = require('./utils');
 
 const mainDist = path.resolve(__dirname, '../../dist/quark-loader-output.css');
@@ -17,27 +18,31 @@ module.exports = postcss.plugin('postcss-module-composer', () => (root) => {
   let composerString = '';
   let consumerString = '';
   root.walkRules((rule) => {
-    const str = rule.selector;
-    str.split(',').forEach((selector) => {
-      composerString += `${removeSpace(selector)} {\n`;
+    const identifier = rule.selector;
+    let once = false;
+    identifier.split(',').forEach((selector) => {
       if (!isGlobal(removeSpace(selector))) {
+        composerString += `${removeSpace(selector)} {\n`;
         rule.walkDecls((decl) => {
           composerString += createModuleComposer(decl.prop, decl.value);
           hashmap.set(
             createModuleSelector(decl.prop, decl.value),
             createModuleDeclaration(decl.prop, decl.value),
           );
         });
-      } else {
+        composerString += '}\n';
+      } else if (once === false) {
         rule.walkDecls((decl) => {
-          composerString += createModuleDeclaration(decl.prop, decl.value);
+          const globals = removeNotGlobals(rule.selector);
+          composerString += `${globals} {\n${createModuleDeclaration(decl.prop, decl.value)}`;
           hashmap.set(
             createModuleSelector(decl.prop, decl.value),
             createModuleDeclaration(decl.prop, decl.value),
           );
         });
+        composerString += '}\n';
+        once = true;
       }
-      composerString += '}\n';
     });
   });
   hashmap.forEach((value, key) => {
@@ -47,5 +52,5 @@ module.exports = postcss.plugin('postcss-module-composer', () => (root) => {
   });
   const css = consumerString + composerString;
   main.write(css);
-  return (false);
+  return (true);
 });

src/plugins/utils/index.js

@@ -1,17 +1,31 @@
-// eslint-disable-next-line
-const regex = /\(|\)|\%|\.|\#|\,|\+|\:|\"|\/|\/|\`|\'/g;
 const globalSelector = require('./global');
 
+const regex = /\(|\)|%|\.|#|,|\+|:|"|\/|\/|`|'/g;
+
 const createModuleComposer = (property, value) => (`\tcomposes: ${property}--${value.replace(/ /g, '-').replace(regex, '')};\n`);
+
 const createModuleDeclaration = (property, value) => (`\t${property}: ${value};\n`);
+
 const createModuleSelector = (property, value) => (`.${property}--${value.replace(/ /g, '-').replace(regex, '')} {\n`);
+
 const isGlobal = selector => globalSelector.includes(selector);
-const removeSpace = str => str.replace(/\s/g, '');
+
+const removeSpace = str => str.trim();
+
+const removeNotGlobals = (str) => {
+  let result = '';
+  str.split(',').forEach((item) => {
+    result += (isGlobal(removeSpace(item))) ? `, ${removeSpace(item)}` : '';
+    return false;
+  });
+  return result.substr(1).trim();
+};
 
 module.exports = {
   createModuleComposer,
   createModuleDeclaration,
   createModuleSelector,
-  isGlobal,
   removeSpace,
+  removeNotGlobals,
+  isGlobal,
 };

webpack.dev.js

@@ -1,6 +1,6 @@
 const path = require('path');
 
-const context = path.resolve(__dirname, 'examples/css-example');
+const context = path.resolve(__dirname, 'examples/sass-example');
 const loader = path.resolve(__dirname, 'src');
 
 module.exports = {
@@ -24,7 +24,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.css$/,
+        test: /\.scss$/,
         use: [
           {
             loader: 'css-loader',