Skip to content

[no ci] fix(2057): undefined tailwind variables in production, #2965

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
clemens-vi wants to merge 1 commit into
base: feat/issue-workflow-mcp
Choose a base branch
from
+66 −1
Draft

[no ci] fix(2057): undefined tailwind variables in production, #2965

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 53 additions & 1 deletion packages/docs/src/stories/styles/table-cell.test.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
storybookTemplate,
storybookUtilities
} from '../../../scripts/storybook/helper';
import { html } from 'lit-html';

const { argTypes, parameters } = storybookDefaults('sd-table-cell');
const { overrideArgs } = storybookHelpers('sd-table-cell');
Expand Down Expand Up @@ -48,4 +49,55 @@ export const Default = {
}
};

export const Combination = generateScreenshotStory([Default]);
/**
* This shows the gradient shadow overlay for sd-table-cell--shadow-* when active.
* Verifies that --tw-gradient-* variables are properly defined so the shadow gradient
* renders correctly in production environments without Tailwind loaded (fixes #2057).
*/
export const Shadow = {
name: 'Shadow',
render: () => {
return html`
<div class="flex flex-col gap-8">
<table class="sd-table">
<tbody>
<tr>
<td class="sd-table-cell sd-table-cell--shadow-right sd-table-cell--shadow-active relative">
shadow-right
</td>
<td class="sd-table-cell">Cell content</td>
</tr>
</tbody>
</table>
<table class="sd-table">
<tbody>
<tr>
<td class="sd-table-cell">Cell content</td>
<td class="sd-table-cell sd-table-cell--shadow-left sd-table-cell--shadow-active relative">
shadow-left
</td>
</tr>
</tbody>
</table>
<table class="sd-table">
<tbody>
<tr>
<td class="sd-table-cell sd-table-cell--shadow-bottom sd-table-cell--shadow-active relative">
shadow-bottom
</td>
</tr>
</tbody>
</table>
<table class="sd-table">
<tbody>
<tr>
<td class="sd-table-cell sd-table-cell--shadow-top sd-table-cell--shadow-active relative">shadow-top</td>
</tr>
</tbody>
</table>
</div>
`;
}
};

export const Combination = generateScreenshotStory([Default, Shadow]);
6 changes: 6 additions & 0 deletions packages/styles/src/modules/hidden-links.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,12 @@
}
@apply absolute top-6 left-6 panel-color-border border;
&--multiple {
/* Bug fix: shadow variables are undefined in production without Tailwind (#2057) */
--tw-shadow: 0 0 #0000;
--tw-inset-shadow: 0 0 #0000;
--tw-inset-ring-shadow: 0 0 #0000;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
@apply bg-white shadow flex flex-col px-2 py-4;
&:before {
@apply font-bold px-4 py-2;
Expand Down
7 changes: 7 additions & 0 deletions packages/styles/src/modules/table-cell.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,13 @@
}

.sd-table-cell {
/* Bug fix: gradient variables are undefined in production without Tailwind (#2057) */
--tw-gradient-from: #0000;
--tw-gradient-to: #0000;
--tw-gradient-from-position: 0%;
--tw-gradient-via-position: 50%;
--tw-gradient-to-position: 100%;

&--divider {
@apply border-r-[1px];
}
Expand Down
Loading