From 879ec1b5333e2fb2a7a72831ca5f31a0668eaba7 Mon Sep 17 00:00:00 2001 From: Devin Haska Date: Wed, 28 May 2025 22:14:40 -0700 Subject: [PATCH] feat: add some CSS utilities Adds some basic CSS utilities for layouts. Uses any css defined by `src/css/styles.css`, and utilizes the `postcss-import` plugin to resolve imports into their contents. The combined final output contains the base style as defined by the configuration options, as well as some basic utilities. --- index.js | 17 +++- package-lock.json | 121 +++++++++++++++++++++++++- package.json | 3 +- src/css/styles.css | 5 ++ src/css/utilities/dimensions.css | 19 ++++ src/css/utilities/flex.css | 35 ++++++++ src/css/utilities/flow.css | 8 ++ src/css/utilities/list.css | 11 +++ src/css/utilities/visually-hidden.css | 15 ++++ 9 files changed, 229 insertions(+), 5 deletions(-) create mode 100644 src/css/styles.css create mode 100644 src/css/utilities/dimensions.css create mode 100644 src/css/utilities/flex.css create mode 100644 src/css/utilities/flow.css create mode 100644 src/css/utilities/list.css create mode 100644 src/css/utilities/visually-hidden.css diff --git a/index.js b/index.js index 6c107b1..bf3b802 100644 --- a/index.js +++ b/index.js @@ -6,6 +6,7 @@ */ import fs from "node:fs"; import postcss from "postcss"; +import postcssImport from "postcss-import"; import cssnano from "cssnano"; import colors from "./src/colors.js"; @@ -15,16 +16,26 @@ import spacing from "./src/spacing.js"; async function generateCSS() { const css = `${fontFamily}${fontVariables}${colors}${spacing}`; + + const utilitiesCssFile = fs.readFileSync("./src/css/styles.css"); + const utilitiesCss = await postcss([postcssImport]) + .process(utilitiesCssFile, { from: "src/css/styles.css" }) + .then((result) => result.css); + await postcss([cssnano]) - .process(css, { + .process(`${css}${utilitiesCss}`, { from: undefined, to: "dist/lilypad.css", }) .then((result) => { - fs.mkdirSync("dist"); + if (!fs.existsSync("dist")) { + fs.mkdirSync("dist"); + } + fs.writeFileSync("dist/lilypad.css", result.css); + if (result.map) { - fs.writeFile("dest/app.css.map", result.map.toString(), () => true); + fs.writeFile("dist/lilypad.css.map", result.map.toString(), () => true); } }); } diff --git a/package-lock.json b/package-lock.json index 41fc307..4355704 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,8 @@ "license": "MIT", "devDependencies": { "cssnano": "^7.0.7", - "postcss": "^8.5.3" + "postcss": "^8.5.3", + "postcss-import": "^16.1.0" } }, "node_modules/@trysound/sax": { @@ -388,6 +389,45 @@ "node": ">=6" } }, + "node_modules/function-bind": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/hasown": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", + "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/is-core-module": { + "version": "2.16.1", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz", + "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==", + "dev": true, + "license": "MIT", + "dependencies": { + "hasown": "^2.0.2" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/lilconfig": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz", @@ -461,6 +501,13 @@ "url": "https://github.com/fb55/nth-check?sponsor=1" } }, + "node_modules/path-parse": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "dev": true, + "license": "MIT" + }, "node_modules/picocolors": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", @@ -468,6 +515,16 @@ "dev": true, "license": "ISC" }, + "node_modules/pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/postcss": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz", @@ -605,6 +662,24 @@ "postcss": "^8.4.32" } }, + "node_modules/postcss-import": { + "version": "16.1.0", + "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-16.1.0.tgz", + "integrity": "sha512-7hsAZ4xGXl4MW+OKEWCnF6T5jqBw80/EE9aXg1r2yyn1RsVEU8EtKXbijEODa+rg7iih4bKf7vlvTGYR4CnPNg==", + "dev": true, + "license": "MIT", + "dependencies": { + "postcss-value-parser": "^4.0.0", + "read-cache": "^1.0.0", + "resolve": "^1.1.7" + }, + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "postcss": "^8.0.0" + } + }, "node_modules/postcss-merge-longhand": { "version": "7.0.5", "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-7.0.5.tgz", @@ -956,6 +1031,37 @@ "dev": true, "license": "MIT" }, + "node_modules/read-cache": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", + "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==", + "dev": true, + "license": "MIT", + "dependencies": { + "pify": "^2.3.0" + } + }, + "node_modules/resolve": { + "version": "1.22.10", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz", + "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-core-module": "^2.16.0", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/source-map-js": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", @@ -983,6 +1089,19 @@ "postcss": "^8.4.32" } }, + "node_modules/supports-preserve-symlinks-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/svgo": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz", diff --git a/package.json b/package.json index 0baf081..61dcaf8 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "license": "MIT", "devDependencies": { "cssnano": "^7.0.7", - "postcss": "^8.5.3" + "postcss": "^8.5.3", + "postcss-import": "^16.1.0" } } diff --git a/src/css/styles.css b/src/css/styles.css new file mode 100644 index 0000000..d13382e --- /dev/null +++ b/src/css/styles.css @@ -0,0 +1,5 @@ +@import "utilities/dimensions.css"; +@import "utilities/flex.css"; +@import "utilities/flow.css"; +@import "utilities/list.css"; +@import "utilities/visually-hidden.css"; diff --git a/src/css/utilities/dimensions.css b/src/css/utilities/dimensions.css new file mode 100644 index 0000000..f900ae8 --- /dev/null +++ b/src/css/utilities/dimensions.css @@ -0,0 +1,19 @@ +.w-full { + width: 100%; +} + +.h-full { + height: 100%; +} + +.w-fit { + width: fit-content; +} + +.w-max { + width: max-content; +} + +.w-min { + width: min-content; +} diff --git a/src/css/utilities/flex.css b/src/css/utilities/flex.css new file mode 100644 index 0000000..aae032f --- /dev/null +++ b/src/css/utilities/flex.css @@ -0,0 +1,35 @@ +.flex { + display: flex; +} + +.flex-col { + flex-direction: column; +} + +.items-start { + align-items: flex-start; +} + +.items-center { + align-items: center; +} + +.items-end { + align-items: flex-end; +} + +.justify-center { + justify-content: center; +} + +.justify-between { + justify-content: space-between; +} + +.flex-wrap { + flex-wrap: wrap; +} + +.flex-1 { + flex: 1; +} diff --git a/src/css/utilities/flow.css b/src/css/utilities/flow.css new file mode 100644 index 0000000..23bdc32 --- /dev/null +++ b/src/css/utilities/flow.css @@ -0,0 +1,8 @@ +/* + * FLOW UTILITY + * Like the Every Layout stack: https://every-layout.dev/layouts/stack/ + * Info about this implementation: https://piccalil.li/quick-tip/flow-utility/ + */ +.flow > * + * { + margin-block-start: var(--flow-space, 1em); +} diff --git a/src/css/utilities/list.css b/src/css/utilities/list.css new file mode 100644 index 0000000..f7845a7 --- /dev/null +++ b/src/css/utilities/list.css @@ -0,0 +1,11 @@ +.list-none { + list-style-type: none; +} + +.list-disc { + list-style-type: disc; +} + +.list-decimal { + list-style-type: decimal; +} diff --git a/src/css/utilities/visually-hidden.css b/src/css/utilities/visually-hidden.css new file mode 100644 index 0000000..6a63f69 --- /dev/null +++ b/src/css/utilities/visually-hidden.css @@ -0,0 +1,15 @@ +/* + * VISUALLY HIDDEN UTILITY + * Info: https://piccalil.li/quick-tip/visually-hidden/ + */ +.visually-hidden { + border: 0; + clip: rect(0 0 0 0); + height: 0; + margin: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + white-space: nowrap; +}