with-style 5.0.190 → 5.0.191

package/src/css/entries.js

@@ -1,41 +1,57 @@
 "use strict";
 
 const entries = [
-
-  { "media": "^@media" },
-
-  { "colour": "^#(?:[0-9a-fA-F]{6}|[0-9a-fA-F]{3})" },
-
-  { "important": "^!important" },
-
-  { "percentage": "^(?:[0-9]+|[0-9]*\\.[0-9]+)%" },
-
-  { "frequency": "^(?:[0-9]+|[0-9]*\\.[0-9]+)(?:hz|khz)" },
-
-  { "fraction": "^[1-9][0-9]*?fr" },
-
-  { "length": "^(?:[0-9]+|[0-9]*\\.[0-9]+)(?:px|cm|mm|in|pt|pc)" },
-
-  { "angle": "^(?:[0-9]+|[0-9]*\\.[0-9]+)(?:deg|rad|grad)" },
-
-  { "time": "^(?:[0-9]+|[0-9]*\\.[0-9]+)(?:s|ms)" },
-
-  { "rems": "^(?:[0-9]+|[0-9]*\\.[0-9]+)rem" },
-
-  { "ems": "^(?:[0-9]+|[0-9]*\\.[0-9]+)em" },
-
-  { "number": "^[0-9]+|[0-9]*\\.[0-9]+" },
-
-  { "special": "^;|::|:|\\.|,|\\|=|~=|=|>|\\{|\\}|\\(|\\)|\\[|\\]" },
-
-  { "identifier": "^[_a-zA-Z0-9-]+" },
-
-  { "logical-operator": "^^(?:and|not)$" },
-
-  { "plus-or-minus": "^\\+|-" },
-
-  { "unassigned": "^[^\\s]+" }
-
+  {
+    "media": "^@media"
+  },
+  {
+    "colour": "^#(?:[0-9a-fA-F]{6}|[0-9a-fA-F]{3})"
+  },
+  {
+    "important": "^!important"
+  },
+  {
+    "percentage": "^(?:[0-9]+|[0-9]*\\.[0-9]+)%"
+  },
+  {
+    "frequency": "^(?:[0-9]+|[0-9]*\\.[0-9]+)(?:hz|khz)"
+  },
+  {
+    "fraction": "^[1-9][0-9]*?fr"
+  },
+  {
+    "length": "^(?:[0-9]+|[0-9]*\\.[0-9]+)(?:px|cm|mm|in|pt|pc)"
+  },
+  {
+    "angle": "^(?:[0-9]+|[0-9]*\\.[0-9]+)(?:deg|rad|grad)"
+  },
+  {
+    "time": "^(?:[0-9]+|[0-9]*\\.[0-9]+)(?:s|ms)"
+  },
+  {
+    "rems": "^(?:[0-9]+|[0-9]*\\.[0-9]+)rem"
+  },
+  {
+    "ems": "^(?:[0-9]+|[0-9]*\\.[0-9]+)em"
+  },
+  {
+    "number": "^[0-9]+|[0-9]*\\.[0-9]+"
+  },
+  {
+    "special": "^;|::|:|\\.|,|\\|=|~=|=|>|\\{|\\}|\\(|\\)|\\[|\\]"
+  },
+  {
+    "identifier": "^[_a-zA-Z0-9-]+"
+  },
+  {
+    "logical-operator": "^^(?:and|not)$"
+  },
+  {
+    "plus-or-minus": "^\\+|-"
+  },
+  {
+    "unassigned": "^[^\\s]+"
+  }
 ];
 
 export default entries;

package/src/example.js

@@ -31,6 +31,16 @@ generateStyle([[`
   .active {
     display: block;
   }
+  
+  @media (min-width: 640px) {
+
+    padding-top: 1rem; 
+    
+    .menu {
+      margin: 0;    
+    }
+
+  }
 
 `]], "abc");
 

package/src/style/declaration.js

@@ -2,7 +2,7 @@
 
 import { Query } from "occam-query";
 
-import { EMPTY_STRING } from "../constants";
+import { EMPTY_STRING, TWO_SPACES } from "../constants";
 import { contentFromQueryNodeAndTokens } from "../utilities/content";
 
 const importantQuery = Query.fromExpression("/*/important"),
@@ -53,10 +53,10 @@ export default class Declaration {
     return matches;
   }
 
