add build config

Author: Sylvester Aswin Stanley

.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",
+      },
+    },
+  ],
 };

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,
 };