add build config

utilitycss · Jan 6, 2021 · a6ca6f7 · a6ca6f7
1 parent 2663855
commit a6ca6f7
Show file tree

Hide file tree

Showing 44 changed files with 120 additions and 112 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -16,4 +16,13 @@ module.exports = {
     es6: true,
     node: true,
   },
+  overrides: [
+    {
+      files: ["./example/**/*.js"],
+      rules: {
+        // Allow require statement for all JS files
+        "@typescript-eslint/no-var-requires": "off",
+      },
+    },
+  ],
 };
diff --git a/example/example.config.js b/example/example.config.js
@@ -1,50 +1,49 @@
 const path = require("path");
 const {
   plugins: { docs, json },
-  util: { defineClass },
-  modules: { font, colors, border, boxShadow }
-} = require("../src/index");
+  modules: { font, colors, border, boxShadow },
+} = require("../dist/index");
 
 const breakPoints = {
   ns: "screen and (min-width: 48rem)",
   m: "screen and (min-width: 48rem) and (max-width: 80rem)",
-  l: "screen and (min-width: 80rem)"
+  l: "screen and (min-width: 80rem)",
 };
 
 const plugins = [
   json({
-    output: path.join(__dirname, "/dist/example.json")
+    output: path.join(__dirname, "/dist/example.json"),
   }),
   docs({
     output: path.join(__dirname, "/dist/docs.html"),
-    openFile: true
-  })
+    openFile: true,
+  }),
 ];
 
 const modules = [
   boxShadow({
     names: {
       "bxsh:n": "boxShadowNone",
-      bxsh: "boxShadow"
+      bxsh: "boxShadow",
     },
     boxShadowValues: {
       xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
-      inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"
+      inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
     },
-    whitelist: ["bxsh:n", "bxsh"]
+    whitelist: ["bxsh:n", "bxsh"],
   }),
   border({
     names: {
       "bd:w": "borderWidth",
       "bd:s": "borderStyle",
-      "bd:n": "borderNone"
+      "bd:n": "borderNone",
     },
     whitelist: ["bd:w", "bd:s", "bd:n"],
     borderStyleValues: ["solid", "dotted"],
     borderWidthValues: ["1px", "2px"],
     pseudoClasses: { "bd:n": [":hover"] },
     isResponsive: true,
-    responsiveWhiteList: ["bd:n"]
+    responsiveWhiteList: ["bd:n"],
   }),
   font({
     names: { fz: "f" },
@@ -59,9 +58,9 @@ const modules = [
       "1.625rem",
       "1.75rem",
       "1.875rem",
-      "2rem"
+      "2rem",
     ],
-    isResponsive: true
+    isResponsive: true,
   }),
   colors({
     nestedRules: {
@@ -70,16 +69,16 @@ const modules = [
         isResponsive: true,
         colorValues: {
           black: "#ffffff",
-          white: "#1a1a1a"
-        }
+          white: "#1a1a1a",
+        },
       },
       "@media foo": {
         whitelist: ["c"],
         colorValues: {
           black: "#ffffff",
-          white: "#1a1a1a"
-        }
-      }
+          white: "#1a1a1a",
+        },
+      },
     },
     whitelist: ["c", "bgc", "bdc"],
     pseudoClasses: { c: [":hover"], bgc: [":hover", ":active"] },
@@ -92,32 +91,32 @@ const modules = [
       grey3: "#dddddd",
       red: "#ce3535",
       green: "#0f7e4a",
-      blue: "#0062b4"
+      blue: "#0062b4",
     },
     backgroundColorValues: {
       white: "#f3f3f3",
       pink: "#fde5e5",
       green: "#e0f3ea",
-      yellow: "#fffdc0"
+      yellow: "#fffdc0",
     },
     borderColorValues: {
       orange: "#ff6900",
       black: "#1a1a1a",
       white: "#ffffff",
       grey: "#a5a5a5",
       green: "#0f7e4a",
-      red: "#ce3535"
-    }
-  })
+      red: "#ce3535",
+    },
+  }),
 ];
 
 module.exports = {
   forceInsert: true,
   config: {
     breakPoints,
     breakPointSeparator: "_",
-    pseudoClassesSeparator: "_"
+    pseudoClassesSeparator: "_",
   },
   modules,
-  plugins
+  plugins,
 };
