Support nested rules.

Author: alexandrukis

.tape.js

@@ -26,4 +26,10 @@ module.exports = {
             text: "Could not find file './dummy.css'",
         },
     },
+    'supportsCustomParents/test': {
+        message: 'removes statements if non-existent files are provided',
+    },
+    // 'supportsMediaQueries/test': {
+    //     message: 'removes statements if non-existent files are provided',
+    // },
 };

index.js

@@ -1,9 +1,9 @@
 {
-  "name": "postcss-inline-class",
-  "version": "0.0.1",
+  "name": "@sector-labs/postcss-inline-class",
+  "version": "0.0.2",
   "description": "Inline the declarations of other CSS classes in your CSS classes.",
-  "main": "index.js",
-  "repository": "https://github.com/alexandrukis/postcss-inline-class",
+  "main": "src/index.js",
+  "repository": "https://github.com/sectorlabs/postcss-inline-class",
   "author": "Sector Labs <open-source@sectorlabs.ro>",
   "license": "MIT",
   "keywords": [
@@ -16,7 +16,7 @@
     "class"
   ],
   "files": [
-    "index.js"
+    "src/*"
   ],
   "engines": {
     "node": ">=6.0.0"
@@ -38,7 +38,7 @@
     "ci": "eslint . && postcss-tape",
     "fix": "eslint . --fix --ignore-pattern '!.tape.js'",
     "lint": "eslint .",
-    "test": "postcss-tape --plugin ./index.js"
+    "test": "postcss-tape --plugin src/index.js"
   },
   "eslintConfig": {
     "extends": "eslint-config-i-am-meticulous",

package.json

@@ -0,0 +1,15 @@
+const _ = require('lodash');
+
+const findInlineDeclarations = (root, targetSelector) => {
+    const inlineDeclarations = [];
+
+    root.walkRules((rule) => {
+        if (rule.selectors.includes(targetSelector) && rule.parent.type === 'root') {
+            inlineDeclarations.push(rule);
+        }
+    });
+
+    return _.flatten(inlineDeclarations.map((match) => match.clone().nodes));
+};
+
+module.exports = findInlineDeclarations;

src/findInlineDeclarations.js

@@ -0,0 +1,23 @@
+const _ = require('lodash');
+
+const findNestedRules = (root, targetSelector) => {
+    const nestedMatches = [];
+
+    root.walkRules((rule) => {
+        if (rule.selectors.includes(targetSelector) && rule.parent.type === 'root') {
+            return;
+        }
+
+        const isNestedRule = rule.selectors.find((selector) =>
+            selector.split(' ').includes(targetSelector),
+        );
+
+        if (isNestedRule) {
+            nestedMatches.push(rule);
+        }
+    });
+
+    return _.flatten(nestedMatches.map((match) => match.clone()));
+};
+
+module.exports = findNestedRules;

src/findNestedRules.js

@@ -0,0 +1,74 @@
+const path = require('path');
+
+const postcss = require('postcss');
+
+const readFile = require('./utils').readFile;
+const parseImportPath = require('./utils').parseImportPath;
+const findInlineDeclarations = require('./findInlineDeclarations');
+const findNestedRules = require('./findNestedRules');
+
+const processAtRule = (onError, atRule, root, targetClass, importPath) => {
+    const matchedDeclarations = findInlineDeclarations(root, targetClass);
+    const nestedRules = findNestedRules(root, targetClass);
+
+    if (matchedDeclarations.length === 0 && nestedRules.length === 0) {
+        if (importPath) {
+            onError(`Could not find class '${targetClass}' in file '${importPath}'`);
+        } else {
+            onError(`Could not find class '${targetClass}'`);
+        }
+    }
+
+    nestedRules.forEach((nestedRule) => {
+        nestedRule.selectors = nestedRule.selectors.map((selector) =>
+            postcss.list
+                .space(selector)
+                .map((className) => (className === targetClass ? atRule.parent.selector : className))
+                .join(' '),
+        );
+        root.append(nestedRule);
+    });
+
+    atRule.replaceWith(matchedDeclarations);
+};
+
+const walkAtRule = (root, result, promises) => (atRule) => {
+    const params = postcss.list.space(atRule.params);
+    const targetClass = params[0];
+
+    const onError = (message) => atRule.warn(result, message);
+
+    if (params.length === 1) {
+        processAtRule(onError, atRule, root, targetClass);
+        return;
+    }
+
+    const importPath = parseImportPath(params.slice(-1)[0]);
+    const resolvedPath = path.resolve(path.dirname(root.source.input.file), importPath);
+
+    promises.push(
+        readFile(resolvedPath)
+            .then((rawData) => {
+                const importedRoot = postcss.parse(rawData);
+                processAtRule(onError, atRule, importedRoot, targetClass, importPath);
+            })
+            .catch(() => {
+                onError(`Could not find file '${importPath}'`);
+                atRule.remove();
+            }),
+    );
+};
+
+const processFile = (root, result) => (resolve) => {
+    const promises = [];
+
+    const atRuleWalker = walkAtRule(root, result, promises);
+
+    root.walkRules((rule) => rule.walkAtRules('inline', atRuleWalker));
+
+    return Promise.all(promises).then(resolve).catch(resolve);
+};
+
+module.exports = postcss.plugin('postcss-inline-class', () => (root, result) =>
+    new Promise(processFile(root, result)),
+);

src/index.js

@@ -0,0 +1,17 @@
+const fs = require('fs');
+
+module.exports.parseImportPath = (path) => {
+    const matches = path.trim().match(/^['"](.+?)['"](.*)/);
+    return matches[1];
+};
+
+module.exports.readFile = (file) => {
+    return new Promise((resolve, reject) => {
+        fs.readFile(file, 'utf-8', (err, contents) => {
+            if (err) {
+                return reject(err);
+            }
+            return resolve(contents);
+        });
+    });
+};

src/utils.js

@@ -0,0 +1,12 @@
+.ba {
+    color: red;
+}
+
+.bad .ba {
+    color: blue;
+}
+
+.b {
+    @inline .ba;
+    font-size: 14px;
+}

test/supportsCustomParents/test.css

@@ -0,0 +1,16 @@
+.ba {
+    color: red;
+}
+
+.bad .ba {
+    color: blue;
+}
+
+.b {
+    color: red;
+    font-size: 14px;
+}
+
+.bad .b {
+    color: blue;
+}