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 conversion using StyleInfo #6669

Draft
wants to merge 6 commits into
base: master
Choose a base branch
from

Conversation

bkrmendy
Copy link
Contributor

@bkrmendy bkrmendy commented Nov 21, 2024

This PR implements two context menu buttons, for converting the inline styles on the selected elements to Tailwind, and converting the Tailwind classes on the selected elements to inline styles.

The code on this PR uses the style plugins and the style info system to do the conversion, by having one plugin read the element styles as described in StyleInfo from a given element, and have the other plugin apply all properties in that StyleInfo instance.

The upside of this approach is that it uses the same code paths that the rest of the editor uses (as far as Tailwind is concerned).

The limitations:

  • it can only convert the props specified in StyleInfo
  • when converting inline styles to Tailwind, it won't generate compound classes like inset or px
  • tailwind-class-parser doesn't support all Tailwind classes, it's possible that we'll need one and we'll have to add that to the lib

One tweak this PR makes to Tailwind parsing is around Tailwind classes that are compiled into multiple CSS props. Before, the code assumed a 1:1 mapping. With this change, the code picks up all the CSS props that are set by a Tailwind class, and passes them all to the code that generates the StyleInfo object.

Copy link
Contributor

github-actions bot commented Nov 21, 2024

Try me

Copy link

relativeci bot commented Nov 21, 2024

#15250 Bundle Size — 64.64MiB (+11.26%).

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

Warning

Bundle contains 70 duplicate packages – View duplicate packages

Bundle metrics  Change 7 changes Regression 2 regressions
                 Current
#15250
     Baseline
#15247
Regression  Initial JS 41.94MiB(+2.1%) 41.07MiB
No change  Initial CSS 0B 0B
Change  Cache Invalidation 82.38% 18.33%
Change  Chunks 19(-5%) 20
Change  Assets 21(-4.55%) 22
Change  Modules 4462(+6.98%) 4171
Regression  Duplicate Modules 503(+136.15%) 213
Change  Duplicate Code 33.36%(+22.24%) 27.29%
No change  Packages 477 477
No change  Duplicate Packages 70 70
Bundle size by type  Change 2 changes Regression 2 regressions
                 Current
#15250
     Baseline
#15247
Regression  JS 64.63MiB (+11.26%) 58.09MiB
Regression  HTML 7.59KiB (+2.7%) 7.39KiB

Bundle analysis reportBranch feature/tailwind-css-conversion-...Project dashboard


Generated by RelativeCIDocumentationReport issue

@bkrmendy bkrmendy changed the title Inline style <-> Tailwind conversion button Tailwind conversion using StyleInfo Nov 21, 2024
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