==========================
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)))))

============================
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 {
	shape-outside: circle(20em/*=*/at 50% 50%);
	shape-outside: inset(1em, 1em, 1em, 1em);
}

---

(stylesheet
  (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))))))))

=================================
Variables
=================================

$font-stack: Helvetica, sans-serif;

a {
  $primary-color: red;

  color: $primary-color;
  font: 100% $font-stack;
}

---

(stylesheet
  (declaration (variable_name) (plain_value) (plain_value))
  (rule_set
    (selectors (tag_name))
    (block
      (declaration (variable_name) (plain_value))
      (declaration (property_name) (variable_value))
      (declaration (property_name) (integer_value (unit)) (variable_value)))))

=================================
Mixins with no arguments
=================================

@mixin red {
  color: red;
}

---

(stylesheet
  (mixin_statement (name)
    (block
      (declaration (property_name) (plain_value)))))

=================================
Mixins with arguments
=================================

@mixin replace-text($image, $color: red) {
  text-align: left;
}

---

(stylesheet
  (mixin_statement
    (name)
    (parameters
      (parameter (variable_name))
      (parameter (variable_name) (default_value (plain_value))))
    (block (declaration (property_name) (plain_value)))))

=================================
Mixins with interpolations and content
=================================

@mixin media($queryString) {
    @media #{$queryString} {
      @content;
    }
}

---

(stylesheet
  (mixin_statement
    (name)
    (parameters (parameter (variable_name)))
    (block (media_statement (keyword_query) (block (at_rule (at_keyword)))))))

=================================
Mixins with at-root
=================================

@mixin unify-parent($child) {
  @at-root #{selector.unify(&, $child)} {
    @content;
  }
}

---

(stylesheet
  (mixin_statement
    (name)
    (parameters (parameter (variable_name)))
    (block
      (at_root_statement (plain_value) (block (at_rule (at_keyword)))))))

=================================
Placeholders
=================================

%bar {
  width: 100%;
}

---

(stylesheet
  (placeholder
    (name)
    (block
      (declaration (property_name) (integer_value (unit))))))

=============================================
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)))))
