feat: generate electron config

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitycss/atomic",
-  "version": "0.16.1",
+  "version": "0.16.2",
   "author": "Andrea Moretti (@axyz) <axyzxp@gmail.com>",
   "description": "Atomic CSS composition for yarn workspaces",
   "repository": "utilitycss/atomic",

src/cli.ts

@@ -16,6 +16,10 @@ import generateAtom from "./util/generate-atom";
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const figlet = require("figlet");
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+import { sampleConfigs } from "@utilitycss/utility";
+import { BuildHelperFunction } from "@utilitycss/utility/dist/types";
+
 clear();
 console.log(
   chalk.red(
@@ -138,6 +142,58 @@ program.command("visit <visitor>").action((v) => {
     });
 });
 
+program.command("generate-electron-config").action((cmd) => {
+  const { electronsModuleName } = (program as any).cfg;
+
+  /**
+   * Resolve for electrons package
+   *
+   * Assuming, there is a `config` folder in the root of electrons folder
+   *  */
+  const electronConfigPath = path.join(
+    path.parse(require.resolve(`${electronsModuleName}`)).dir,
+    "../",
+    "config"
+  );
+
+  inquirer
+    .prompt([
+      {
+        type: "list",
+        name: "module",
+        message: "What electron config you want to create?",
+        choices: Object.keys(sampleConfigs),
+      },
+    ])
+    .then(async (answers) => {
+      const builderFn = (sampleConfigs as {
+        [key: string]: BuildHelperFunction;
+      })[answers.module];
+      if (typeof builderFn === "function") {
+        const listrTasks: ListrTask[] = [];
+
+        const saveFilePath = path.join(
+          electronConfigPath,
+          `${answers.module}.js`
+        );
+
+        listrTasks.push({
+          title: `Creating ${answers.module} config => ${saveFilePath}`,
+          task: async () => {
+            await fs.promises.writeFile(saveFilePath, builderFn());
+          },
+        });
+
+        const tasks = new Listr(listrTasks, {
+          exitOnError: true,
+        });
+        await tasks.run();
+      } else {
+        throw new Error(`Config builder for ${answers.module} is not found.`);
+      }
+    });
+});
+
 program.command("init").action((cmd) => {
   inquirer
     .prompt([
@@ -201,6 +257,11 @@ program.command("init").action((cmd) => {
                 data,
                 path.join("packages", data.electronsFolder, "index.css")
               ),
+              generate(
+                Templates.ELECTRONS_PREFLIGHT_CSS,
+                data,
+                path.join("packages", data.electronsFolder, "preflight.css")
+              ),
               generate(
                 Templates.ELECTRONS_POSTCSS_PLUGINS_JS,
                 data,

src/util/generate-file.ts

@@ -12,6 +12,7 @@ export enum Templates {
   ATOMIC_CONFIG_JS = "atomic.config.js.hbs",
   ELECTRONS_PACKAGE_JSON = "electrons_package.json.hbs",
   ELECTRONS_INDEX_CSS = "electrons_index.css.hbs",
+  ELECTRONS_PREFLIGHT_CSS = "electrons_preflight.css.hbs",
   ELECTRONS_POSTCSS_PLUGINS_JS = "electrons_postcss.plugins.js.hbs",
   ELECTRONS_UTILITY_CONFIG_JS = "electrons_utility.config.js.hbs",
   ELECTRONS_CONFIG_INDEX_JS = "electrons_config_index.js.hbs",

templates/atom_typography_index.css.hbs

@@ -1,19 +1,81 @@
-.fontFamily {
-  electrons: (fontFamily_system);
+.fontSmoothing {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-.body {
-  composes: fontFamily;
-  electrons: (
-    fontSize_s,
-    black
-  );
+.serif {
+  electrons: (fontFamily_serif);
 }
 
-.title {
-  composes: fontFamily;
-  electrons: (
-    fontSize_l,
-    black
-  );
+.sans {
+  electrons: (fontFamily_sans);
+}
+
+.mono {
+  electrons: (fontFamily_mono);
+}
+
+.xs {
+  composes: fontSmoothing;
+  electrons: (lineHeight_s, fontSize_xs);
+}
+
+.sm {
+  composes: fontSmoothing;
+  electrons: (lineHeight_m, fontSize_sm);
+}
+
+.base {
+  composes: fontSmoothing;
+  electrons: (lineHeight_l, fontSize_base);
+}
+
+.lg {
+  composes: fontSmoothing;
+  electrons: (lineHeight_xl, fontSize_lg);
+}
+
+.xl {
+  composes: fontSmoothing;
+  electrons: (lineHeight_xl, fontSize_xl);
+}
+
+.two_xl {
+  composes: fontSmoothing;
+  electrons: (lineHeight_xxl, fontSize_2xl);
+}
+
+.three_xl {
+  composes: fontSmoothing;
+  electrons: (lineHeight_3xl, fontSize_3xl);
+}
+
+.four_xl {
+  composes: fontSmoothing;
+  electrons: (lineHeight_3xl, fontSize_4xl);
+}
+
+.five_xl {
+  composes: fontSmoothing;
+  electrons: (lineHeight_normal, fontSize_5xl);
+}
+
+.six_xl {
+  composes: fontSmoothing;
+  electrons: (lineHeight_normal, fontSize_6xl);
+}
+
+.seven_xl {
+  composes: fontSmoothing;
+  electrons: (lineHeight_normal, fontSize_7xl);
+}
+
+.eight_xl {
+  composes: fontSmoothing;
+  electrons: (lineHeight_normal, fontSize_8xl);
+}
+
+.nine_xl {
+  composes: fontSmoothing;
+  electrons: (lineHeight_normal, fontSize_9xl);
 }