Skip to content

Commit

Permalink
Add support for Ruby/Rails hashes (class: "...")
Browse files Browse the repository at this point in the history
See #1.
  • Loading branch information
airblade committed Apr 17, 2023
1 parent 60e636a commit 6bb465a
Show file tree
Hide file tree
Showing 4 changed files with 18 additions and 6 deletions.
13 changes: 10 additions & 3 deletions README.markdown
Original file line number Diff line number Diff line change
@@ -1,15 +1,22 @@
# tcs - Tailwind Class Sorter

A standalone script which sorts the classes in your HTML following Tailwind's [recommended class order](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted). It does not require [Prettier](https://tailwindcss.com/docs/editor-setup#automatic-class-sorting-with-prettier).
A standalone script which sorts the classes in your markup following Tailwind's [recommended class order](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted). It does not require [Prettier](https://tailwindcss.com/docs/editor-setup#automatic-class-sorting-with-prettier).

You can run it on the command line or integrate it with your text editor.


## Features

- It sorts the classes in your HTML according to Tailwind's recommended order.
- It leaves the rest of your HTML alone.
- It sorts the classes in your markup according to Tailwind's recommended order.
- It leaves the rest of your markup alone.
- It does not require Prettier.
- Supports HTML class attributes (`class="..."`) and Ruby/Rails hashes (`class: "..."`).


## Constraints

- Your class names have to be enclosed with double- (not single-) quotation marks (`<p class="...">`).
- [Slim] You have to use `class="foo bar"` rather than the `.foo.bar` class shortcut.


## Installation
Expand Down
9 changes: 6 additions & 3 deletions tcs
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,12 @@ class Tcs
[,{]
/x

# Class declaration in HTML, i.e. the stuff inside the quotation marks
# in `class="..."`.
CLASS_LIST = /(?<=class=")([^"]+)(?=")/
# Class declaration in markup, i.e. the stuff inside the quotation marks
# in `class="..."` or `class: "..."`.
#
# Note that the lookbehind alternatives have to be fixed-length so we cannot
# match a variable number of spaces after `class:`.
CLASS_LIST = /(?<=class="|class:\s")([^"]+)(?=")/

# modifier -> css
PSEUDO_CLASSES = {
Expand Down
1 change: 1 addition & 0 deletions test/fixtures/rails.expected.html
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
= link_to "Home", root_path, class: "bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3"
1 change: 1 addition & 0 deletions test/fixtures/rails.html
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
= link_to "Home", root_path, class: "text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800"

0 comments on commit 6bb465a

Please sign in to comment.