CSS support

[antoinekahlouche]

I'm trying to add support to CSS files with the @apply directive

Example :

body {
    @apply container p-10;
}

Tree Sitter playground give me this :

rule_set [0, 0] - [2, 1]
  selectors [0, 0] - [0, 4]
    tag_name [0, 0] - [0, 4]
  block [0, 5] - [2, 1]
    postcss_statement [1, 4] - [1, 26]
      at_keyword [1, 4] - [1, 10]
      plain_value [1, 11] - [1, 20]
      plain_value [1, 21] - [1, 25]

First, I tried to query the plain_value but, I can only select them independently → not a good option

(postcss_statement
    .(at_keyword) @_keyword (#eq? @_keyword "@apply")
    ((plain_value).(plain_value)*.) @tailwind
)

Then I wrote this :

(
    (postcss_statement
        .(at_keyword) @_keyword (#eq? @_keyword "@apply")
        ((plain_value).(plain_value)*.)
    ) @_apply
    (#offset! @_apply 0 7 0 -1)
) @tailwind

And I'm almost there, the only remaining problem is : the semicolon at the end is being moved when the sort is applied. Even with my offset of -1 end column

[laytan]

What grammar/treesitter parser is this? Because I get this with the css parser and that css snippet of yours:

(rule_set ; [1:1 - 3:1]
  (selectors ; [1:1 - 4]
    (tag_name)) ; [1:1 - 4]
  (block ; [1:6 - 3:1]
    (at_rule ; [2:3 - 24]
      (at_keyword) ; [2:3 - 8]
      (keyword_query) ; [2:10 - 18]
      (ERROR ; [2:20 - 23]
        (ERROR))))) ; [2:20 - 20]

[antoinekahlouche]

I think, TreeSitter CSS add support for @apply recently : Issue #17 @laytan so maybe update your TreeSitter and you will be able to have it

[laytan]

Ah you are correct, it is not an error anymore now. Additionally I got the query working like this:

(
  (postcss_statement
    .(at_keyword) @_keyword (#eq? @_keyword "@apply")
    ((plain_value).(plain_value)*.)
  ) @tailwind
  (#offset! @tailwind 0 8 0 -2)
)

Would you like to make a pull request?

[antoinekahlouche]

Thanks, works like a charm 🤩 I made a PR, and I made a second one for Go Templ support 👍