Skip to content

fix: scope tailwind --tw-* reset to #slack_blocks_to_jsx#71

Merged
themashcodee merged 2 commits into
mainfrom
fix/transform-reset-selector-scope
Jun 6, 2026
Merged

fix: scope tailwind --tw-* reset to #slack_blocks_to_jsx#71
themashcodee merged 2 commits into
mainfrom
fix/transform-reset-selector-scope

Conversation

@StephenTangCook

Copy link
Copy Markdown
Collaborator

Fixes #66.

Summary

  • Selectors for Tailwind's --tw-* custom-property reset were nested under .slack_blocks_to_jsx.styles_enabled, while the utility classes themselves are scoped to #slack_blocks_to_jsx (via tailwind.config.js's important: "#slack_blocks_to_jsx"). Because the reset and the utilities lived in different scopes, the variables could stay unset and the resulting transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) … declaration was invalid — browsers silently dropped it. Most visibly, select-dropdown chevrons (which rely on -translate-y-1/2) rendered near the top of the field instead of vertically centered.
  • Move the --tw-* reset out to the same #slack_blocks_to_jsx scope as the generated utilities so the variables are always initialized for any element a transform/filter/ring/etc. utility might land on. This is option (1) from the issue's "Suggested fix" section — the smaller, safer fix.

Before / after (compiled dist/style.css)

Before:

.slack_blocks_to_jsx.styles_enabled *,
.slack_blocks_to_jsx.styles_enabled ::backdrop,
.slack_blocks_to_jsx.styles_enabled :after,
.slack_blocks_to_jsx.styles_enabled :before { --tw-translate-x: 0; … }

After:

#slack_blocks_to_jsx,
#slack_blocks_to_jsx *,
#slack_blocks_to_jsx ::backdrop,
#slack_blocks_to_jsx :after,
#slack_blocks_to_jsx :before { --tw-translate-x: 0; … }

Test plan

  • pnpm run lint (tsc) — passes.
  • pnpm run build:css — passes; verified the compiled dist/style.css now scopes the --tw-* reset to #slack_blocks_to_jsx instead of .slack_blocks_to_jsx.styles_enabled.
  • Visual check in the playground: render any element that uses -translate-y-1/2 (e.g., static_select, multi_static_select, users_select, email_input, number_input, date_picker, time_picker, url_input) and confirm the chevron / left-icon is vertically centered.

🤖 Generated with Claude Code

StephenTangCook and others added 2 commits May 26, 2026 20:36
The reset that initializes Tailwind's transform/filter/ring/etc. custom
properties was nested under `.slack_blocks_to_jsx.styles_enabled`, while
the utility classes themselves are scoped to `#slack_blocks_to_jsx`
(via `tailwind.config.js#important`). The mismatched scopes meant the
`--tw-*` variables stayed unset for elements that received transform
utilities, producing an invalid `transform: translate( , ) rotate( )…`
declaration that browsers silently dropped — most visibly leaving
select-dropdown chevrons un-centered.

Move the reset out to the same `#slack_blocks_to_jsx` scope as the
generated utilities so the variables are always initialized.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@pkg-pr-new

pkg-pr-new Bot commented Jun 6, 2026

Copy link
Copy Markdown

Open in StackBlitz

npm i https://pkg.pr.new/slack-blocks-to-jsx@71

commit: 250b9ff

@themashcodee themashcodee merged commit 7e7fd89 into main Jun 6, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Select dropdown chevron, multi_select arrow, etc. not vertically centered (broken Tailwind transform reset)

3 participants