Add support for parsing media query theme-vars

Author: samuelmaddock

lib/loader.js

@@ -9,15 +9,6 @@ const postCssPlugins = require('./postcss-plugins');
 const extractThemeRulesPlugin = postCssPlugins.extractThemeRulesPlugin;
 const removeCssModuleExports = postCssPlugins.removeCssModuleExports;
 
-const stringifyRuleMap = (ruleMap) => {
-    return Object.keys(ruleMap).map(selector => {
-        const declsMap = ruleMap[selector];
-        const decls = Object.keys(declsMap).map(prop => `${prop}: ${declsMap[prop]};`);
-
-        return `${selector} {\n\t${decls.join('\n\t')}\n}`;
-    }).join('\n');
-};
-
 // copied from css-loader/lib/getLocalIdent.js
 function getLocalIdent(loaderContext, localIdentName, localName, options) {
 	if(!options.context)
@@ -46,8 +37,8 @@ module.exports = function (source, map) {
                 loader.emitWarning(msg.toString());
             });
 
-            if (result.ruleMap) {
-                const content = stringifyRuleMap(result.ruleMap);
+            if (result.themeRoot) {
+                const content = result.themeRoot.toString();
 
                 return {
                     css: result.css,

lib/postcss-plugins.js

@@ -8,35 +8,65 @@ module.exports.extractThemeRulesPlugin = postcss.plugin('postcss-extract-theme-r
     const prefix = options.prefix || THEME_VAR_PREFIX;
 
     return (root, results) => {
-        /*
-        ruleMap = {
-            '.example': {
-                color: 'theme-var(--color-primary);',
-                'font-weight': 'theme-var(--font-weight-medium);'
-            }
-        }
-        */
-        let ruleMap;
+        let themeRoot = new postcss.root();
 
-        root.walkRules(rule => {
+        const extractThemeRule = rule => {
+            let hasThemeVar = false
+            let decls = [];
             rule.walkDecls(decl => {
                 if (decl.value.indexOf(prefix) > -1) {
-                    ruleMap = ruleMap || (ruleMap = {});
-                    let declMap = ruleMap[rule.selector] || (ruleMap[rule.selector] = {});
-
-                    let value = decl.value;
-
-                    if (decl.important) {
-                        value += ' !important';
-                    }
-
-                    declMap[decl.prop] = value;
+                    hasThemeVar = true
+                    let themeDecl = decl.clone();
+                    decls.push(themeDecl);
                     decl.remove();
                 }
             });
+            if (decls.length > 0) {
+                let themeRule = new postcss.rule();
+                themeRule.selector = rule.selector;
+                themeRule.nodes = decls;
+                themeRule.raws = rule.raws;
+                return themeRule
+            }
+        }
+
+        root.each(node => {
+            let nodes = [];
+            switch (node.type) {
+                case 'rule':
+                    let themeRule = extractThemeRule(node);
+                    if (themeRule) {
+                        nodes.push(themeRule);
+                    }
+                    break;
+                case 'atrule':
+                    let rules = []
+                    node.each(atnode => {
+                        if (atnode.type === 'rule') {
+                            let themeRule = extractThemeRule(atnode);
+                            if (themeRule) {
+                                rules.push(themeRule);
+                            }
+                        }
+                    })
+                    if (rules.length > 0) {
+                        let themeAtRule = new postcss.atRule()
+                        themeAtRule.params = node.params;
+                        themeAtRule.name = node.name;
+                        themeAtRule.nodes = rules;
+                        themeAtRule.raws = node.raws;
+                        nodes.push(themeAtRule);
+                    }
+                    break;
+            }
+            if (nodes.length > 0) {
+                themeRoot.nodes = themeRoot.nodes.concat(nodes);
+            }
         });
 
-        results.ruleMap = ruleMap;
+        if (themeRoot.nodes.length > 0) {
+            results.themeRoot = themeRoot
+        }
     };
 });