From e2fc8eeef0a207030c82a22311b952fc6cabda03 Mon Sep 17 00:00:00 2001 From: Sylvester Date: Sat, 20 Mar 2021 16:42:47 +0100 Subject: [PATCH 1/3] feat: generate-electron-config --- src/cli.ts | 62 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 61 insertions(+), 1 deletion(-) diff --git a/src/cli.ts b/src/cli.ts index 303a499..6eb1cce 100644 --- a/src/cli.ts +++ b/src/cli.ts @@ -10,12 +10,20 @@ import inquirer from "inquirer"; import execa from "execa"; import Listr, { ListrTask } from "listr"; -import { default as generate, Templates } from "./util/generate-file"; +import { + default as generate, + Templates, + TemplateData, +} from "./util/generate-file"; 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 +146,58 @@ program.command("visit ").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([ From b09246ef1daadd1eb412f5d418353c6f006d0b25 Mon Sep 17 00:00:00 2001 From: Sylvester Date: Sat, 20 Mar 2021 16:44:06 +0100 Subject: [PATCH 2/3] package.json update --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index aab73f5..8af76ba 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@utilitycss/atomic", - "version": "0.16.1", + "version": "0.16.2", "author": "Andrea Moretti (@axyz) ", "description": "Atomic CSS composition for yarn workspaces", "repository": "utilitycss/atomic", From 4fbfda78a9ddb21077f1451b2b5747a33b4283d7 Mon Sep 17 00:00:00 2001 From: Sylvester Date: Mon, 22 Mar 2021 20:45:40 +0100 Subject: [PATCH 3/3] update init files --- src/cli.ts | 11 +- src/util/generate-file.ts | 1 + templates/atom_typography_index.css.hbs | 90 ++++- templates/electrons_config_colors.js.hbs | 197 +++++++++- templates/electrons_config_font.js.hbs | 426 ++++++++++++++++++++- templates/electrons_config_index.js.hbs | 37 +- templates/electrons_index.css.hbs | 3 +- templates/electrons_package.json.hbs | 13 +- templates/electrons_postcss.plugins.js.hbs | 6 +- templates/electrons_preflight.css.hbs | 229 +++++++++++ templates/electrons_utility.config.js.hbs | 56 ++- templates/lerna.json.hbs | 2 +- templates/package.json.hbs | 2 +- 13 files changed, 992 insertions(+), 81 deletions(-) create mode 100644 templates/electrons_preflight.css.hbs diff --git a/src/cli.ts b/src/cli.ts index 6eb1cce..235bbca 100644 --- a/src/cli.ts +++ b/src/cli.ts @@ -10,11 +10,7 @@ import inquirer from "inquirer"; import execa from "execa"; import Listr, { ListrTask } from "listr"; -import { - default as generate, - Templates, - TemplateData, -} from "./util/generate-file"; +import { default as generate, Templates } from "./util/generate-file"; import generateAtom from "./util/generate-atom"; // eslint-disable-next-line @typescript-eslint/no-var-requires @@ -261,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, diff --git a/src/util/generate-file.ts b/src/util/generate-file.ts index 84effed..d00d274 100644 --- a/src/util/generate-file.ts +++ b/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", diff --git a/templates/atom_typography_index.css.hbs b/templates/atom_typography_index.css.hbs index d470ee5..571db55 100644 --- a/templates/atom_typography_index.css.hbs +++ b/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); } diff --git a/templates/electrons_config_colors.js.hbs b/templates/electrons_config_colors.js.hbs index 0b66426..0c941f0 100644 --- a/templates/electrons_config_colors.js.hbs +++ b/templates/electrons_config_colors.js.hbs @@ -1,22 +1,193 @@ -const colors = { +const commonColorConfig = { transparent: "transparent", - black: "#111111", - white: "#fafafa" + current: "currentColor", + black: "#000", + white: "#fff", + // True gray + G50: "#fafafa", + G100: "#f5f5f5", + G200: "#e5e5e5", + G300: "#d4d4d4", + G400: "#a3a3a3", + G500: "#737373", + G600: "#525252", + G700: "#404040", + G800: "#262626", + G900: "#171717", + // Red + R50: "#fef2f2", + R100: "#fee2e2", + R200: "#fecaca", + R300: "#fca5a5", + R400: "#f87171", + R500: "#ef4444", + R600: "#dc2626", + R700: "#b91c1c", + R800: "#991b1b", + R900: "#7f1d1d", + // Green + G50: "#f0fdf4", + G100: "#dcfce7", + G200: "#bbf7d0", + G300: "#86efac", + G400: "#4ade80", + G500: "#22c55e", + G600: "#16a34a", + G700: "#15803d", + G800: "#166534", + G900: "#14532d", + // Blue + B50: "#eff6ff", + B100: "#dbeafe", + B200: "#bfdbfe", + B300: "#93c5fd", + B400: "#60a5fa", + B500: "#3b82f6", + B600: "#2563eb", + B700: "#1d4ed8", + B800: "#1e40af", + B900: "#1e3a8a", + // Purple + P50: "#faf5ff", + P100: "#f3e8ff", + P200: "#e9d5ff", + P300: "#d8b4fe", + P400: "#c084fc", + P500: "#a855f7", + P600: "#9333ea", + P700: "#7e22ce", + P800: "#6b21a8", + P900: "#581c87", }; -module.exports = { +/** + * ========= + * CSS "colors" module definitions. + * ========= + * */ +const colorsConfig = { + /** + * Supported CSS definitions + * + * Define identifiers for each declaration based on your preference. + * Defaults to https://docs.emmet.io/cheat-sheet/ + * **/ names: { - c: "", + /** color:#000; **/ + c: "text", + /** background-color:#fff; **/ bgc: "bg", - bdc: "bd" + /** border-color:#000; **/ + bdc: "bd", + /** border-top-color:#000; **/ + bdtc: "bdt", + /** border-right-color:#000; **/ + bdrc: "bdr", + /** border-bottom-color:#000; **/ + bdbc: "bdb", + /** border-left-color:#000; **/ + bdlc: "bdl", }, - whitelist: ["c", "bgc", "bdc"], + + /** + * Variables for color:#000; + * + * eg., { + * [key]: [value]; + * } + * */ + colorValues: commonColorConfig, + /** + * Variables for background-color:#fff; + * + * eg., { + * [key]: [value]; + * } + * */ + backgroundColorValues: commonColorConfig, + /** + * Variables for border-color:#000; + * + * eg., { + * [key]: [value]; + * } + * */ + borderColorValues: commonColorConfig, + /** + * List of definitions to include. + * Remove items from this list if you do not + * want it to be included in the output + * **/ + whitelist: [ + /** color:#000; **/ + "c", + /** background-color:#fff; **/ + "bgc", + /** border-color:#000; **/ + "bdc", + /** border-top-color:#000; **/ + // "bdtc", + /** border-right-color:#000; **/ + // "bdrc", + /** border-bottom-color:#000; **/ + // "bdbc", + /** border-left-color:#000; **/ + // "bdlc", + ], + /** + * List of definitions to exclude. + * If the number of exclusions is very minimal + * use this config instead of "whitelist" + * **/ + blacklist: [], + /** + * Flag to enable definitions with responsive + * breakpoints + * **/ + isResponsive: true, + /** + * List of responsive definitions to include + * Remove items from this list if you do not + * want it to be included in the output + * **/ + responsiveWhiteList: [ + /** color:#000; **/ + "c", + /** background-color:#fff; **/ + "bgc", + /** border-color:#000; **/ + "bdc", + /** border-top-color:#000; **/ + // "bdtc", + /** border-right-color:#000; **/ + // "bdrc", + /** border-bottom-color:#000; **/ + // "bdbc", + /** border-left-color:#000; **/ + // "bdlc", + ], + /** + * List of responsive definitions to exclude. + * If the number of exclusions is very minimal + * use this config instead of "responsiveWhiteList" + * **/ + responsiveBlackList: [], pseudoClasses: { - c: [":hover"], - bgc: [":hover", ":active"], - bdc: [":hover", ":focus"] + /** color:#000; **/ + c: [":hover", ":focus", ":active"], + /** background-color:#fff; **/ + bgc: [":hover", ":focus", ":active"], + /** border-color:#000; **/ + bdc: [":hover", ":focus", ":active"], + /** border-top-color:#000; **/ + // bdtc: [":hover", ":focus", ":active"], + /** border-right-color:#000; **/ + // bdrc: [":hover", ":focus", ":active"], + /** border-bottom-color:#000; **/ + // bdbc: [":hover", ":focus", ":active"], + /** border-left-color:#000; **/ + // bdlc: [":hover", ":focus", ":active"], }, - colorValues: colors, - backgroundColorValues: colors, - borderColorValues: colors }; + +module.exports = colorsConfig; diff --git a/templates/electrons_config_font.js.hbs b/templates/electrons_config_font.js.hbs index 6ae30ea..148920a 100644 --- a/templates/electrons_config_font.js.hbs +++ b/templates/electrons_config_font.js.hbs @@ -1,22 +1,422 @@ -module.exports = { +/** + * ========= + * CSS "font" module definitions. + * ========= + * */ +const fontConfig = { + /** + * Supported CSS definitions + * + * Define identifiers for each declaration based on your preference. + * Defaults to https://docs.emmet.io/cheat-sheet/ + * **/ names: { - fz: "fontSize", + /** font-weight:; **/ + fw: "fontWeight", + /** font-weight:normal; **/ + "fw:n": "fontWeightNormal", + /** font-weight:bold; **/ "fw:b": "fontWeightBold", + /** font-weight:bolder; **/ + "fw:br": "fontWeightBolder", + /** font-weight:lighter; **/ + "fw:lr": "fontWeightLighter", + /** font-style:normal; **/ + "fs:n": "fontStyleNormal", + /** font-style:italic; **/ + "fs:i": "fontStyleItalic", + /** font-style:oblique; **/ + "fs:o": "fontStyleOblique", + /** font-variant:normal; **/ + "fv:n": "fontVariantNormal", + /** font-variant:small-caps; **/ + "fv:sc": "fontVariantSmallCaps", + /** font-size:; **/ + fz: "fontSize", + /** font-size-adjust:; **/ + fza: "fontSizeAdjust", + /** font-size-adjust:none; **/ + "fza:n": "fontAdjustNone", + /** font-family:; **/ ff: "fontFamily", - "fw:n": "fontWeightNormal" + /** font-family:serif; **/ + "ff:s": "fontFamilySerif", + /** font-family:sans-serif; **/ + "ff:ss": "fontFamilySansSerif", + /** font-family:cursive; **/ + "ff:c": "fontFamilyCursive", + /** font-family:fantasy; **/ + "ff:f": "fontFamilyFantasy", + /** font-family:monospace; **/ + "ff:m": "fontFamilyMonospace", + /** font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; **/ + "ff:a": "fontFamilyArial", + /** font-family: "Times New Roman", Times, Baskerville, Georgia, serif; **/ + "ff:t": "fontFamilyTimes", + /** font-family: Verdana, Geneva, sans-serif; **/ + "ff:v": "fontFamilyVerdana", + /** font-effect:none; **/ + "fef:n": "fontEffectNone", + /** font-effect:engrave; **/ + "fef:eg": "fontEffectEngrave", + /** font-effect:emboss; **/ + "fef:eb": "fontEffectEmboss", + /** font-effect:outline; **/ + "fef:o": "fontEffectOutline", + /** font-stretch:normal; **/ + "fst:n": "fontStretchNormal", + /** font-stretch:ultra-condensed; **/ + "fst:uc": "fontStretchUltraCondense", + /** font-stretch:extra-condensed; **/ + "fst:ec": "fontStretchExtraCondensed", + /** font-stretch:condensed; **/ + "fst:c": "fontStretchCondensed", + /** font-stretch:semi-condensed; **/ + "fst:sc": "fontStretchSemiCondensed", + /** font-stretch:semi-expanded; **/ + "fst:se": "fontStretchSemiExpanded", + /** font-stretch:expanded; **/ + "fst:e": "fontStretchExpanded", + /** font-stretch:extra-expanded; **/ + "fst:ee": "fontStretchExtraExpanded", + /** font-stretch:ultra-expanded; **/ + "fst:ue": "fontStretchUltraExpanded", + }, + + /** + * Variables for font-weight:; + * + * eg., { + * [key]: [value]; + * } + * */ + fontWeightValues: { + thin: "100", + extralight: "200", + light: "300", + normal: "400", + medium: "500", + semibold: "600", + bold: "700", + extrabold: "800", + black: "900", }, + /** + * Variables for font-size:; + * + * eg., { + * [key]: [value]; + * } + * */ + fontSizeValues: { + xs: "0.75rem", + sm: "0.875rem", + base: "1rem", + lg: "1.125rem", + xl: "1.25rem", + "2xl": "1.5rem", + "3xl": "1.875rem", + "4xl": "2.25rem", + "5xl": "3rem", + "6xl": "3.75rem", + "7xl": "4.5rem", + "8xl": "6rem", + "9xl": "8rem", + }, + /** + * Variables for font-size-adjust:; + * + * eg., { + * [key]: [value]; + * } + * */ + fontSizeAdjustValues: {}, + /** + * Variables for font-family:; + * + * eg., { + * [key]: [value]; + * } + * */ fontFamilyValues: { - system: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Arial', 'Helvetica Neue', sans-serif" + sans: [ + "ui-sans-serif", + "system-ui", + "-apple-system", + "BlinkMacSystemFont", + '"Segoe UI"', + "Roboto", + '"Helvetica Neue"', + "Arial", + '"Noto Sans"', + "sans-serif", + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + '"Noto Color Emoji"', + ].join(","), + serif: [ + "ui-serif", + "Georgia", + "Cambria", + '"Times New Roman"', + "Times", + "serif", + ].join(","), + mono: [ + "ui-monospace", + "SFMono-Regular", + "Menlo", + "Monaco", + "Consolas", + '"Liberation Mono"', + '"Courier New"', + "monospace", + ].join(","), }, - whitelist: ["fw:b", "fz", "ff", "fw:n"], + /** + * List of definitions to include. + * Remove items from this list if you do not + * want it to be included in the output + * **/ + whitelist: [ + /** font-weight:; **/ + "fw", + /** font-weight:normal; **/ + "fw:n", + /** font-weight:bold; **/ + "fw:b", + /** font-weight:bolder; **/ + // "fw:br", + /** font-weight:lighter; **/ + // "fw:lr", + /** font-style:normal; **/ + // "fs:n", + /** font-style:italic; **/ + // "fs:i", + /** font-style:oblique; **/ + // "fs:o", + /** font-variant:normal; **/ + // "fv:n", + /** font-variant:small-caps; **/ + // "fv:sc", + /** font-size:; **/ + "fz", + /** font-size-adjust:; **/ + // "fza", + /** font-size-adjust:none; **/ + // "fza:n", + /** font-family:; **/ + "ff", + /** font-family:serif; **/ + // "ff:s", + /** font-family:sans-serif; **/ + // "ff:ss", + /** font-family:cursive; **/ + // "ff:c", + /** font-family:fantasy; **/ + // "ff:f", + /** font-family:monospace; **/ + // "ff:m", + /** font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; **/ + // "ff:a", + /** font-family: "Times New Roman", Times, Baskerville, Georgia, serif; **/ + // "ff:t", + /** font-family: Verdana, Geneva, sans-serif; **/ + // "ff:v", + /** font-effect:none; **/ + // "fef:n", + /** font-effect:engrave; **/ + // "fef:eg", + /** font-effect:emboss; **/ + // "fef:eb", + /** font-effect:outline; **/ + // "fef:o", + /** font-stretch:normal; **/ + // "fst:n", + /** font-stretch:ultra-condensed; **/ + // "fst:uc", + /** font-stretch:extra-condensed; **/ + // "fst:ec", + /** font-stretch:condensed; **/ + // "fst:c", + /** font-stretch:semi-condensed; **/ + // "fst:sc", + /** font-stretch:semi-expanded; **/ + // "fst:se", + /** font-stretch:expanded; **/ + // "fst:e", + /** font-stretch:extra-expanded; **/ + // "fst:ee", + /** font-stretch:ultra-expanded; **/ + // "fst:ue", + ], + /** + * List of definitions to exclude. + * If the number of exclusions is very minimal + * use this config instead of "whitelist" + * **/ + blacklist: [], + /** + * Flag to enable definitions with responsive + * breakpoints + * **/ + isResponsive: true, + /** + * List of responsive definitions to include + * Remove items from this list if you do not + * want it to be included in the output + * **/ + responsiveWhiteList: [ + /** font-weight:; **/ + "fw", + /** font-weight:normal; **/ + "fw:n", + /** font-weight:bold; **/ + "fw:b", + /** font-weight:bolder; **/ + // "fw:br", + /** font-weight:lighter; **/ + // "fw:lr", + /** font-style:normal; **/ + // "fs:n", + /** font-style:italic; **/ + // "fs:i", + /** font-style:oblique; **/ + // "fs:o", + /** font-variant:normal; **/ + // "fv:n", + /** font-variant:small-caps; **/ + // "fv:sc", + /** font-size:; **/ + "fz", + /** font-size-adjust:; **/ + // "fza", + /** font-size-adjust:none; **/ + // "fza:n", + /** font-family:; **/ + "ff", + /** font-family:serif; **/ + // "ff:s", + /** font-family:sans-serif; **/ + // "ff:ss", + /** font-family:cursive; **/ + // "ff:c", + /** font-family:fantasy; **/ + // "ff:f", + /** font-family:monospace; **/ + // "ff:m", + /** font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; **/ + // "ff:a", + /** font-family: "Times New Roman", Times, Baskerville, Georgia, serif; **/ + // "ff:t", + /** font-family: Verdana, Geneva, sans-serif; **/ + // "ff:v", + /** font-effect:none; **/ + // "fef:n", + /** font-effect:engrave; **/ + // "fef:eg", + /** font-effect:emboss; **/ + // "fef:eb", + /** font-effect:outline; **/ + // "fef:o", + /** font-stretch:normal; **/ + // "fst:n", + /** font-stretch:ultra-condensed; **/ + // "fst:uc", + /** font-stretch:extra-condensed; **/ + // "fst:ec", + /** font-stretch:condensed; **/ + // "fst:c", + /** font-stretch:semi-condensed; **/ + // "fst:sc", + /** font-stretch:semi-expanded; **/ + // "fst:se", + /** font-stretch:expanded; **/ + // "fst:e", + /** font-stretch:extra-expanded; **/ + // "fst:ee", + /** font-stretch:ultra-expanded; **/ + // "fst:ue", + ], + /** + * List of responsive definitions to exclude. + * If the number of exclusions is very minimal + * use this config instead of "responsiveWhiteList" + * **/ + responsiveBlackList: [], pseudoClasses: { - "fw:b": [":hover"] + /** font-weight:; **/ + fw: [":hover", ":focus", ":active"], + /** font-weight:normal; **/ + // "fw:n": [":hover", ":focus", ":active"], + /** font-weight:bold; **/ + "fw:b": [":hover", ":focus", ":active"], + /** font-weight:bolder; **/ + // "fw:br": [":hover", ":focus", ":active"], + /** font-weight:lighter; **/ + // "fw:lr": [":hover", ":focus", ":active"], + /** font-style:normal; **/ + // "fs:n": [":hover", ":focus", ":active"], + /** font-style:italic; **/ + // "fs:i": [":hover", ":focus", ":active"], + /** font-style:oblique; **/ + // "fs:o": [":hover", ":focus", ":active"], + /** font-variant:normal; **/ + // "fv:n": [":hover", ":focus", ":active"], + /** font-variant:small-caps; **/ + // "fv:sc": [":hover", ":focus", ":active"], + /** font-size:; **/ + fz: [":hover", ":focus", ":active"], + /** font-size-adjust:; **/ + // fza: [":hover", ":focus", ":active"], + /** font-size-adjust:none; **/ + // "fza:n": [":hover", ":focus", ":active"], + /** font-family:; **/ + // ff: [":hover", ":focus", ":active"], + /** font-family:serif; **/ + // "ff:s": [":hover", ":focus", ":active"], + /** font-family:sans-serif; **/ + // "ff:ss": [":hover", ":focus", ":active"], + /** font-family:cursive; **/ + // "ff:c": [":hover", ":focus", ":active"], + /** font-family:fantasy; **/ + // "ff:f": [":hover", ":focus", ":active"], + /** font-family:monospace; **/ + // "ff:m": [":hover", ":focus", ":active"], + /** font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; **/ + // "ff:a": [":hover", ":focus", ":active"], + /** font-family: "Times New Roman", Times, Baskerville, Georgia, serif; **/ + // "ff:t": [":hover", ":focus", ":active"], + /** font-family: Verdana, Geneva, sans-serif; **/ + // "ff:v": [":hover", ":focus", ":active"], + /** font-effect:none; **/ + // "fef:n": [":hover", ":focus", ":active"], + /** font-effect:engrave; **/ + // "fef:eg": [":hover", ":focus", ":active"], + /** font-effect:emboss; **/ + // "fef:eb": [":hover", ":focus", ":active"], + /** font-effect:outline; **/ + // "fef:o": [":hover", ":focus", ":active"], + /** font-stretch:normal; **/ + // "fst:n": [":hover", ":focus", ":active"], + /** font-stretch:ultra-condensed; **/ + // "fst:uc": [":hover", ":focus", ":active"], + /** font-stretch:extra-condensed; **/ + // "fst:ec": [":hover", ":focus", ":active"], + /** font-stretch:condensed; **/ + // "fst:c": [":hover", ":focus", ":active"], + /** font-stretch:semi-condensed; **/ + // "fst:sc": [":hover", ":focus", ":active"], + /** font-stretch:semi-expanded; **/ + // "fst:se": [":hover", ":focus", ":active"], + /** font-stretch:expanded; **/ + // "fst:e": [":hover", ":focus", ":active"], + /** font-stretch:extra-expanded; **/ + // "fst:ee": [":hover", ":focus", ":active"], + /** font-stretch:ultra-expanded; **/ + // "fst:ue": [":hover", ":focus", ":active"], }, - fontSizeValues: { - xs: "11px", - s: "16px", - m: "24px", - l: "36px", - xl: "54px" - } }; + +module.exports = fontConfig; \ No newline at end of file diff --git a/templates/electrons_config_index.js.hbs b/templates/electrons_config_index.js.hbs index 627bed7..f474e3d 100644 --- a/templates/electrons_config_index.js.hbs +++ b/templates/electrons_config_index.js.hbs @@ -1,11 +1,28 @@ -const base = require("./base"); -const breakpoints = require("./breakpoints"); -const colors = require("./colors"); -const font = require("./font"); +const fs = require("fs"); +const path = require("path"); +const { camelCase } = require("lodash"); -module.exports = { - base, - breakpoints, - colors, - font -}; +/** Get the filename so can be ignored from the exports */ +const basename = path.basename(__filename); +/** List of function to be exported */ +const functions = {}; + +/** + * Sync import files fom the current folder and export them + * + * { [key: camelCase-string]: {config object} } + * + */ +fs.readdirSync(path.dirname(__filename)) + .filter( + (file) => + file.indexOf(".") !== 0 && file !== basename && file.slice(-3) === ".js" + ) + .map((file) => { + functions[camelCase(file.slice(0, -3))] = require(path.join( + __dirname, + file + )); + }); + +module.exports = functions; \ No newline at end of file diff --git a/templates/electrons_index.css.hbs b/templates/electrons_index.css.hbs index bb86801..7ec09aa 100644 --- a/templates/electrons_index.css.hbs +++ b/templates/electrons_index.css.hbs @@ -1,2 +1,3 @@ -/* custom static css (e.g. normalize) can be added here */ +@import "modern-normalize/modern-normalize.css"; +@import "./preflight.css"; @utility; diff --git a/templates/electrons_package.json.hbs b/templates/electrons_package.json.hbs index 914404c..c79d962 100644 --- a/templates/electrons_package.json.hbs +++ b/templates/electrons_package.json.hbs @@ -2,5 +2,16 @@ "name": "{{ electronsModuleName }}", "version": "0.0.1", "main": "./dist/index.css", - "sideEffects": false + "sideEffects": false, + "dependencies": { + "modern-normalize": "^1.0.0" + }, + "browserslist": [ + "> 1%", + "IE 11" + ], + "devDependencies": { + "autoprefixer": "^10.2.5", + "postcss-import": "^14.0.0" + } } diff --git a/templates/electrons_postcss.plugins.js.hbs b/templates/electrons_postcss.plugins.js.hbs index a3de8a8..f0cc337 100644 --- a/templates/electrons_postcss.plugins.js.hbs +++ b/templates/electrons_postcss.plugins.js.hbs @@ -1,6 +1,8 @@ const { utility } = require("@utilitycss/atomic").utility; +const atImport = require("postcss-import"); +const autoprefixer = require("autoprefixer"); const utilityConfig = require("./utility.config"); -module.exports = opts => { - return [utility(utilityConfig(opts))]; +module.exports = (opts) => { + return [atImport, utility(utilityConfig(opts)), autoprefixer]; }; diff --git a/templates/electrons_preflight.css.hbs b/templates/electrons_preflight.css.hbs new file mode 100644 index 0000000..2e8f601 --- /dev/null +++ b/templates/electrons_preflight.css.hbs @@ -0,0 +1,229 @@ +/** + * Manually forked from https://github.com/tailwindlabs/tailwindcss/blob/46a33003720ae0c8d36821a7a9207e7288c17812/src/plugins/css/preflight.css + * A thin layer on top of normalize.css that provides a starting point more + * suitable for web applications. + */ + +/** + * Removes the default spacing and border for appropriate elements. + */ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +button { + background-color: transparent; + background-image: none; +} + +/** + * Work around a Firefox/IE bug where the transparent `button` background + * results in a loss of the default `button` focus styles. + */ + +button:focus { + outline: 1px dotted; + outline: 5px auto -webkit-focus-ring-color; +} + +fieldset { + margin: 0; + padding: 0; +} + +ol, +ul { + list-style: none; + margin: 0; + padding: 0; +} + +html { + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */ + line-height: 1.5; /* 2 */ +} + +/** + * Inherit font-family and line-height from `html` so users can set them as + * a class directly on the `html` element. + */ + +body { + font-family: inherit; + line-height: inherit; +} + +/** + * 1. Prevent padding and border from affecting element width. + * + * We used to set this in the html element and inherit from + * the parent element for everything else. This caused issues + * in shadow-dom-enhanced elements like
where the content + * is wrapped by a div with box-sizing set to `content-box`. + * + * https://github.com/mozdevs/cssremedy/issues/4 + * + * + * 2. Allow adding a border to an element by just adding a border-width. + * + * By default, the way the browser specifies that an element should have no + * border is by setting it's border-style to `none` in the user-agent + * stylesheet. + * + * In order to easily add borders to elements by just setting the `border-width` + * property, we change the default border-style for all elements to `solid`, and + * use border-width to hide them instead. This way our `border` utilities only + * need to set the `border-width` property instead of the entire `border` + * shorthand, making our border utilities much more straightforward to compose. + * + */ + +*, +::before, +::after { + box-sizing: border-box; /* 1 */ + border-width: 0; /* 2 */ + border-style: solid; /* 2 */ + border-color: currentColor; /* 2 */ +} + +/* + * Ensure horizontal rules are visible by default + */ + +hr { + border-top-width: 1px; +} + +/** + * Undo the `border-style: none` reset that Normalize applies to images so that + * our `border-{width}` utilities have the expected effect. + * + * The Normalize reset is unnecessary for us since we default the border-width + * to 0 on all elements. + * + */ + +img { + border-style: solid; +} + +textarea { + resize: vertical; +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + color: #a1a1aa; +} + +button, +[role="button"] { + cursor: pointer; +} + +table { + border-collapse: collapse; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/** + * Reset links to optimize for opt-in styling instead of + * opt-out. + */ + +a { + color: inherit; + text-decoration: inherit; +} + +/** + * Reset form element properties that are easy to forget to + * style explicitly so you don't inadvertently introduce + * styles that deviate from your design system. These styles + * supplement a partial reset that is already applied by + * normalize.css. + */ + +button, +input, +optgroup, +select, +textarea { + padding: 0; + line-height: inherit; + color: inherit; +} + +/** + * Use the configured 'mono' font family for elements that + * are expected to be rendered with a monospace font, falling + * back to the system monospace stack if there is no configured + * 'mono' font family. + */ + +pre, +code, +kbd, +samp { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + "Liberation Mono", "Courier New", monospace; +} + +/** + * Make replaced elements `display: block` by default as that's + * the behavior you want almost all of the time. Inspired by + * CSS Remedy, with `svg` added as well. + * + * https://github.com/mozdevs/cssremedy/issues/14 + */ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + vertical-align: middle; +} + +/** + * Constrain images and videos to the parent width and preserve + * their instrinsic aspect ratio. + * + * https://github.com/mozdevs/cssremedy/issues/14 + */ + +img, +video { + max-width: 100%; + height: auto; +} diff --git a/templates/electrons_utility.config.js.hbs b/templates/electrons_utility.config.js.hbs index 9bdc2fb..0447851 100644 --- a/templates/electrons_utility.config.js.hbs +++ b/templates/electrons_utility.config.js.hbs @@ -1,39 +1,55 @@ const path = require("path"); const { plugins: { docs }, - modules: { - colors, - font - } + modules: availableUtilityModules, } = require("@utilitycss/atomic").utility; -const { - base, - breakpoints: breakPointsValues, - colors: colorsConfig, - font: fontConfig -} = require("./config"); - -const modules = [ - colors(colorsConfig), - font(fontConfig) +/** Get all the available electron config */ +const availableConfigs = require("./config"); +/** + * Add fileName of `module` here to ignore from electron generations + * + * Config pathname ./config/ + */ +const DENY_LIST = [ + /** `base` and `breakpoints` are always ignored from module creation since its not a module but a config. */ + "base", + "breakpoints", ]; -const plugins = [docs({ output: path.resolve(__dirname, "docs/index.html") })]; +/** Dynamically map the module function and the available config */ +const modules = Object.keys(availableConfigs) + .filter((v) => !DENY_LIST.includes(v)) + .map((v) => { + /** Get the module function from utility */ + const moduleFn = availableUtilityModules[v]; + + if (typeof moduleFn === "function") { + /** If the moduleFn is a valid function, then add the list with the available config */ + return moduleFn(availableConfigs[v]); + } + }) + .filter(Boolean); -const getConfig = opts => { +/** Build utility config */ +const getConfig = (opts) => { const { name, version } = require("./package.json"); - const config = Object.assign({}, base, { - breakPoints: breakPointsValues + /** Build required configs */ + const config = Object.assign({}, availableConfigs.base, { + breakPoints: availableConfigs.breakpoints, }); + /** Add supported plugins from utility, */ const plugins = [ + /** Build a HTML file which has the list of all generated electrons */ docs({ output: path.join(__dirname, "docs", "index.html"), openFile: false, - packageName: `${name} ${version}` - }) + packageName: `${name} ${version}`, + }), ]; + /** Merge all the above options to build the final utility config */ const utilityConfigs = Object.assign({}, { config, modules, plugins }); + /** Return */ return utilityConfigs; }; diff --git a/templates/lerna.json.hbs b/templates/lerna.json.hbs index 6c90f52..9b8ab5c 100644 --- a/templates/lerna.json.hbs +++ b/templates/lerna.json.hbs @@ -1,5 +1,5 @@ { - "lerna": "3.13.3", + "lerna": "4.0.0", "npmClient": "yarn", "useWorkspaces": true, "concurrency": 1, diff --git a/templates/package.json.hbs b/templates/package.json.hbs index 5fd79d3..03d77c0 100644 --- a/templates/package.json.hbs +++ b/templates/package.json.hbs @@ -8,7 +8,7 @@ }, "devDependencies": { "@utilitycss/atomic": "^0.16.0", - "lerna": "3.13.3" + "lerna": "4.0.0", }, "workspaces": { "packages": [