move gro plugin to gro (#45)

.changeset/dry-rules-smash.md

@@ -0,0 +1,5 @@
+---
+'@ryanatkn/moss': minor
+---
+
+move gro plugin to gro

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",
@@ -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"
     },

src/routes/library/colors/+page.svelte

@@ -107,7 +107,7 @@
 		</p>
 		<p>
 			Hue variables are also useful to construct custom colors not covered by the color variables.
-			For example, Moss's base stylesheet uses <code>hue_a</code> for the semi-transparent
+			For example, Moss' base stylesheet uses <code>hue_a</code> for the semi-transparent
 			<code>::selection</code>. (try selecting some text -
 			<span class="color_a_5">same hue!</span>)
 		</p>

src/routes/library/introduction/+page.svelte

@@ -18,8 +18,12 @@
 		<ul>
 			<li>plain CSS</li>
 			<li>zero dependencies</li>
-			<li>exports one main stylesheet that can be optimized by other tools</li>
-			<li>also exports the underlying CSS data, helpers, and types</li>
+			<li>exports one main stylesheet that doubles as a reset with basic HTML tag styles</li>
+			<li>exports a basic theme that can be replaced with your own</li>
+			<li>
+				also exports the underlying CSS data, helpers, and types, which can be used in many ways,
+				including outputting an optimized utilities class file
+			</li>
 			<li>
 				uses its own concept of style variables, a specialization of CSS custom properties and
 				design tokens
@@ -34,7 +38,6 @@
 				dark mode is a first-class concept in the system, not a theme, instead each theme can
 				support light and/or dark <Mdn_Link path="Web/CSS/color-scheme">color-schemes</Mdn_Link>
 			</li>
-			<li>includes a CSS reset that styles HTML tags directly with the variables</li>
 			<li>
 				is agnostic to JS frameworks, for example usage see <a
 					href="https://www.fuz.dev/library/Themed"><code>Themed</code></a
@@ -48,29 +51,22 @@
 				<Module_Link path="style.css"><code>@ryanatkn/moss/style.css</code></Module_Link> - the main
 				stylesheet and CSS reset
 			</li>
-			<li>
-				<Module_Link path="moss.css"><code>$routes/moss.css</code></Module_Link> - local to your project
-				and generated by <code>gro_plugin_moss</code>, includes only the utility classes your code
-				uses
-			</li>
 			<li>
 				<Module_Link path="theme.css"><code>@ryanatkn/moss/theme.css</code></Module_Link> - or bring
 				your own
 			</li>
 			<li>
-				optimizing the stylesheet is out of Moss's scope, but it's just CSS so it works with
-				existing tools
-				<ul>
-					<li>
-						I'm planning to include a Vite plugin to remove unused styles in my Svelte UI library <a
-							href="https://www.fuz.dev/">Fuz</a
-						>
-					</li>
-					<li>
-						optimizing the stylesheet will become increasingly important as the variables and
-						utility classes fill out
-					</li>
-				</ul>
+				<Module_Link path="moss.css"><code>$routes/moss.css</code></Module_Link> - a reference implementation
+				using Moss' helpers that includes only the utility classes your code uses, generated by
+				<a href="https://github.com/ryanatkn/gro">Gro</a>'s
+				<a href="https://github.com/ryanatkn/gro/blob/main/src/lib/gro_plugin_moss.ts"
+					><code>gro_plugin_moss</code></a
+				>
+				(you may want to implement this in your own build system if you don't use Gro)
+			</li>
+			<li>
+				There are no tools yet for optimizing away unused variables, so <code>style.css</code> and
+				<code>theme.css</code> have some bloat.
 			</li>
 		</ul>
 		<p>