Tailwind conversion using StyleInfo #6669
Draft
+294
−52
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 thatStyleInfo
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:
StyleInfo
inset
orpx
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 libOne 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.