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

Read style props through StyleInfo in AdjustCssLengthProperties #6632

Merged
merged 6 commits into from
Nov 13, 2024

Conversation

bkrmendy
Copy link
Contributor

@bkrmendy bkrmendy commented Nov 12, 2024

Problem

The padding strategy relies on the AdjustCssLengthProperties command to update elements, both for reading and writing styles. In order for that to work in Tailwind projects, where elements don't have an inline style prop, AdjustCssLengthProperties needs to read element styles from the "right" property, otherwise the command wouldn't work as intended.

Fix

Use the StyleInfo system from to read the element style info.

Details

  • Refactored AdjustCssLengthProperties to read elements styles through styleInfo
  • Created a bespoke prop, LengthProperty, to track which props are addressed by LengthPropertyToAdjust. This way it's easy to tell which props need to be supported by StyleInfo to have AdjustCssLengthProperties working well
  • Extended StyleInfo to support the props read by AdjustCssLengthProperties
  • Updated the style plugins to support the new StyleInfo props

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 12, 2024

Try me

Copy link

relativeci bot commented Nov 12, 2024

#15109 Bundle Size — 58.08MiB (~-0.01%).

886103b(current) vs d1d46c1 master#15107(baseline)

Warning

Bundle contains 70 duplicate packages – View duplicate packages

Bundle metrics  Change 2 changes Improvement 1 improvement
                 Current
#15109
     Baseline
#15107
Improvement  Initial JS 41.05MiB(~-0.01%) 41.05MiB
No change  Initial CSS 0B 0B
Change  Cache Invalidation 18.13% 18.6%
No change  Chunks 20 20
No change  Assets 22 22
No change  Modules 4169 4169
No change  Duplicate Modules 213 213
No change  Duplicate Code 27.3% 27.3%
No change  Packages 477 477
No change  Duplicate Packages 70 70
Bundle size by type  Change 2 changes Improvement 2 improvements
                 Current
#15109
     Baseline
#15107
Improvement  JS 58.07MiB (~-0.01%) 58.07MiB
Improvement  HTML 7.37KiB (-0.25%) 7.39KiB

Bundle analysis reportBranch feature/tailwind-aware-commandsProject dashboard


Generated by RelativeCIDocumentationReport issue

@bkrmendy bkrmendy marked this pull request as ready for review November 12, 2024 16:09
@bkrmendy bkrmendy changed the title Make AdjustCssLengthProperties style prop-agnostic Read style props through StyleInfo in AdjustCssLengthProperties Nov 12, 2024
@bkrmendy bkrmendy merged commit 9e34bde into master Nov 13, 2024
15 checks passed
@bkrmendy bkrmendy deleted the feature/tailwind-aware-commands branch November 13, 2024 13:05
liady pushed a commit that referenced this pull request Dec 13, 2024
…6632)

## Problem
The padding strategy relies on the `AdjustCssLengthProperties` command
to update elements, both for reading and writing styles. In order for
that to work in Tailwind projects, where elements don't have an inline
style prop, `AdjustCssLengthProperties` needs to read element styles
from the "right" property, otherwise the command wouldn't work as
intended.

## Fix
Use the `StyleInfo` system from to read the element style info.

### Details
- Refactored `AdjustCssLengthProperties` to read elements styles through
`styleInfo`
- Created a bespoke prop, `LengthProperty`, to track which props are
addressed by `LengthPropertyToAdjust`. This way it's easy to tell which
props need to be supported by `StyleInfo` to have
`AdjustCssLengthProperties` working well
- Extended `StyleInfo` to support the props read by
`AdjustCssLengthProperties`
- Updated the style plugins to support the new `StyleInfo` props

### 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.

3 participants