Skip to content

FEATURE: Expose getClassOrder from Tailwind#23

Merged
mhsdesign merged 1 commit intomhsdesign:mainfrom
bkrmendy:feat/get-class-order
Dec 9, 2024
Merged

FEATURE: Expose getClassOrder from Tailwind#23
mhsdesign merged 1 commit intomhsdesign:mainfrom
bkrmendy:feat/get-class-order

Conversation

@bkrmendy
Copy link
Copy Markdown
Contributor

@bkrmendy bkrmendy commented Dec 9, 2024

Resolves: #24

This PR exposes the getClassOrder function from Tailwind, and adds a test suite to showcase how it can be used.

getClassOrder can be used to implement functionality in the browser that's similar to what https://github.com/tailwindlabs/prettier-plugin-tailwindcss does. The concrete use cases for this could be

  • Sorting tailwind classes in a text editor that's running in the browser
  • Finding out what CSS properties and values will be applied to a given element. Sorting is relevant here, because if an element has conflicting props (for example left-1 inset-x-2, where left-1 set the left property, and inset-x sets both left and right), we need to know in what order Tailwind will apply these classes to which TW class takes effect.

@mhsdesign mhsdesign changed the title Expose getClassOrder from Tailwind FEATURE: Expose getClassOrder from Tailwind Dec 9, 2024
Copy link
Copy Markdown
Owner

@mhsdesign mhsdesign left a comment

Choose a reason for hiding this comment

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

Thanks for the excellent work and including the tests.

i like that this is still fairly simple and does not increase bundle size worth mentioning:

dist/module.esm.js 315.6kb

after:

dist/module.esm.js 316.1kb

@mhsdesign mhsdesign merged commit e1fe30c into mhsdesign:main Dec 9, 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.

Expose getClassOrder from Tailwind

2 participants