diff --git a/example/module.config.js b/example/module.config.js
@@ -11,7 +11,7 @@ module.exports = {
     "1.625rem",
     "1.75rem",
     "1.875rem",
-    "2rem"
+    "2rem",
   ],
-  isResponsive: true
+  isResponsive: true,
 };
diff --git a/example/postcss.config.js b/example/postcss.config.js
@@ -1,13 +1,13 @@
 const _ = require("lodash");
-const utility = require("../src/index");
+const utility = require("../dist/index").default;
 const utilityConfig = require("./example.config");
 
 module.exports = {
   plugins: [
     utility(
       Object.assign({}, utilityConfig, {
-        forceInsert: _.includes(process.argv, "forceInsert")
+        forceInsert: _.includes(process.argv, "forceInsert"),
       })
-    )
-  ]
+    ),
+  ],
 };
diff --git a/src/cli.ts b/src/cli.ts
@@ -5,7 +5,7 @@ import chalk from "chalk";
 import path from "path";
 import fs from "fs";
 import { promises as fsAsync } from "fs";
-import { builder } from "../";
+import builder from "./";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const packageJson = require("../package.json");

diff --git a/src/index.ts b/src/index.ts
@@ -7,7 +7,7 @@ import deepmerge from "deepmerge";
 import computeStyles from "./util/computeStyles";
 
 const AT_RULE_NAME = "utility";
-const DEFAULT_CONFIG_PATH = "./utility.config.default.ts";
+const DEFAULT_CONFIG_PATH = "./utility.config.default";
 
 const builder = postcss.plugin("utility", (config) => (styles) => {
   // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -102,7 +102,7 @@ const builder = postcss.plugin("utility", (config) => (styles) => {
   });
 });
 
-export { builder };
+export default builder;
 
 export * as plugins from "./plugins";
 export * as modules from "./modules";

diff --git a/src/modules/animation.ts b/src/modules/animation.ts
@@ -24,7 +24,7 @@ const meta: Meta = {
   module: "animation",
 };
 
