sort @apply in css files

[onelesd]

Are there plans to support this?

[alexpriftuli]

I did this with a custom regex
rustywind --custom-regex "@apply ([_a-zA\.-Z0-9\s\-:\[\]]+);" --write ./src/css/**/*

[azzamsa]

Is there a way not to break other lines?

rustywind --custom-regex "@apply ([_a-zA\.-Z0-9\s\-:\[\]]+);" --write ./src/css/**/ gives me this:

modified   src/styles/base/utilities.css
@@ -2,10 +2,7 @@
 
 /*  subtle 'fade in' to the lazyloaded image */
 [data-lazy] {
-  @apply w-full opacity-0;
-
-  transition: opacity 0.25s ease-in;
-  min-height: 120px;
+  @apply w-full opacity-0; transition: opacity 0.25s ease-in; min-height: 120px;
 }

Expected: (don't change other lines)

[data-lazy] {
+ @apply w-full opacity-0;
  transition: opacity 0.25s ease-in;
  min-height: 120px;
}

[alexpriftuli]

rustywind --custom-regex "@apply ([_a-zA\.-Z0-9\-:\[\] ]+);" --write ./src/css/**/*

Instead of \s you can put (space) at the end, before the last ]
\s gets all whitespaces, including \n.

[azzamsa]

rustywind --custom-regex "@apply ([_a-zA.-Z0-9-:[] ]+);" --write ./src/css/**/*

Thank you. Worked like a charm!

Before:

 /*  subtle 'fade in' to the lazyloaded image */
 [data-lazy] {
-  @apply w-full opacity-0;
-
-  transition: opacity 0.25s ease-in;
-  min-height: 120px;
+  @apply w-full opacity-0; transition: opacity 0.25s ease-in; min-height: 120px;
 }

After: ✅ (I change the class order of @apply to see it it works but doesn't mess the other lines)

@@ -2,7 +2,7 @@

/*  subtle 'fade in' to the lazyloaded image */
[data-lazy] {
-  @apply w-full opacity-0;
+  @apply opacity-0 w-full;

  transition: opacity 0.25s ease-in;
  min-height: 120px;

@alexpriftuli What a regex guru! Thanks a lot!.

[Rolv-Apneseth]

@praveenperera would you like this to be an included feature? Maybe a flag specifically for doing the @apply rule or just one for specifically CSS files? Minor but it is nice to have.

[praveenperera]

@Rolv-Apneseth I forget if we support multiple regex's now, if so we could add it as another regex. Will need some tests to confirm its working on not messing other stuff up.

[Rolv-Apneseth]

As in - it would just get run by default? But yeah I could try do this when I have some time.

[Rolv-Apneseth]

Hey sorry forgot about this, didn't get a notification for the reaction.

So I don't think there's currently a way for running multiple regexes, but I could try implement that if you like. So the RE static variable would be a list of regexes?

Alternatively (I think) this regex can handle both cases (?:\bclass(?:Name)*\s*=\s*["']|@apply )([_a-zA-Z0-9\.\s\-:\[\]\/]+)["';].

Are you sure this wouldn't be better behind some kind of flag since it's covering a different use-case?

[weber-s]

Hello!

I would prefer the regex handling both case, notably because of editor integration that run on save. If the regex handle both, there is nothing more to do.
The same is true for pre-commit, etc.

Thank you!

[praveenperera]

My plan is to write parsers for different files that can extract the classes, I'll start with one for css.

It will always fallback to the default regex and you'll have the option to skip the parsers completely.

[UnknownPlatypus]

dunno if it helps but you might be able to use https://github.com/g-plane/raffia.

This is the underlying CSS/scss/sass rust parser used to power dprint and deno CSS formatters