refactor: Improve scss/all.scss

package.json

@@ -3,7 +3,7 @@
   "version": "0.11.0",
   "description": "Emma.css { emmet-like utility classes }",
   "scripts": {
-    "build": "npm run clean && npm run test && npm run compile",
+    "build": "npm run clean && npm run compile && npm run test",
     "clean": "rimraf tmp/ scss/ && mkdirp tmp/",
     "convert:data": "js-yaml src/emma-data.yml > tmp/emma-data.json",
     "convert:schema": "js-yaml src/emma-schema.yml > tmp/emma-schema.json",

scss/all.scss

@@ -1,4 +1,164 @@
 /*! Emma.css 0.11.0 | MIT License | https://git.io/emma */
+
 @import "vars";
 @import "mixins";
-@import "rules";
+
+// display
+@import "rules/position";
+@import "rules/top";
+@import "rules/right";
+@import "rules/bottom";
+@import "rules/left";
+@import "rules/z-index";
+@import "rules/display";
+@import "rules/visibility";
+@import "rules/overflow";
+@import "rules/overflow-x";
+@import "rules/overflow-y";
+@import "rules/box-sizing";
+@import "rules/table-layout";
+@import "rules/flex-direction";
+@import "rules/flex-wrap";
+@import "rules/justify-content";
+@import "rules/align-items";
+@import "rules/align-content";
+@import "rules/order";
+@import "rules/flex";
+@import "rules/flex-grow";
+@import "rules/flex-shrink";
+@import "rules/flex-basis";
+@import "rules/align-self";
+@import "rules/absolute-center";
+
+// float
+@import "rules/float";
+@import "rules/clear";
+@import "rules/clearfix";
+
+// background
+@import "rules/box-shadow";
+@import "rules/background";
+@import "rules/background-color";
+@import "rules/background-image";
+@import "rules/background-repeat";
+@import "rules/background-attachment";
+@import "rules/background-position";
+@import "rules/background-size";
+
+// margin
+@import "rules/margin";
+@import "rules/margin-top";
+@import "rules/margin-right";
+@import "rules/margin-bottom";
+@import "rules/margin-left";
+@import "rules/margin-x0";
+@import "rules/margin-y0";
+@import "rules/margin-x-auto";
+@import "rules/margin-y-auto";
+@import "rules/margin-x-xs";
+@import "rules/margin-y-xs";
+@import "rules/margin-x-sm";
+@import "rules/margin-y-sm";
+@import "rules/margin-x-md";
+@import "rules/margin-y-md";
+@import "rules/margin-x-lg";
+@import "rules/margin-y-lg";
+@import "rules/margin-x-xl";
+@import "rules/margin-y-xl";
+
+// padding
+@import "rules/padding";
+@import "rules/padding-top";
+@import "rules/padding-right";
+@import "rules/padding-bottom";
+@import "rules/padding-left";
+@import "rules/padding-x0";
+@import "rules/padding-y0";
+@import "rules/padding-x-xs";
+@import "rules/padding-y-xs";
+@import "rules/padding-x-sm";
+@import "rules/padding-y-sm";
+@import "rules/padding-x-md";
+@import "rules/padding-y-md";
+@import "rules/padding-x-lg";
+@import "rules/padding-y-lg";
+@import "rules/padding-x-xl";
+@import "rules/padding-y-xl";
+
+// width
+@import "rules/width";
+@import "rules/max-width";
+@import "rules/min-width";
+
+// height
+@import "rules/height";
+@import "rules/max-height";
+@import "rules/min-height";
+
+// border
+@import "rules/outline";
+@import "rules/outline-width";
+@import "rules/outline-style";
+@import "rules/outline-color";
+@import "rules/border";
+@import "rules/border-collapse";
+@import "rules/border-color";
+@import "rules/border-image";
+@import "rules/border-style";
+@import "rules/border-width";
+@import "rules/border-top-width";
+@import "rules/border-right-width";
+@import "rules/border-bottom-width";
+@import "rules/border-left-width";
+@import "rules/border-top";
+@import "rules/border-top-color";
+@import "rules/border-right";
+@import "rules/border-right-color";
+@import "rules/border-bottom";
+@import "rules/border-bottom-color";
+@import "rules/border-left";
+@import "rules/border-left-color";
+@import "rules/border-radius";
+
+// text
+@import "rules/color";
+@import "rules/list-style";
+@import "rules/list-style-position";
+@import "rules/list-style-type";
+@import "rules/list-style-image";
+@import "rules/vertical-align";
+@import "rules/text-align";
+@import "rules/text-decoration";
+@import "rules/text-emphasis";
+@import "rules/text-indent";
+@import "rules/text-overflow";
+@import "rules/text-transform";
+@import "rules/text-shadow";
+@import "rules/line-height";
+@import "rules/white-space";
+@import "rules/word-break";
+@import "rules/word-wrap";
+@import "rules/letter-spacing";
+@import "rules/font-weight";
+@import "rules/font-style";
+@import "rules/font-variant";
+@import "rules/font-size";
+@import "rules/font-family";
+@import "rules/opacity";
+@import "rules/webkit-font-smoothing";
+@import "rules/moz-osx-font-smoothing";
+@import "rules/text-truncation";
+@import "rules/text-hiding";
+@import "rules/reset-list";
+@import "rules/font-smoothing-antialiased";
+
+// other
+@import "rules/transform";
+@import "rules/resize";
+@import "rules/cursor";
+@import "rules/backface-visibility";
+@import "rules/object-fit";
+@import "rules/appearance";
+@import "rules/user-select";
+@import "rules/webkit-touch-callout";
+@import "rules/webkit-overflow-scrolling";

src/emma.ts

@@ -79,7 +79,7 @@ export default class Emma {
     this.writeFileSync(`_${this.RULE_FILE}`, imports);
 
     // Root
-    this.writeFileSync(`${this.ROOT_FILE}`, this.generateRootFile(ver));
+    this.writeFileSync(`${this.ROOT_FILE}`, this.generateRootFile(ver, props));
 
     // DEBUG
     console.log(`/*! Emma.css ${ver} */`);
@@ -255,13 +255,25 @@ export default class Emma {
     });
   }
 