-const module: AnimationModuleType = (config) => (globalConfig) => {
+const cssModule: AnimationModuleType = (config) => (globalConfig) => {
   return applyRules({
     config,
     globalConfig,
@@ -34,4 +34,4 @@ const module: AnimationModuleType = (config) => (globalConfig) => {
   });
 };
 
-export default module;
+export default cssModule;
diff --git a/src/modules/background-image.ts b/src/modules/background-image.ts
@@ -134,7 +134,7 @@ const meta: Meta = {
   module: "background-image",
 };
 
-const module: BackgroundImageModuleType = (config) => (globalConfig) => {
+const cssModule: BackgroundImageModuleType = (config) => (globalConfig) => {
   return applyRules({
     config,
     globalConfig,
@@ -144,4 +144,4 @@ const module: BackgroundImageModuleType = (config) => (globalConfig) => {
   });
 };
 
-export default module;
+export default cssModule;
diff --git a/src/modules/border.ts b/src/modules/border.ts
@@ -187,7 +187,7 @@ const meta: Meta = {
   module: "border",
 };
 
-const module: BorderModuleType = (config) => (globalConfig) => {
+const cssModule: BorderModuleType = (config) => (globalConfig) => {
   return applyRules({
     config,
     globalConfig,
@@ -197,4 +197,4 @@ const module: BorderModuleType = (config) => (globalConfig) => {
   });
 };
 
-export default module;
+export default cssModule;
diff --git a/src/modules/box-shadow.ts b/src/modules/box-shadow.ts
@@ -31,7 +31,7 @@ const meta: Meta = {
   module: "box-shadow",
 };
 
-const module: BoxShadowModuleType = (config) => (globalConfig) => {
+const cssModule: BoxShadowModuleType = (config) => (globalConfig) => {
   return applyRules({
     config,
     globalConfig,
@@ -41,4 +41,4 @@ const module: BoxShadowModuleType = (config) => (globalConfig) => {
   });
 };
 
-export default module;
+export default cssModule;
diff --git a/src/modules/box-sizing.ts b/src/modules/box-sizing.ts
@@ -25,7 +25,7 @@ const meta: Meta = {
   module: "box-sizing",
 };
 
-const module: BoxSizingModuleType = (config) => (globalConfig) => {
+const cssModule: BoxSizingModuleType = (config) => (globalConfig) => {
   return applyRules({
     config,
     globalConfig,
@@ -35,4 +35,4 @@ const module: BoxSizingModuleType = (config) => (globalConfig) => {
   });
 };
 
-export default module;
+export default cssModule;
diff --git a/src/modules/clear.ts b/src/modules/clear.ts
@@ -29,7 +29,7 @@ const meta: Meta = {
   module: "clear",
 };
 
-const module: ClearModuleType = (config) => (globalConfig) => {
+const cssModule: ClearModuleType = (config) => (globalConfig) => {
   return applyRules({
     config,
     globalConfig,
@@ -39,4 +39,4 @@ const module: ClearModuleType = (config) => (globalConfig) => {
   });
 };
 
-export default module;
+export default cssModule;
diff --git a/src/modules/colors.ts b/src/modules/colors.ts
@@ -62,7 +62,7 @@ const meta: Meta = {
   module: "colors",
 };
 
-const module: ColorsModuleType = (config) => (globalConfig) => {
+const cssModule: ColorsModuleType = (config) => (globalConfig) => {
   return applyRules({
     config,
     globalConfig,
@@ -72,4 +72,4 @@ const module: ColorsModuleType = (config) => (globalConfig) => {
   });
 };
 
-export default module;
+export default cssModule;
diff --git a/src/modules/cursor.ts b/src/modules/cursor.ts
@@ -37,7 +37,7 @@ const meta: Meta = {
   module: "cursor",
 };
 
-const module: CursorModuleType = (config) => (globalConfig) => {
+const cssModule: CursorModuleType = (config) => (globalConfig) => {
   return applyRules({
     config,
     globalConfig,
@@ -47,4 +47,4 @@ const module: CursorModuleType = (config) => (globalConfig) => {
   });
 };
 
-export default module;
+export default cssModule;
diff --git a/src/modules/display.ts b/src/modules/display.ts
@@ -83,7 +83,7 @@ const meta: Meta = {
   module: "display",
 };
 
-const module: DisplayModuleType = (config) => (globalConfig) => {
+const cssModule: DisplayModuleType = (config) => (globalConfig) => {
   return applyRules({
     config,
     globalConfig,
@@ -93,4 +93,4 @@ const module: DisplayModuleType = (config) => (globalConfig) => {
   });
 };
 
-export default module;
+export default cssModule;
diff --git a/src/modules/flexbox.ts b/src/modules/flexbox.ts
@@ -139,7 +139,7 @@ const meta: Meta = {
   module: "flexbox",
 };
 
-const module: FlexBoxModuleType = (config) => (globalConfig) => {
+const cssModule: FlexBoxModuleType = (config) => (globalConfig) => {
   return applyRules({
     config,
     globalConfig,
@@ -149,4 +149,4 @@ const module: FlexBoxModuleType = (config) => (globalConfig) => {
   });
 };
 
-export default module;
+export default cssModule;
diff --git a/src/modules/float.ts b/src/modules/float.ts
@@ -27,7 +27,7 @@ const meta: Meta = {
   module: "float",
 };
 
-const module: FloatModuleType = (config) => (globalConfig) => {
+const cssModule: FloatModuleType = (config) => (globalConfig) => {
   return applyRules({
     config,
     globalConfig,
@@ -37,4 +37,4 @@ const module: FloatModuleType = (config) => (globalConfig) => {
   });
 };
 
-export default module;
+export default cssModule;
diff --git a/src/modules/font.ts b/src/modules/font.ts
@@ -135,7 +135,7 @@ const meta: Meta = {
   module: "font",
 };
 
-const module: FontModuleType = (config) => (globalConfig) => {
+const cssModule: FontModuleType = (config) => (globalConfig) => {
   return applyRules({
     config,
     globalConfig,
@@ -145,4 +145,4 @@ const module: FontModuleType = (config) => (globalConfig) => {
   });
 };
 
-export default module;
+export default cssModule;
diff --git a/src/modules/height.ts b/src/modules/height.ts
@@ -34,7 +34,7 @@ const meta: Meta = {
   module: "height",
 };
 
-const module: HeightModuleType = (config) => (globalConfig) => {
+const cssModule: HeightModuleType = (config) => (globalConfig) => {
   return applyRules({
     config,
     globalConfig,
@@ -44,4 +44,4 @@ const module: HeightModuleType = (config) => (globalConfig) => {
   });
 };
 
-export default module;
+export default cssModule;