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?