Skip to content

Commit 86b6c4f

Browse files
elibosleyelibosley
authored
fix: inject Tailwind CSS into client entry point (#1537)
Added a Vite plugin to automatically inject the Tailwind CSS import into the `unraid-components.client.js` entry file, enhancing the integration of Tailwind CSS within the application. This change improves the setup for styling components consistently across the project. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added automated validation to ensure Tailwind CSS styles are correctly included in the custom elements build output. * **Chores** * Updated the build process to include a CSS validation step after manifest generation. * Enhanced development build configuration to enable CSS source maps and optimize Tailwind CSS injection into web components. * Extended CSS theme with new responsive breakpoint variables. * Improved CSS class specificity in user profile, server state, and update modal components for consistent styling. * Removed redundant style blocks and global CSS imports from multiple components to streamline styling and reduce duplication. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
1 parent 45bd736 commit 86b6c4f

36 files changed

+242
-580
lines changed

‎.claude/settings.local.json‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@
1616
"mcp__ide__getDiagnostics",
1717
"Bash(pnpm --filter \"*connect*\" test connect-status-writer.service.spec)",
1818
"Bash(pnpm storybook:*)",
19-
"Bash(rm:*)",
2019
"Bash(pnpm add:*)",
2120
"Bash(pnpm install:*)",
2221
"Bash(pkill:*)",
@@ -33,7 +32,13 @@
3332
"Bash(pnpm --filter @unraid/ui build)",
3433
"Bash(pnpm --filter @unraid/web build)",
3534
"Bash(python3:*)",
36-
"Bash(pnpm tailwind:build:*)"
35+
"Bash(pnpm tailwind:build:*)",
36+
"WebFetch(domain:erangrin.github.io)",
37+
"Bash(pnpm clean:*)",
38+
"Bash(pnpm validate:css:*)",
39+
"Bash(node:*)",
40+
"Bash(rm:*)",
41+
"Bash(pnpm run:*)"
3742
]
3843
},
3944
"enableAllProjectMcpServers": false

‎plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/web-components-extractor.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ public function getManifestContents(string $manifestPath): array
3939
return $contents ? json_decode($contents, true) : [];
4040
}
4141

42+
4243
private function getRichComponentsFile(): string
4344
{
4445
$manifestFiles = $this->findManifestFiles('manifest.json');

‎web/assets/main.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,12 @@
1212
@custom-variant dark (&:where(.dark, .dark *));
1313

1414
@theme {
15+
/* Breakpoints */
16+
--breakpoint-xs: 30rem;
17+
--breakpoint-2xl: 100rem;
18+
--breakpoint-3xl: 120rem;
19+
20+
/* Colors */
1521
--color-primary-50: #fff7ed;
1622
--color-primary-100: #ffedd5;
1723
--color-primary-200: #fed7aa;

‎web/components/Activation/WelcomeModal.ce.vue‎

Lines changed: 0 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -101,57 +101,3 @@ watchEffect(() => {
101101
</Dialog>
102102
</div>
103103
</template>
104-
105-
<style>
106-
/* Import unraid-ui globals first */
107-
@import '@unraid/ui/styles';
108-
@import '~/assets/main.css';
109-
110-
.unraid_mark_2,
111-
.unraid_mark_4 {
112-
animation: mark_2 1.5s ease infinite;
113-
}
114-
.unraid_mark_3 {
115-
animation: mark_3 1.5s ease infinite;
116-
}
117-
.unraid_mark_6,
118-
.unraid_mark_8 {
119-
animation: mark_6 1.5s ease infinite;
120-
}
121-
.unraid_mark_7 {
122-
animation: mark_7 1.5s ease infinite;
123-
}
124-
125-
@keyframes mark_2 {
126-
50% {
127-
transform: translateY(-40px);
128-
}
129-
100% {
130-
transform: translateY(0);
131-
}
132-
}
133-
@keyframes mark_3 {
134-
50% {
135-
transform: translateY(-62px);
136-
}
137-
100% {
138-
transform: translateY(0);
139-
}
140-
}
141-
@keyframes mark_6 {
142-
50% {
143-
transform: translateY(40px);
144-
}
145-
100% {
146-
transform: translateY(0);
147-
}
148-
}
149-
@keyframes mark_7 {
150-
50% {
151-
transform: translateY(62px);
152-
}
153-
100% {
154-
transform: translateY(0);
155-
}
156-
}
157-
</style>

‎web/components/ApiKeyPage.ce.vue‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,3 @@ import ApiKeyManager from '~/components/ApiKey/ApiKeyManager.vue';
66
<ApiKeyManager />
77
</div>
88
</template>
9-
<style>
10-
/* Import unraid-ui globals first */
11-
@import '@unraid/ui/styles';
12-
@import '~/assets/main.css';
13-
</style>

‎web/components/Auth.ce.vue‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,3 @@ const { authAction, stateData } = storeToRefs(serverStore);
3030
</span>
3131
</div>
3232
</template>
33-
34-
<style>
35-
/* Import unraid-ui globals first */
36-
@import '@unraid/ui/styles';
37-
@import '~/assets/main.css';
38-
</style>

‎web/components/CallbackHandler.ce.vue‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,3 @@ onBeforeMount(() => {
1414
<slot />
1515
</div>
1616
</template>
17-
18-
<style >
19-
/* Import unraid-ui globals first */
20-
@import '@unraid/ui/styles';
21-
@import '~/assets/main.css';
22-
</style>

‎web/components/ColorSwitcher.ce.vue‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -74,9 +74,3 @@ const items = [
7474
<Switch id="banner" v-model:checked="form.banner" />
7575
</div>
7676
</template>
77-
78-
<style >
79-
/* Import unraid-ui globals first */
80-
@import '@unraid/ui/styles';
81-
@import '~/assets/main.css';
82-
</style>

‎web/components/ConnectSettings/ConnectSettings.ce.vue‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -148,8 +148,3 @@ const onChange = ({ data }: { data: Record<string, unknown> }) => {
148148
</div>
149149
</div>
150150
</template>
151-
<style >
152-
/* Import unraid-ui globals first */
153-
@import '@unraid/ui/styles';
154-
@import '../../assets/main.css';
155-
</style>

‎web/components/DevSettings.vue‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,3 @@ import { CogIcon } from '@heroicons/vue/24/solid';
2323

2424

2525
</template>
26-
27-
<style >
28-
/* Import unraid-ui globals first */
29-
@import '@unraid/ui/styles';
30-
@import '~/assets/main.css';
31-
</style>

0 commit comments

Comments
 (0)