From 923fd9356e7abf0c3e9e564871f7ec4ff7d9c9d0 Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Wed, 30 Oct 2024 11:24:01 -0600 Subject: [PATCH 1/7] wip --- .changeset/dry-rules-smash.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/dry-rules-smash.md diff --git a/.changeset/dry-rules-smash.md b/.changeset/dry-rules-smash.md new file mode 100644 index 00000000..30d3c0c2 --- /dev/null +++ b/.changeset/dry-rules-smash.md @@ -0,0 +1,5 @@ +--- +'@ryanatkn/moss': patch +--- + +move gro plugin to gro From 406e2e9384e1bddcb812501f4298812808cf28e3 Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Wed, 30 Oct 2024 11:25:17 -0600 Subject: [PATCH 2/7] wip --- src/lib/gro_plugin_moss.ts | 122 ------------------------------------- 1 file changed, 122 deletions(-) delete mode 100644 src/lib/gro_plugin_moss.ts diff --git a/src/lib/gro_plugin_moss.ts b/src/lib/gro_plugin_moss.ts deleted file mode 100644 index 9c5bc868..00000000 --- a/src/lib/gro_plugin_moss.ts +++ /dev/null @@ -1,122 +0,0 @@ -import {EMPTY_OBJECT} from '@ryanatkn/belt/object.js'; -import type {Plugin} from '@ryanatkn/gro/plugin.js'; -import type {Args} from '@ryanatkn/gro/args.js'; -import {throttle} from '@ryanatkn/belt/throttle.js'; -import type {Cleanup_Watch} from '@ryanatkn/gro/filer.js'; -import {Unreachable_Error} from '@ryanatkn/belt/error.js'; -import {format_file} from '@ryanatkn/gro/format_file.js'; -import type {File_Filter} from '@ryanatkn/gro/path.js'; -import {writeFileSync} from 'node:fs'; - -import {collect_css_classes, Css_Classes} from '$lib/css_class_helpers.js'; -import {css_classes_by_name} from '$lib/css_classes.js'; - -export const generate_classes_css = (classes: Iterable): string => { - let css = ''; - for (const c of classes) { - const v = css_classes_by_name[c]; - if (!v) { - // diagnostic - // if (!/^[a-z_0-9]+$/.test(c)) { - // console.error('invalid class detected, fix the regexps', c); - // } - continue; - } - if ('declaration' in v) { - css += `.${c} { ${v.declaration} }\n`; - } else { - css += v.ruleset + '\n'; - } - } - - return css; -}; - -const FLUSH_DEBOUNCE_DELAY = 500; - -export interface Task_Args extends Args { - watch?: boolean; -} - -export interface Options { - include_classes?: string[] | Set | null; - outfile?: string; - filter_file?: File_Filter | null; - flush_debounce_delay?: number; - banner?: string; -} - -export const gro_plugin_moss = ({ - include_classes = null, - outfile = 'src/routes/moss.css', // TODO maybe support multiple files using file filters to check where to collect them? - filter_file = (p) => !p.includes('.test.') && !p.includes('/test/'), - flush_debounce_delay = FLUSH_DEBOUNCE_DELAY, - banner = 'generated by gro_plugin_moss', -}: Options = EMPTY_OBJECT): Plugin => { - const css_classes = new Css_Classes( - Array.isArray(include_classes) ? new Set(include_classes) : include_classes, - ); - - let previous_output: string | undefined; - - let flushing_timeout: NodeJS.Timeout | undefined; - const queue_gen = () => { - if (flushing_timeout === undefined) { - flushing_timeout = setTimeout(() => { - flushing_timeout = undefined; - void flush_gen_queue(); - }); // the timeout batches synchronously - } - }; - const flush_gen_queue = throttle( - async () => { - const css = generate_classes_css(css_classes.get_sorted_array()); - const contents = `/* ${banner} */\n\n${css}\n\n/* ${banner} */`; - const output = await format_file(contents, {filepath: outfile}); - // TODO think about using gen to implement this, would have some nice benefits like automatic change detection - if (output === previous_output) return; - previous_output = output; - writeFileSync(outfile, output); - }, - {delay: flush_debounce_delay, when: 'trailing'}, - ); - - let cleanup: Cleanup_Watch | undefined; - - return { - name: 'gro_plugin_moss', - setup: async ({filer}) => { - // When a file builds, check it and its tree of dependents - // for any `.gen.` files that need to run. - cleanup = await filer.watch((change, source_file) => { - if (filter_file && !filter_file(source_file.id)) { - return; - } - switch (change.type) { - case 'add': - case 'update': { - if (source_file.contents !== null) { - const classes = collect_css_classes(source_file.contents); - css_classes.add(source_file.id, classes); - queue_gen(); - } - break; - } - case 'delete': { - css_classes.delete(source_file.id); - break; - } - default: - throw new Unreachable_Error(change.type); - } - }); - queue_gen(); - }, - teardown: async () => { - if (cleanup !== undefined) { - await cleanup(); - cleanup = undefined; - } - }, - }; -}; From b68097c9e947bbe728be71cc28b51753f501cfe7 Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Wed, 30 Oct 2024 13:55:17 -0600 Subject: [PATCH 3/7] wip --- src/routes/library/introduction/+page.svelte | 30 ++++++++------------ 1 file changed, 12 insertions(+), 18 deletions(-) diff --git a/src/routes/library/introduction/+page.svelte b/src/routes/library/introduction/+page.svelte index a1ca4855..d22b9a52 100644 --- a/src/routes/library/introduction/+page.svelte +++ b/src/routes/library/introduction/+page.svelte @@ -48,29 +48,23 @@ @ryanatkn/moss/style.css - the main stylesheet and CSS reset -
  • - $routes/moss.css - local to your project - and generated by gro_plugin_moss, includes only the utility classes your code - uses -
  • @ryanatkn/moss/theme.css - or bring your own
  • - optimizing the stylesheet is out of Moss's scope, but it's just CSS so it works with - existing tools -
      -
    • - I'm planning to include a Vite plugin to remove unused styles in my Svelte UI library Fuz -
      • -
    • - optimizing the stylesheet will become increasingly important as the variables and - utility classes fill out -
      • -
    + $routes/moss.css - includes only the + utility classes your code uses, generated by the + Gro + reference implementation + gro_plugin_moss + (you may want to implement this in your own build system if you don't use Gro) +
    • +
  • + There are no tools yet for optimizing away unused variables, so style.css and + theme.css have some bloat.

    • From 9a9d4cf8b7069a8dd4aeca11be871e16c4dc3669 Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Wed, 30 Oct 2024 13:56:03 -0600 Subject: [PATCH 4/7] wip --- package.json | 4 ---- src/routes/package.ts | 13 ------------- 2 files changed, 17 deletions(-) diff --git a/package.json b/package.json index 96e06836..a67bdaaf 100644 --- a/package.json +++ b/package.json @@ -91,10 +91,6 @@ "types": "./dist/css_classes.d.ts", "default": "./dist/css_classes.js" }, - "./gro_plugin_moss.js": { - "types": "./dist/gro_plugin_moss.d.ts", - "default": "./dist/gro_plugin_moss.js" - }, "./style.css": { "default": "./dist/style.css" }, diff --git a/src/routes/package.ts b/src/routes/package.ts index 0c8d84bc..ef795276 100644 --- a/src/routes/package.ts +++ b/src/routes/package.ts @@ -71,10 +71,6 @@ export const package_json = { default: './dist/css_class_helpers.js', }, './css_classes.js': {types: './dist/css_classes.d.ts', default: './dist/css_classes.js'}, - './gro_plugin_moss.js': { - types: './dist/gro_plugin_moss.d.ts', - default: './dist/gro_plugin_moss.js', - }, './style.css': {default: './dist/style.css'}, './theme.css': {default: './dist/theme.css'}, './theme.gen.css.js': {types: './dist/theme.gen.css.d.ts', default: './dist/theme.gen.css.js'}, @@ -108,15 +104,6 @@ export const src_json = { {name: 'css_classes_by_name', kind: 'variable'}, ], }, - './gro_plugin_moss.js': { - path: 'gro_plugin_moss.ts', - declarations: [ - {name: 'generate_classes_css', kind: 'function'}, - {name: 'Task_Args', kind: 'type'}, - {name: 'Options', kind: 'type'}, - {name: 'gro_plugin_moss', kind: 'function'}, - ], - }, './style.css': {path: 'style.css', declarations: []}, './theme.css': {path: 'theme.css', declarations: []}, './theme.gen.css.js': { From b9b8b436a98e8082f55f3ba9c9f8b0166c3c2d61 Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Wed, 30 Oct 2024 14:43:35 -0600 Subject: [PATCH 5/7] wip --- src/routes/library/colors/+page.svelte | 2 +- src/routes/library/introduction/+page.svelte | 26 ++++++++++++++------ 2 files changed, 20 insertions(+), 8 deletions(-) diff --git a/src/routes/library/colors/+page.svelte b/src/routes/library/colors/+page.svelte index 75699630..8066e247 100644 --- a/src/routes/library/colors/+page.svelte +++ b/src/routes/library/colors/+page.svelte @@ -107,7 +107,7 @@

    Hue variables are also useful to construct custom colors not covered by the color variables. - For example, Moss's base stylesheet uses hue_a for the semi-transparent + For example, Moss' base stylesheet uses hue_a for the semi-transparent ::selection. (try selecting some text - same hue!)

    diff --git a/src/routes/library/introduction/+page.svelte b/src/routes/library/introduction/+page.svelte index d22b9a52..75c2aff9 100644 --- a/src/routes/library/introduction/+page.svelte +++ b/src/routes/library/introduction/+page.svelte @@ -18,8 +18,22 @@
    • plain CSS
    • zero dependencies
      • -
    • exports one main stylesheet that can be optimized by other tools
      • -
    • also exports the underlying CSS data, helpers, and types
      • +
    • + exports one main stylesheet, @ryanatkn/moss/style.css, that doubles as a reset with basic HTML tag styles +
      • +
    • + exports a basic theme, @ryanatkn/moss/theme.css +
      • +
    • + also exports the underlying CSS data, helpers, and types, which can be used in many ways, + including outputting an optimized utilities class file +
    • uses its own concept of style variables, a specialization of CSS custom properties and design tokens @@ -34,7 +48,6 @@ dark mode is a first-class concept in the system, not a theme, instead each theme can support light and/or dark color-schemes
      • -
    • includes a CSS reset that styles HTML tags directly with the variables
    • is agnostic to JS frameworks, for example usage see Themed
    • - $routes/moss.css - includes only the - utility classes your code uses, generated by the - Gro - reference implementation + $routes/moss.css - a reference implementation + using Moss' helpers that includes only the utility classes your code uses, generated by + Gro's gro_plugin_moss From 4907feae530c364e018e215d9fb8c8f89e0ccc29 Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Wed, 30 Oct 2024 18:20:29 -0600 Subject: [PATCH 6/7] wip --- .changeset/dry-rules-smash.md | 2 +- package-lock.json | 56 +++++++++++++++++------------------ package.json | 10 +++---- src/routes/package.ts | 10 +++---- 4 files changed, 39 insertions(+), 39 deletions(-) diff --git a/.changeset/dry-rules-smash.md b/.changeset/dry-rules-smash.md index 30d3c0c2..a6169394 100644 --- a/.changeset/dry-rules-smash.md +++ b/.changeset/dry-rules-smash.md @@ -1,5 +1,5 @@ --- -'@ryanatkn/moss': patch +'@ryanatkn/moss': minor --- move gro plugin to gro diff --git a/package-lock.json b/package-lock.json index f27e8483..d02f04d2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,23 +10,23 @@ "license": "MIT", "devDependencies": { "@changesets/changelog-git": "^0.2.0", - "@ryanatkn/belt": "^0.25.3", + "@ryanatkn/belt": "^0.26.0", "@ryanatkn/eslint-config": "^0.5.5", - "@ryanatkn/fuz": "^0.130.2", + "@ryanatkn/fuz": "^0.130.3", "@ryanatkn/fuz_code": "^0.20.0", - "@ryanatkn/gro": "^0.143.3", + "@ryanatkn/gro": "^0.144.0", "@sveltejs/adapter-static": "^3.0.6", "@sveltejs/kit": "^2.7.3", "@sveltejs/package": "^2.3.7", "@sveltejs/vite-plugin-svelte": "^4.0.0", - "@types/node": "^22.8.2", + "@types/node": "^22.8.4", "eslint": "^9.13.0", "eslint-plugin-svelte": "^2.46.0", "prettier": "^3.3.3", "prettier-plugin-svelte": "^3.2.7", "prism-svelte": "^0.5.0", "prismjs": "^1.29.0", - "svelte": "^5.1.4", + "svelte": "^5.1.6", "svelte-check": "^4.0.5", "tslib": "^2.8.0", "typescript": "^5.6.3", @@ -442,9 +442,9 @@ "peer": true }, "node_modules/@ryanatkn/belt": { - "version": "0.25.3", - "resolved": "https://registry.npmjs.org/@ryanatkn/belt/-/belt-0.25.3.tgz", - "integrity": "sha512-83HDhTp0mDWlmFnJS+V9vV4XvkvAVdYhV/qRUJsPrkzeGN7IZ+OkZsdzyxluzr2OxwJiDozrmeduQRambiG1nA==", + "version": "0.26.0", + "resolved": "https://registry.npmjs.org/@ryanatkn/belt/-/belt-0.26.0.tgz", + "integrity": "sha512-x4+Zog8oTyUzDyNbW3iMIhHp81eVx1nUHmkj3imkzQ9vO68k4vrEN30OjTsS36LzuuLBQT+jh42ebc7MDfOY5Q==", "dev": true, "license": "MIT", "engines": { @@ -497,9 +497,9 @@ } }, "node_modules/@ryanatkn/fuz": { - "version": "0.130.2", - "resolved": "https://registry.npmjs.org/@ryanatkn/fuz/-/fuz-0.130.2.tgz", - "integrity": "sha512-k7g2ma0bieHNtYUWbULHJwlpd9u+CX1y6yfuGrgS4zn4VbMOwI20WB5190ECgIYJOyUAidySvQ8A/wyDWeAcEA==", + "version": "0.130.3", + "resolved": "https://registry.npmjs.org/@ryanatkn/fuz/-/fuz-0.130.3.tgz", + "integrity": "sha512-A6CUqqH80hvWiaRPFSujr5PxRhaCPchyMcjgj5BVTM+4SSxXPuG5cjQEqgmN06TUt/xl2qt+9LbE6fk4uPD4Fw==", "dev": true, "license": "MIT", "engines": { @@ -541,17 +541,17 @@ } }, "node_modules/@ryanatkn/gro": { - "version": "0.143.3", - "resolved": "https://registry.npmjs.org/@ryanatkn/gro/-/gro-0.143.3.tgz", - "integrity": "sha512-idmPDHk2uHrtQzpe2yjfb85BNr6CsMmxC1ByEhL0BfA0mCGNhNJ1Z63vlXZX6j5JU5u9NxP3aw/lza64l4eryg==", + "version": "0.144.0", + "resolved": "https://registry.npmjs.org/@ryanatkn/gro/-/gro-0.144.0.tgz", + "integrity": "sha512-jnoJpRrSpBuHqCeL+Pd1TpnZJuwasP9qCSkvtUzkk4sKns08OF5JCwwmAvEsHJbrIstSgBleDdm9uwXm8aZTPA==", "dev": true, "license": "MIT", "dependencies": { - "@ryanatkn/belt": "^0.25.3", + "@ryanatkn/belt": "^0.26.0", "chokidar": "^4.0.1", "dotenv": "^16.4.5", "es-module-lexer": "^1.5.4", - "esm-env": "^1.0.0", + "esm-env": "^1.1.4", "mri": "^1.2.0", "prettier": "^3.3.3", "prettier-plugin-svelte": "^3.2.7", @@ -742,9 +742,9 @@ "license": "MIT" }, "node_modules/@types/node": { - "version": "22.8.2", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.8.2.tgz", - "integrity": "sha512-NzaRNFV+FZkvK/KLCsNdTvID0SThyrs5SHB6tsD/lajr22FGC73N2QeDPM2wHtVde8mgcXuSsHQkH5cX1pbPLw==", + "version": "22.8.4", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.8.4.tgz", + "integrity": "sha512-SpNNxkftTJOPk0oN+y2bIqurEXHTA2AOZ3EJDDKeJ5VzkvvORSvmQXGQarcOzWV1ac7DCaPBEdMDxBsM+d8jWw==", "dev": true, "license": "MIT", "dependencies": { @@ -1556,9 +1556,9 @@ } }, "node_modules/esm-env": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.0.0.tgz", - "integrity": "sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.1.4.tgz", + "integrity": "sha512-oO82nKPHKkzIj/hbtuDYy/JHqBHFlMIW36SDiPCVsj87ntDLcWN+sJ1erdVryd4NxODacFTsdrIE3b7IamqbOg==", "dev": true, "license": "MIT" }, @@ -2670,9 +2670,9 @@ } }, "node_modules/svelte": { - "version": "5.1.4", - "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.1.4.tgz", - "integrity": "sha512-qgHDV7AyvBZa2pbf+V0tnvWrN1LKD8LdUsBkR/SSYVVN6zXexiXnOy5Pjcjft2y/2NJJVa8ORUHFVn3oiWCLVQ==", + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.1.6.tgz", + "integrity": "sha512-bYS/DpkqXk0j5UZgiNXrEjZYPRZ4Ncd87w4KUSbcZGyojA0+i/Ls9OGUjETHmdLe8RcQ0G8SX/T0PypPpAA/ew==", "dev": true, "license": "MIT", "dependencies": { @@ -2860,9 +2860,9 @@ } }, "node_modules/ts-api-utils": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz", - "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==", + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.0.tgz", + "integrity": "sha512-032cPxaEKwM+GT3vA5JXNzIaizx388rhsSW79vGRNGXfRRAdEAn2mvk36PvK5HnOchyWZ7afLEXqYCvPCrzuzQ==", "dev": true, "license": "MIT", "engines": { diff --git a/package.json b/package.json index a67bdaaf..9c6710e1 100644 --- a/package.json +++ b/package.json @@ -32,23 +32,23 @@ }, "devDependencies": { "@changesets/changelog-git": "^0.2.0", - "@ryanatkn/belt": "^0.25.3", + "@ryanatkn/belt": "^0.26.0", "@ryanatkn/eslint-config": "^0.5.5", - "@ryanatkn/fuz": "^0.130.2", + "@ryanatkn/fuz": "^0.130.3", "@ryanatkn/fuz_code": "^0.20.0", - "@ryanatkn/gro": "^0.143.3", + "@ryanatkn/gro": "^0.144.0", "@sveltejs/adapter-static": "^3.0.6", "@sveltejs/kit": "^2.7.3", "@sveltejs/package": "^2.3.7", "@sveltejs/vite-plugin-svelte": "^4.0.0", - "@types/node": "^22.8.2", + "@types/node": "^22.8.4", "eslint": "^9.13.0", "eslint-plugin-svelte": "^2.46.0", "prettier": "^3.3.3", "prettier-plugin-svelte": "^3.2.7", "prism-svelte": "^0.5.0", "prismjs": "^1.29.0", - "svelte": "^5.1.4", + "svelte": "^5.1.6", "svelte-check": "^4.0.5", "tslib": "^2.8.0", "typescript": "^5.6.3", diff --git a/src/routes/package.ts b/src/routes/package.ts index ef795276..548974a7 100644 --- a/src/routes/package.ts +++ b/src/routes/package.ts @@ -31,23 +31,23 @@ export const package_json = { engines: {node: '>=20.17'}, devDependencies: { '@changesets/changelog-git': '^0.2.0', - '@ryanatkn/belt': '^0.25.3', + '@ryanatkn/belt': '^0.26.0', '@ryanatkn/eslint-config': '^0.5.5', - '@ryanatkn/fuz': '^0.130.2', + '@ryanatkn/fuz': '^0.130.3', '@ryanatkn/fuz_code': '^0.20.0', - '@ryanatkn/gro': '^0.143.3', + '@ryanatkn/gro': '^0.144.0', '@sveltejs/adapter-static': '^3.0.6', '@sveltejs/kit': '^2.7.3', '@sveltejs/package': '^2.3.7', '@sveltejs/vite-plugin-svelte': '^4.0.0', - '@types/node': '^22.8.2', + '@types/node': '^22.8.4', eslint: '^9.13.0', 'eslint-plugin-svelte': '^2.46.0', prettier: '^3.3.3', 'prettier-plugin-svelte': '^3.2.7', 'prism-svelte': '^0.5.0', prismjs: '^1.29.0', - svelte: '^5.1.4', + svelte: '^5.1.6', 'svelte-check': '^4.0.5', tslib: '^2.8.0', typescript: '^5.6.3', From 7efc9a3cfc0d015270e2600eb177e42b8c3711fd Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Wed, 30 Oct 2024 18:21:58 -0600 Subject: [PATCH 7/7] wip --- src/routes/library/introduction/+page.svelte | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/src/routes/library/introduction/+page.svelte b/src/routes/library/introduction/+page.svelte index 75c2aff9..29ee2c40 100644 --- a/src/routes/library/introduction/+page.svelte +++ b/src/routes/library/introduction/+page.svelte @@ -18,18 +18,8 @@
      • plain CSS
      • zero dependencies
        • -
      • - exports one main stylesheet, @ryanatkn/moss/style.css, that doubles as a reset with basic HTML tag styles -
        • -
      • - exports a basic theme, @ryanatkn/moss/theme.css -
        • +
      • exports one main stylesheet that doubles as a reset with basic HTML tag styles
        • +
      • exports a basic theme that can be replaced with your own
      • also exports the underlying CSS data, helpers, and types, which can be used in many ways, including outputting an optimized utilities class file