@unabridged/midwest 0.26.0 → 0.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/README.md +1 -1
  2. package/app/assets/javascript/midwest/async_runtime.ts +90 -0
  3. package/app/assets/javascript/midwest.js +16 -16
  4. package/app/assets/javascript/midwest.js.map +1 -1
  5. package/app/assets/stylesheets/midwest/tailwind.css +39 -69
  6. package/app/assets/stylesheets/midwest/tailwind.theme.css +68 -0
  7. package/app/assets/stylesheets/midwest.css +1 -1
  8. package/app/assets/stylesheets/midwest.tailwind.css +15 -1
  9. package/dist/css/midwest.css +1 -1
  10. package/dist/javascript/collection/app/components/midwest/assets_component/assets_component_controller.js +16 -16
  11. package/dist/javascript/collection/app/components/midwest/assets_component/assets_component_controller.js.map +1 -1
  12. package/dist/javascript/midwest.js +16 -16
  13. package/dist/javascript/midwest.js.map +1 -1
  14. package/package.json +3 -2
package/app/assets/stylesheets/midwest/tailwind.css CHANGED
@@ -11,7 +11,7 @@
11
11
 
12
12
  /* Tailwind's own layers, imported granularly so the `midwest` cascade layer can
13
13
  be slotted between `components` and `utilities` (see midwest.tailwind.css). */
14
- @import "tailwindcss/theme.css" layer(midwest.tailwindcss.theme);
14
+ @import "tailwindcss/theme.css" layer(midwest.tailwindcss.theme) source(none);
15
15
 
16
16
  /* Preflight goes into the plain `base` layer — the SAME one the `@plugin`
17
17
  directives (forms/typography) emit their addBase into. This keeps the
@@ -22,81 +22,51 @@
22
22
  component layers (a nested layer is anchored as one block), which is what
23
23
  broke checkbox :checked fills / input border-radius. */
24
24
  @import "tailwindcss/preflight.css" layer(base);
25
- @import "tailwindcss/utilities.css" layer(midwest.tailwindcss.utilities);
25
+ @import "tailwindcss/utilities.css" layer(midwest.tailwindcss.utilities) source(none);
26
26
 
27
27
  /* First-party plugins are embedded in the standalone binary — no node_modules. */
28
28
  @plugin "@tailwindcss/forms";
29
29
  @plugin "@tailwindcss/typography";
30
30
 
31
- /* Class-based dark mode (was `darkMode: "class"`), matching `.dark` on <html>. */
32
- @custom-variant dark (&:where(.dark, .dark *));
31
+ /* Dark-mode variant + the `@theme inline` palette, shared with the async
32
+ per-component build (see ASYNC_ASSETS.md §5.1). */
33
+ @import "./tailwind.theme.css";
34
+
35
+ /* Content sources (was the JS `content` array).
36
+
37
+ These are LOAD-BEARING as of `source(none)` above. Until then Tailwind's
38
+ automatic content detection swept the whole repo and was a superset of
39
+ everything declared here, which is why five of these globs could point at
40
+ directories that do not exist for a year without anyone noticing. Detection
41
+ is now off, so this list is exactly what gets scanned.
42
+
43
+ The demo is deliberately absent: it has its own stylesheet
44
+ (demo/app/assets/stylesheets/demo.tailwind.css). Scanning it here put ~26 KB
45
+ of demo-only utilities into the bundle every consuming app downloads.
46
+
47
+ Paths are relative to THIS file, which sits one level below the entry that
48
+ imports it: `../../` is app/assets/, `../../../` is app/, `../../../../` is
49
+ the repo root. Most of these were written from the entry's perspective and
50
+ had been a level short since the v4 migration, resolving to directories that
51
+ do not exist (app/assets/components, app/assets/helpers…) and matching
52
+ nothing. Nothing broke, because Tailwind's automatic content detection scans
53
+ the repo anyway and is a superset of everything declared here — so the globs
54
+ were documentation of an intent the build ignored.
55
+
56
+ Correcting them changes no output today. It matters because it makes the
57
+ declaration true, and because turning automatic detection off later depends
58
+ on it. `scripts/check_css_sources.rb` fails the build on a glob that matches
59
+ nothing, since that is otherwise entirely silent. */
60
+ @source "../../../components/**/*.{rb,erb,haml,ts}";
61
+ @source "../../../helpers/**/*.rb";
62
+ @source "../../../views/**/*.{erb,haml}";
63
+
64
+ /* JS lives under app/assets/javascript, not app/javascript — two levels, not
65
+ three. `.ts` is the source; the `.js` beside it is this build's own output. */
66
+ @source "../../javascript/**/*.{js,ts}";
67
+ @source "../../../**/*.svg";
33
68
 
