mirror of https://github.com/Wilfred/difftastic/
380 lines
7.9 KiB
Plaintext
380 lines
7.9 KiB
Plaintext
==========================
|
|
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)))))
|