Merge pull request #36 from utilitycss/feat/nested-rules

Feat/nested rules
utilitycss · May 29, 2020 · 2fdcb6c · 2fdcb6c
2 parents bde2a5c + 2593021
commit 2fdcb6c
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 18 deletions.
diff --git a/example/example.config.js b/example/example.config.js
@@ -63,11 +63,29 @@ const modules = [
     isResponsive: true
   }),
   colors({
+    nestedRules: {
+      ".dark {}": {
+        whitelist: ["c"],
+        isResponsive: true,
+        colorValues: {
+          black: "#ffffff",
+          white: "#1a1a1a"
+        }
+      },
+      "@media foo": {
+        whitelist: ["c"],
+        colorValues: {
+          black: "#ffffff",
+          white: "#1a1a1a"
+        }
+      }
+    },
     whitelist: ["c", "bgc", "bdc"],
     pseudoClasses: { c: [":hover"], bgc: [":hover", ":active"] },
     colorValues: {
       orange: "#ff6900",
       black: "#1a1a1a",
+      white: "#ffffff",
       grey: "#777777",
       grey2: "#a5a5a5",
       grey3: "#dddddd",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@utilitycss/utility",
-  "version": "0.5.5",
+  "version": "0.6.0",
   "description": "Generator for Utility CSS frameworks",
   "author": "Andrea Moretti (@axyz) <[email protected]>",
   "repository": "utilitycss/utility",

diff --git a/src/helpers/build-sections.js b/src/helpers/build-sections.js
@@ -20,12 +20,14 @@ module.exports = function({ modules }) {
     modules[module].forEach(rule => {
       // console.log(JSON.stringify(rule));
       const { nodes, selector, media } = rule;
-      rules.push({
-        selector,
-        nodes,
-        media,
-        class: selectorReplace(selector)
-      });
+      if (/^\.[A-Za-z0-9\-\:\_]+$/.test(selector)) {
+        rules.push({
+          selector,
+          nodes,
+          media,
+          class: selectorReplace(selector)
+        });
+      }
     });
     const sectionHtml = sectionTemplate({
       module: moduleName,

diff --git a/src/util/applyRules.js b/src/util/applyRules.js
@@ -1,26 +1,34 @@
+const postcss = require("postcss");
 const defineClass = require("./defineClass");
 const defineSeries = require("./defineSeries");
 const responsive = require("./responsive");
+const template = require("./template");
 
-module.exports = ({ config, globalConfig, defaultNames, getRules, meta }) => {
+const applyRules = ({
+  config,
+  globalConfig,
+  defaultNames,
+  getRules,
+  meta,
+  classTemplate = "{}"
+}) => {
   const {
     names = {},
     whitelist = [],
     blacklist = [],
     isResponsive = false,
     responsiveWhiteList = [],
     responsiveBlackList = [],
-    pseudoClasses = {}
-  } =
-    config || {};
+    pseudoClasses = {},
+    nestedRules
+  } = config || {};
 
   const {
     breakPoints = {},
     breakPointSeparator = "",
     pseudoClassesSeparator = "",
     seriesSeparator = ""
-  } =
-    globalConfig || {};
+  } = globalConfig || {};
 
   const customNames = Object.assign({}, defaultNames, names);
   const customRules = getRules(customNames, config || {});
@@ -45,7 +53,8 @@ module.exports = ({ config, globalConfig, defaultNames, getRules, meta }) => {
           seriesSeparator,
           pseudoClasses: modifiers,
           pseudoClassesSeparator,
-          meta: { ...meta, id: curr }
+          meta: { ...meta, id: curr },
+          classTemplate
         })
       );
     } else if (typeof value === "string" || typeof value === "number") {
@@ -57,7 +66,10 @@ module.exports = ({ config, globalConfig, defaultNames, getRules, meta }) => {
 
         return prev.concat(
           defineClass(
-            `${name}${separator}${pseudoClass}${pseudo}`,
+            template(
+              classTemplate,
+              `${name}${separator}${pseudoClass}${pseudo}`
+            ),
             { [`${key}`]: value },
             { ...meta, id: curr }
           )
@@ -88,5 +100,41 @@ module.exports = ({ config, globalConfig, defaultNames, getRules, meta }) => {
     );
   }
 
+  if (nestedRules) {
+    Object.keys(nestedRules).forEach(nestedRule => {
+      const isAtRule = nestedRule[0] === "@";
+
+      if (isAtRule) {
+        const name = nestedRule.split(" ")[0].slice(1);
+        const nestedRuleNode = postcss.atRule({
+          name: name,
+          params: nestedRule.split(`${name} `)[1],
+          nodes: applyRules({
+            config: nestedRules[nestedRule],
+            globalConfig,
+            defaultNames,
+            getRules,
+            meta
+          })
+        });
+
+        result = result.concat(nestedRuleNode);
+      } else {
+        result = result.concat(
+          applyRules({
+            config: nestedRules[nestedRule],
+            globalConfig,
+            defaultNames,
+            getRules,
+            meta,
+            classTemplate: nestedRule
+          })
+        );
+      }
+    });
+  }
+
   return result;
 };
+
+module.exports = applyRules;
diff --git a/src/util/defineClass.js b/src/util/defineClass.js
@@ -1,7 +1,7 @@
 const postcss = require("postcss");
 
 const escapeClassName = className =>
-  className.replace(/([^A-Za-z0-9\-\:\_])/g, "\\$1"); //eslint-disable-line
+  className.replace(/([^A-Za-z0-9\-\:\_\ \.])/g, "\\$1"); //eslint-disable-line
 
 module.exports = (name, props, meta = {}) => {
   const decls = Object.keys(props).map(prop =>

diff --git a/src/util/defineSeries.js b/src/util/defineSeries.js
@@ -1,11 +1,13 @@
 const defineClass = require("./defineClass");
+const template = require("./template");
 
 module.exports = (name, prop, values, options = {}) => {
   const {
     seriesSeparator = "",
     pseudoClassesSeparator = "",
     pseudoClasses = [],
-    meta = {}
+    meta = {},
+    classTemplate = "{}"
   } = options;
 
   return [""].concat(pseudoClasses).reduce((prev, pseudo) => {
@@ -14,7 +16,10 @@ module.exports = (name, prop, values, options = {}) => {
     const pseudoClass = pseudo.replace(/:/g, "");
     const nodes = Object.keys(values).map(value =>
       defineClass(
-        `${name}${separator}${value}${pseudoSeparator}${pseudoClass}${pseudo}`,
+        template(
+          classTemplate,
+          `${name}${separator}${value}${pseudoSeparator}${pseudoClass}${pseudo}`
+        ),
         {
           [`${prop}`]: values[value]
         },

diff --git a/src/util/template.js b/src/util/template.js
@@ -0,0 +1,5 @@
+/**
+ * template function to generate class selectors.
+ * the placeholder "{}" will get substituted with str
+ */
+module.exports = (t, str) => t.replace(/{}/g, `.${str}`).replace(".", "");