Skip to content

fix: scope the forms reset so it stops restyling every checkbox on the page - #366

Merged
arifulhoque7 merged 1 commit into
weDevsOfficial:developfrom
arifulhoque7:fix/433-scope-forms-reset
Sep 24, 2026
Merged

arifulhoque7 merged 1 commit into
weDevsOfficial:developfrom
arifulhoque7:fix/433-scope-forms-reset

Conversation

@arifulhoque7

Copy link
Copy Markdown
Contributor

Problem

Reported: "Stylesheets from your plugin is loaded everywhere on the site. Slows down the site and break all checkboxes on my all websites." Details and measurements: weDevsOfficial/wedocs-pro#433.

@tailwindcss/forms writes its reset as bare element rules (input:where([type='checkbox']) { appearance: none; ... }). Neither the important scope nor tailwindcss-scoped-preflight reaches plugin base rules, so on any page where one of these stylesheets loads, every checkbox, radio, select and text field on the page is restyled, not just the ones in weDocs markup. #364 already stops the block stylesheets loading site-wide; this fixes what they do on the pages that still load them.

Fix

tailwind.scoped-forms.js runs the forms plugin unchanged and appends the container scope to every selector it adds, the same :where(<container>, <container> *) form the scoped preflight already uses. :where() adds no specificity, so weDocs' own fields keep the weight they had.

Wired into the admin bundle (src/assets/css/index.css) and the four Tailwind block stylesheets (Breadcrumb, Sidebar, DocNavigation, QuickSearch), scoped to .wedocs-document. The new file is listed in .distignore; the zip uses an allowlist and never included root tooling files.

Evidence (WordPress 7.1.2, Hello Elementor, both release builds installed from zip)

  • CSS: 28 forms rules per affected file now carry the scope; every other rule is byte-identical and rule counts are unchanged. Zero unscoped form rules remain.
  • Outside weDocs: an injected checkbox on a single doc / a page with a QuickSearch block went from appearance:none, 16x16, blue fill to native 13x13. In wp-admin the remaining 16px styling is core's own (identical with weDocs' sheets disabled).
  • Inside weDocs: 19 screenshots (single doc, blocks page, docs home, QuickSearch modal, assistant widget, docs/glossary/FAQ/changelog admin, 8 settings tabs, a post with a form) compared pixel by pixel before and after: 18 identical, 1 with 5 pixels at 3/255 (anti-aliasing).

Part of weDevsOfficial/wedocs-pro#433 (Pro companion PR fixes frontend.css). Independent of the Pro PR, no merge order.

https://claude.ai/code/session_01NYhesBBDCSe89DpyPiynVN

…e page

@tailwindcss/forms writes its reset as bare element rules
(input:where([type='checkbox']) { appearance: none; ... }). The
`important` scope and tailwindcss-scoped-preflight do not reach plugin
base rules, so wherever the admin bundle or the Breadcrumb, Sidebar,
DocNavigation and QuickSearch block stylesheets loaded, every checkbox,
radio, select and text field on the page was restyled, the theme's and
other plugins' included.

tailwind.scoped-forms.js runs the forms plugin unchanged and appends
:where(.wedocs-document, .wedocs-document *) to each selector it adds,
the same form the scoped preflight uses. :where() adds no specificity,
so weDocs' own fields keep the weight they had.

Measured on WordPress 7.1.2 with Hello Elementor: the same 28 forms
rules per file are now scoped and nothing else in the CSS changes (rule
counts identical); a checkbox outside weDocs on a single doc or a page
with a QuickSearch block stays native (13x13, appearance auto) instead of
16x16 blue; 19 screenshots of weDocs' own UI (docs, blocks, QuickSearch
modal, admin screens, settings tabs) are pixel-identical before and
after, bar anti-aliasing noise (5 px at 3/255) on one.

Claude-Session: https://claude.ai/code/session_01NYhesBBDCSe89DpyPiynVN
@arifulhoque7
arifulhoque7 merged commit c5cd9bd into weDevsOfficial:develop Sep 24, 2026
3 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.

1 participant