34
- /* Content sources (was the JS `content` array). Paths are relative to this file. */
35
- @source "../../components/**/*.{rb,erb,haml}";
36
- @source "../../helpers/**/*.rb";
37
- @source "../../views/**/*.{erb,haml}";
38
- @source "../../javascript/**/*.js";
39
- @source "../../**/*.svg";
40
- @source "../../../demo/app/previews/**/*.{rb,erb,haml}";
41
- @source "../../../demo/app/views/**/*.haml";
42
69
 
43
70
  /* Colour utilities generated in ERB loops (e.g. `13.times`) are invisible to the
44
71
  content scanner. This replaces the JS `safelist` regex. */
45
72
  @source inline("{bg,text,border,ring,outline}-{theme,complement,gray}-{0,1,2,3,4,5,6,7,8,9,10,11,12}");
46
-
47
- /* Restrict the palette to Midwest's colours (was `theme.colors`, which replaced
48
- the default palette). `--color-*: initial` clears Tailwind's defaults first.
49
- `inline` is ESSENTIAL: it inlines each colour's value into the generated
50
- utilities (e.g. `.bg-theme-6 { background: rgb(var(--theme-6-channels)) }`)
51
- so the channel var resolves at the *consuming element*. Without it v4 would
52
- resolve the channels once at :root, breaking element/section-scoped theming
53
- like `<section class="theme-teal">` or a presence dot's `theme-green`. */
54
- @theme inline {
55
- /* stylelint-disable-next-line custom-property-pattern -- v4 namespace reset */
56
- --color-*: initial;
57
- --font-sans: "Inter var", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
58
- "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
59
- --color-transparent: transparent;
60
- --color-current: currentcolor;
61
- --color-black: #000;
62
- --color-white: #fff;
63
- --color-theme-0: rgb(var(--theme-0-channels));
64
- --color-theme-1: rgb(var(--theme-1-channels));
65
- --color-theme-2: rgb(var(--theme-2-channels));
66
- --color-theme-3: rgb(var(--theme-3-channels));
67
- --color-theme-4: rgb(var(--theme-4-channels));
68
- --color-theme-5: rgb(var(--theme-5-channels));
69
- --color-theme-6: rgb(var(--theme-6-channels));
70
- --color-theme-7: rgb(var(--theme-7-channels));
71
- --color-theme-8: rgb(var(--theme-8-channels));
72
- --color-theme-9: rgb(var(--theme-9-channels));
73
- --color-theme-10: rgb(var(--theme-10-channels));
74
- --color-theme-11: rgb(var(--theme-11-channels));
75
- --color-theme-12: rgb(var(--theme-12-channels));
76
- --color-complement-0: rgb(var(--complement-0-channels));
77
- --color-complement-1: rgb(var(--complement-1-channels));
78
- --color-complement-2: rgb(var(--complement-2-channels));
79
- --color-complement-3: rgb(var(--complement-3-channels));
80
- --color-complement-4: rgb(var(--complement-4-channels));
81
- --color-complement-5: rgb(var(--complement-5-channels));
82
- --color-complement-6: rgb(var(--complement-6-channels));
83
- --color-complement-7: rgb(var(--complement-7-channels));
84
- --color-complement-8: rgb(var(--complement-8-channels));
85
- --color-complement-9: rgb(var(--complement-9-channels));
86
- --color-complement-10: rgb(var(--complement-10-channels));
87
- --color-complement-11: rgb(var(--complement-11-channels));
88
- --color-complement-12: rgb(var(--complement-12-channels));
89
- --color-gray-0: rgb(var(--gray-0-channels));
90
- --color-gray-1: rgb(var(--gray-1-channels));
91
- --color-gray-2: rgb(var(--gray-2-channels));
92
- --color-gray-3: rgb(var(--gray-3-channels));
93
- --color-gray-4: rgb(var(--gray-4-channels));
94
- --color-gray-5: rgb(var(--gray-5-channels));
95
- --color-gray-6: rgb(var(--gray-6-channels));
96
- --color-gray-7: rgb(var(--gray-7-channels));
97
- --color-gray-8: rgb(var(--gray-8-channels));
98
- --color-gray-9: rgb(var(--gray-9-channels));
99
- --color-gray-10: rgb(var(--gray-10-channels));
100
- --color-gray-11: rgb(var(--gray-11-channels));
101
- --color-gray-12: rgb(var(--gray-12-channels));
102
- }
package/app/assets/stylesheets/midwest/tailwind.theme.css ADDED
@@ -0,0 +1,68 @@
1
+ /*
2
+ * Tailwind design-token declarations shared by BOTH build modes.
3
+ *
4
+ * Kept free of `@import`, `@plugin`, `@source`, and preflight so it can be
5
+ * pulled into an async per-component entry (which must run with `source(none)`
6
+ * and without the plugins' base output) as well as the bundled entry. See
7
+ * ASYNC_ASSETS.md §5.1.
8
+ */
9
+
10
+ /* Class-based dark mode (was `darkMode: "class"`), matching `.dark` on <html>. */
11
+ @custom-variant dark (&:where(.dark, .dark *));
12
+
13
+ /* Restrict the palette to Midwest's colours (was `theme.colors`, which replaced
14
+ the default palette). `--color-*: initial` clears Tailwind's defaults first.
15
+ `inline` is ESSENTIAL: it inlines each colour's value into the generated
16
+ utilities (e.g. `.bg-theme-6 { background: rgb(var(--theme-6-channels)) }`)
17
+ so the channel var resolves at the *consuming element*. Without it v4 would
18
+ resolve the channels once at :root, breaking element/section-scoped theming
19
+ like `<section class="theme-teal">` or a presence dot's `theme-green`. */
20
+ @theme inline {
21
+ /* stylelint-disable-next-line custom-property-pattern -- v4 namespace reset */
22
+ --color-*: initial;
23
+ --font-sans: "Inter var", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
24
+ "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
25
+ --color-transparent: transparent;
26
+ --color-current: currentcolor;
27
+ --color-black: #000;
28
+ --color-white: #fff;
29
+ --color-theme-0: rgb(var(--theme-0-channels));
30
+ --color-theme-1: rgb(var(--theme-1-channels));
31
+ --color-theme-2: rgb(var(--theme-2-channels));
32
+ --color-theme-3: rgb(var(--theme-3-channels));
33
+ --color-theme-4: rgb(var(--theme-4-channels));
34
+ --color-theme-5: rgb(var(--theme-5-channels));
35
+ --color-theme-6: rgb(var(--theme-6-channels));
36
+ --color-theme-7: rgb(var(--theme-7-channels));
37
+ --color-theme-8: rgb(var(--theme-8-channels));
38
+ --color-theme-9: rgb(var(--theme-9-channels));
39
+ --color-theme-10: rgb(var(--theme-10-channels));
40
+ --color-theme-11: rgb(var(--theme-11-channels));
41
+ --color-theme-12: rgb(var(--theme-12-channels));
42
+ --color-complement-0: rgb(var(--complement-0-channels));
43
+ --color-complement-1: rgb(var(--complement-1-channels));
44
+ --color-complement-2: rgb(var(--complement-2-channels));
45
+ --color-complement-3: rgb(var(--complement-3-channels));
46
+ --color-complement-4: rgb(var(--complement-4-channels));
47
+ --color-complement-5: rgb(var(--complement-5-channels));
48
+ --color-complement-6: rgb(var(--complement-6-channels));
49
+ --color-complement-7: rgb(var(--complement-7-channels));
50
+ --color-complement-8: rgb(var(--complement-8-channels));
51
+ --color-complement-9: rgb(var(--complement-9-channels));
52
+ --color-complement-10: rgb(var(--complement-10-channels));
53
+ --color-complement-11: rgb(var(--complement-11-channels));
54
+ --color-complement-12: rgb(var(--complement-12-channels));
55
+ --color-gray-0: rgb(var(--gray-0-channels));
56
+ --color-gray-1: rgb(var(--gray-1-channels));
57
+ --color-gray-2: rgb(var(--gray-2-channels));
58
+ --color-gray-3: rgb(var(--gray-3-channels));
59
+ --color-gray-4: rgb(var(--gray-4-channels));
60
+ --color-gray-5: rgb(var(--gray-5-channels));
61
+ --color-gray-6: rgb(var(--gray-6-channels));
62
+ --color-gray-7: rgb(var(--gray-7-channels));
63
+ --color-gray-8: rgb(var(--gray-8-channels));
64
+ --color-gray-9: rgb(var(--gray-9-channels));
65
+ --color-gray-10: rgb(var(--gray-10-channels));
66
+ --color-gray-11: rgb(var(--gray-11-channels));
67
+ --color-gray-12: rgb(var(--gray-12-channels));
68
+ }