-  asCSS(indent, last) {
-    const css = last ?
-                  `${indent}${this.propertyName}: ${this.propertyValues}${this.important};` :
-                    `${indent}${this.propertyName}: ${this.propertyValues}${this.important};\n`;
+  asCSS(indent) {
+    indent = indent + TWO_SPACES;
+
+    const css = `${indent}${this.propertyName}: ${this.propertyValues}${this.important};\n`;
 
     return css;
   }

package/src/style/declarations.js

@@ -33,37 +33,19 @@ export default class Declarations {
   }
 
   asCSS(className, indent) {
-    if (indent === undefined) {
-      indent = className; ///
+    const declarationsCSS = this.array.reduce((declarationsCSS, declaration) => {
+            const declarationCSS = declaration.asCSS(indent);
 
-      className = null; ///
-    }
+            declarationsCSS += declarationCSS;
 
-    let css = EMPTY_STRING;
-
-    const length = this.array.length;
-
-    if (length > 0) {
-      const lastIndex = length - 1,
-            declarationsCSS = this.array.reduce((declarationsCSS, declaration, index) => {
-              const last = (index === lastIndex),
-                    declarationCSS = declaration.asCSS(indent, last);
-
-              declarationsCSS += declarationCSS;
-
-              return declarationsCSS;
-            }, EMPTY_STRING);
-
-      if (className === null) {
-        css = declarationsCSS;  ///
-      } else {
-        css = `.${className} {
-${declarationsCSS}
-}
+            return declarationsCSS;
+          }, EMPTY_STRING),
+          css = (className === null) ?
+                  declarationsCSS :  ///
+                    `${indent}.${className} {
+${declarationsCSS}${indent}}
 
 `;
-      }
-    }
 
     return css;
   }

package/src/style/media.js

@@ -5,7 +5,8 @@ import { Query } from "occam-query";
 import RuleSets from "./ruleSets";
 import Declarations from "./declarations";
 
-import { TWO_SPACES, FOUR_SPACES } from "../constants";
+import { trim } from "../utilities/string";
+import { TWO_SPACES, EMPTY_STRING } from "../constants";
 import { contentFromQueryNodeAndTokens } from "../utilities/content";
 
 const queriesQuery = Query.fromExpression("/media/mediaQueries"); ///
@@ -29,16 +30,21 @@ export default class Media {
     return this.queries;
   }
 
-  asCSS(className) {
-    let css = "";
+  asCSS(className, indent) {
+    indent = indent + TWO_SPACES;
 
-    const ruleSetsCSS = this.ruleSets.asCSS(className, TWO_SPACES),
-          declarationsCSS = this.declarations.asCSS(className, FOUR_SPACES);
+    let css = EMPTY_STRING;
+
+    const ruleSetsCSS = this.ruleSets.asCSS(className, indent),
+          declarationsCSS = this.declarations.asCSS(className, indent);
+
+    let ruleSetsDeclarationsCSS = `${declarationsCSS}${ruleSetsCSS}`;
+
+    if (ruleSetsDeclarationsCSS !== EMPTY_STRING) {
+      ruleSetsDeclarationsCSS = trim(ruleSetsDeclarationsCSS);
 
-    if ((ruleSetsCSS !== null) || (declarationsCSS !== null)) {
       css = `@media ${this.queries} {
-${declarationsCSS}${ruleSetsCSS}
-}
+${ruleSetsDeclarationsCSS}}
 
 `;
     }

package/src/style/medias.js

@@ -23,9 +23,9 @@ export default class Medias {
     this.array.forEach(callback);
   }
 
-  asCSS(className) {
+  asCSS(className, indent) {
     const css = this.array.reduce((css, media) => {
-      const mediaCSS = media.asCSS(className);
+      const mediaCSS = media.asCSS(className, indent);
 
       css += mediaCSS;
 

package/src/style/ruleSet.js

@@ -46,12 +46,11 @@ export default class RuleSet {
   asCSS(className, indent) {
     let css = EMPTY_STRING;
 
-    const declarationsCSS = this.declarations.asCSS(`  ${indent}`);
+    const declarationsCSS = this.declarations.asCSS(null, indent);
 
     if (declarationsCSS !== EMPTY_STRING) {
        css = `${indent}.${className}${this.selectors} {
-${declarationsCSS}
-${indent}}
+${declarationsCSS}${indent}}
 
 `;
     }

package/src/style.js

@@ -4,6 +4,8 @@ import Medias from "./style/medias";
 import RuleSets from "./style/ruleSets";
 import Declarations from "./style/declarations";
 
+import { EMPTY_STRING } from "./constants";
+
 export default class Style {
   constructor(declarations, ruleSets, medias) {
     this.declarations = declarations;
@@ -38,9 +40,10 @@ export default class Style {
   }
 
   asCSS(className) {
-    const declarationsCSS = this.declarations.asCSS(className, "  "),
-          ruleSetsCSS = this.ruleSets.asCSS(className, ""),
-          mediasCSS = this.medias.asCSS(className),
+    const indent = EMPTY_STRING,
+          declarationsCSS = this.declarations.asCSS(className, indent),
+          ruleSetsCSS = this.ruleSets.asCSS(className, indent),
+          mediasCSS = this.medias.asCSS(className, indent),
           css = `${declarationsCSS}${ruleSetsCSS}${mediasCSS}`;
 
     return css;

package/src/utilities/string.js

@@ -0,0 +1,9 @@
+"use strict";
+
+import { EMPTY_STRING } from "../constants";
+
+export function trim(string) {
+  string = string.replace(/[\n\r]$/g, EMPTY_STRING);
+
+  return string;
+}

package/src/utilities/styles.js

@@ -18,9 +18,9 @@ const { styleMap } = globalThis;
 function renderStyle(style) {
   const headDOMElement = document.querySelector(HEAD),
         styleDOMElement = document.createElement(STYLE),
-        innerHTML = `
-        
-${style}`;
+        innerHTML = `        
+${style}
+`;
 
   Object.assign(styleDOMElement, {
     innerHTML
@@ -41,11 +41,11 @@ function renderStyles() {
 function generateStyle(args, className, superStyle = null) {
   const strings = args.shift(),	///
         content = strings.reduce((content, string, index) => {
-          const arg = args[index];
+          const arg = args[index] || null;
 
-          content = (arg !== undefined) ?
-                      `${content}${string}${arg}` :
-                        `${content}${string}`;
+          content = (arg === null) ?
+                      `${content}${string}` :
+                        `${content}${string}${arg}`;
 
           return content;
         }, EMPTY_STRING),