@trifle/trifle-hub 1.0.163 → 1.1.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.
- package/README.md +83 -0
- package/dist/index.es.js +1 -1
- package/dist/trifle-hub.css +2076 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -69,6 +69,89 @@ Add the TrifleHub component to your app layout:
|
|
|
69
69
|
</script>
|
|
70
70
|
```
|
|
71
71
|
|
|
72
|
+
## Styles
|
|
73
|
+
|
|
74
|
+
CSS is automatically injected when the plugin is registered — no separate stylesheet import is required.
|
|
75
|
+
|
|
76
|
+
Since v1.1.0, all compiled styles ship inside `@layer trifle-hub`. This keeps trifle-hub's styles from polluting the global cascade and lets you control where they sit relative to your own CSS.
|
|
77
|
+
|
|
78
|
+
trifle-hub ships its own element reset (preflight) inside `@layer trifle-hub.base`. If your app has no preflight of its own, trifle-hub provides the baseline for buttons, inputs, etc.
|
|
79
|
+
|
|
80
|
+
### Layer order
|
|
81
|
+
|
|
82
|
+
For trifle-hub's utility classes (e.g. `_bg-metallic-linear`, `_shadow-panel`) to correctly override element resets on tags like `<button>`, `trifle-hub` must be declared **after** `base` in the layer order. This ensures trifle-hub utility classes beat preflight resets, while your own app utilities still win over trifle-hub when they conflict.
|
|
83
|
+
|
|
84
|
+
#### Why `index.html` — not your CSS file
|
|
85
|
+
|
|
86
|
+
trifle-hub injects its CSS via JavaScript at runtime. Because CSS layer order is locked by the **first** appearance of each layer name, any `@layer` declaration in your app's CSS file may arrive too late if trifle-hub's JS runs first (which depends on import order in `main.js`).
|
|
87
|
+
|
|
88
|
+
The safest approach for any Vite app is to declare the layer order as a `<style>` tag in `index.html`. It is processed by the browser before any JavaScript runs, so trifle-hub's injection always lands in the correct position.
|
|
89
|
+
|
|
90
|
+
```html
|
|
91
|
+
<!-- index.html <head> — before any <script> tags -->
|
|
92
|
+
<style>@layer theme, base, trifle-hub, components, utilities;</style>
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
Include `theme` if you use Tailwind v4 (it has an extra `@layer properties, theme, ...` that v3 does not).
|
|
96
|
+
|
|
97
|
+
#### Tailwind v4
|
|
98
|
+
|
|
99
|
+
In `index.html`:
|
|
100
|
+
|
|
101
|
+
```html
|
|
102
|
+
<style>@layer properties, theme, base, trifle-hub, components, utilities;</style>
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
Your `style.css` needs no extra layer declaration:
|
|
106
|
+
|
|
107
|
+
```css
|
|
108
|
+
@import "tailwindcss";
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
#### Tailwind v3 — with your own preflight
|
|
112
|
+
|
|
113
|
+
In `index.html`:
|
|
114
|
+
|
|
115
|
+
```html
|
|
116
|
+
<style>@layer base, trifle-hub, components, utilities;</style>
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
Tailwind v3 outputs **unlayered** CSS by default, which unconditionally beats any `@layer` rule. To opt in to the layer system, wrap each directive in an explicit `@layer` block in your CSS:
|
|
120
|
+
|
|
121
|
+
```css
|
|
122
|
+
@layer base {
|
|
123
|
+
@tailwind base;
|
|
124
|
+
}
|
|
125
|
+
@layer components {
|
|
126
|
+
@tailwind components;
|
|
127
|
+
}
|
|
128
|
+
@layer utilities {
|
|
129
|
+
@tailwind utilities;
|
|
130
|
+
}
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
Any styles written outside a `@layer` block remain unlayered and beat everything above.
|
|
134
|
+
|
|
135
|
+
#### Tailwind v3 — without your own preflight
|
|
136
|
+
|
|
137
|
+
In `index.html`:
|
|
138
|
+
|
|
139
|
+
```html
|
|
140
|
+
<style>@layer trifle-hub;</style>
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
If your app has `@tailwind base` commented out (relying on trifle-hub's built-in reset), your unlayered `@tailwind components/utilities` output naturally beats `@layer trifle-hub` without needing any wrapping:
|
|
144
|
+
|
|
145
|
+
```css
|
|
146
|
+
/* @tailwind base; */ ← leave commented out
|
|
147
|
+
@tailwind components;
|
|
148
|
+
@tailwind utilities;
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
### Standalone CSS file
|
|
152
|
+
|
|
153
|
+
The compiled stylesheet is available at `dist/trifle-hub.css` if you prefer to manage it explicitly (e.g., for SSR, critical CSS extraction, or strict layer ordering). The `style` field in the package manifest points to this file. If importing it directly, note that the JS bundle also auto-injects the CSS — disable one or the other to avoid loading styles twice.
|
|
154
|
+
|
|
72
155
|
## Available Provide/Inject Resources
|
|
73
156
|
|
|
74
157
|
The TrifleHub plugin provides several resources via Vue's provide/inject system:
|