Stop minifying CSS; load styles.css directly
The app reads its stylesheet from a bundled local folder, so there is no
transfer for minification to shrink. It cost a node dependency in the build
(npx --yes clean-css-cli, unpinned and fetched over the network), and running
as beforeDevCommand meant development builds loaded a 153KB single line, which
is the wrong trade while makeover adoption is still moving rules around.
The three makeover-generated stylesheets beside it were already served
unminified and nobody noticed, which is the measurement.
Deletes both copies of the script, drops the tauri.conf build hooks, and
removes the two now-dead styles.min.css filters from the frontend lint.
11 files changed,
+15 insertions,
-48 deletions
| 36 |
36 |
|
# bento target; the tree is re-initialized if/when android work resumes.
|
| 37 |
37 |
|
src-tauri/gen/android/
|
| 38 |
38 |
|
|
| 39 |
|
- |
# Minified CSS — regenerated from styles.css by beforeBuildCommand (build-css.js).
|
| 40 |
|
- |
# Matches balanced_breakfast; never commit the build output.
|
| 41 |
|
- |
src-tauri/frontend/css/styles.min.css
|
| 42 |
|
- |
|
| 43 |
39 |
|
# Claude Code instructions (project-local; not for the public repo)
|
| 44 |
40 |
|
CLAUDE.md
|
| 45 |
41 |
|
|
| 18 |
18 |
|
sync_service.rs # SyncKit change tracking and push/pull
|
| 19 |
19 |
|
frontend/
|
| 20 |
20 |
|
js/ # JavaScript modules (IIFE pattern)
|
| 21 |
|
- |
css/ # Styles (edit styles.css, never styles.min.css)
|
| 22 |
|
- |
build-css.js # CSS minification script (run by tauri.conf beforeBuildCommand)
|
|
21 |
+ |
css/ # Styles. styles.css is hand-written; the rest are generated by build.rs
|
| 23 |
22 |
|
tauri.conf.json # Tauri configuration
|
| 24 |
23 |
|
```
|
| 25 |
24 |
|
|
| 230 |
229 |
|
|
| 231 |
230 |
|
## CSS Workflow
|
| 232 |
231 |
|
|
| 233 |
|
- |
- **Edit:** `src-tauri/frontend/css/styles.css`
|
| 234 |
|
- |
- **Build:** Run `node src-tauri/frontend/build-css.js` to generate `styles.min.css` (Tauri runs this automatically via `beforeBuildCommand`)
|
| 235 |
|
- |
- **Never** edit `styles.min.css` directly; it's auto-generated via clean-css-cli
|
| 236 |
|
- |
- The HTML loads `styles.min.css`
|
|
232 |
+ |
- **Edit:** `src-tauri/frontend/css/styles.css`, which is what the HTML loads. There is no
|
|
233 |
+ |
build step: edit it and reload.
|
|
234 |
+ |
- `geometry.css`, `layout.css` and `tables.css` are generated by `src-tauri/build.rs` from
|
|
235 |
+ |
the makeover crates. Edit the descriptions in `build.rs`, not the output.
|
|
236 |
+ |
- Nothing is minified. The app reads its CSS from a bundled local folder, so there is no
|
|
237 |
+ |
transfer to shrink, and minified CSS during development means the webview inspector
|
|
238 |
+ |
points at one enormous line. See the wiki note `quasi-overview` for the measurement.
|
| 237 |
239 |
|
|
| 238 |
240 |
|
## Width and capability
|
| 239 |
241 |
|
|
| 151 |
151 |
|
- CSS variables from the design system
|
| 152 |
152 |
|
- Neobrute style (see `docs/styleguide.md`)
|
| 153 |
153 |
|
- No inline styles except for dynamic values
|
| 154 |
|
- |
- Only edit `styles.css`, never `styles.min.css`
|
|
154 |
+ |
- `styles.css` is hand-written and loaded directly; the other stylesheets are generated by `build.rs`
|
| 155 |
155 |
|
|
| 156 |
156 |
|
## Testing
|
| 157 |
157 |
|
|
| 223 |
223 |
|
|
| 224 |
224 |
|
## CSS
|
| 225 |
225 |
|
|
| 226 |
|
- |
Single stylesheet at `frontend/css/styles.css`. Uses CSS variables from the theme system. `styles.min.css` is auto-generated via `build-css.sh` (clean-css-cli). Never edit it directly.
|
|
226 |
+ |
Hand-written stylesheet at `frontend/css/styles.css`, loaded as-is with no build step. Uses CSS variables from the theme system. Alongside it, `geometry.css`, `layout.css` and `tables.css` are generated by `src-tauri/build.rs` from the makeover crates; edit the descriptions there, not the output.
|
| 227 |
227 |
|
|
| 228 |
228 |
|
Follow the Neobrute design style (see `docs/styleguide.md`). No inline styles except for dynamic values.
|
| 229 |
229 |
|
|
| 44 |
44 |
|
| `cargo build` fails on macOS | Ensure Xcode CLT installed: `xcode-select --install` |
|
| 45 |
45 |
|
| Tauri build fails | Check `src-tauri/tauri.conf.json`, ensure frontend paths exist |
|
| 46 |
46 |
|
| Missing shared deps | Ensure `MNW/shared/` exists at correct relative path from workspace |
|
| 47 |
|
- |
| CSS not updating | Edit `styles.css` (never `styles.min.css`), run `build-css.sh` |
|
|
47 |
+ |
| CSS not updating | Edit `styles.css` and reload; there is no CSS build step. If a `--gap-*` or layout class is stale, re-run `cargo build` so `build.rs` regenerates `geometry.css`/`layout.css`/`tables.css` |
|
| 48 |
48 |
|
|
| 49 |
49 |
|
## Theme Loading Issues
|
| 50 |
50 |
|
|
| 37 |
37 |
|
report "no-csstext" "style.cssText injection. Move styles into a CSS class." "$hits"
|
| 38 |
38 |
|
|
| 39 |
39 |
|
# 3. No var(--token, #fallback). Fallback hex defeats theme switching.
|
| 40 |
|
- |
hits=$(grep -rnE 'var\(--[a-z-]+,\s*#' "$FRONTEND" --include='*.js' --include='*.html' --include='styles.css' 2>/dev/null | grep -v styles.min.css || true)
|
|
40 |
+ |
hits=$(grep -rnE 'var\(--[a-z-]+,\s*#' "$FRONTEND" --include='*.js' --include='*.html' --include='styles.css' 2>/dev/null || true)
|
| 41 |
41 |
|
report "no-var-fallback-hex" "var(--token, #fallback). Drop the fallback; it bypasses themes." "$hits"
|
| 42 |
42 |
|
|
| 43 |
43 |
|
# 4. No window.confirm / bare confirm(). Route through GoingsOn.ui.showConfirmDialog.
|
| 51 |
51 |
|
report "no-styled-attrs" "Inline style= with color/background/border/shadow/font/padding. Use a class." "$hits"
|
| 52 |
52 |
|
|
| 53 |
53 |
|
# 6. Deprecated empty-state classes have been removed.
|
| 54 |
|
- |
hits=$(grep -rnE 'empty-dashboard-list|kanban-empty|virtual-scroller-empty' "$FRONTEND" --include='*.js' --include='*.html' --include='styles.css' 2>/dev/null | grep -v styles.min.css || true)
|
|
54 |
+ |
hits=$(grep -rnE 'empty-dashboard-list|kanban-empty|virtual-scroller-empty' "$FRONTEND" --include='*.js' --include='*.html' --include='styles.css' 2>/dev/null || true)
|
| 55 |
55 |
|
report "no-deprecated-empty-states" "Deprecated class. Use .empty-state with --compact / --dashboard / --error." "$hits"
|
| 56 |
56 |
|
|
| 57 |
57 |
|
# 7. No native browser dialogs. Charter rule from Phase 7 roll-up.
|
| 4 |
4 |
|
"version": "0.5.0",
|
| 5 |
5 |
|
"identifier": "com.goingson.app",
|
| 6 |
6 |
|
"build": {
|
| 7 |
|
- |
"beforeBuildCommand": "node src-tauri/frontend/build-css.js",
|
| 8 |
|
- |
"beforeDevCommand": "node src-tauri/frontend/build-css.js",
|
| 9 |
7 |
|
"frontendDist": "../src-tauri/frontend"
|
| 10 |
8 |
|
},
|
| 11 |
9 |
|
"app": {
|
| 5 |
5 |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
| 6 |
6 |
|
<title>Compose Email</title>
|
| 7 |
7 |
|
<link rel="stylesheet" href="css/geometry.css">
|
| 8 |
|
- |
<link rel="stylesheet" href="css/styles.min.css">
|
|
8 |
+ |
<link rel="stylesheet" href="css/styles.css">
|
| 9 |
9 |
|
</head>
|
| 10 |
10 |
|
<body class="compose-window">
|
| 11 |
11 |
|
<div class="compose-toolbar">
|
| 54 |
54 |
|
<link rel="stylesheet" href="css/geometry.css">
|
| 55 |
55 |
|
<link rel="stylesheet" href="css/layout.css">
|
| 56 |
56 |
|
<link rel="stylesheet" href="css/tables.css">
|
| 57 |
|
- |
<link rel="stylesheet" href="css/styles.min.css">
|
|
57 |
+ |
<link rel="stylesheet" href="css/styles.css">
|
| 58 |
58 |
|
</head>
|
| 59 |
59 |
|
<body>
|
| 60 |
60 |
|
<!-- Biometric app lock. First in the body so it paints before the header,
|
| 1 |
|
- |
const { execSync } = require("child_process");
|
| 2 |
|
- |
const fs = require("fs");
|
| 3 |
|
- |
const path = require("path");
|
| 4 |
|
- |
|
| 5 |
|
- |
const cssDir = path.join(__dirname, "css");
|
| 6 |
|
- |
const src = path.join(cssDir, "styles.css");
|
| 7 |
|
- |
const dest = path.join(cssDir, "styles.min.css");
|
| 8 |
|
- |
|
| 9 |
|
- |
if (!fs.existsSync(dest) || fs.statSync(src).mtimeMs > fs.statSync(dest).mtimeMs) {
|
| 10 |
|
- |
console.log("Minifying CSS...");
|
| 11 |
|
- |
execSync(`npx --yes clean-css-cli "${src}" -o "${dest}"`, { stdio: "inherit" });
|
| 12 |
|
- |
const srcSize = fs.statSync(src).size;
|
| 13 |
|
- |
const destSize = fs.statSync(dest).size;
|
| 14 |
|
- |
console.log(`CSS minified: ${srcSize} -> ${destSize} bytes`);
|
| 15 |
|
- |
} else {
|
| 16 |
|
- |
console.log("CSS already up to date");
|
| 17 |
|
- |
}
|
| 1 |
|
- |
#!/bin/bash
|
| 2 |
|
- |
# Minify CSS for production
|
| 3 |
|
- |
cd "$(dirname "$0")/css"
|
| 4 |
|
- |
|
| 5 |
|
- |
# Check if styles.css is newer than styles.min.css (or min doesn't exist)
|
| 6 |
|
- |
if [ ! -f styles.min.css ] || [ styles.css -nt styles.min.css ]; then
|
| 7 |
|
- |
echo "Minifying CSS..."
|
| 8 |
|
- |
npx --yes clean-css-cli styles.css -o styles.min.css
|
| 9 |
|
- |
echo "CSS minified: $(wc -c < styles.css) -> $(wc -c < styles.min.css) bytes"
|
| 10 |
|
- |
else
|
| 11 |
|
- |
echo "CSS already up to date"
|
| 12 |
|
- |
fi
|