==========================
Function calls
==========================

a {
  color: rgba(0, 255, 0, 0.5);
}

---

(stylesheet
  (rule_set
    (selectors (tag_name))
    (block
      (declaration
        (property_name)
        (call_expression (function_name) (arguments
          (integer_value)
          (integer_value)
          (integer_value)
          (float_value)))))))

=============================================
Calls where each argument has multiple values
=============================================

div {
  background: repeating-linear-gradient(red, orange 50px);
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
}

---

(stylesheet
  (rule_set (selectors (tag_name)) (block
    (declaration
      (property_name)
      (call_expression (function_name) (arguments
        (plain_value)
        (plain_value)
        (integer_value (unit)))))
    (declaration
      (property_name)
      (call_expression (function_name) (arguments
        (integer_value (unit))
        (integer_value (unit))
        (integer_value (unit))
        (integer_value (unit))
        (integer_value (unit))
        (integer_value (unit))
        (integer_value (unit))
        (integer_value (unit))
        (integer_value (unit))
        (integer_value (unit))
        (integer_value (unit))
        (integer_value (unit))
        (integer_value (unit))
        (integer_value (unit))
        (integer_value (unit))
        (integer_value (unit))))))))

============================
Color literals
============================

a {
  b: #fafd04;
  c: #fafd0401;
}

---

(stylesheet
  (rule_set
    (selectors (tag_name))
    (block
      (declaration (property_name) (color_value))
      (declaration (property_name) (color_value)))))

============================
Numbers
============================

a {
  b: 0.5%;
  c: 5em;
  margin: 10E3px;
  margin: -456.8px;
  margin: -5px;
  margin: -0.0px;
}

---

(stylesheet
  (rule_set (selectors (tag_name)) (block
    (declaration (property_name) (float_value (unit)))
    (declaration (property_name) (integer_value (unit)))
    (declaration (property_name) (float_value (unit)))
    (declaration (property_name) (float_value (unit)))
    (declaration (property_name) (integer_value (unit)))
    (declaration (property_name) (float_value (unit))))))

============================
Binary arithmetic operators
============================

a {
  width: calc(100% - 80px);
  aspect-ratio: 1/2;
  font-size: calc(10px + (56 - 10) * ((100vw - 320px) / (1920 - 320)));
}

---

(stylesheet
  (rule_set
    (selectors (tag_name))
    (block
      (declaration
        (property_name)
        (call_expression (function_name) (arguments (binary_expression (integer_value (unit)) (integer_value (unit))))))
      (declaration
        (property_name)
        (binary_expression (integer_value) (integer_value)))
      (declaration
        (property_name)
        (call_expression
          (function_name)
          (arguments
            (binary_expression
              (binary_expression
                (integer_value (unit))
                (parenthesized_value (binary_expression (integer_value) (integer_value))))
              (parenthesized_value
                (binary_expression
                  (parenthesized_value (binary_expression (integer_value (unit)) (integer_value (unit))))
                  (parenthesized_value (binary_expression (integer_value) (integer_value))))))))))))

============================
Strings
============================

a {
  b: '';
  c: '\'hi\'';
}

---

(stylesheet
  (rule_set
    (selectors (tag_name))
    (block
      (declaration (property_name) (string_value))
      (declaration (property_name) (string_value (escape_sequence) (string_content) (escape_sequence))))))

============================
URLs
============================

a {
  b: http://something-else?foo=bar;
}

---

(stylesheet
  (rule_set
    (selectors (tag_name))
    (block
      (declaration (property_name) (plain_value)))))

============================
Important declarations
============================

a {
  b: c !important;
}

---

(stylesheet
  (rule_set
    (selectors (tag_name))
    (block
      (declaration (property_name) (plain_value) (important)))))

============================
Declarations without trailing semicolons
============================

a {
  b: c;
  d: e
}

---

(stylesheet
  (rule_set
    (selectors (tag_name))
    (block
      (declaration (property_name) (plain_value))
      (declaration (property_name) (plain_value)))))

=======================================
Comments right after numbers
=======================================

// A comment
a {
	shape-outside: circle(20em/*=*/at 50% 50%);
	shape-outside: inset(1em, 1em, 1em, 1em);
}

---

(stylesheet
  (js_comment)
  (rule_set
    (selectors (tag_name))
    (block
      (declaration (property_name) (call_expression (function_name) (arguments
        (integer_value (unit))
        (comment)
        (plain_value)
        (integer_value (unit))
        (integer_value (unit)))))
      (declaration (property_name) (call_expression (function_name) (arguments
        (integer_value (unit))
        (integer_value (unit))
        (integer_value (unit))
        (integer_value (unit))))))))

=================================
Declarations at the top level
=================================

--a-variable: -5px;
a-property: calc(5px + var(--a-variable));

---

(stylesheet
  (declaration (property_name) (integer_value (unit)))
  (declaration (property_name) (call_expression (function_name) (arguments (binary_expression (integer_value (unit)) (call_expression (function_name) (arguments (plain_value))))))))

=============================================
Spaces after colons in property declarations
=============================================

div {
  margin      : 0;
  padding     : 0;
}

---

(stylesheet
  (rule_set
    (selectors
      (tag_name))
    (block
      (declaration
        (property_name)
        (integer_value))
      (declaration
        (property_name)
        (integer_value)))))

=============================================
No spaces after colons
=============================================

div {
  all:unset;
  display:flex;
  justify-content:center;
}

---

(stylesheet
  (rule_set
    (selectors (tag_name))
    (block
      (declaration (property_name) (plain_value))
      (declaration (property_name) (plain_value))
      (declaration (property_name) (plain_value)))))

=============================================
PostCSS
=============================================

.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 !text-white;
  }
}

@layer utilities {
  .btn {
  }
}

---

(stylesheet
  (rule_set
    (selectors (class_selector (class_name (identifier))))
    (block
      (postcss_statement
        (at_keyword)
        (plain_value)
        (plain_value)
        (plain_value)
        (important))))
  (at_rule
    (at_keyword)
    (keyword_query)
    (block
      (rule_set
        (selectors (class_selector (class_name (identifier))))
        (block
          (postcss_statement
            (at_keyword)
            (plain_value)
            (plain_value)
            (plain_value)
            (grid_value (integer_value (unit)))
            (plain_value)
            (important)
            (important_value))))))
  (at_rule
      (at_keyword)
      (keyword_query)
      (block
        (rule_set
          (selectors
            (class_selector
              (class_name
                (identifier))))
          (block)))))

==============================
Comments in declarations
==============================

& {
  position: /*${}*/ relative;
}

---

(stylesheet
  (rule_set
    (selectors (nesting_selector))
    (block
      (declaration
        (property_name)
        (comment)
        (plain_value)))))
