Skip to content
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.

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

Tailwind border-radius support #6657

Merged
merged 15 commits into from
Nov 21, 2024
Merged

Tailwind border-radius support #6657

merged 15 commits into from
Nov 21, 2024

Conversation

gbalint
Copy link
Contributor

@gbalint gbalint commented Nov 19, 2024

Problem:
Make border-radius controls work in tailwind projects.

Fix:

  • Add the border-radius shorthand/longhand props to the StyleInfo interface
  • Add overflow prop to the StyleInfo interface (necessary because when we set the border-radius we set the element to overflow: hidden)
  • Update InlineStylePlugin and TailwindStylePlugin to support the new props in StyleInfo
  • Refactor the set-border-radius strategy and the border-radius control handle control to read element styles through a StyleInfoReader instance
  • Add a new property patcher in style-plugins@patchers to take care of patching removed border-radius props
  • Add a new EditorState substate so we can get a StyleInfoReader in a useEditorState hook without using the full store
  • Remove the condition in tailwind-compilation that ElementsToRerenderGLOBAL.current has to be 'rerender-all-elements' for the tailwind classes to be regenerated. For some reason this blocked the class generation after a border-radius interaction. We are still protected against tailwind class generation during the interaction (we check isInteractionActive)
  • Add tests with a tailwind project to the set-border-radius strategy test suite
  • removeTailwindClasses guarantees that subsequent tests do not have the tailwind css on

Todo:

  • Check why the ``ElementsToRerenderGLOBAL.current` check caused problems.

Manual Tests:
I hereby swear that:

  • I opened a hydrogen project and it loaded
  • I could navigate to various routes in Play mode

Copy link
Contributor

github-actions bot commented Nov 19, 2024

Try me

Copy link

relativeci bot commented Nov 19, 2024

#15251 Bundle Size — 58.11MiB (+0.01%).

eca2537(current) vs d1d46c1 master#15247(baseline)

Warning

Bundle contains 70 duplicate packages – View duplicate packages

Bundle metrics  Change 4 changes Regression 1 regression
                 Current
#15251
     Baseline
#15247
Regression  Initial JS 41.08MiB(+0.01%) 41.07MiB
No change  Initial CSS 0B 0B
Change  Cache Invalidation 18.16% 18.33%
No change  Chunks 20 20
No change  Assets 22 22
Change  Modules 4172(+0.02%) 4171
No change  Duplicate Modules 213 213
Change  Duplicate Code 27.28%(-0.04%) 27.29%
No change  Packages 477 477
No change  Duplicate Packages 70 70
Bundle size by type  Change 2 changes Regression 1 regression Improvement 1 improvement
                 Current
#15251
     Baseline
#15247
Regression  JS 58.1MiB (+0.01%) 58.09MiB
Improvement  HTML 7.37KiB (-0.25%) 7.39KiB

Bundle analysis reportBranch feature/tailwind-border-radiusProject dashboard


Generated by RelativeCIDocumentationReport issue

@gbalint gbalint marked this pull request as ready for review November 19, 2024 17:47
@gbalint gbalint merged commit 7db4069 into master Nov 21, 2024
13 checks passed
@gbalint gbalint deleted the feature/tailwind-border-radius branch November 21, 2024 15:18
liady pushed a commit that referenced this pull request Dec 13, 2024
**Problem:**
Make border-radius controls work in tailwind projects.

**Fix:**

- Add the border-radius shorthand/longhand props to the StyleInfo
interface
- Add overflow prop to the StyleInfo interface (necessary because when
we set the border-radius we set the element to overflow: hidden)
- Update InlineStylePlugin and TailwindStylePlugin to support the new
props in StyleInfo
- Refactor the set-border-radius strategy and the border-radius control
handle control to read element styles through a StyleInfoReader instance
- Add a new property patcher in style-plugins@patchers to take care of
patching removed border-radius props
- Add a new EditorState substate so we can get a StyleInfoReader in a
useEditorState hook without using the full store
- Remove the condition in tailwind-compilation that
`ElementsToRerenderGLOBAL.current` has to be `'rerender-all-elements'`
for the tailwind classes to be regenerated. For some reason this blocked
the class generation after a border-radius interaction. We are still
protected against tailwind class generation during the interaction (we
check `isInteractionActive`)
- Add tests with a tailwind project to the set-border-radius strategy
test suite
- removeTailwindClasses guarantees that subsequent tests do not have the
tailwind css on

**Todo:**
- [x] Check why the ``ElementsToRerenderGLOBAL.current` check caused
problems.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
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.

4 participants