tree-sitter / tree-sitter-css

CSS grammar for Tree-sitter
MIT License
85 stars 34 forks source link

Support `@apply` directive #41

Closed aspeddro closed 9 months ago

aspeddro commented 9 months ago

Example:

.selector {
  @apply variable-a meta-variable-b lots-of-combined-properties-c !important;
}

@layer components {
  .btn-blue {
    @apply --mixin sm:space-x-0 left-[11%] border-foreground/20 #{!important};
  }
}

AST:

(stylesheet [0, 0] - [9, 0]
  (rule_set [0, 0] - [2, 1]
    (selectors [0, 0] - [0, 9]
      (class_selector [0, 0] - [0, 9]
        (class_name [0, 1] - [0, 9])))
    (block [0, 10] - [2, 1]
      (apply_directive [1, 2] - [1, 77]
        (class_name [1, 9] - [1, 19]
          (identifier [1, 9] - [1, 19]))
        (class_name [1, 20] - [1, 35]
          (identifier [1, 20] - [1, 35]))
        (class_name [1, 36] - [1, 65]
          (identifier [1, 36] - [1, 65]))
        (important [1, 66] - [1, 76]))))
  (at_rule [4, 0] - [8, 1]
    (at_keyword [4, 0] - [4, 6])
    (keyword_query [4, 7] - [4, 17])
    (block [4, 18] - [8, 1]
      (rule_set [5, 2] - [7, 3]
        (selectors [5, 2] - [5, 11]
          (class_selector [5, 2] - [5, 11]
            (class_name [5, 3] - [5, 11])))
        (block [5, 12] - [7, 3]
          (apply_directive [6, 4] - [6, 78]
            (class_name [6, 11] - [6, 18]
              (identifier [6, 11] - [6, 18]))
            (class_name [6, 19] - [6, 31]
              (identifier [6, 19] - [6, 21])
              (identifier [6, 22] - [6, 31]))
            (class_name [6, 32] - [6, 42]
              (identifier [6, 32] - [6, 37])
              (integer_value [6, 38] - [6, 41]
                (unit [6, 40] - [6, 41])))
            (class_name [6, 43] - [6, 63]
              (identifier [6, 43] - [6, 60])
              (integer_value [6, 61] - [6, 63]))
            (important_interpolation [6, 64] - [6, 77]
              (important [6, 66] - [6, 76]))))))))

Preview:

image

todo:

Close #17