-  private generateRootFile(ver: string): string {
+  private generateRootFile(ver: string, props: TEmmaDocProp[]): string {
     let result = "";
 
-    result += `/*! Emma.css ${ver} | MIT License | https://git.io/emma */\n`;
+    result += `/*! Emma.css ${ver} | MIT License | https://git.io/emma */\n\n`;
     result += `@import "${this.VAR_FILE}";\n`;
     result += `@import "${this.MIXIN_FILE}";\n`;
-    result += `@import "${this.RULE_FILE}";\n`;
+
+    const groups: any = _.groupBy(props, "group");
+    if (_.isEmpty(groups)) {
+      throw new Error("Failed generate single group declarations.");
+    }
+
+    let imports = "";
+    _.forEach(groups, (v, groupName) => {
+      imports += `\n// ${groupName}\n`;
+      imports += this.readFileSync(`_${groupName}`);
+    });
+
+    result += `${imports}`;
 
     return result;
   }
@@ -274,6 +286,10 @@ export default class Emma {
     fs.appendFileSync(`${this.SCSS_DIR}/${filename}.scss`, str);
   }
 
+  private readFileSync(filename: string): Buffer {
+    return fs.readFileSync(`${this.SCSS_DIR}/${filename}.scss`);
+  }
+
   private loadEmmaDoc(filename: string = this.EMMA_JSON): TEmmaDoc {
     let doc;
 

test/emma.test.ts

@@ -1,6 +1,7 @@
 import * as mocha from "mocha";
 import * as sinon from "sinon";
 import * as assert from "power-assert";
+import * as fs from "fs-extra";
 
 import {
   default as Emma,
@@ -10,7 +11,6 @@ import {
   TEmmaDocMixin,
   TEmmaDoc
 } from "../src/emma";
-import * as fs from "fs-extra";
 
 describe("Emma", () => {
   const varsArg: TEmmaDocVar[] = [
@@ -267,9 +267,12 @@ describe("Emma", () => {
 
   describe("generateRootFile()", () => {
     it("returns valid string", () => {
-      const actual = emma.generateRootFile("0.10.0");
+      const emmaMock = sinon.mock(emma);
+      emmaMock.expects("readFileSync").exactly(1);
+
+      const actual = emma.generateRootFile("0.10.0", propsArg);
       const expected =
-        '/*! Emma.css 0.10.0 | MIT License | https://git.io/emma */\n@import "vars";\n@import "mixins";\n@import "rules";\n';
+        '/*! Emma.css 0.10.0 | MIT License | https://git.io/emma */\n\n@import "vars";\n@import "mixins";\n\n// display\nundefined';
       assert(actual === expected);
     });
   });