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

Update class list command #6506

Merged
merged 7 commits into from
Oct 9, 2024

Conversation

bkrmendy
Copy link
Contributor

@bkrmendy bkrmendy commented Oct 9, 2024

Problem

In order to add/remove/update tailwind classes on an element, we need a way to edit the className property in a granular way.

Constraints/considerations

  • we can't treat the className property as a string, because we want to edit the list of classnames in it
  • we can't treat the className property as an array of strings, because Tailwind classes have their own syntax (negative values, selectors) that we need to respect
  • not all classes in className property are parseable, Tailwind class name updates should leave the non-tailwind classes alone

Fix

This PR introduces tailwind-class-list-utils, which provides a toolkit to edit the Tailwind classes in the className property. On top of that, that PR adds a command that provides a high-level wrapper for tailwind-class-list-utils that the rest of the editor can use

Copy link
Contributor

github-actions bot commented Oct 9, 2024

Try me

Copy link

relativeci bot commented Oct 9, 2024

#14676 Bundle Size — 57.93MiB (+0.32%).

97f400a(current) vs 916e8b9 master#14673(baseline)

Warning

Bundle contains 70 duplicate packages – View duplicate packages

Warning

Bundle introduced 2 new packages: @xengine/tailwindcss-class-parser, tailwindcss – View changed packages

Bundle metrics  Change 5 changes Regression 2 regressions
                 Current
#14676
     Baseline
#14673
Regression  Initial JS 40.93MiB(+0.45%) 40.75MiB
No change  Initial CSS 0B 0B
Change  Cache Invalidation 21.18% 0%
No change  Chunks 21 21
No change  Assets 23 23
Change  Modules 4142(+0.71%) 4113
No change  Duplicate Modules 213 213
Change  Duplicate Code 27.32%(-0.33%) 27.41%
Regression  Packages 477(+0.42%) 475
No change  Duplicate Packages 70 70
Bundle size by type  Change 2 changes Regression 1 regression Improvement 1 improvement
                 Current
#14676
     Baseline
#14673
Regression  JS 57.92MiB (+0.32%) 57.74MiB
Improvement  HTML 7.37KiB (-0.26%) 7.39KiB

Bundle analysis reportBranch feature/update-tailwind-class-li...Project dashboard


Generated by RelativeCIDocumentationReport issue

@bkrmendy bkrmendy marked this pull request as ready for review October 9, 2024 13:42
Copy link
Contributor

@balazsbajorics balazsbajorics left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is very nice!

return c.className
}
return TailwindClassParser.classname(
c.ast as any, // FIXME the types are not exported from @xengine/tailwindcss-class-parser
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😢

}

export const removeClasses =
(propertiesToRemove: string[]): ClassListTransform =>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel it would be better to have this as a Set directly instead of going string[] → Set, but ¯_(ツ)_/¯

@bkrmendy bkrmendy merged commit 0ff29ca into master Oct 9, 2024
20 checks passed
@bkrmendy bkrmendy deleted the feature/update-tailwind-class-list-command branch October 9, 2024 14:33
liady pushed a commit that referenced this pull request Dec 13, 2024
## Problem

In order to add/remove/update tailwind classes on an element, we need a
way to edit the `className` property in a granular way.

## Constraints/considerations
- we can't treat the className property as a string, because we want to
edit the list of classnames in it
- we can't treat the className property as an array of strings, because
Tailwind classes have their own syntax (negative values, selectors) that
we need to respect
- not all classes in className property are parseable, Tailwind class
name updates should leave the non-tailwind classes alone

## Fix
This PR introduces `tailwind-class-list-utils`, which provides a toolkit
to edit the Tailwind classes in the className property. On top of that,
that PR adds a command that provides a high-level wrapper for
`tailwind-class-list-utils` that the rest of the editor can use
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