Merge pull request #55 from und-pohlen/feat/docs

docs: readd utilities doc generation
und-pohlen · Oct 5, 2022 · 4cd91d7 · 4cd91d7
2 parents 259490c + a28fc99
commit 4cd91d7
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 41 deletions.
diff --git a/docs/changelog.md b/docs/changelog.md
@@ -12,6 +12,9 @@ pageTitle: Changelog
 
 ## Unreleased
 
+## 1.0.0-rc.1
+* [fix] Readd dynamically generated comments (which has been removed in 0.2.3) and fix automated utility docs page creation
+
 ## 1.0.0-alpha.1
 * [breaking] Replace RFS with a custom implementation of truly fluid type based on the approach presented by utopia.fyi (using clamps)
   * adds `fluid` function to generate a clamped value (`fluid(12px, 16px)`)

diff --git a/docs/data/utilities.js b/docs/data/utilities.js
@@ -1,22 +1,22 @@
 const sass = require("sass");
-const path = require("path");
-const fs = require("fs");
 
 module.exports = async function () {
-  const filePath = path.resolve(__dirname, "../../src/_styles.scss");
-  const scssStyles = fs.readFileSync(filePath, "utf8");
-  const { css } = sass.renderSync({
-    data: scssStyles,
-    includePaths: [path.resolve(__dirname, "../../src")],
-  });
-
-  const pattern = /((\/\*(\=+)([\s\S]+?)\*\/))/gm;
+  const filePath = __dirname + "/../../src/_styles.scss";
+  const { css } = sass.compile(filePath, {style: "expanded", verbose: true});
+  const pattern = /((\/\*(\=+)([\s\S]+?)(\=+)\*\/))/gm;
   const hashPattern = /(@[a-z]+)(\:\s)(.+)/gm;
 
-  return (css.toString().match(pattern) || [])
+  const result = (css.toString().match(pattern) || [])
     .map((item) => {
       let resp = {};
-      item.match(hashPattern).forEach((match) => {
+      const cleanItem = item
+        .replace(/\/\*/gm, "")
+        .replace(/\*\//gm, "")
+        .replace(/\,\s*?\n/gm, ", ")
+        .replace(/\(\s*?\n\s/gm, "[")
+        .replace(/\)\s/gm, "]")
+        .replace(/\=+/gm, "")
+      cleanItem.match(hashPattern).forEach((match) => {
         const line = match.split(hashPattern);
         resp[line[1].replace("@", "")] = line[3];
       });
@@ -27,19 +27,21 @@ module.exports = async function () {
         properties: resp.properties.split(" "),
         responsive: !!resp.properties.responsive,
         values: resp.values
-          .replace("(", "")
-          .replace(")", "")
-          .replace(/\"/gm, "")
-          .replace(/\s/gm, "")
-          .split(",")
+          .replace("[", "")
+          .replace("]", "")
+          .split(/\,\s{2,}/gm)
           .map((item) => {
             const i = item.split(":");
-            let prop = {};
-            prop[`${resp.classname}${i[0].replace(/\\+/gm, "")}`] = i[1];
-            return prop;
+            if (i[1]) {
+              let prop = {};
+              prop[`${
+                resp.classname}${i[0]
+              }`] = i[1];
+              return prop;
+            }
           }),
-      };
-    })
+        };
+      })
     .sort((a, b) => {
       if (a.name < b.name) {
         return -1;
@@ -49,4 +51,5 @@ module.exports = async function () {
       }
       return 0;
     });
+    return result;
 };
diff --git a/docs/utilities.liquid b/docs/utilities.liquid
@@ -3,35 +3,21 @@ layout: main.liquid
 ---
 
 <div class="o-grid c-page">
-  <aside
-    role="navigation"
-    class="c-page__navigation md:u-w-3/12 lg:u-w-3/12 u-box-hide md:u-box-show"
-  >
+  <aside role="navigation" class="c-page__navigation md:u-w-3/12 lg:u-w-3/12 u-box-hide md:u-box-show">
     <ul class="c-page__navigation-list o-stack">
       {% for utility in utilities %}
         <li>
-          <a
-            href="#{{ utility.name | slug }}"
-            class="c-page__navigation-link"
-          >
+          <a href="#{{ utility.name | slug }}" class="c-page__navigation-link">
             {{ utility.name }}
           </a>
         </li>
       {% endfor %}
     </ul>
   </aside>
-  <main
-    class="md:u-w-9/12 lg:u-w-9/12 o-stack"
-    data-spacing="huge"
-  >
+  <main class="md:u-w-9/12 lg:u-w-9/12 o-stack" data-spacing="huge">
     {% for utility in utilities %}
-      <section
-        id="{{ utility.name | slug }}"
-        class="c-page__section"
-      >
-        <h1
-          class="u-text-lg u-mb-md"
-        >
+      <section id="{{ utility.name | slug }}" class="c-page__section">
+        <h1 class="u-text-lg u-mb-md">
           {{ utility.name }}
         </h1>
         <ol class="o-grid u-mb-sm">
@@ -58,6 +44,7 @@ layout: main.liquid
             <div class="u-o50 u-text-sm">
               Responsive
             </div>
+          </li>
         </ol>
         <pre class="language-css">
 <code class="language-css">{% for utilityHash in utility.values %}{% for utilityObject in utilityHash %}{{ utilityObject[0] }} // {{ utilityObject[1] }}{% endfor %}

diff --git a/src/tools/_utilities.tool.scss b/src/tools/_utilities.tool.scss
@@ -33,6 +33,19 @@
     $responsive:    map.get($utility-class-data, 'responsive');
     $variable:      map.get($utility-class-data, 'variable');
 
+    /*==========
+      @name: #{$name}
+      @classname: #{utility-class-name($utility-class, null)}
+      @properties: #{$props}
+      @responsive: #{$responsive}
+      @values: (*/
+    @each $utility-item-name, $utility-item-value in $items {
+      /*  #{$utility-item-name}: #{$utility-item-value}, */
+    }
+    /* )
+    ==========*/
+
+
     @each $utility-item-name, $utility-item-value in $items {
       #{utility-class-name($utility-class, $utility-item-name)} {
         @include utility-styles($props, $utility-item-name, $utility-item-value, $variable);