diff --git a/package.json b/package.json index e4024af4..90000cc0 100644 --- a/package.json +++ b/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", diff --git a/scss/all.scss b/scss/all.scss index ddaa0bb8..47cc7fde 100644 --- a/scss/all.scss +++ b/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"; diff --git a/src/emma.ts b/src/emma.ts index a5f9e69e..ca5ec875 100644 --- a/src/emma.ts +++ b/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; diff --git a/test/emma.test.ts b/test/emma.test.ts index 0ea08543..161d2171 100644 --- a/test/emma.test.ts +++ b/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); }); });