Tailwind fix#353
Conversation
Signed-off-by: Maximilian Inckmann <maximilian.inckmann@kit.edu>
Signed-off-by: Maximilian Inckmann <maximilian.inckmann@kit.edu>
Signed-off-by: Maximilian Inckmann <maximilian.inckmann@kit.edu>
Signed-off-by: Maximilian Inckmann <maximilian.inckmann@kit.edu>
There was a problem hiding this comment.
Pull request overview
Updates the Stencil library’s Tailwind integration and related docs/types, aiming to improve styling/dark-mode compatibility.
Changes:
- Switches Tailwind setup to a global stylesheet (
globalStyle) and adjusts PostCSS configuration. - Updates
darkModedefault from'system'to'light'across component docs/web-types/types. - Adds a
wwwdemoindex.htmland tweaks pagination Tailwind classes; refreshes generated React/typing outputs.
Reviewed changes
Copilot reviewed 11 out of 13 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/stencil-library/web-types.json | Updates documented dark-mode default value. |
| packages/stencil-library/tailwind.config.ts | Removes Tailwind config file. |
| packages/stencil-library/stencil.config.ts | Enables globalStyle, inlines PostCSS plugin config, disables service worker for www. |
| packages/stencil-library/src/tailwind.css | Reworks Tailwind CSS entry/imports and dark variant definition. |
| packages/stencil-library/src/index.html | Adds a demo page for the www output target. |
| packages/stencil-library/src/components/pid-pagination/pid-pagination.tsx | Adjusts Tailwind utility classes/padding/radius. |
| packages/stencil-library/src/components/pid-component/readme.md | Updates docs table for new darkMode default. |
| packages/stencil-library/src/components/pid-component/pid-component.tsx | Changes Shadow DOM setting, updates darkMode default, refactors click propagation handling. |
| packages/stencil-library/src/components.d.ts | Regenerates typings reflecting updated defaults (plus formatting changes). |
| packages/stencil-library/package.json | Moves Tailwind PostCSS tooling, adds an imports alias, version bump. |
| packages/react-library/lib/components/stencil-generated/components.ts | Regenerated React bindings (formatting/import changes). |
| packages/react-library/lib/components/stencil-generated/components.server.ts | Regenerated SSR bindings (formatting/import changes). |
| package-lock.json | Lockfile updates for dependency/metadata changes and version bump. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| e.preventDefault() | ||
| } |
There was a problem hiding this comment.
blockEventPropagation is missing semicolons after e.preventDefault() and after the arrow-function property. This file otherwise uses semicolons consistently, and leaving them out can cause lint/prettier churn (especially for class properties). Add the missing semicolons to match the surrounding style.
| e.preventDefault() | |
| } | |
| e.preventDefault(); | |
| }; |
| onClick={() => this.handlePageChange(this.currentPage + 1)} | ||
| disabled={this.currentPage >= this.totalPages - 1} | ||
| class={`relative inline-flex resize-none items-center rounded-r-md px-2 py-1.5 ${ | ||
| class={`relative inline-flex resize-none items-center rounded-r-md px-2 py-0 rounded ${ |
There was a problem hiding this comment.
The Next button class string includes both rounded-r-md and a trailing rounded. Because Tailwind utilities are order-dependent, the later rounded will override the right-corner radius and effectively negate rounded-r-md. Remove the extra rounded (or ensure the intended radius utility comes last).
| class={`relative inline-flex resize-none items-center rounded-r-md px-2 py-0 rounded ${ | |
| class={`relative inline-flex resize-none items-center rounded-r-md px-2 py-0 ${ |
| @import "./../../../node_modules/tailwindcss/index.css"; | ||
| @layer theme, base, components, utilities; | ||
| @import "./../../../node_modules/tailwindcss/theme.css" layer(theme); | ||
| @import "./../../../node_modules/tailwindcss/preflight.css" layer(base); | ||
| @import "./../../../node_modules/tailwindcss/utilities.css" layer(utilities); |
There was a problem hiding this comment.
tailwind.css now uses relative @import paths into ../../../node_modules/.... With the current PostCSS pipeline (tailwindcss() + cssnano only), there’s nothing that will inline/resolve these imports, so the built CSS can end up shipping @import statements that point to non-existent runtime URLs. Prefer Tailwind’s supported entrypoint (@import "tailwindcss"; / Tailwind directives) or add an import-resolving step (e.g., postcss-import) so imports are bundled into the emitted global stylesheet.
| "imports": { | ||
| "#tailwind.css": "./src/tailwind.css" | ||
| }, |
There was a problem hiding this comment.
The imports map points #tailwind.css to ./src/tailwind.css, but this package only publishes dist/ and hydrate/ ("files" array). Consumers installing from npm won’t have src/tailwind.css, so resolving #tailwind.css will fail. Either remove this imports entry, publish the CSS file, or point it at an emitted file under dist/ that’s actually included in the published package.
| "typescript": "^5.9.3", | ||
| "typescript-eslint": "^8.54.0", | ||
| "@tailwindcss/postcss": "^4.1.18", | ||
| "tailwindcss": "^4.1.18", |
There was a problem hiding this comment.
tailwindcss is now declared in devDependencies but still exists in dependencies earlier in this file. That duplication can cause version skew and unnecessary installs for consumers. Keep Tailwind in a single section (typically devDependencies only, since it’s build-time tooling here).
| "tailwindcss": "^4.1.18", |
| tag: 'pid-component', | ||
| styleUrl: 'pid-component.css', | ||
| shadow: false, | ||
| shadow: true |
There was a problem hiding this comment.
pid-component is the only component switched to shadow: true, while the rest of the library components remain shadow: false and rely on Tailwind utility class styling being applied globally. With Shadow DOM enabled, global Tailwind CSS (from globalStyle) won’t style elements inside the component’s shadow root, and existing selectors in pid-component.css (e.g., pid-component { ... }, pid-component pid-collapsible...) will no longer match the host. Either keep shadow: false, or migrate styling to Shadow DOM (update CSS selectors to :host / :host(...) and ensure Tailwind CSS is injected into the shadow root).
| shadow: true | |
| shadow: false |
No description provided.