Merge branch 'main' into next

# Conflicts:
#	package.json
#	tests/css/atrule/each.css
#	tests/css/atrule/for.css
#	tests/css/atrule/if-else.css
#	tests/css/atrule/include.css
#	tests/css/atrule/while.css
#	tests/format/css/atrule/each.css
#	tests/format/css/atrule/for.css
#	tests/format/css/atrule/if-else.css
#	tests/format/css/atrule/include.css
#	tests/format/css/atrule/while.css
#	tests/scss/atrule/each.scss
#	tests/scss/atrule/for.scss
#	tests/scss/atrule/if-else.scss
#	tests/scss/atrule/include.scss
#	tests/scss/atrule/while.scss
#	yarn.lock

tests/format/css/atrule/at-root.css

@@ -0,0 +1,292 @@
+.parent {
+    @at-root {
+        .child1 {
+            width: 100px;
+        }
+        .child2 {
+            width: 200px;
+        }
+    }
+}
+.parent {
+@at-root {
+.child1 {
+width: 100px;
+}
+.child2 {
+width: 200px;
+}
+}
+}
+.parent {
+    @at-root  {
+        .child1 {
+            width: 100px;
+        }
+        .child2 {
+            width: 200px;
+        }
+    }
+}
+.parent  {
+    @at-root  {
+        .child1  {
+            width: 100px;
+        }
+        .child2  {
+            width: 200px;
+        }
+    }
+}
+.parent
+{
+@at-root
+{
+.child1
+{
+width
+:
+100px
+;
+}
+.child2
+{
+width
+:
+200px
+;
+}
+}
+}
+.parent
+
+{
+
+@at-root
+
+{
+
+.child1
+
+{
+
+width
+
+:
+
+100px
+
+;
+
+}
+.child2
+
+{
+
+width
+
+:
+
+200px
+
+;
+
+}
+
+}
+
+}
+.parent {
+    @at-root .child {
+        width: 100px;
+    }
+}
+.parent {
+@at-root .child {
+width: 100px;
+}
+}
+.parent{
+    @at-root .child{
+        width: 100px;
+    }
+}
+.parent  {
+    @at-root  .child  {
+        width: 100px;
+    }
+}
+.parent
+{
+@at-root
+.child
+{
+width
+:
+100px
+;
+}
+}
+.parent
+
+{
+
+@at-root
+
+.child
+
+{
+
+width
+
+:
+
+100px
+
+;
+
+}
+
+}
+.parent {
+@at-root
+input[
+type
+=
+'radio'
+]
+{
+color
+:
+red
+;
+}
+}
+@media print {
+    .page {
+        width: 8in;
+
+        @at-root (with: media) {
+            color: red;
+        }
+    }
+}
+@media print {
+.page {
+width: 8in;
+
+@at-root (with: media) {
+color: red;
+}
+}
+}
+@media print{
+    .page{
+        width: 8in;
+
+        @at-root (with:media){
+            color: red;
+        }
+    }
+}
+@media print {
+    .page {
+        width: 8in;
+
+        @at-root ( with : media ) {
+            color: red;
+        }
+    }
+}
+@media print  {
+    .page  {
+        width: 8in;
+
+        @at-root  (  with  :  media  ) {
+            color: red;
+        }
+    }
+}
+@media print  {
+    .page  {
+        width: 8in;
+
+    @at-root
+        (with: media) {
+            color: red;
+        }
+    }
+}
+@media print
+{
+.page
+{
+width
+:
+8in
+;
+@at-root
+(
+with
+:
+media
+)
+{
+color
+:
+red
+;
+}
+}
+}
+@media print
+
+{
+
+.page
+
+{
+
+width
+
+:
+
+8in
+
+;
+
+@at-root
+
+(
+
+with
+
+:
+
+media
+
+)
+
+{
+
+color
+:
+
+red
+
+;
+
+}
+
+}
+
+}
+@media print {
+    .page {
+        width: 8in;
+
+        @at-root (without: media) {
+            color: red;
+        }
+    }
+}

tests/format/css/atrule/charset.css

@@ -0,0 +1,6 @@
+@charset "UTF-8";
+@charset "iso-8859-15";
+@charset 'iso-8859-15'; /* Invalid, wrong quoting style used */
+@charset  "UTF-8"; /* Invalid, more than one space */
+@charset "UTF-8"; /* Invalid, there is a character (a space) before the at-rule */
+@charset UTF-8; /* Invalid, without ' or ", the charset is not a CSS <string> */

tests/format/css/atrule/counter-style.css

@@ -0,0 +1,69 @@
+@counter-style identifier {
+    system: cyclic;
+    symbols: "\1F44D";
+    suffix: " ";
+}
+@counter-style identifier {
+system: cyclic;
+symbols: "\1F44D";
+suffix: " ";
+}
+@counter-style identifier{
+    system: cyclic;
+    symbols: "\1F44D";
+    suffix: " ";
+}
+@counter-style  identifier  {
+    system: cyclic;
+    symbols: "\1F44D";
+    suffix: " ";
+}
+@counter-style
+identifier
+{
+system
+:
+cyclic
+;
+symbols
+:
+"\1F44D"
+;
+suffix
+:
+" "
+;
+}
+
+@counter-style
+
+identifier
+
+{
+
+system
+
+:
+
+cyclic
+
+;
+
+symbols
+
+
+:
+
+"\1F44D"
+
+;
+
+suffix
+
+:
+
+" "
+
+;
+
+}

tests/format/css/atrule/custom-media.css

@@ -0,0 +1,104 @@
+@custom-media --small-viewport (max-width: 30em);
+@custom-media --small-viewport (max-width:30em);
+@custom-media  --small-viewport  (  max-width  :  30em  )  ;
+@custom-media --small-viewport
+    (max-width: 30em);
+@custom-media
+    --small-viewport
+    (
+        max-width: 30em
+    );
+@custom-media
+--small-viewport
+(
+max-width
+:
+30em
+)
+;
+@custom-media
+
+--small-viewport
+
+(
+
+max-width
+
+:
+
+30em
+
+)
+
+;
+@custom-media --none not all;
+@custom-media  --none  not  all  ;
+@custom-media  --none
+    not all;
+@custom-media  --none
+    not
+    all;
+@custom-media
+--none
+not
+all
+;
+@custom-media
+
+--none
+
+not
+
+all
+
+;
+@custom-media --tablet (min-width: 768px) and (max-width: 1279px);
+@custom-media --tablet (min-width:768px) and (max-width:1279px);
+@custom-media  --tablet  (  min-width  :  768px  )  and  (  max-width  :  1279px  )  ;
+@custom-media --tablet
+    (min-width: 768px) and (max-width: 1279px);
+@custom-media
+    --tablet
+    (min-width: 768px) and
+    (max-width: 1279px);
+@custom-media
+--tablet
+(
+min-width
+:
+768px
+)
+and
+(
+max-width
+:
+1279px
+)
+;
+@custom-media
+
+--tablet
+
+(
+
+min-width
+
+:
+
+768px
+
+)
+
+and
+
+(
+
+max-width
+
+:
+
+1279px
+
+)
+
+;

tests/format/css/atrule/custom-selector.css

@@ -0,0 +1,64 @@
+@custom-selector :--heading h1, h2, h3, h4, h5, h6;
+@custom-selector :--heading h1,h2,h3,h4,h5,h6;
+@custom-selector  :--heading  h1  ,  h2  ,  h3  ,  h4  ,  h5  ,  h6  ;
+@custom-selector :--heading
+    h1, h2, h3, h4, h5, h6;
+@custom-selector
+    :--heading
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6;
+@custom-selector
+:--heading
+h1
+,
+h2
+,
+h3
+,
+h4
+,
+h5
+,
+h6
+;
+@custom-selector
+
+:--heading
+
+h1
+
+,
+
+h2
+
+,
+
+h3
+
+,
+
+h4
+
+,
+
+h5
+
+,
+
+h6
+
+;
+@custom-selector :--very-very-very-very-very-very-very-very-very-long-selector-name h1, h2, h3, h4, h5, h6;
+@custom-selector :--very-very-very-very-very-very-very-very-very-long-selector-name h1 + h1, h2, h3, h4, h5, h6;
+@custom-selector :--very-very-very-very-very-very-very-very-very-long-selector-name .very-very-very-very-very-very-very-very-very-long-selector-name + very-very-very-very-very-very-very-very-very-long-selector-name-other, h2, h3, h4, h5, h6;
+@custom-selector :--very-very-very-very-very-very-very-very-very-long-selector-name h1 h1, h2, h3, h4, h5, h6;
+@custom-selector :--heading .very-very-very-very-very-very-very-very-very-very-long-class-name, .very-very-very-very-very-very-very-very-very-very-long-class-name-other;
+@custom-selector :--enter :hover, :focus;
+@custom-selector :--visible :global.visible;
+@custom-selector :--icon i[class^='icon-'], i[class*=' icon-'];
+@custom-selector :--placeholder :placehoder-shown, ::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder;
+@custom-selector :--enter :matches(:hover, :focus, :active);

tests/format/css/atrule/debug.css

@@ -0,0 +1,22 @@
+@debug 10em + 12em;
+@debug 10em+12em;
+@debug  10em  +  12em  ;
+@debug 10em
+    +
+    12em
+    ;
+@debug
+10em
++
+12em
+;
+@debug
+
+10em
+
++
+
+12em
+
+;
+@debug $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var;

tests/format/css/atrule/each.css

@@ -0,0 +1,217 @@
+@each $animal in puma, sea-slug, egret, salamander {}
+@each $animal in puma,sea-slug,egret,salamander{}
+@each  $animal  in  puma  ,  sea-slug  ,  egret  ,  salamander  {}
+@each $animal in
+    puma, sea-slug, egret, salamander {}
+@each
+    $animal
+    in
+    puma
+    ,
+    sea-slug
+    ,
+    egret
+    ,
+    salamander
+    {
+    }
+@each
+$animal
+in
+puma
+,
+sea-slug
+,
+egret
+,
+salamander
+{
+}
+@each
+
+$animal
+
+in
+
+puma
+
+,
+
+sea-slug
+
+,
+
+egret
+
+,
+
+salamander
+
+{
+
+}
+@each $animal in ((puma), (sea-slug), (egret), (salamander)) {}
+@each $animal in((puma),(sea-slug),(egret),(salamander)){}
+@each  $animal  in  (  (  puma  )  ,  (  sea-slug  )  ,  (  egret  )  ,  (  salamander  )  )  {}
+@each $animal
+    in ((puma), (sea-slug), (egret), (salamander)) {}
+@each
+    $animal
+    in (
+        (puma),
+        (sea-slug),
+        (egret),
+        (salamander)
+    ) {  }
+@each
+    $animal
+    in
+    (
+    (
+    puma
+    )
+    ,
+    (
+    sea-slug
+    )
+    ,
+    (
+    egret
+    )
+    ,
+    (
+    salamander
+    )
+    )
+    {
+    }
+@each
+
+    $animal
+
+    in
+
+    (
+
+    (
+
+    puma
+
+    )
+
+    ,
+
+    (
+
+    sea-slug
+
+    )
+
+    ,
+
+    (
+
+    egret
+
+    )
+
+    ,
+
+    (
+
+    salamander
+
+    )
+
+    )
+
+    {
+
+    }
+@each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {}
+@each $animal,$color,$cursor in (puma,black,default),(sea-slug,blue,pointer),(egret,white,move){}
+@each $animal, $color, $cursor in
+    (puma, black, default),
+    (sea-slug, blue, pointer),
+    (egret, white, move) {}
+@each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var in puma, sea-slug, egret, salamander {}
+@each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {}
+@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {}
+@each $element,$size in(h1:20px,h2:16px,h3:14px){}
+@each  $element  ,  $size  in  (  h1  :  20px  ,  h2  :  16px  ,  h3  :  14px  )  {}
+@each $element,
+    $size in (h1: 20px, h2: 16px, h3: 14px) {}
+@each
+    $element,
+    $size
+    in
+    (
+    h1
+    :
+    20px
+    ,
+    h2
+    :
+    16px
+    ,
+    h3
+    :
+    14px
+    )
+    {
+    }
+@each
+$element,
+$size
+in
+(
+h1
+:
+20px
+,
+h2
+:
+16px
+,
+h3
+:
+14px
+)
+{
+}
+@each
+$element,
+
+$size
+
+in
+
+(
+
+h1
+
+:
+
+20px
+
+,
+
+h2
+
+:
+
+16px
+
+,
+
+h3
+
+:
+
+14px
+
+)
+
+{
+
+}

tests/format/css/atrule/extend.css

@@ -0,0 +1,151 @@
+.master {
+    color:  black;
+    font-size: 12px;
+}
+.emphasis {
+    @extend .master;
+    font-weight: bold;
+}
+.emphasis {
+@extend .master;
+font-weight: bold;
+}
+.emphasis {
+    @extend  .master ;
+    font-weight: bold;
+}
+.emphasis {
+    @extend   .master  ;
+    font-weight: bold;
+}
+.emphasis
+{
+@extend
+.master
+;
+font-weight
+:
+bold
+;
+}
+.emphasis
+
+{
+
+@extend
+
+.master
+
+;
+
+font-weight
+
+:
+
+bold
+
+;
+
+}
+%message-shared {
+    border: 1px solid #ccc;
+    padding: 10px;
+    color: #333;
+}
+.message {
+    @extend %message-shared;
+}
+.message {
+@extend %message-shared;
+}
+.message {
+    @extend  %message-shared ;
+}
+.message {
+    @extend   %message-shared  ;
+}
+.message {
+@extend
+%message-shared;
+}
+.message {
+
+@extend
+
+%message-shared;
+
+}
+a.important {
+    @extend .notice !optional;
+}
+a.important {
+@extend .notice !optional;
+}
+a.important {
+    @extend  .notice !optional ;
+}
+a.important {
+    @extend  .notice  !optional  ;
+}
+a.important
+{
+@extend
+.notice
+!optional
+;
+}
+a.important
+
+{
+
+@extend
+
+.notice
+
+!optional
+
+;
+
+}
+.message-error {
+    @extend .message, .important;
+}
+.message-error {
+    @extend .message , .important ;
+}
+.message-error {
+    @extend   .message  ,  .important  ;
+}
+.message-error {
+    @extend .message,
+        .important;
+}
+.message-error {
+    @extend
+        .message,
+        .important;
+}
+.message-error
+{
+@extend
+.message
+,
+.important
+;
+}
+.message-error
+
+{
+
+@extend
+
+.message
+
+,
+
+.important;
+
+}
+.message-error {
+    @extend .very-very-very-very-very-very-very-very-very-very-very-very-very-long-selector, .very-very-very-very-very-very-very-very-very-very-very-very-very-long-selector;
+}

tests/format/css/atrule/font-face.css

@@ -0,0 +1,89 @@
+@font-face {
+    font-family: "Open Sans";
+    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+}
+@font-face {
+font-family: "Open Sans";
+src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+}
+@font-face{
+    font-family: "Open Sans";
+    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+}
+@font-face  {
+    font-family: "Open Sans";
+    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+}
+@font-face
+{
+font-family
+:
+"Open Sans"
+;
+src
+:
+url(
+"/fonts/OpenSans-Regular-webfont.woff2"
+)
+format(
+"woff2"
+)
+,
+url(
+"/fonts/OpenSans-Regular-webfont.woff"
+)
+format(
+"woff"
+)
+;
+}
+@font-face
+
+{
+
+font-family
+
+:
+
+"Open Sans"
+
+;
+
+src
+
+:
+
+url(
+
+"/fonts/OpenSans-Regular-webfont.woff2"
+
+)
+
+format(
+
+"woff2"
+
+)
+
+,
+
+url(
+
+"/fonts/OpenSans-Regular-webfont.woff"
+
+)
+
+format(
+
+
+"woff"
+
+)
+
+;
+
+}

tests/format/css/atrule/font-feature-values.css

@@ -0,0 +1,52 @@
+@font-feature-values Font One {
+    @styleset {
+        nice-style: 12;
+    }
+}
+@font-feature-values Font One {
+@styleset {
+nice-style: 12;
+}
+}
+@font-feature-values Font One{
+    @styleset{
+        nice-style: 12;
+    }
+}
+@font-feature-values  Font One  {
+    @styleset  {
+        nice-style: 12;
+    }
+}
+@font-feature-values
+Font One
+{
+@styleset
+{
+nice-style
+:
+12
+;
+}
+}
+
+@font-feature-values
+
+Font One
+
+{
+
+@styleset
+{
+
+nice-style
+
+:
+
+12
+
+;
+
+}
+
+}

tests/format/css/atrule/for.css

@@ -0,0 +1,43 @@
+@for $i from 1 through 8 {}
+@for $i from 1 through 8{}
+@for  $i  from  1  through  8  {}
+@for  $i
+from
+1
+through
+8
+{}
+@for
+$i
+from
+1
+through
+8
+{}
+@for
+$i
+from
+1
+through
+8
+{}
+@for
+
+$i
+
+from
+
+1
+
+through
+
+8
+
+{}
+@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from 1 through 5 {}
+@for $i from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through 5 {}
+@for $i from 1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
+@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
+@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
+@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($var1 + $var1) through ($var-2 + $var-2) {}
+@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1) through ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2) {}

tests/format/css/atrule/function.css

@@ -0,0 +1,88 @@
+@function func($arg, $arg1, $arg2: 10, $args...) {
+    @return "Func";
+}
+@function func($arg,$arg1,$arg2:10,$args...){
+    @return "Func";
+}
+@function func ( $arg , $arg1 , $arg2 : 10 , $args ... ) {
+    @return "Func";
+}
+@function  func  (  $arg  ,  $arg1  ,  $arg2  :  10  ,  $args  ...  )  {
+    @return "Func";
+}
+@function func(
+    $arg,
+    $arg1,
+    $arg2: 10,
+    $args...
+)  {
+    @return "Func";
+}
+@function
+    func(
+        $arg,
+        $arg1,
+        $arg2: 10,
+        $args...
+    )  {
+    @return "Func";
+}
+@function
+func
+(
+$arg
+,
+$arg1
+,
+$arg2
+:
+10
+,
+$args
+...
+)
+{
+@return
+"Func"
+;
+}
+@function
+
+func
+
+(
+
+$arg
+
+,
+
+$arg1
+
+,
+
+$arg2
+
+:
+
+10
+
+,
+
+$args
+
+...
+
+)
+
+{
+
+@return
+
+"Func"
+
+;
+
+}
+@function func($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-args...) {
+    @return "Func";
+}

tests/format/css/atrule/if-else.css

@@ -0,0 +1,145 @@
+@if $media == phonePortrait {
+    $k: .15625;
+} @else if $media == phoneLandscape {
+    $k: .08803;
+} @else if $media == tabletPortrait {
+    $k: .065106;
+}
+p {
+    @if $type == ocean {}
+    @if $type==ocean{}
+    @if  $type  ==  ocean  {}
+    @if $type
+        == ocean {}
+    @if
+    $type
+    ==
+    ocean
+    {
+    }
+    @if
+
+    $type
+
+    ==
+
+    ocean
+
+    {
+
+    }
+    @if (($type) == (ocean)) {}
+    @if (($type)==(ocean)){}
+    @if  (  (  $type  )  ==  (  ocean  )  )  {}
+    @if (($type)
+        == (ocean)) {}
+    @if
+    (
+    (
+    $type
+    )
+    ==
+    (
+    ocean
+    )
+    )
+    {
+    }
+    @if
+
+    (
+
+    (
+
+    $type
+
+    )
+
+    ==
+
+    (
+
+    ocean
+
+    )
+
+    )
+
+    {
+
+    }
+    @if $type == ocean {
+        color: blue;
+    } @else if $type == matador {
+        color: red;
+    } @else if $type == monster {
+        color: green;
+    } @else {
+        color: black;
+    }
+    @if $type == ocean {
+    } @else if $type == matador {
+    }
+    @if $type==ocean{}@else if $type==matador{}
+    @if  $type  ==  ocean  {  }  @else  if  $type  ==  matador  {  }
+    @if $type == ocean {}
+    @else if $type == matador {}
+    @if
+        $type == ocean {}
+    @else if
+        $type == matador {}
+    @if
+        $type
+        ==
+        ocean
+        {
+        }
+    @else
+        if
+        $type
+        ==
+        matador
+        {
+        }
+    @if
+
+        $type
+
+        ==
+
+        ocean
+
+        {
+
+        }
+
+    @else
+
+        if
+
+        $type
+
+        ==
+
+        matador
+
+        {
+
+        }
+    @if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
+        color: blue;
+    } @else if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
+        color: red;
+    } @else if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
+        color: green;
+    } @else {
+        color: black;
+    }
+    @if $very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
+    @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
+    @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
+    @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {}
+    @if (str-slice($item, 0, 1) == ":") {}
+    @if (str-slice($item, 0, 3) == " : ") {}
+    @if ($type == ocean) {} @else if ($type == matador) {} @else {}
+}

tests/format/css/atrule/import.css

@@ -0,0 +1,92 @@
+@import url("fineprint.css") print;
+@import url("bluish.css") projection, tv;
+@import 'custom.css';
+@import url("chrome://communicator/skin/");
+@import "common.css" screen, projection;
+@import "common.css" screen projection;
+@import url('landscape.css') screen and (orientation:landscape);
+
+@import (multiple) "foo.less";
+
+/* This isn't valid CSS, SCSS or Less, but we should be lenient and make sure
+/* that nothing is lost when printing. */
+@import "one" two "three";
+
+#main {
+    @import "example";
+}
+#main {
+@import "example";
+}
+#main {
+    @import "example" ;
+}
+#main {
+    @import  "example"  ;
+}
+#main {
+    @import
+        "example";
+}
+#main
+{
+@import
+"example";
+}
+#main
+
+{
+
+@import
+
+"example";
+
+}
+
+@import "test.less" {}
+@import "test.less" {
+    a: b;
+    c: d;
+}
+
+@import url('foo');
+$dir: 'fonts';
+
+@import url("foo.css");
+@import url('foo.css');
+@import  url("foo.css");
+@import   url("foo.css");
+@import url("fineprint.css")print;
+@import url("fineprint.css") print;
+@import url("fineprint.css")  print;
+@import url("fineprint.css")
+  print;
+@import url("bluish.css") projection,tv;
+@import url("bluish.css") projection, tv;
+@import url("bluish.css") projection ,tv;
+@import url("bluish.css") projection , tv;
+@import url("bluish.css") projection  ,  tv;
+@import url("bluish.css")
+  projection,
+  tv;
+@import url("very-very-very-very-very-very-very-very-very-very-long-name.css") projection,tv;
+@import url("very-very-very-very-very-very-very-very-very-very-long-name.css") projection tv;
+@import url('landscape.css') screen and (orientation:landscape);
+@import "rounded-corners", "text-shadow";
+@import 'rounded-corners', 'text-shadow';
+$family: unquote("Droid+Sans");
+@import url("http://fonts.googleapis.com/css?family=#{$family}");
+@import url( "foo.css");
+@import url("foo.css" );
+@import url( "foo.css" );
+@import url(  "foo.css"  );
+@import url("foo bar baz.css");
+@import url(  "foo bar baz.css"  );
+@import url("foo  bar  baz.css");
+@import url(
+"foo.css"
+);
+@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600';
+@import url(
+"foo.css,800"
+);

tests/format/css/atrule/include.css

@@ -0,0 +1,119 @@
+@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
+@include mix(1px,2px,$arg2:10,2px 4px 6px);
+@include mix ( 1px , 2px , $arg2 : 10 , 2px 4px 6px );
+@include mix  (  1px  ,  2px  , $arg2  :  10  ,  2px  4px  6px  );
+@include mix(
+    1px,
+    2px,
+    $arg2: 10,
+    2px  4px  6px
+);
+@include
+mix(
+    1px,
+    2px,
+    $arg2: 10,
+    2px  4px  6px
+);
+@include
+mix
+(
+1px
+,
+2px
+,
+$arg2
+:
+10
+,
+2px
+4px
+6px
+)
+;
+@include
+
+mix
+
+(
+
+1px
+
+,
+
+2px
+
+,
+
+$arg2
+
+:
+
+10
+
+,
+
+2px
+
+4px
+
+6px
+
+)
+
+;
+@include mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg: 1px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1: 2px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, 2px 4px 6px);
+a {
+    @include global-variable-overriding;
+    @include mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg: 1px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1: 2px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, 2px 4px 6px);
+    @include apply-to-ie6-only {}
+    @include apply-to-ie6-only{}
+    @include apply-to-ie6-only
+        {}
+    @include
+        apply-to-ie6-only
+        {
+        }
+    @include
+
+        apply-to-ie6-only
+
+        {
+
+        }
+}
+
+a {
+@include section-type-1(
+$header: (margin: 0 0 $margin-base, text-align: left),
+$decoration: (type: base, margin: 0 auto -1px 0, primary-color: $brand-primary, secondary-color: $gray-light),
+$title: (margin: 0 0 $margin-small, color: false, font-size: $font-size-h3, font-weight: false, line-height: $line-height-h3)
+);
+}
+
+a {
+@include item-spotlight-properties-transition(
+"-title",
+(box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15))
+);
+}
+
+a {
+@include item-spotlight-properties-transition(
+"-title",
+(
+box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
+border-color: $brand-primary
+)
+);
+}
+
+a {
+@include item-spotlight-properties-transition(
+"-title",
+(
+box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
+border-color: $very-very-very-very-very-very-very-very-very-very-very-very-very-long-value
+)
+);
+}

tests/format/css/atrule/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname, ["css"]);

tests/format/css/atrule/keyframes.css

@@ -0,0 +1,226 @@
+@keyframes identifier {
+  0% {
+    top: 0;
+    left: 0;
+  }
+  30% {
+    top: 50px;
+  }
+  68%,
+  72% {
+    left: 50px;
+  }
+  100% {
+    top: 100px;
+    left: 100%;
+  }
+}
+@keyframes identifier {
+0%{top:0;left:0;}
+30%{top: 50px;}
+68%,72%{left: 50px;}
+100%{top: 100px; left: 100%;}
+}
+@keyframes identifier{
+    0% {
+        top:0;
+        left:0;
+    }
+    30% {
+        top: 50px;
+    }
+    68%, 72% {
+        left: 50px;
+    }
+    100% {
+        top: 100px;
+        left: 100%;
+    }
+}
+@keyframes  identifier  {
+    0% {
+        top:0;
+        left:0;
+    }
+    30% {
+        top: 50px;
+    }
+    68%, 72% {
+        left: 50px;
+    }
+    100% {
+        top: 100px;
+        left: 100%;
+    }
+}
+@keyframes
+identifier
+{
+0%
+{
+top
+:
+0;
+left
+:
+0
+;
+}
+30%
+{
+top
+:
+50px
+;
+}
+68%
+,
+72%
+{
+left
+:
+50px
+;
+}
+100%
+{
+top
+:
+100px
+;
+left
+:
+100%
+;
+}
+}
+@keyframes
+
+identifier
+
+{
+
+0%
+
+{
+
+top
+
+:
+
+0
+
+;
+
+left
+
+:
+
+0
+
+;
+
+}
+
+30%
+
+{
+
+top
+
+:
+
+50px
+
+;
+
+}
+
+68%
+
+,
+
+72%
+
+{
+
+left
+
+:
+
+50px
+
+;
+
+}
+
+100%
+
+{
+
+top
+
+:
+
+100px
+
+;
+
+left
+
+:
+
+100%
+
+;
+
+}
+
+}
+@keyframes identifier {
+  from {
+    margin-top: 50px;
+  }
+  to {
+    margin-top: 100px;
+  }
+}
+@keyframes
+identifier
+{
+from
+{
+margin-top: 50px;
+}
+to
+{
+margin-top: 100px;
+}
+}
+@keyframes
+
+identifier
+
+{
+
+from
+
+{
+
+margin-top: 50px;
+
+}
+
+to
+
+{
+
+margin-top: 100px;
+
+}
+
+}
+@-webkit-keyframes identifier {
+  0%   { opacity: 0; top: 4rem; }
+  100% { opacity: 1; top: 0; }
+}

tests/format/css/atrule/media.css

@@ -0,0 +1,189 @@
+@media screen and (min-width: 480px) {}
+@media  screen and (min-width: 480px) {}
+@MEDIA screen and (min-width: 480px) {}
+@MEDIA screen  and (min-width: 480px) {}
+@media screen and  (min-width: 480px) {}
+@media screen and (min-width: 480px) {}
+@media screen and (min-width :480px) {}
+@media screen and (min-width : 480px) {}
+@media screen and (min-width  :  480px) {}
+@media
+  screen
+  and
+  (min-width
+  :
+  480px) {}
+@media screen and ( min-width: 480px) {}
+@media screen and (min-width: 480px ) {}
+@media screen and ( min-width: 480px ) {}
+@media screen and (  min-width:  480px  ) {}
+@media not screen and (color), print and (color) { }
+@media not screen and (color) , print and (color) { }
+@media not screen and (color),print and (color) { }
+@media not screen and (color) , print and (color) { }
+@media not screen and (color)  ,  print and (color) { }
+@media not screen and ( color), print and (color) { }
+@media not screen and (color ), print and (color) { }
+@media not screen and ( color ), print and (color) { }
+@media not screen and (  color  ), print and (color) { }
+@media (--small-viewport) {}
+@media
+(
+--small-viewport
+)
+{
+}
+@media
+
+(
+
+--small-viewport
+
+)
+
+{
+
+}
+
+.screen-color {
+    @media screen {
+        color: green;
+
+        @media (min-width: 768px) {
+            color: red;
+        }
+    }
+    @media tv {
+        color: black;
+    }
+}
+.screen-color {
+@media screen {
+color: green;
+
+@media (min-width: 768px) {
+color: red;
+}
+}
+@media tv {
+color: black;
+}
+}
+.screen-color{
+    @media screen{
+        color: green;
+
+        @media (min-width: 768px){
+            color: red;
+        }
+    }
+    @media tv{
+        color: black;
+    }
+}
+.screen-color  {
+    @media screen  {
+        color: green;
+
+        @media (min-width: 768px)  {
+            color: red;
+        }
+    }
+    @media tv  {
+        color: black;
+    }
+}
+.screen-color
+{
+@media
+screen
+{
+color
+:
+green
+;
+@media
+(
+min-width
+:
+768px
+)
+{
+color
+:
+red
+;
+}
+}
+@media
+tv
+{
+color
+:
+black
+;
+}
+}
+.screen-color
+
+{
+
+@media
+
+screen
+
+{
+
+color
+
+:
+
+green
+
+;
+
+@media
+
+(
+
+min-width
+
+:
+
+768px
+
+)
+
+{
+
+color
+
+:
+
+red
+
+;
+
+}
+
+}
+
+@media
+
+tv
+
+{
+
+color
+
+:
+
+black
+
+;
+
+}
+
+}
+
+@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3/2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {}

tests/format/css/atrule/mixin.css

@@ -0,0 +1,107 @@
+@mixin clearfix {}
+@mixin clearfix{}
+@mixin  clearfix  {}
+@mixin clearfix
+  {}
+@mixin
+  clearfix
+  {}
+@mixin
+clearfix
+{
+}
+@mixin
+
+clearfix
+
+{
+
+}
+
+@mixin mix($arg, $arg1, $arg2: 10, $args...) {}
+@mixin mix($arg,$arg1,$arg2:10,$args...){}
+@mixin mix ( $arg , $arg1 , $arg2 : 10 , $args ... ) {}
+@mixin  mix  (  $arg  ,  $arg1  ,  $arg2  :  10  ,  $args  ...  )  {}
+@mixin mix(
+    $arg,
+    $arg1,
+    $arg2: 10,
+    $args...
+) {}
+@mixin
+mix(
+    $arg,
+    $arg1,
+    $arg2: 10,
+    $args...
+    ) {}
+@mixin
+mix
+(
+$arg
+,
+$arg1
+,
+$arg2
+:
+10
+,
+$args
+...
+)
+{
+}
+@mixin
+
+mix
+
+(
+
+$arg
+
+,
+
+$arg1
+
+,
+
+$arg2
+
+:
+
+10
+
+,
+
+$args
+
+...
+
+)
+
+{
+}
+@mixin mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-args...) {}
+@mixin component($conf: ()) {}
+@mixin component($conf: ( )) {}
+@mixin button-variant($hover-background: darken($background, 7.5%)) {}
+@mixin button-variant( $hover-background : darken( $background , 7.5% ) ) {}
+@mixin button-variant($hover-background:darken($background,7.5%)) {}
+@mixin button-variant(
+    $hover-background: darken($background, 7.5%)
+) {}
+@mixin
+button-variant(
+$hover-background
+:
+darken(
+$background
+,
+7.5%
+)
+)
+{}
+@mixin button-variant($foo: "...") {}
+@mixin button-variant($foo: " ... ") {}
+@mixin button-variant($foo: "  ...  ") {}
+@mixin sexy-border($color, $width, $foo: (color: red)) {}

tests/format/css/atrule/namespaces.css

@@ -0,0 +1,42 @@
+@namespace toto "http://toto.example.org";
+@namespace toto url("http://toto.example.org");
+@namespace toto "http://toto.example.org" ;
+@namespace  toto  "http://toto.example.org"  ;
+@namespace
+toto
+"http://toto.example.org"
+;
+@namespace
+
+toto
+
+"http://toto.example.org"
+
+;
+@namespace very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-namespace "http://toto.example.org";
+@namespace
+very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-namespace
+"http://toto.example.org"
+;
+@namespace
+
+very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-namespace
+
+"http://toto.example.org"
+
+;
+@namespace "http://example.com/foo";
+@namespace url("http://example.com/foo");
+@namespace url("http://example.com/foo") ;
+@namespace  url("http://example.com/foo")  ;
+@namespace
+url("http://example.com/foo");
+@namespace
+
+url("http://example.com/foo");
+@namespace url("http://example.com/foo/very/very/very/very/very/very/very/very/very/very/very/very/very/very");
+@namespace
+url("http://example.com/foo/very/very/very/very/very/very/very/very/very/very/very/very/very/very/very");
+@namespace
+
+url("http://example.com/foo/very/very/very/very/very/very/very/very/very/very/very/very/very/very/very");

tests/format/css/atrule/page.css

@@ -0,0 +1,69 @@
+@page {
+    margin: 1cm;
+}
+@page {
+margin: 1cm;
+}
+@page{
+margin: 1cm;
+}
+@page  {
+    margin: 1cm;
+}
+@page
+{
+margin
+:
+1cm
+;
+}
+@page
+
+{
+
+margin
+:
+
+1cm
+
+;
+
+}
+@page :first {
+    margin: 2cm;
+}
+@page :first {
+margin: 2cm;
+}
+@page :first{
+    margin: 2cm;
+}
+@page  :first  {
+    margin: 2cm;
+}
+@page
+:first
+{
+margin
+:
+2cm
+;
+}
+@page
+
+:first
+
+{
+
+margin
+
+:
+
+2cm
+
+;
+
+}
+@page vertical {
+    size: A4 portrait;
+}

tests/format/css/atrule/return.css

@@ -0,0 +1,129 @@
+@function grid-width($n) {
+    @return $n * $grid-width + ($n - 1) * $gutter-width / 10;
+}
+@function grid-width($n) {
+@return $n * $grid-width + ($n - 1) * $gutter-width / 10;
+}
+@function grid-width($n) {
+@return $n*$grid-width+($n-1)*$gutter-width/10;
+}
+@function grid-width($n) {
+    @return $n * $grid-width + ( $n - 1 ) * $gutter-width / 10 ;
+}
+@function grid-width($n) {
+    @return  $n   *  $grid-width  +  (  $n  -  1  )  *  $gutter-width  /  10  ;
+}
+@function grid-width($n) {
+    @return $n
+        *
+        $grid-width
+        + (
+            $n
+            -
+            1
+        )
+        *
+        $gutter-width
+        /
+        10
+        ;
+}
+@function grid-width($n) {
+    @return
+        $n
+        *
+        $grid-width
+        + (
+            $n
+            -
+            1
+        )
+        *
+        $gutter-width
+        /
+        10
+        ;
+}
+@function
+grid-width(
+$n
+)
+{
+@return
+$n
+*
+$grid-width
++
+(
+$n
+-
+1
+)
+*
+$gutter-width
+/
+10
+;
+}
+@function
+
+grid-width(
+
+$n
+
+)
+
+{
+
+@return
+
+$n
+
+*
+
+$grid-width
+
++
+
+(
+
+$n
+
+-
+
+1
+
+)
+
+*
+
+$gutter-width
+
+/
+
+10
+
+;
+
+}
+@function grid-width($n) {
+    @return $very-very-very-very-very-very-vey-long-var * $very-very-very-very-very-very-vey-long-var + ($very-very-very-very-very-very-vey-long-var - 1) * $very-very-very-very-very-very-vey-long-var;
+}
+@function extend($obj, $ext-obj) {
+    @return map-merge($obj, $ext-obj);
+}
+@function extend($obj, $ext-obj) {
+    @return map-merge( $obj , $ext-obj ) ;
+}
+@function extend($obj, $ext-obj) {
+    @return map-merge($obj,$ext-obj);
+}
+@function extend($obj, $ext-obj) {
+    @return
+    map-merge(
+    $obj
+    ,
+    $ext-obj
+    )
+    ;
+}

tests/format/css/atrule/supports.css

@@ -0,0 +1,383 @@
+@supports (transform-origin: 5% 5%) {}
+@supports (transform-origin:5% 5%) {}
+@supports ( transform-origin : 5% 5% ) {}
+@supports (  transform-origin  :  5%  5%  ) {}
+@supports
+    (transform-origin: 5% 5%) {}
+@supports
+(transform-origin: 5% 5%) {}
+@supports
+(
+transform-origin
+:
+5%
+5%
+) {}
+@supports
+
+(
+
+transform-origin
+
+:
+
+5%
+
+5%
+
+)
+
+{}
+@supports (very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop: very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value) {}
+@supports
+  (very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop: very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value) {}
+@supports
+(
+very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop
+:
+very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value
+) {}
+@supports
+
+(
+
+very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop
+
+:
+
+very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value
+
+)
+
+{}
+@supports not(transform-origin: 10em 10em 10em) {}
+@supports not (transform-origin: 10em 10em 10em) {}
+@supports  not  ( transform-origin : 10em 10em 10em ) {}
+@supports   not   (  transform-origin  :  10em  10em  10em  ) {}
+@supports not
+  (transform-origin: 10em 10em 10em) {}
+@supports
+    not (transform-origin: 10em 10em 10em) {}
+@supports
+  not
+  (transform-origin: 10em 10em 10em) {}
+@supports
+not
+(
+transform-origin
+:
+10em
+10em
+10em
+) {}
+@supports
+
+not
+
+(
+
+transform-origin
+
+:
+
+10em
+
+10em
+
+10em
+
+)
+
+{}
+@supports not (very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop: very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value) {}
+@supports
+  not (very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop: very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value) {}
+@supports not
+  (very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop: very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value) {}
+@supports
+not
+(
+very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop
+:
+very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value
+) {}
+@supports
+
+not
+
+(
+
+very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop
+
+:
+
+very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value
+
+)
+
+{}
+@supports not (not (transform-origin: 2px)) {}
+@supports not(not(transform-origin:2px)) {}
+@supports not ( not ( transform-origin : 2px ) ) {}
+@supports  not  (  not  (  transform-origin  :  2px  )  ) {}
+@supports not
+  (not (transform-origin: 2px)) {}
+@supports not
+  (
+    not (transform-origin: 2px)
+  ) {}
+@supports
+not
+(
+not
+(
+transform-origin
+:
+2px
+)
+) {}
+@supports
+
+not
+
+(
+
+not
+
+(
+
+transform-origin
+
+:
+
+2px
+
+)
+
+)
+
+{}
+@supports (display: flexbox) and (not (display: inline-grid)) {}
+@supports (display: table-cell) and (display: list-item) {}
+@supports ( display : table-cell ) and ( display : list-item ) {}
+@supports  (  display  :  table-cell  )  and  (  display  :  list-item  ) {}
+@supports
+  (display: table-cell) and (display: list-item) {}
+@supports (display: table-cell) and
+  (display: list-item) {}
+@supports (display: table-cell)
+  and (display: list-item) {}
+@supports
+(
+display
+:
+table-cell
+)
+and
+(
+display
+:
+list-item
+) {}
+@supports
+
+(
+
+display
+
+:
+
+table-cell
+
+)
+
+and
+
+(
+
+display
+
+:
+
+list-item
+
+)
+
+{}
+@supports (display: table-cell) and (display: list-item) and (display: run-in) {}
+@supports (display: table-cell) and ((display: list-item) and (display: run-in)) {}
+@supports
+  (display: table-cell) and ((display: list-item) and (display: run-in)) {}
+@supports (display: table-cell)
+  and ((display: list-item)
+  and (display: run-in)) {}
+@supports (display: table-cell) and
+  ((display: list-item) and
+  (display: run-in)) {}
+@supports
+(
+display
+:
+table-cell
+)
+and
+(
+(
+display
+:
+list-item
+)
+and
+(
+display
+:
+run-in
+)
+) {}
+@supports
+
+(
+
+display
+
+:
+
+table-cell
+
+)
+
+and
+
+(
+
+(
+
+display
+
+:
+
+list-item
+
+)
+
+and
+
+(
+
+display
+
+:
+
+run-in
+
+)
+
+)
+
+{}
+@supports (transform-style: preserve) or (-moz-transform-style: preserve) {}
+@supports (transform-style: preserve) or (-moz-transform-style: preserve) or (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {}
+@supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or ((-o-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {}
+@supports not((text-align-last:justify)or(-moz-text-align-last:justify)){ }
+@supports not((text-align-last:justify)and(-moz-text-align-last:justify)){ }
+@supports (--foo:green) {}
+
+@supports selector(:after) {}
+@supports selector(:focus) {}
+@supports selector(:focus-visible) {}
+@supports selector(A>B) {}
+@supports selector(A       >      B) {}
+@supports selector(A       >
+     B) {}
+@supports selector(A
+>
+B
+) {}
+@supports selector(
+A
+<
+B
+) {}
+@supports selector(.a:not(.b)){}
+@supports selector(:not(.b)){}
+@supports not selector(:after){
+}
+@supports (--foo:green) and selector(:after){
+}
+@supports selector(:before) and selector(:focus-visible){
+}
+@supports selector(:not(.a,.b)) and selector(:focus-visible){
+}
+@supports selector(.a,.b){
+
+}
+@supports selector(){
+
+}
+
+@supports selector(:focus-visible) {
+  button:focus {
+    outline: none;
+  }
+
+  button:focus-visible {
+    outline: 2px solid orange;
+  }
+}
+
+@supports selector(:not(.a,.b)) {
+}
+
+@supports selector(:not(.a,.b), :not(.b,.c)) {
+}
+@supports selector(:not(.a,.b), .b, .c) {
+}
+
+@supports selector(
+  :not(
+  .a,.b)
+  ) {
+}
+@supports selector(
+  :not(
+  .a,.b
+  )
+  ) {
+}
+@supports selector(.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas,
+.asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas .asdasldaskdhjkashdahsdkjahskdjhakjsdkjahsdhkas){
+}
+@supports selector(.parent>.child ){
+}
+@supports selector(> .child-one){
+}
+@supports selector(.parent  ~  .child){
+}
+@supports selector(ns|* ){
+}
+@supports selector(svg|a ){
+}
+@supports selector(|B ){
+}
+@supports selector(*|*){
+}
+@supports selector(|*){
+}
+@supports selector(.a,.b,:not(asdasldaskdhjkashdahsdkjahskdjhakj,asdasldaskdhjkashdahsdkjahskdjhakj)){
+}
+@supports not (selector(:before) or not (not (selector(:before)))) {
+}
+@supports selector(selector(:focus-visible)) {}
+@supports selector(:::selector(:focus-visible)) {}
+@supports selector(--selector(:focus-visible)) {}
+@supports not (transform-origin: 10em 10em 10em) {}
+@supports not (not (transform-origin: 2px)) {}
+@supports (display: grid) and (not (display: inline-grid)) {}
+@supports (display: table-cell) and (display: list-item) and (display:run-in) {}
+@supports (display: table-cell) and ((display: list-item) and (display:run-in)) {}
+@supports (transform-style: preserve) or (-moz-transform-style: preserve) {}
+@supports (transform-style: preserve) or (-moz-transform-style: preserve) or
+          (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {}
+
+@supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or
+          ((-o-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {}

tests/format/css/atrule/viewport.css

@@ -0,0 +1,53 @@
+@viewport {
+  min-width: 640px;
+  max-width: 800px;
+}
+
+@viewport {
+min-width: 640px;
+max-width: 800px;
+}
+
+@viewport{
+  min-width: 640px;
+  max-width: 800px;
+}
+
+@viewport  {
+  min-width: 640px;
+  max-width: 800px;
+}
+
+@viewport
+{
+min-width
+:
+640px
+;
+max-width
+:
+800px
+;
+}
+
+@viewport
+
+{
+
+min-width
+
+:
+
+640px
+
+;
+
+max-width
+
+:
+
+800px
+
+;
+
+}

tests/format/css/atrule/while.css

@@ -0,0 +1,110 @@
+@while $i > 0 {}
+@while $i>0{}
+@while  $i  >  0  {}
+@while $i
+    >
+    0
+    {}
+@while
+    $i
+    >
+    0
+    {}
+@while
+$i
+>
+0
+{
+}
+@while
+
+$i
+
+>
+
+0
+
+{
+
+}
+@while ($i > 0) {}
+@while ($i>0){}
+@while ( $i > 0 ) {}
+@while  (  $i  >  0  )  {}
+@while (
+    $i > 0
+) {}
+@while
+    ($i > 0) {}
+@while
+(
+$i
+>
+0
+)
+{
+}
+@while
+
+(
+
+$i
+
+>
+
+0
+
+)
+
+{
+
+}
+@while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1 {}
+@while 1 > $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var {}
+@while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var {}
+@while (($i) > (0)) {}
+@while (($i)>(0)){}
+@while  (  (  $i  )  >  (  0  )  )  {}
+@while (($i)
+    >
+    (0)
+) {}
+@while
+(
+(
+$i
+)
+>
+(
+0
+)
+)
+{
+}
+@while
+
+(
+
+(
+
+$i
+
+)
+
+>
+
+(
+
+0
+
+)
+
+)
+
+{
+
+}
+@while ($very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1) {}
+@while (1 > $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var) {}
+@while ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1) {}
+@while ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var) {}

tests/format/css/attribute/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,716 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`custom-selector.css - {"singleQuote":true} format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+singleQuote: true
+                                                                                | printWidth
+=====================================input======================================
+@custom-selector :--icon i[class^='icon-'], i[class*=' icon-'];
+@custom-selector :--icon i[ class ^= 'icon-' ], i[ class *= ' icon-' ];
+@custom-selector
+:--icon
+i[
+class
+^=
+'icon-'
+]
+,
+i[
+class
+*=
+' icon-'
+]
+;
+
+=====================================output=====================================
+@custom-selector :--icon i[class^='icon-'], i[class*=' icon-'];
+@custom-selector :--icon i[class^='icon-'], i[class*=' icon-'];
+@custom-selector :--icon i[class^='icon-'], i[class*=' icon-'];
+
+================================================================================
+`;
+
+exports[`custom-selector.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+@custom-selector :--icon i[class^='icon-'], i[class*=' icon-'];
+@custom-selector :--icon i[ class ^= 'icon-' ], i[ class *= ' icon-' ];
+@custom-selector
+:--icon
+i[
+class
+^=
+'icon-'
+]
+,
+i[
+class
+*=
+' icon-'
+]
+;
+
+=====================================output=====================================
+@custom-selector :--icon i[class^="icon-"], i[class*=" icon-"];
+@custom-selector :--icon i[class^="icon-"], i[class*=" icon-"];
+@custom-selector :--icon i[class^="icon-"], i[class*=" icon-"];
+
+================================================================================
+`;
+
+exports[`insensitive.css - {"singleQuote":true} format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+singleQuote: true
+                                                                                | printWidth
+=====================================input======================================
+input[type="radio" i] {}
+img[alt~="person" i][src*="lorem" i] {}
+section:has(:not([type="radio" i], [type="checkbox" i])) {}
+
+=====================================output=====================================
+input[type='radio' i] {
+}
+img[alt~='person' i][src*='lorem' i] {
+}
+section:has(:not([type='radio' i], [type='checkbox' i])) {
+}
+
+================================================================================
+`;
+
+exports[`insensitive.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+input[type="radio" i] {}
+img[alt~="person" i][src*="lorem" i] {}
+section:has(:not([type="radio" i], [type="checkbox" i])) {}
+
+=====================================output=====================================
+input[type="radio" i] {
+}
+img[alt~="person" i][src*="lorem" i] {
+}
+section:has(:not([type="radio" i], [type="checkbox" i])) {
+}
+
+================================================================================
+`;
+
+exports[`namespaces.css - {"singleQuote":true} format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+singleQuote: true
+                                                                                | printWidth
+=====================================input======================================
+@namespace foo "http://www.example.com";
+[foo|att=val] {}
+[*|att] {}
+[|att] {}
+[att] {}
+
+=====================================output=====================================
+@namespace foo 'http://www.example.com';
+[foo|att='val'] {
+}
+[*|att] {
+}
+[|att] {
+}
+[att] {
+}
+
+================================================================================
+`;
+
+exports[`namespaces.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+@namespace foo "http://www.example.com";
+[foo|att=val] {}
+[*|att] {}
+[|att] {}
+[att] {}
+
+=====================================output=====================================
+@namespace foo "http://www.example.com";
+[foo|att="val"] {
+}
+[*|att] {
+}
+[|att] {
+}
+[att] {
+}
+
+================================================================================
+`;
+
+exports[`quotes.css - {"singleQuote":true} format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+singleQuote: true
+                                                                                | printWidth
+=====================================input======================================
+a[id=test] {}
+a[id="test"] {}
+a[id='test'] {}
+a[id=func("foo")] {}
+a[class="(╯°□°）╯︵ ┻━┻"]{}
+input:not([type="radio"]):not([type="checkbox"]) {}
+input:not([type="radio"], [type="checkbox"]) {}
+section:has(:not([type="radio"], [type="checkbox"])) {}
+
+=====================================output=====================================
+a[id='test'] {
+}
+a[id='test'] {
+}
+a[id='test'] {
+}
+a[id=func('foo')] {
+}
+a[class='(╯°□°）╯︵ ┻━┻'] {
+}
+input:not([type='radio']):not([type='checkbox']) {
+}
+input:not([type='radio'], [type='checkbox']) {
+}
+section:has(:not([type='radio'], [type='checkbox'])) {
+}
+
+================================================================================
+`;
+
+exports[`quotes.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+a[id=test] {}
+a[id="test"] {}
+a[id='test'] {}
+a[id=func("foo")] {}
+a[class="(╯°□°）╯︵ ┻━┻"]{}
+input:not([type="radio"]):not([type="checkbox"]) {}
+input:not([type="radio"], [type="checkbox"]) {}
+section:has(:not([type="radio"], [type="checkbox"])) {}
+
+=====================================output=====================================
+a[id="test"] {
+}
+a[id="test"] {
+}
+a[id="test"] {
+}
+a[id=func("foo")] {
+}
+a[class="(╯°□°）╯︵ ┻━┻"] {
+}
+input:not([type="radio"]):not([type="checkbox"]) {
+}
+input:not([type="radio"], [type="checkbox"]) {
+}
+section:has(:not([type="radio"], [type="checkbox"])) {
+}
+
+================================================================================
+`;
+
+exports[`spaces.css - {"singleQuote":true} format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+singleQuote: true
+                                                                                | printWidth
+=====================================input======================================
+[lang] {}
+[ lang] {}
+[lang ] {}
+[ lang ] {}
+[  lang  ] {}
+[
+lang
+] {}
+span[lang] {}
+span[ lang] {}
+span[lang ] {}
+span[ lang ] {}
+span[  lang  ] {}
+span[lang='pt'] {}
+span[lang ='pt'] {}
+span[lang= 'pt'] {}
+span[lang = 'pt'] {}
+span[lang  =  'pt'] {}
+span[lang='pt' ] {}
+span[lang='pt'  ] {}
+span[
+lang
+=
+'pt'
+] {}
+span[ lang ~= 'en-us' ] {}
+span[  lang  ~=  'en-us'  ] {}
+span[ lang |='zh' ] {}
+span[
+lang
+~=
+'en-us'
+] {}
+a[ href ^= '#' ] {}
+a[ href $= '.cn' ] {}
+a[ href *= 'example' ] {}
+a[
+href
+*=
+'example'
+] {}
+input[ type = 'radio' i ] {}
+input[  type  =  'radio'  i  ] {}
+input[ type ~= 'radio' i ] {}
+input[  type  ~=  'radio'  i  ] {}
+input[
+type
+~=
+'radio'
+i
+] {}
+img[ alt = 'person' ][ src = 'lorem' ] {}
+img[ alt  =  'person' ][ src  =  'lorem' ] {}
+img[ alt ~= 'person' ][ src *= 'lorem' ] {}
+img[  alt  ~=  'person'  ][  src  *=  'lorem'  ] {}
+img[
+alt
+~=
+'person'
+][
+src
+*=
+'lorem'
+] {}
+section:has(:not([type='radio'], [type='checkbox'])) {}
+section:has(:not([type='radio' i], [type='checkbox' i])) {}
+section:has(:not([ type = 'radio' ], [ type = 'checkbox' ])) {}
+section:has(:not([ type = 'radio' i ], [ type = 'checkbox' i ])) {}
+section:has(:not([  type  =  'radio'  ], [  type  =  'checkbox'  ])) {}
+section:has(:not([  type  =  'radio'  i  ], [  type  =  'checkbox'  i  ])) {}
+section:has(:not([
+type
+=
+'radio'
+], [
+type
+=
+'checkbox'
+])) {}
+section:has(:not([
+type
+=
+'radio'
+i
+], [
+type
+=
+'checkbox'
+i
+])) {}
+[foo|att=val] {}
+[ foo | att = val ] {}
+[  foo  |  att  =  val  ] {}
+[
+foo
+|
+att
+=
+val
+] {}
+[*|att] {}
+[ * | att ] {}
+[  *  |  att  ] {}
+[
+*
+|
+att
+] {}
+[|att] {}
+[ | att ] {}
+[  |  att  ] {}
+[
+|
+att
+] {}
+
+=====================================output=====================================
+[lang] {
+}
+[lang] {
+}
+[lang] {
+}
+[lang] {
+}
+[lang] {
+}
+[lang] {
+}
+span[lang] {
+}
+span[lang] {
+}
+span[lang] {
+}
+span[lang] {
+}
+span[lang] {
+}
+span[lang='pt'] {
+}
+span[lang='pt'] {
+}
+span[lang='pt'] {
+}
+span[lang='pt'] {
+}
+span[lang='pt'] {
+}
+span[lang='pt'] {
+}
+span[lang='pt'] {
+}
+span[lang='pt'] {
+}
+span[lang~='en-us'] {
+}
+span[lang~='en-us'] {
+}
+span[lang|='zh'] {
+}
+span[lang~='en-us'] {
+}
+a[href^='#'] {
+}
+a[href$='.cn'] {
+}
+a[href*='example'] {
+}
+a[href*='example'] {
+}
+input[type='radio' i] {
+}
+input[type='radio' i] {
+}
+input[type~='radio' i] {
+}
+input[type~='radio' i] {
+}
+input[type~='radio' i] {
+}
+img[alt='person'][src='lorem'] {
+}
+img[alt='person'][src='lorem'] {
+}
+img[alt~='person'][src*='lorem'] {
+}
+img[alt~='person'][src*='lorem'] {
+}
+img[alt~='person'][src*='lorem'] {
+}
+section:has(:not([type='radio'], [type='checkbox'])) {
+}
+section:has(:not([type='radio' i], [type='checkbox' i])) {
+}
+section:has(:not([type='radio'], [type='checkbox'])) {
+}
+section:has(:not([type='radio' i], [type='checkbox' i])) {
+}
+section:has(:not([type='radio'], [type='checkbox'])) {
+}
+section:has(:not([type='radio' i], [type='checkbox' i])) {
+}
+section:has(:not([type='radio'], [type='checkbox'])) {
+}
+section:has(:not([type='radio' i], [type='checkbox' i])) {
+}
+[foo|att='val'] {
+}
+[foo|att='val'] {
+}
+[foo|att='val'] {
+}
+[foo|att='val'] {
+}
+[*|att] {
+}
+[*|att] {
+}
+[*|att] {
+}
+[*|att] {
+}
+[|att] {
+}
+[|att] {
+}
+[|att] {
+}
+[|att] {
+}
+
+================================================================================
+`;
+
+exports[`spaces.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+[lang] {}
+[ lang] {}
+[lang ] {}
+[ lang ] {}
+[  lang  ] {}
+[
+lang
+] {}
+span[lang] {}
+span[ lang] {}
+span[lang ] {}
+span[ lang ] {}
+span[  lang  ] {}
+span[lang='pt'] {}
+span[lang ='pt'] {}
+span[lang= 'pt'] {}
+span[lang = 'pt'] {}
+span[lang  =  'pt'] {}
+span[lang='pt' ] {}
+span[lang='pt'  ] {}
+span[
+lang
+=
+'pt'
+] {}
+span[ lang ~= 'en-us' ] {}
+span[  lang  ~=  'en-us'  ] {}
+span[ lang |='zh' ] {}
+span[
+lang
+~=
+'en-us'
+] {}
+a[ href ^= '#' ] {}
+a[ href $= '.cn' ] {}
+a[ href *= 'example' ] {}
+a[
+href
+*=
+'example'
+] {}
+input[ type = 'radio' i ] {}
+input[  type  =  'radio'  i  ] {}
+input[ type ~= 'radio' i ] {}
+input[  type  ~=  'radio'  i  ] {}
+input[
+type
+~=
+'radio'
+i
+] {}
+img[ alt = 'person' ][ src = 'lorem' ] {}
+img[ alt  =  'person' ][ src  =  'lorem' ] {}
+img[ alt ~= 'person' ][ src *= 'lorem' ] {}
+img[  alt  ~=  'person'  ][  src  *=  'lorem'  ] {}
+img[
+alt
+~=
+'person'
+][
+src
+*=
+'lorem'
+] {}
+section:has(:not([type='radio'], [type='checkbox'])) {}
+section:has(:not([type='radio' i], [type='checkbox' i])) {}
+section:has(:not([ type = 'radio' ], [ type = 'checkbox' ])) {}
+section:has(:not([ type = 'radio' i ], [ type = 'checkbox' i ])) {}
+section:has(:not([  type  =  'radio'  ], [  type  =  'checkbox'  ])) {}
+section:has(:not([  type  =  'radio'  i  ], [  type  =  'checkbox'  i  ])) {}
+section:has(:not([
+type
+=
+'radio'
+], [
+type
+=
+'checkbox'
+])) {}
+section:has(:not([
+type
+=
+'radio'
+i
+], [
+type
+=
+'checkbox'
+i
+])) {}
+[foo|att=val] {}
+[ foo | att = val ] {}
+[  foo  |  att  =  val  ] {}
+[
+foo
+|
+att
+=
+val
+] {}
+[*|att] {}
+[ * | att ] {}
+[  *  |  att  ] {}
+[
+*
+|
+att
+] {}
+[|att] {}
+[ | att ] {}
+[  |  att  ] {}
+[
+|
+att
+] {}
+
+=====================================output=====================================
+[lang] {
+}
+[lang] {
+}
+[lang] {
+}
+[lang] {
+}
+[lang] {
+}
+[lang] {
+}
+span[lang] {
+}
+span[lang] {
+}
+span[lang] {
+}
+span[lang] {
+}
+span[lang] {
+}
+span[lang="pt"] {
+}
+span[lang="pt"] {
+}
+span[lang="pt"] {
+}
+span[lang="pt"] {
+}
+span[lang="pt"] {
+}
+span[lang="pt"] {
+}
+span[lang="pt"] {
+}
+span[lang="pt"] {
+}
+span[lang~="en-us"] {
+}
+span[lang~="en-us"] {
+}
+span[lang|="zh"] {
+}
+span[lang~="en-us"] {
+}
+a[href^="#"] {
+}
+a[href$=".cn"] {
+}
+a[href*="example"] {
+}
+a[href*="example"] {
+}
+input[type="radio" i] {
+}
+input[type="radio" i] {
+}
+input[type~="radio" i] {
+}
+input[type~="radio" i] {
+}
+input[type~="radio" i] {
+}
+img[alt="person"][src="lorem"] {
+}
+img[alt="person"][src="lorem"] {
+}
+img[alt~="person"][src*="lorem"] {
+}
+img[alt~="person"][src*="lorem"] {
+}
+img[alt~="person"][src*="lorem"] {
+}
+section:has(:not([type="radio"], [type="checkbox"])) {
+}
+section:has(:not([type="radio" i], [type="checkbox" i])) {
+}
+section:has(:not([type="radio"], [type="checkbox"])) {
+}
+section:has(:not([type="radio" i], [type="checkbox" i])) {
+}
+section:has(:not([type="radio"], [type="checkbox"])) {
+}
+section:has(:not([type="radio" i], [type="checkbox" i])) {
+}
+section:has(:not([type="radio"], [type="checkbox"])) {
+}
+section:has(:not([type="radio" i], [type="checkbox" i])) {
+}
+[foo|att="val"] {
+}
+[foo|att="val"] {
+}
+[foo|att="val"] {
+}
+[foo|att="val"] {
+}
+[*|att] {
+}
+[*|att] {
+}
+[*|att] {
+}
+[*|att] {
+}
+[|att] {
+}
+[|att] {
+}
+[|att] {
+}
+[|att] {
+}
+
+================================================================================
+`;

tests/format/css/attribute/custom-selector.css

@@ -0,0 +1,16 @@
+@custom-selector :--icon i[class^='icon-'], i[class*=' icon-'];
+@custom-selector :--icon i[ class ^= 'icon-' ], i[ class *= ' icon-' ];
+@custom-selector
+:--icon
+i[
+class
+^=
+'icon-'
+]
+,
+i[
+class
+*=
+' icon-'
+]
+;

tests/format/css/attribute/insensitive.css

@@ -0,0 +1,3 @@
+input[type="radio" i] {}
+img[alt~="person" i][src*="lorem" i] {}
+section:has(:not([type="radio" i], [type="checkbox" i])) {}

tests/format/css/attribute/jsfmt.spec.js

@@ -0,0 +1,2 @@
+run_spec(__dirname, ["css"]);
+run_spec(__dirname, ["css"], { singleQuote: true });

tests/format/css/attribute/namespaces.css

@@ -0,0 +1,5 @@
+@namespace foo "http://www.example.com";
+[foo|att=val] {}
+[*|att] {}
+[|att] {}
+[att] {}

tests/format/css/attribute/quotes.css

@@ -0,0 +1,8 @@
+a[id=test] {}
+a[id="test"] {}
+a[id='test'] {}
+a[id=func("foo")] {}
+a[class="(╯°□°）╯︵ ┻━┻"]{}
+input:not([type="radio"]):not([type="checkbox"]) {}
+input:not([type="radio"], [type="checkbox"]) {}
+section:has(:not([type="radio"], [type="checkbox"])) {}

tests/format/css/attribute/spaces.css

@@ -0,0 +1,115 @@
+[lang] {}
+[ lang] {}
+[lang ] {}
+[ lang ] {}
+[  lang  ] {}
+[
+lang
+] {}
+span[lang] {}
+span[ lang] {}
+span[lang ] {}
+span[ lang ] {}
+span[  lang  ] {}
+span[lang='pt'] {}
+span[lang ='pt'] {}
+span[lang= 'pt'] {}
+span[lang = 'pt'] {}
+span[lang  =  'pt'] {}
+span[lang='pt' ] {}
+span[lang='pt'  ] {}
+span[
+lang
+=
+'pt'
+] {}
+span[ lang ~= 'en-us' ] {}
+span[  lang  ~=  'en-us'  ] {}
+span[ lang |='zh' ] {}
+span[
+lang
+~=
+'en-us'
+] {}
+a[ href ^= '#' ] {}
+a[ href $= '.cn' ] {}
+a[ href *= 'example' ] {}
+a[
+href
+*=
+'example'
+] {}
+input[ type = 'radio' i ] {}
+input[  type  =  'radio'  i  ] {}
+input[ type ~= 'radio' i ] {}
+input[  type  ~=  'radio'  i  ] {}
+input[
+type
+~=
+'radio'
+i
+] {}
+img[ alt = 'person' ][ src = 'lorem' ] {}
+img[ alt  =  'person' ][ src  =  'lorem' ] {}
+img[ alt ~= 'person' ][ src *= 'lorem' ] {}
+img[  alt  ~=  'person'  ][  src  *=  'lorem'  ] {}
+img[
+alt
+~=
+'person'
+][
+src
+*=
+'lorem'
+] {}
+section:has(:not([type='radio'], [type='checkbox'])) {}
+section:has(:not([type='radio' i], [type='checkbox' i])) {}
+section:has(:not([ type = 'radio' ], [ type = 'checkbox' ])) {}
+section:has(:not([ type = 'radio' i ], [ type = 'checkbox' i ])) {}
+section:has(:not([  type  =  'radio'  ], [  type  =  'checkbox'  ])) {}
+section:has(:not([  type  =  'radio'  i  ], [  type  =  'checkbox'  i  ])) {}
+section:has(:not([
+type
+=
+'radio'
+], [
+type
+=
+'checkbox'
+])) {}
+section:has(:not([
+type
+=
+'radio'
+i
+], [
+type
+=
+'checkbox'
+i
+])) {}
+[foo|att=val] {}
+[ foo | att = val ] {}
+[  foo  |  att  =  val  ] {}
+[
+foo
+|
+att
+=
+val
+] {}
+[*|att] {}
+[ * | att ] {}
+[  *  |  att  ] {}
+[
+*
+|
+att
+] {}
+[|att] {}
+[ | att ] {}
+[  |  att  ] {}
+[
+|
+att
+] {}

tests/format/css/atword/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`atword.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+.test { @color: red; color: @color; }
+
+=====================================output=====================================
+.test {
+  @color: red;
+  color: @color;
+}
+
+================================================================================
+`;

tests/format/css/atword/atword.css

@@ -0,0 +1 @@
+.test { @color: red; color: @color; }

tests/format/css/atword/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname, ["css"]);

tests/format/css/bom/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`bom.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+
+
+/* Block comment */
+
+html {
+  content: "#{1}";
+
+}
+
+=====================================output=====================================
+/* Block comment */
+
+html {
+  content: "#{1}";
+}
+
+================================================================================
+`;

tests/format/css/bom/bom.css

@@ -0,0 +1,8 @@
+
+
+/* Block comment */
+
+html {
+  content: "#{1}";
+
+}

tests/format/css/bom/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname, ["css"]);

tests/format/css/case/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,160 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`case.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+@custom-media --KeepName (MIN-WIDTH: 500PX);
+
+.foo {
+    color: hsl(0.75TURN, 60%, 70%);
+}
+
+p:FIRST-CHILD {
+    color: lime;
+    background-color: black;
+    padding: 5px;
+}
+
+a::AFTER {
+    content: "→";
+}
+
+a:AFTER {
+    content: "→";
+}
+
+::-WEBKIT-PROGRESS-BAR {
+    background-color: orange;
+}
+
+TABLE {}
+
+/* apply a dashed border to all unresolved elements */
+:unresolved {
+    border: 1px dashed red;
+    display: inline-block;
+}
+
+/* x-panel's that are unresolved are red */
+x-panel:unresolved {
+    color: red;
+}
+
+/* once the definition of x-panel is registered, it becomes green */
+x-panel {
+    color: green;
+    display: block;
+    padding: 5px;
+    display: block;
+}
+
+:host {
+    all: initial;
+    display: block;
+    contain: content;
+    text-align: center;
+    background: linear-gradient(to left, hotpink, transparent);
+    max-width: 500px;
+    margin: 0 auto;
+    border-radius: 8px;
+    transition: transform .2s ease-out;
+}
+:host([hidden]) {
+    display: none;
+}
+:host(:hover) {
+    transform: scale(1.1);
+}
+
+=====================================output=====================================
+@custom-media --KeepName (min-width: 500px);
+
+.foo {
+  color: hsl(0.75turn, 60%, 70%);
+}
+
+p:first-child {
+  color: lime;
+  background-color: black;
+  padding: 5px;
+}
+
+a::after {
+  content: "→";
+}
+
+a:after {
+  content: "→";
+}
+
+::-webkit-progress-bar {
+  background-color: orange;
+}
+
+TABLE {
+}
+
+/* apply a dashed border to all unresolved elements */
+:unresolved {
+  border: 1px dashed red;
+  display: inline-block;
+}
+
+/* x-panel's that are unresolved are red */
+x-panel:unresolved {
+  color: red;
+}
+
+/* once the definition of x-panel is registered, it becomes green */
+x-panel {
+  color: green;
+  display: block;
+  padding: 5px;
+  display: block;
+}
+
+:host {
+  all: initial;
+  display: block;
+  contain: content;
+  text-align: center;
+  background: linear-gradient(to left, hotpink, transparent);
+  max-width: 500px;
+  margin: 0 auto;
+  border-radius: 8px;
+  transition: transform 0.2s ease-out;
+}
+:host([hidden]) {
+  display: none;
+}
+:host(:hover) {
+  transform: scale(1.1);
+}
+
+================================================================================
+`;
+
+exports[`custom-selectors.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+@custom-selector :--camelCase .my-css-selector;
+
+:--camelCase {
+  content: red;
+}
+
+=====================================output=====================================
+@custom-selector :--camelCase .my-css-selector;
+
+:--camelCase {
+  content: red;
+}
+
+================================================================================
+`;

tests/format/css/case/case.css

@@ -0,0 +1,62 @@
+@custom-media --KeepName (MIN-WIDTH: 500PX);
+
+.foo {
+    color: hsl(0.75TURN, 60%, 70%);
+}
+
+p:FIRST-CHILD {
+    color: lime;
+    background-color: black;
+    padding: 5px;
+}
+
+a::AFTER {
+    content: "→";
+}
+
+a:AFTER {
+    content: "→";
+}
+
+::-WEBKIT-PROGRESS-BAR {
+    background-color: orange;
+}
+
+TABLE {}
+
+/* apply a dashed border to all unresolved elements */
+:unresolved {
+    border: 1px dashed red;
+    display: inline-block;
+}
+
+/* x-panel's that are unresolved are red */
+x-panel:unresolved {
+    color: red;
+}
+
+/* once the definition of x-panel is registered, it becomes green */
+x-panel {
+    color: green;
+    display: block;
+    padding: 5px;
+    display: block;
+}
+
+:host {
+    all: initial;
+    display: block;
+    contain: content;
+    text-align: center;
+    background: linear-gradient(to left, hotpink, transparent);
+    max-width: 500px;
+    margin: 0 auto;
+    border-radius: 8px;
+    transition: transform .2s ease-out;
+}
+:host([hidden]) {
+    display: none;
+}
+:host(:hover) {
+    transform: scale(1.1);
+}

tests/format/css/case/custom-selectors.css

@@ -0,0 +1,5 @@
+@custom-selector :--camelCase .my-css-selector;
+
+:--camelCase {
+  content: red;
+}

tests/format/css/case/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname, ["css"]);

tests/format/css/character-escaping/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,169 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`character_escaping.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+#♥ {}
+#© {}
+#“‘’” {}
+#☺☃ {}
+#⌘⌥ {}
+#𝄞♪♩♫♬ {}
+#💩 {}
+#\\? {}
+#\\@ {}
+#\\. {}
+#\\3A \\) {}
+#\\3A \\\`\\( {}
+#\\31 23 {}
+#\\31 a2b3c {}
+#\\<p\\> {}
+#\\<\\>\\<\\<\\<\\>\\>\\<\\> {}
+#\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\[\\>\\+\\+\\+\\+\\+\\+\\+\\>\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\>\\+\\+\\+\\>\\+\\<\\<\\<\\<\\-\\]\\>\\+\\+\\.\\>\\+\\.\\+\\+\\+\\+\\+\\+\\+\\.\\.\\+\\+\\+\\.\\>\\+\\+\\.\\<\\<\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\.\\>\\.\\+\\+\\+\\.\\-\\-\\-\\-\\-\\-\\.\\-\\-\\-\\-\\-\\-\\-\\-\\.\\>\\+\\.\\>\\. {}
+#\\# {}
+#\\#\\# {}
+#\\#\\.\\#\\.\\# {}
+#\\#fake-id {} /* matches the element with id="#fake-id" */
+#\\_ {}
+#\\{\\} {}
+#\\.fake\\-class {}
+#foo\\.bar {}
+#\\3A hover {}
+#\\3A hover\\3A focus\\3A active {}
+#\\[attr\\=value\\] {}
+#f\\/o\\/o {}
+#f\\\\o\\\\o {}
+#f\\*o\\*o {}
+#f\\!o\\!o {}
+#f\\'o\\'o {}
+#f\\~o\\~o {}
+#f\\+o\\+o {}
+#-a-b-c- {}
+#a\\\\b {}
+
+@keyframes \\@mymove {
+    from {top: 0px;}
+    to {top: 200px;}
+}
+
+.foo {
+    animation-name: \\@mymove;
+    content: "\\21D3";
+}
+
+/* Ignore escape "\\" in CSS classes */
+.bar\\/baz {
+    animation-name: \\@mymove;
+    content: "\\21D3";
+}
+
+.grid {
+  grid-template-rows:
+    [row-1-00\\:00] auto;
+}
+
+=====================================output=====================================
+#♥ {
+}
+#© {
+}
+#“‘’” {
+}
+#☺☃ {
+}
+#⌘⌥ {
+}
+#𝄞♪♩♫♬ {
+}
+#💩 {
+}
+#\\? {
+}
+#\\@ {
+}
+#\\. {
+}
+#\\3A \\) {
+}
+#\\3A \\\`\\( {
+}
+#\\31 23 {
+}
+#\\31 a2b3c {
+}
+#\\<p\\> {
+}
+#\\<\\>\\<\\<\\<\\>\\>\\<\\> {
+}
+#\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\[\\>\\+\\+\\+\\+\\+\\+\\+\\>\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\>\\+\\+\\+\\>\\+\\<\\<\\<\\<\\-\\]\\>\\+\\+\\.\\>\\+\\.\\+\\+\\+\\+\\+\\+\\+\\.\\.\\+\\+\\+\\.\\>\\+\\+\\.\\<\\<\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\+\\.\\>\\.\\+\\+\\+\\.\\-\\-\\-\\-\\-\\-\\.\\-\\-\\-\\-\\-\\-\\-\\-\\.\\>\\+\\.\\>\\. {
+}
+#\\# {
+}
+#\\#\\# {
+}
+#\\#\\.\\#\\.\\# {
+}
+#\\#fake-id {
+} /* matches the element with id="#fake-id" */
+#\\_ {
+}
+#\\{\\} {
+}
+#\\.fake\\-class {
+}
+#foo\\.bar {
+}
+#\\3A hover {
+}
+#\\3A hover\\3a focus\\3a active {
+}
+#\\[attr\\=value\\] {
+}
+#f\\/o\\/o {
+}
+#f\\\\o\\\\o {
+}
+#f\\*o\\*o {
+}
+#f\\!o\\!o {
+}
+#f\\'o\\'o {
+}
+#f\\~o\\~o {
+}
+#f\\+o\\+o {
+}
+#-a-b-c- {
+}
+#a\\\\b {
+}
+
+@keyframes \\@mymove {
+  from {
+    top: 0px;
+  }
+  to {
+    top: 200px;
+  }
+}
+
+.foo {
+  animation-name: \\@mymove;
+  content: "\\21D3";
+}
+
+/* Ignore escape "\\" in CSS classes */
+.bar\\/baz {
+  animation-name: \\@mymove;
+  content: "\\21D3";
+}
+
+.grid {
+  grid-template-rows: [row-1-00\\:00] auto;
+}
+
+================================================================================
+`;

tests/format/css/character-escaping/character_escaping.css

@@ -0,0 +1,58 @@
+#♥ {}
+#© {}
+#“‘’” {}
+#☺☃ {}
+#⌘⌥ {}
+#𝄞♪♩♫♬ {}
+#💩 {}
+#\? {}
+#\@ {}
+#\. {}
+#\3A \) {}
+#\3A \`\( {}
+#\31 23 {}
+#\31 a2b3c {}
+#\<p\> {}
+#\<\>\<\<\<\>\>\<\> {}
+#\+\+\+\+\+\+\+\+\+\+\[\>\+\+\+\+\+\+\+\>\+\+\+\+\+\+\+\+\+\+\>\+\+\+\>\+\<\<\<\<\-\]\>\+\+\.\>\+\.\+\+\+\+\+\+\+\.\.\+\+\+\.\>\+\+\.\<\<\+\+\+\+\+\+\+\+\+\+\+\+\+\+\+\.\>\.\+\+\+\.\-\-\-\-\-\-\.\-\-\-\-\-\-\-\-\.\>\+\.\>\. {}
+#\# {}
+#\#\# {}
+#\#\.\#\.\# {}
+#\#fake-id {} /* matches the element with id="#fake-id" */
+#\_ {}
+#\{\} {}
+#\.fake\-class {}
+#foo\.bar {}
+#\3A hover {}
+#\3A hover\3A focus\3A active {}
+#\[attr\=value\] {}
+#f\/o\/o {}
+#f\\o\\o {}
+#f\*o\*o {}
+#f\!o\!o {}
+#f\'o\'o {}
+#f\~o\~o {}
+#f\+o\+o {}
+#-a-b-c- {}
+#a\\b {}
+
+@keyframes \@mymove {
+    from {top: 0px;}
+    to {top: 200px;}
+}
+
+.foo {
+    animation-name: \@mymove;
+    content: "\21D3";
+}
+
+/* Ignore escape "\" in CSS classes */
+.bar\/baz {
+    animation-name: \@mymove;
+    content: "\21D3";
+}
+
+.grid {
+  grid-template-rows:
+    [row-1-00\:00] auto;
+}

tests/format/css/character-escaping/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname, ["css"]);

tests/format/css/colon/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`colon.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+div {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+}
+
+=====================================output=====================================
+div {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+}
+
+================================================================================
+`;

tests/format/css/colon/colon.css

@@ -0,0 +1,3 @@
+div {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+}

tests/format/css/colon/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname, ["css"]);

tests/format/css/color/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,412 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`color-adjuster.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+.foo {
+    color: color(red l(+ 20%));
+    color: color(red w(+ 20%) s(+ 20%));
+    color: color(swopc, 0 206 190 77);
+    color: color(indigo, 24 160 86 42 0 18 31);
+    color: color(prophoto, 233 150 122);
+    color: color(P3, 97 253 36);
+    color: color(#eb8fa9 alpha(75%) blackness(20%));
+    color: color(red blue(20));
+    color: color(red blue(20%));
+    color: color(red green(+ 20));
+    color: color(red green(+ 20%));
+    color: color(red red(- 20));
+    color: color(red red(- 20%));
+    color: color(red red(- 128));
+    color: color(red alpha(- 50%));
+    color: color(red alpha(- .75));
+    color: color(red rgb(+ 0 255 0));
+    color: color(red rgb(+ #0f0));
+    color: color(red rgb(- 60% 0 0));
+    color: color(red rgb(- #900));
+    color: color(rebeccapurple rgb(* 1%));
+    color: color(red hue(20));
+    color: color(red hue(20deg));
+    color: color(red hue(+ 20));
+    color: color(red hue(+ 20deg));
+    color: color(red hue(- 20));
+    color: color(red hue(- 20deg));
+    color: color(red hue(* 20));
+    color: color(red hue(* 20deg));
+    color: color(red lightness(50%));
+    color: color(red lightness(20%));
+    color: color(red lightness(+ 20%));
+    color: color(red lightness(- 20%));
+    color: color(red lightness(* 1.5%));
+    color: color(beige saturation(20%));
+    color: color(beige saturation(+ 20%));
+    color: color(beige saturation(- 20%));
+    color: color(beige saturation(* 1.5%));
+    color: color(beige blackness(20%));
+    color: color(beige blackness(+ 20%));
+    color: color(beige blackness(- 1%));
+    color: color(beige blackness(* 20%));
+    color: color(beige whiteness(20%));
+    color: color(beige whiteness(+ 1%));
+    color: color(beige whiteness(- 20%));
+    color: color(beige whiteness(* .5%));
+    color: color(red);
+    color: color(red tint(0%));
+    color: color(red shade(0%));
+    color: color(red tint(100%));
+    color: color(red shade(100%));
+    color: color(red tint(20%));
+    color: color(red shade(20%));
+    color: color(yellow blend(red 50%));
+    color: color(yellow blend(red 50% rgb));
+    color: color(yellow blend(red 50% hsl));
+    color: color(yellow blend(red 50% hwb));
+    color: color(#937b19 contrast(25%));
+    color: color(hotpink blend(yellow 59%));
+    color: color(red);
+    color: color(color-mod(red));
+    color: color(color-mod(color-mod(red)));
+    color: color(#f00);
+    color: color(#f00f);
+    color: color(#ff0000);
+    color: color(#ff0000ff);
+    color: color(rgb(100% 0% 0%));
+    color: color(rgb(100% 0% 0% / 100%));
+    color: color(rgb(255, 0, 0));
+    color: color(rgb(255, 0, 0, 1));
+    color: color(rgba(255, 0, 0, 1));
+    color: color(hsl(0 100% 50%));
+    color: color(hsl(0 100% 50% / 100%));
+    color: color(hsl(0, 100%, 50%));
+    color: color(hsl(0, 100%, 50%, 1));
+    color: color(hsla(0, 100%, 50%, 1));
+    color: color(hwb(0 0 0));
+    color: color(hwb(0 0% 0%));
+    color: color(hwb(0 0% 0% / 100%));
+    color: color(0);
+    color: color(0deg);
+    color: color(0grad);
+    color: color(0rad);
+    color: color(beige);
+    color: color(beige hue(+ 0deg));
+    color: color(beige saturation(+ 0%));
+    color: color(beige lightness(+ 0%));
+    color: color(beige alpha(1));
+    color: color(beige alpha(+ 0));
+    color: color(beige alpha(+ 0%));
+    color: color(beige blend(beige 0% hsl));
+    color: color(red);
+    color: color(red tint(0%));
+    color: color(red shade(0%));
+    color: color(red tint(100%));
+    color: color(red shade(100%));
+    color: color(red tint(20%));
+    color: color(red shade(20%));
+    color: color(yellow blend(red 50%));
+    color: color(yellow blend(red 50% rgb));
+    color: color(yellow blend(red 50% hsl));
+    color: color(yellow blend(red 50% hwb));
+    color: color(yellow contrast(0%));
+    color: color(yellow contrast(25%));
+    color: color(yellow contrast(50%));
+    color: color(yellow contrast(75%));
+    color: color(yellow contrast(100%));
+    color: color(color-mod(0deg blue(10%)) rgb(+ 0 10 0) hue(+ 10deg) tint(10%) lightness(+ 10%) saturation(+ 10%) blend(rebeccapurple 50%));
+    color: color(var(--color));
+    color: color(var(--color) l(+ 20%));
+    color: color(red l(+20%)); /* interpreted as part of the number */
+    color: color(red l(-20%)); /* interpreted as part of the number */
+    color: color(red hue(+20));
+    color: color(red hue(+20deg));
+    color: color(red hue(-20));
+    color: color(red hue(-20deg));
+    color: color(red hue(*20));
+    color: color(red hue(*20deg));
+    color: color(var(--highlightColor) blackness(+ 20%));
+}
+
+=====================================output=====================================
+.foo {
+  color: color(red l(+ 20%));
+  color: color(red w(+ 20%) s(+ 20%));
+  color: color(swopc, 0 206 190 77);
+  color: color(indigo, 24 160 86 42 0 18 31);
+  color: color(prophoto, 233 150 122);
+  color: color(P3, 97 253 36);
+  color: color(#eb8fa9 alpha(75%) blackness(20%));
+  color: color(red blue(20));
+  color: color(red blue(20%));
+  color: color(red green(+ 20));
+  color: color(red green(+ 20%));
+  color: color(red red(- 20));
+  color: color(red red(- 20%));
+  color: color(red red(- 128));
+  color: color(red alpha(- 50%));
+  color: color(red alpha(- 0.75));
+  color: color(red rgb(+ 0 255 0));
+  color: color(red rgb(+ #0f0));
+  color: color(red rgb(- 60% 0 0));
+  color: color(red rgb(- #900));
+  color: color(rebeccapurple rgb(* 1%));
+  color: color(red hue(20));
+  color: color(red hue(20deg));
+  color: color(red hue(+ 20));
+  color: color(red hue(+ 20deg));
+  color: color(red hue(- 20));
+  color: color(red hue(- 20deg));
+  color: color(red hue(* 20));
+  color: color(red hue(* 20deg));
+  color: color(red lightness(50%));
+  color: color(red lightness(20%));
+  color: color(red lightness(+ 20%));
+  color: color(red lightness(- 20%));
+  color: color(red lightness(* 1.5%));
+  color: color(beige saturation(20%));
+  color: color(beige saturation(+ 20%));
+  color: color(beige saturation(- 20%));
+  color: color(beige saturation(* 1.5%));
+  color: color(beige blackness(20%));
+  color: color(beige blackness(+ 20%));
+  color: color(beige blackness(- 1%));
+  color: color(beige blackness(* 20%));
+  color: color(beige whiteness(20%));
+  color: color(beige whiteness(+ 1%));
+  color: color(beige whiteness(- 20%));
+  color: color(beige whiteness(* 0.5%));
+  color: color(red);
+  color: color(red tint(0%));
+  color: color(red shade(0%));
+  color: color(red tint(100%));
+  color: color(red shade(100%));
+  color: color(red tint(20%));
+  color: color(red shade(20%));
+  color: color(yellow blend(red 50%));
+  color: color(yellow blend(red 50% rgb));
+  color: color(yellow blend(red 50% hsl));
+  color: color(yellow blend(red 50% hwb));
+  color: color(#937b19 contrast(25%));
+  color: color(hotpink blend(yellow 59%));
+  color: color(red);
+  color: color(color-mod(red));
+  color: color(color-mod(color-mod(red)));
+  color: color(#f00);
+  color: color(#f00f);
+  color: color(#ff0000);
+  color: color(#ff0000ff);
+  color: color(rgb(100% 0% 0%));
+  color: color(rgb(100% 0% 0% / 100%));
+  color: color(rgb(255, 0, 0));
+  color: color(rgb(255, 0, 0, 1));
+  color: color(rgba(255, 0, 0, 1));
+  color: color(hsl(0 100% 50%));
+  color: color(hsl(0 100% 50% / 100%));
+  color: color(hsl(0, 100%, 50%));
+  color: color(hsl(0, 100%, 50%, 1));
+  color: color(hsla(0, 100%, 50%, 1));
+  color: color(hwb(0 0 0));
+  color: color(hwb(0 0% 0%));
+  color: color(hwb(0 0% 0% / 100%));
+  color: color(0);
+  color: color(0deg);
+  color: color(0grad);
+  color: color(0rad);
+  color: color(beige);
+  color: color(beige hue(+ 0deg));
+  color: color(beige saturation(+ 0%));
+  color: color(beige lightness(+ 0%));
+  color: color(beige alpha(1));
+  color: color(beige alpha(+ 0));
+  color: color(beige alpha(+ 0%));
+  color: color(beige blend(beige 0% hsl));
+  color: color(red);
+  color: color(red tint(0%));
+  color: color(red shade(0%));
+  color: color(red tint(100%));
+  color: color(red shade(100%));
+  color: color(red tint(20%));
+  color: color(red shade(20%));
+  color: color(yellow blend(red 50%));
+  color: color(yellow blend(red 50% rgb));
+  color: color(yellow blend(red 50% hsl));
+  color: color(yellow blend(red 50% hwb));
+  color: color(yellow contrast(0%));
+  color: color(yellow contrast(25%));
+  color: color(yellow contrast(50%));
+  color: color(yellow contrast(75%));
+  color: color(yellow contrast(100%));
+  color: color(
+    color-mod(0deg blue(10%)) rgb(+ 0 10 0) hue(+ 10deg) tint(10%)
+      lightness(+ 10%) saturation(+ 10%) blend(rebeccapurple 50%)
+  );
+  color: color(var(--color));
+  color: color(var(--color) l(+ 20%));
+  color: color(red l(+20%)); /* interpreted as part of the number */
+  color: color(red l(-20%)); /* interpreted as part of the number */
+  color: color(red hue(+20));
+  color: color(red hue(+20deg));
+  color: color(red hue(-20));
+  color: color(red hue(-20deg));
+  color: color(red hue(* 20));
+  color: color(red hue(* 20deg));
+  color: color(var(--highlightColor) blackness(+ 20%));
+}
+
+================================================================================
+`;
+
+exports[`color-level-4.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+/* https://www.w3.org/TR/css-color-4 */
+foo {
+  color: rgb(0, 128, 255);
+  color: rgba(0, 128, 255, 0.5);
+  color: hsl(198, 28%, 50%);
+  color: hsla(198, 28%, 50%, 0.5);
+  color: lab(56.29% 019.93 16.58 / 50%);
+  color: lch(56.29% 19.86 236.62 / 50%);
+  /* color(sRGB 0 0.50 1 / 50%); */
+}
+
+bar {
+  color: rgb(0 128 255);
+  color: rgb(0 128 255 / 50%);
+  color: hsl(198deg 28% 50%);
+  color: hsl(198deg 28% 50% / 50%);
+  color: lab(56.29% 019.93 16.58 / 50%);
+  color: lch(56.29% 19.86 236.62deg / 50%);
+}
+
+=====================================output=====================================
+/* https://www.w3.org/TR/css-color-4 */
+foo {
+  color: rgb(0, 128, 255);
+  color: rgba(0, 128, 255, 0.5);
+  color: hsl(198, 28%, 50%);
+  color: hsla(198, 28%, 50%, 0.5);
+  color: lab(56.29% 019.93 16.58 / 50%);
+  color: lch(56.29% 19.86 236.62 / 50%);
+  /* color(sRGB 0 0.50 1 / 50%); */
+}
+
+bar {
+  color: rgb(0 128 255);
+  color: rgb(0 128 255 / 50%);
+  color: hsl(198deg 28% 50%);
+  color: hsl(198deg 28% 50% / 50%);
+  color: lab(56.29% 019.93 16.58 / 50%);
+  color: lch(56.29% 19.86 236.62deg / 50%);
+}
+
+================================================================================
+`;
+
+exports[`current-color.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+.foo {
+    border: 1px dashed currentColor;
+    border: 1px dashed currentcolor;
+}
+
+=====================================output=====================================
+.foo {
+  border: 1px dashed currentColor;
+  border: 1px dashed currentcolor;
+}
+
+================================================================================
+`;
+
+exports[`functional-syntax.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+.foo {
+    color: rgb(255, 0, 153);
+    color: rgb(100%, 0%, 60%);
+    color: rgba(51, 170, 51, 0.1);
+    color: hsl(.75turn, 60%, 70%);
+    color: hsl(270 60% 50% / .15);
+    color: hsla(240, 100%, 50%, .05)
+}
+
+=====================================output=====================================
+.foo {
+  color: rgb(255, 0, 153);
+  color: rgb(100%, 0%, 60%);
+  color: rgba(51, 170, 51, 0.1);
+  color: hsl(0.75turn, 60%, 70%);
+  color: hsl(270 60% 50% / 0.15);
+  color: hsla(240, 100%, 50%, 0.05);
+}
+
+================================================================================
+`;
+
+exports[`hexcolor.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+.foo {
+    color: #AAA;
+    -o-color: #fabcd3;
+    -webkit-color: #873;
+    -moz-color: #6bcdef;
+    -ms-color: #AAbbCC;
+    color: #F09F;
+    color: #FF0099FF;
+}
+
+=====================================output=====================================
+.foo {
+  color: #aaa;
+  -o-color: #fabcd3;
+  -webkit-color: #873;
+  -moz-color: #6bcdef;
+  -ms-color: #aabbcc;
+  color: #f09f;
+  color: #ff0099ff;
+}
+
+================================================================================
+`;
+
+exports[`whitespace-syntax.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+.foo {
+    color: rgba(51 170 51 / 0.4);
+    color: rgba(51 170 51 / 40%);
+    color: hsl(270 60% 50% / .15);
+    color: hsla(240 100% 50% / .05);
+    color: hsla(240 100% 50% / 5%);
+}
+
+=====================================output=====================================
+.foo {
+  color: rgba(51 170 51 / 0.4);
+  color: rgba(51 170 51 / 40%);
+  color: hsl(270 60% 50% / 0.15);
+  color: hsla(240 100% 50% / 0.05);
+  color: hsla(240 100% 50% / 5%);
+}
+
+================================================================================
+`;

tests/format/css/color/color-adjuster.css

@@ -0,0 +1,121 @@
+.foo {
+    color: color(red l(+ 20%));
+    color: color(red w(+ 20%) s(+ 20%));
+    color: color(swopc, 0 206 190 77);
+    color: color(indigo, 24 160 86 42 0 18 31);
+    color: color(prophoto, 233 150 122);
+    color: color(P3, 97 253 36);
+    color: color(#eb8fa9 alpha(75%) blackness(20%));
+    color: color(red blue(20));
+    color: color(red blue(20%));
+    color: color(red green(+ 20));
+    color: color(red green(+ 20%));
+    color: color(red red(- 20));
+    color: color(red red(- 20%));
+    color: color(red red(- 128));
+    color: color(red alpha(- 50%));
+    color: color(red alpha(- .75));
+    color: color(red rgb(+ 0 255 0));
+    color: color(red rgb(+ #0f0));
+    color: color(red rgb(- 60% 0 0));
+    color: color(red rgb(- #900));
+    color: color(rebeccapurple rgb(* 1%));
+    color: color(red hue(20));
+    color: color(red hue(20deg));
+    color: color(red hue(+ 20));
+    color: color(red hue(+ 20deg));
+    color: color(red hue(- 20));
+    color: color(red hue(- 20deg));
+    color: color(red hue(* 20));
+    color: color(red hue(* 20deg));
+    color: color(red lightness(50%));
+    color: color(red lightness(20%));
+    color: color(red lightness(+ 20%));
+    color: color(red lightness(- 20%));
+    color: color(red lightness(* 1.5%));
+    color: color(beige saturation(20%));
+    color: color(beige saturation(+ 20%));
+    color: color(beige saturation(- 20%));
+    color: color(beige saturation(* 1.5%));
+    color: color(beige blackness(20%));
+    color: color(beige blackness(+ 20%));
+    color: color(beige blackness(- 1%));
+    color: color(beige blackness(* 20%));
+    color: color(beige whiteness(20%));
+    color: color(beige whiteness(+ 1%));
+    color: color(beige whiteness(- 20%));
+    color: color(beige whiteness(* .5%));
+    color: color(red);
+    color: color(red tint(0%));
+    color: color(red shade(0%));
+    color: color(red tint(100%));
+    color: color(red shade(100%));
+    color: color(red tint(20%));
+    color: color(red shade(20%));
+    color: color(yellow blend(red 50%));
+    color: color(yellow blend(red 50% rgb));
+    color: color(yellow blend(red 50% hsl));
+    color: color(yellow blend(red 50% hwb));
+    color: color(#937b19 contrast(25%));
+    color: color(hotpink blend(yellow 59%));
+    color: color(red);
+    color: color(color-mod(red));
+    color: color(color-mod(color-mod(red)));
+    color: color(#f00);
+    color: color(#f00f);
+    color: color(#ff0000);
+    color: color(#ff0000ff);
+    color: color(rgb(100% 0% 0%));
+    color: color(rgb(100% 0% 0% / 100%));
+    color: color(rgb(255, 0, 0));
+    color: color(rgb(255, 0, 0, 1));
+    color: color(rgba(255, 0, 0, 1));
+    color: color(hsl(0 100% 50%));
+    color: color(hsl(0 100% 50% / 100%));
+    color: color(hsl(0, 100%, 50%));
+    color: color(hsl(0, 100%, 50%, 1));
+    color: color(hsla(0, 100%, 50%, 1));
+    color: color(hwb(0 0 0));
+    color: color(hwb(0 0% 0%));
+    color: color(hwb(0 0% 0% / 100%));
+    color: color(0);
+    color: color(0deg);
+    color: color(0grad);
+    color: color(0rad);
+    color: color(beige);
+    color: color(beige hue(+ 0deg));
+    color: color(beige saturation(+ 0%));
+    color: color(beige lightness(+ 0%));
+    color: color(beige alpha(1));
+    color: color(beige alpha(+ 0));
+    color: color(beige alpha(+ 0%));
+    color: color(beige blend(beige 0% hsl));
+    color: color(red);
+    color: color(red tint(0%));
+    color: color(red shade(0%));
+    color: color(red tint(100%));
+    color: color(red shade(100%));
+    color: color(red tint(20%));
+    color: color(red shade(20%));
+    color: color(yellow blend(red 50%));
+    color: color(yellow blend(red 50% rgb));
+    color: color(yellow blend(red 50% hsl));
+    color: color(yellow blend(red 50% hwb));
+    color: color(yellow contrast(0%));
+    color: color(yellow contrast(25%));
+    color: color(yellow contrast(50%));
+    color: color(yellow contrast(75%));
+    color: color(yellow contrast(100%));
+    color: color(color-mod(0deg blue(10%)) rgb(+ 0 10 0) hue(+ 10deg) tint(10%) lightness(+ 10%) saturation(+ 10%) blend(rebeccapurple 50%));
+    color: color(var(--color));
+    color: color(var(--color) l(+ 20%));
+    color: color(red l(+20%)); /* interpreted as part of the number */
+    color: color(red l(-20%)); /* interpreted as part of the number */
+    color: color(red hue(+20));
+    color: color(red hue(+20deg));
+    color: color(red hue(-20));
+    color: color(red hue(-20deg));
+    color: color(red hue(*20));
+    color: color(red hue(*20deg));
+    color: color(var(--highlightColor) blackness(+ 20%));
+}

tests/format/css/color/color-level-4.css

@@ -0,0 +1,19 @@
+/* https://www.w3.org/TR/css-color-4 */
+foo {
+  color: rgb(0, 128, 255);
+  color: rgba(0, 128, 255, 0.5);
+  color: hsl(198, 28%, 50%);
+  color: hsla(198, 28%, 50%, 0.5);
+  color: lab(56.29% 019.93 16.58 / 50%);
+  color: lch(56.29% 19.86 236.62 / 50%);
+  /* color(sRGB 0 0.50 1 / 50%); */
+}
+
+bar {
+  color: rgb(0 128 255);
+  color: rgb(0 128 255 / 50%);
+  color: hsl(198deg 28% 50%);
+  color: hsl(198deg 28% 50% / 50%);
+  color: lab(56.29% 019.93 16.58 / 50%);
+  color: lch(56.29% 19.86 236.62deg / 50%);
+}

tests/format/css/color/current-color.css

@@ -0,0 +1,4 @@
+.foo {
+    border: 1px dashed currentColor;
+    border: 1px dashed currentcolor;
+}

tests/format/css/color/functional-syntax.css

@@ -0,0 +1,8 @@
+.foo {
+    color: rgb(255, 0, 153);
+    color: rgb(100%, 0%, 60%);
+    color: rgba(51, 170, 51, 0.1);
+    color: hsl(.75turn, 60%, 70%);
+    color: hsl(270 60% 50% / .15);
+    color: hsla(240, 100%, 50%, .05)
+}

tests/format/css/color/hexcolor.css

@@ -0,0 +1,9 @@
+.foo {
+    color: #AAA;
+    -o-color: #fabcd3;
+    -webkit-color: #873;
+    -moz-color: #6bcdef;
+    -ms-color: #AAbbCC;
+    color: #F09F;
+    color: #FF0099FF;
+}

tests/format/css/color/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname, ["css"]);

tests/format/css/color/whitespace-syntax.css

@@ -0,0 +1,7 @@
+.foo {
+    color: rgba(51 170 51 / 0.4);
+    color: rgba(51 170 51 / 40%);
+    color: hsl(270 60% 50% / .15);
+    color: hsla(240 100% 50% / .05);
+    color: hsla(240 100% 50% / 5%);
+}

tests/format/css/combinator/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`combinator.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+-Option/root .public/section ~ .public/section:before {
+}
+
+.x .y {}
+.x > .y {}
+.x ~ .y {}
+.x + .y {}
+.x.y {}
+.x     .y {}
+.x
+    .y {}
+
+=====================================output=====================================
+-Option/root .public/section ~ .public/section:before {
+}
+
+.x .y {
+}
+.x > .y {
+}
+.x ~ .y {
+}
+.x + .y {
+}
+.x.y {
+}
+.x .y {
+}
+.x .y {
+}
+
+================================================================================
+`;
+
+exports[`leading.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+a {
+  > * {
+  }
+  &, > * {
+  }
+  + * {
+  }
+}
+
+=====================================output=====================================
+a {
+  > * {
+  }
+  &,
+  > * {
+  }
+  + * {
+  }
+}
+
+================================================================================
+`;

tests/format/css/combinator/combinator.css

@@ -0,0 +1,11 @@
+-Option/root .public/section ~ .public/section:before {
+}
+
+.x .y {}
+.x > .y {}
+.x ~ .y {}
+.x + .y {}
+.x.y {}
+.x     .y {}
+.x
+    .y {}

tests/format/css/combinator/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname, ["css"]);

tests/format/css/combinator/leading.css

@@ -0,0 +1,8 @@
+a {
+  > * {
+  }
+  &, > * {
+  }
+  + * {
+  }
+}

tests/format/css/comments/CRLF.css

@@ -0,0 +1,19 @@
+/*
+ * Comment 1
+ */
+#header {
+    /*
+     * Comment 2
+     */
+    color: red;
+}
+
+@media only screen and (max-width: 600px) {
+    /*
+     * Comment 3
+     */
+    body {
+        background-color: lightblue; /* Comment 4 */
+        color: red; /* Comment 5 */
+    }
+}

tests/format/css/comments/at-rules.css

@@ -0,0 +1,69 @@
+@charset "utf-8"; /* comment 1 */
+
+@import /* comment 2 */ url("fineprint.css") /* comment 3 */ print /* comment 4 */; /* comment 5 */
+@import /* comment 6 */ url("bluish.css") /* comment 7 */ projection /* comment 8 */, /* comment 9 */ tv /* comment 10 */;
+/* comment 11 */ @import /* comment 12 */
+    /* comment 13 */ url("bluish.css") /* comment 14 */
+    /* comment 15 */ projection /* comment 16 */,
+    /* comment 17 */ tv /* comment 18 */; /* comment 19 */
+/* comment 20 */
+@import/* comment 21 */url("bluish.css")/* comment 22 */projection/* comment 23 */,/* comment 24 */tv/* comment 25 */;
+@import /* comment 26 */'custom.css'/* comment 27 */;/* comment 28 */
+@import /* comment 29 */ url('landscape.css') /* comment 30 */ screen /* comment 31 */ and /* comment 32 */ (/* comment 33 */orientation/* comment 34 */:/* comment 35 */landscape/* comment 36 */)/* comment 37 */;
+
+@namespace /* comment 38 */ url(http://www.w3.org/1999/xhtml) /* comment 39 */ ;
+@namespace /* comment 40 */ svg /* comment 41 */ url(http://www.w3.org/2000/svg) /* comment 42 */;
+
+@keyframes /* comment 43 */ slidein /* comment 44 */ {}
+
+/* comment 45 */ @font-feature-values /* comment 46 */ Font Two /* comment 47 */ { /* comment 48 */
+    /* comment 49 */ @styleset /* comment 50 */ { /* comment 51 */
+        nice-style: 4;
+    /* comment 52 */ } /* comment 53 */
+/* comment 54 */ }  /* comment 55 */
+
+/* comment 56 */ @counter-style /* comment 57 */ thumbs /* comment 58 */ {}
+
+/* comment 59 */ @viewport /* comment 60 */ {}
+
+@page /* comment 61 */ {}
+@page /* comment 62 */ :first /* comment 63 */ {}
+@page /* comment 64 */ vertical /* comment 65 */ {}
+
+/* comment 66 */ @media /* comment 67 */ print /* comment 68 */ {}
+@media /* comment 69 */ screen /* comment 70 */ , /* comment 71 */ print /* comment 72 */ {} /* comment 73 */
+@media /* comment 74 */ only /* comment 75 */ screen /* comment 76 */ and /* comment 77 */ ( /* comment 78 */ min-width /* comment 79 */ : /* comment 80 */ 320px /* comment 81 */ ) /* comment 82 */ and /* comment 83 */ ( /* comment 84 */ max-width /* comment 85 */ : /* comment 86 */ 480px /* comment 87 */ ) /* comment 88 */ and /* comment 89 */ ( /* comment 90 */ resolution /* comment 91 */ : /* comment 92 */ 150dpi /* comment 93 */ ) /* comment 94 */ {}
+@media/* comment 95 */only/* comment 96 */screen/* comment 97 */and/* comment 98 */(/* comment 99 */min-width/* comment 100 */:/* comment 101 */320px/* comment 102 */)/* comment 103 */and/* comment 104 */(/* comment 105 */max-width/* comment 106 */:/* comment 107 */480px/* comment 108 */)/* comment 109 */and/* comment 110 */(/* comment 111 */resolution/* comment 112 */:/* comment 113 */150dpi/* comment 114 */)/* comment 115 */{}
+/* comment 116 */@media/* comment 117 */
+    /* comment 118 */only/* comment 119 */
+    /* comment 120 */screen/* comment 121 */
+    /* comment 122 */and/* comment 123 */
+    /* comment 124 */(/* comment 125 */
+    /* comment 126 */min-width/* comment 127 */
+    /* comment 128 */:/* comment 129 */
+    /* comment 130 */320px/* comment 131 */
+    /* comment 132 */)/* comment 133 */
+    /* comment 134 */and/* comment 135 */
+    /* comment 136 */(/* comment 137 */
+    /* comment 138 */max-width/* comment 139 */
+    /* comment 140 */:/* comment 141 */
+    /* comment 142 */480px/* comment 143 */
+    /* comment 144 */)/* comment 145 */
+    /* comment 146 */and/* comment 147 */
+    /* comment 148 */(/* comment 149 */
+    /* comment 150 */resolution/* comment 151 */
+    /* comment 152 */:/* comment 153 */
+    /* comment 154 */150dpi/* comment 155 */
+    /* comment 156 */)/* comment 157 */
+    /* comment 158 */{}/* comment 159 */
+
+@supports /* comment 160 */ ( /* comment 161 */ display /* comment 162 */ : /* comment 163 */ flex /* comment 164 */ ) /* comment 165 */ {}
+@supports /* comment 166 */ not /* comment 167 */ ( /* comment 168 */ display /* comment 169 */ : /* comment 170 */ flex /* comment 171 */ ) /* comment 172 */ {}
+@supports /* comment 173 */ (/* comment 174 */ display /* comment 175 */ : /* comment 176 */ table-cell /* comment 177 */ ) /* comment 178 */ and /* comment 179 */ ( /* comment 180 */ display /* comment 181 */ : /* comment 182 */ list-item /* comment 183 */ ) /* comment 184 */ and /* comment 185 */ ( /* comment 186 */display /* comment 187 */ : /* comment 188 */ run-in /* comment 189 */ ) /* comment 190 */ {}
+@supports /* comment 191 */ (/* comment 192 */ --foo /* comment 193 */ : /* comment 194 */ green /* comment 195 */ ) /* comment 196 */ {}
+
+/* comment 197 */ @supports /* comment 198 */ ( /* comment 199 */ display /* comment 200 */ : /* comment 201 */ flex /* comment 202 */ ) /* comment 203 */ {
+    /* comment 204 */ @media /* comment 205 */ screen /* comment 206 */ and /* comment 207 */ ( /* comment 208 */ min-width /* comment 209 */ : /* comment 210 */ 900px /* comment 211 */ ) /* comment 212 */ {
+    /* comment 213 */ } /* comment 214 */
+/* comment 215 */ } /* comment 216 */
+

tests/format/css/comments/block.css

@@ -0,0 +1,4 @@
+/* Kikoo */
+/**
+ * Kikoo
+ */

tests/format/css/comments/bug.css

@@ -0,0 +1,3 @@
+/* Catchall baseclass */
+.glyphicon {
+}

tests/format/css/comments/custom-properties.css

@@ -0,0 +1,13 @@
+   /* comment 1 */
+       :root {
+  /* comment 2 */
+  --prop : {
+  /* comment 3 */
+color/* comment 4 */: /* comment 5 */#fff/* comment 6 */;/* comment 7 */
+  /* comment 8 */
+font-size: 12px;
+  /* comment 9 */
+  };
+  /* comment 10 */
+}
+     /* comment 11 */

tests/format/css/comments/declaration.css

@@ -0,0 +1,72 @@
+a {
+    /* comment 1 */
+    /* comment 2 */ padding /* comment 3 */ : /* comment 4 */ 10px /* comment 5 */ 10px /* comment 6 */; /* comment 7 */
+    /* comment 8 */
+    transform: translate(/* comment 9 */ 10px /* comment 10 */);
+    color: /* comment 11 */ red /* comment 12 */ !important /* comment 13 */ ; /* comment 14 */
+    /* comment 15 */
+}
+
+@font-face {
+    font-family: "Prettier";
+    src: /* comment 16 */ local(/* comment 17 */ "Prettier" /* comment 18 */), /* comment 19 */
+        /* comment 20 */ url("http://prettier.com/font.woff") /* comment 21 */ ; /* comment 22 */
+}
+
+.foo {/* comment 23 */color/* comment 24 */:/* comment 25 */blue/* comment 26 */;/* comment 27 */transform/* comment 28 */:/* comment 29 */translate(/* comment 30 */10px/* comment 31 */)/* comment 32 */;/* comment 33 */}
+.foo { /* comment 34 */ color /* comment 35 */ : /* comment 36 */ blue /* comment 37 */ ; /* comment 38 */ transform /* comment 39 */ : /* comment 40 */ translate( /* comment 41 */ 10px /* comment 42 */ ) /* comment 43 */ ; /* comment 44 */ }
+.foo {
+    /* comment 45 */
+    /* comment 46 */ color  /* comment 47 */
+    /* comment 48 */
+    /* comment 49 */ :  /* comment 50 */
+    /* comment 51 */
+    /* comment 52 */ blue  /* comment 53 */
+    /* comment 54 */
+    /* comment 55 */ ;  /* comment 56 */
+    /* comment 57 */
+    /* comment 58 */ transform  /* comment 59 */
+    /* comment 60 */
+    /* comment 61 */ : /* comment 62 */
+    /* comment 63 */
+    /* comment 64 */ translate(  /* comment 65 */
+        /* comment 66 */
+        /* comment 67 */ 10px  /* comment 68 */
+        /* comment 69 */
+    /* comment 70 */ ) /* comment 71 */
+    /* comment 72 */
+    /* comment 73 */ ;  /* comment 74 */
+    /* comment 75 */
+}
+
+body {/* comment 76 */}
+body { /* comment 77 */ }
+body
+{
+    /* comment 78 */
+}
+body
+{
+    /* comment 79 */
+}
+body
+{
+
+    /* comment 80 */
+
+}
+
+.tab-bar {
+    .tab {} /* comment 81 */
+}
+
+.selector {
+    /* comment 82 */
+    position: absolute;
+
+    /* comment 83 */
+    display: inline-block;
+
+    /* comment 84 */
+    background: #000;
+}

tests/format/css/comments/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname, ["css"]);

tests/format/css/comments/prettier-ignore.css

@@ -0,0 +1,5 @@
+foo {
+  /* prettier-ignore */
+  thing:     foo;
+  -ms-thing: foo;
+}

tests/format/css/comments/selectors.css

@@ -0,0 +1,157 @@
+.powerPathNavigator .helm button.pressedButton, /* comment 1 */
+.powerPathNavigator .helm button:active:not(.disabledButton),
+.powerPathNavigator table.powerPathInfo th:active,
+.powerPathNavigator table.powerPathInfo th:active + th:last-child {
+}
+
+/* comment 2 */
+.powerPathNavigator .helm button.pressedButton,
+.powerPathNavigator .helm button:active:not(.disabledButton) {
+}
+
+.foo,
+/* comment 3 */
+.bar {
+   display: block;
+}
+
+/* comment 4 */
+/* comment 5 */ .field /* comment 6 */
+/* comment 7 */
+/* comment 8 */ { /* comment 9 */
+    /* comment 10 */
+    background: green;
+    /* comment 11 */
+/* comment 12 */ } /* comment 13 */
+/* comment 14 */
+
+/* comment 15 */ .element /* comment 16 */ , /* comment 17 */ .element /* comment 18 */ {}
+/* comment 19 */
+.element
+/* comment 20 */
+,
+/* comment 21 */
+.element
+/* comment 22 */
+{}
+
+/* comment 23 */ .element /* comment 24 */ .element /* comment 25 */ {}
+/* comment 26 */
+.element
+/* comment 27 */
+.element
+/* comment 28 */
+{}
+
+/* comment 29 */ .element /* comment 30 */ > /* comment 31 */ .element /* comment 32 */ {}
+/* comment 33 */
+.element
+/* comment 34 */
+>
+/* comment 35 */
+.element
+/* comment 36 */
+{}
+
+/* comment 37 */ .element /* comment 38 */ + /* comment 39 */ .element /* comment 40 */ {}
+/* comment 41 */
+.element
+/* comment 42 */
++
+/* comment 43 */
+.element
+/* comment 44 */
+{}
+
+/* comment 45 */ .element /* comment 46 */ ~ /* comment 47 */ .element /* comment 48 */ {}
+/* comment 49 */
+.element
+/* comment 50 */
+~
+/* comment 51 */
+.element
+/* comment 52 */
+{}
+
+/* comment 53 */ .element /* comment 54 */ >>> /* comment 55 */ .element /* comment 56 */ {}
+/* comment 57 */
+.element
+/* comment 58 */
+>>>
+/* comment 59 */
+.element
+/* comment 60 */
+{}
+
+a[/* comment 61 */target/* comment 62 */] {}
+a[/* comment 63 */target/* comment 64 */=/* comment 65 */"_blank"/* comment 66 */] {}
+a[/* comment 67 */target/* comment 68 */~=/* comment 69 */"_blank"/* comment 70 */] {}
+a[/* comment 71 */target/* comment 72 */|=/* comment 73 */"_blank"/* comment 74 */] {}
+a[/* comment 75 */target/* comment 76 */^=/* comment 77 */"_blank"/* comment 78 */] {}
+a[/* comment 79 */target/* comment 80 */$=/* comment 81 */"_blank"/* comment 82 */] {}
+a[/* comment 83 */target/* comment 84 */*=/* comment 85 */"_blank"/* comment 86 */] {}
+
+[/* comment 87 */foo/* comment 88 */|/* comment 89 */att/* comment 90 */=/* comment 91 */val/* comment 92 */] {}
+[/* comment 93 */*/* comment 94 */|/* comment 95 */att/* comment 96 */] {}
+[/* comment 97 */|/* comment 98 */att/* comment 99 */] {}
+
+a/* comment 100 */:/* comment 101 */active {}
+
+a/* comment 102 */::/* comment 103 */after {}
+
+p:lang(/* comment 104 */it/* comment 105 */) {}
+
+span:nth-child(/* comment 106 */2n/* comment 107 */+/* comment 108 */1/* comment 109 */) {}
+
+/* comment 110 */::-webkit-progress-bar {}
+
+/* comment 111 */:matches(/* comment 112 */section/* comment 113 */,/* comment 114 */ article/* comment 115 */) /* comment 116 */ h1 {}
+
+/* comment 117 */*/* comment 118 */ {}
+
+/* comment 119 */#container/* comment 120 */{}
+
+/* comment 121 */.error/* comment 122 */{}
+
+/* comment 123 */a/* comment 124 */{}
+
+input:not(/* comment 125 */[/* comment 126 */disabled/* comment 127 */]/* comment 128 */) {}
+
+/* comment 129 */h1/* comment 130 */, /* comment 131 */h2/* comment 132 */,/* comment 133 */ h3/* comment 134 */ {}
+
+/* comment 135 */.phone/* comment 136 */ { /* comment 137 */
+        /* comment 138 */&_title/* comment 139 */ { /* comment 140 */
+        width: 500px;
+        /* comment 141 */body.is_dark/* comment 142 */ & /* comment 143 */{ /* comment 144 */
+            color: white;
+        /* comment 145 */ } /* comment 146 */
+    /* comment 147 */ } /* comment 148 */
+
+    /* comment 149 */ img/* comment 150 */ { /* comment 151 */
+        display: block;
+    /* comment 152 */ } /* comment 153 */
+/* comment 154 */
+} /* comment 155 */
+
+@media (max-width: 500px) {
+    /* comment 156 */ a /* comment 157 */ { /* comment 158 */
+        /* comment 159 */b/* comment 160 */ {/* comment 161 */} /* comment 162 */
+    /* comment 163 */ } /* comment 164 */
+/* comment 165 */ } /* comment 166 */
+
+/* comment 167 */ article /* comment 168 */ :--heading /* comment 169 */ + /* comment 170 */ p /* comment 171 */ {}
+
+/* comment 172 */ .foo /* comment 173 */ :global /* comment 174 */.bar /* comment 175 */{}
+/* comment 176 */ .foo /* comment 177 */ :global(/* comment 178 */.bar/* comment 179 */) /* comment 180 */ .baz /* comment 181 */ {}
+
+/* comment 182 */ .foo /* comment 183 */ :local /* comment 184 */ .bar /* comment 185 */ {}
+/* comment 186 */ .foo /* comment 187 */ :local(/* comment 188 */.foo/* comment 189 */) /* comment 190 */ .bar /* comment 191 */ {}
+
+/* custom properties set & @apply rule */
+:root {
+    /* comments 192 */ --centered /* comments 193 */ : /* comments 194 */ {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    };
+}

tests/format/css/comments/source-map.css

@@ -0,0 +1,5 @@
+.foo {
+    color: red;
+}
+
+/*# sourceMappingURL=file.css.map */

tests/format/css/comments/types.css

@@ -0,0 +1,45 @@
+/* This is a basic comment */
+
+/* ==========================================================================
+   This is a Section Comment
+   ========================================================================== */
+
+/*
+   This is a sub-section comment
+   ========================================================================== */
+
+/**
+ * Short description using Doxygen-style comment format
+ *
+ * The first sentence of the long description starts here and continues on this
+ * line for a while finally concluding here at the end of this paragraph.
+ *
+ * The long description is ideal for more detailed explanations and
+ * documentation. It can include example HTML, URLs, or any other information
+ * that is deemed necessary or useful.
+ *
+ * @tag This is a tag named 'tag'
+ *
+ * TODO: This is a todo statement that describes an atomic task to be completed
+ *   at a later date. It wraps after 80 characters and following lines are
+ *   indented by 2 spaces.
+ */
+
+/**
+ * TODO:
+ *
+ * => Write some code
+ * => Make some lists
+ *
+ */
+
+/*
+span {
+  color: blue;
+  font-size: 1.5em;
+}
+*/
+
+/*
+<small class=tooltip><span>Lorem ipsum dolor</span></small>
+*/

tests/format/css/composes/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`composes.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+.reference {
+  composes: selector from "a/long/file/path/exceeding/the/maximum/length/forcing/a/line-wrap/file.css";
+}
+
+=====================================output=====================================
+.reference {
+  composes: selector from "a/long/file/path/exceeding/the/maximum/length/forcing/a/line-wrap/file.css";
+}
+
+================================================================================
+`;

tests/format/css/composes/composes.css

@@ -0,0 +1,3 @@
+.reference {
+  composes: selector from "a/long/file/path/exceeding/the/maximum/length/forcing/a/line-wrap/file.css";
+}

tests/format/css/composes/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname, ["css"]);

tests/format/css/cursor/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test.css format 1`] = `
+====================================options=====================================
+cursorOffset: 19
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+.blah {
+  /* hloow <|> */
+  background-color: white;
+}
+
+=====================================output=====================================
+.blah {
+  /* hloow <|> */
+  background-color: white;
+}
+
+================================================================================
+`;

tests/format/css/cursor/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname, ["css"]);

tests/format/css/cursor/test.css

@@ -0,0 +1,4 @@
+.blah {
+  /* hloow <|> */
+  background-color: white;
+}

tests/format/css/empty/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`empty.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+
+details[open] {
+}
+
+div {
+  box-sizing: border-box;;
+  color: red;
+}
+
+=====================================output=====================================
+details[open] {
+}
+
+div {
+  box-sizing: border-box;
+  color: red;
+}
+
+================================================================================
+`;

tests/format/css/empty/empty.css

@@ -0,0 +1,8 @@
+
+details[open] {
+}
+
+div {
+  box-sizing: border-box;;
+  color: red;
+}

tests/format/css/empty/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname, ["css"]);

tests/format/css/fill-value/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`fill.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+div {
+  border-left: 1px solid mix($warningBackgroundColors, $warningBorderColors, 50%);
+  $fontFamily: "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+=====================================output=====================================
+div {
+  border-left: 1px solid
+    mix($warningBackgroundColors, $warningBorderColors, 50%);
+  $fontFamily: "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial,
+    sans-serif;
+}
+
+================================================================================
+`;

tests/format/css/fill-value/fill.css

@@ -0,0 +1,4 @@
+div {
+  border-left: 1px solid mix($warningBackgroundColors, $warningBorderColors, 50%);
+  $fontFamily: "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+}

tests/format/css/fill-value/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname, ["css"]);

tests/format/css/front-matter/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`custom-parser.css format 1`] = `
+====================================options=====================================
+parsers: ["css", "scss", "less"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+---mycustomparser
+title: Title
+description: Description
+---
+/* comment */
+.something 
+{}
+
+=====================================output=====================================
+---mycustomparser
+title: Title
+description: Description
+---
+
+/* comment */
+.something {
+}
+
+================================================================================
+`;
+
+exports[`empty.css format 1`] = `
+====================================options=====================================
+parsers: ["css", "scss", "less"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+---
+---
+/* comment */
+.something
+{}
+
+=====================================output=====================================
+---
+---
+
+/* comment */
+.something {
+}
+
+================================================================================
+`;

tests/format/css/front-matter/custom-parser.css

@@ -0,0 +1,7 @@
+---mycustomparser
+title: Title
+description: Description
+---
+/* comment */
+.something 
+{}

tests/format/css/front-matter/empty.css

@@ -0,0 +1,5 @@
+---
+---
+/* comment */
+.something
+{}

tests/format/css/front-matter/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname, ["css", "scss", "less"]);

tests/format/css/grid/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,241 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`grid.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+/* quotes */
+div {
+  grid-template-areas:
+       'header header'
+       'main sidebar'
+       'footer footer';
+}
+
+/* numbers */
+div {
+  grid-template-columns:
+      [full-start] minmax(1.50em, 1fr)
+      [main-start] minmax(.40ch, 75ch)
+      [main-end] minmax(1em, 1.000fr)
+      [full-end];
+}
+
+/* casing */
+div {
+  GRID:
+    [top] 1fr
+    [middle] 1fr
+    bottom;
+
+  grid-TEMPLATE:
+        "a a a" 200px
+        "b b b" 200px
+        / 200px 200px auto;
+}
+
+/* break before first line if there are any breaks */
+div {
+  grid-template-columns:
+      1fr 100px 3em;
+  grid: [wide-start] "header header header" 200px [wide-end]
+      "footer footer footer" 25px
+      / auto 50px auto;
+}
+
+/**
+ * https://github.com/prettier/prettier/issues/2703#issuecomment-341188126
+ */
+.container {
+  display: grid;
+
+  /* basic template rows/columns */
+  grid-template-columns: 1fr 100px 3em;
+  grid-template-rows: 1fr 100px 3em;
+  /* template rows/columns with named grid lines */
+  grid-template-columns:
+    [wide-start] 1fr
+    [main-start] 500px
+    [main-end] 1fr
+    [wide-end];
+  grid-template-rows:
+    [top] 1fr
+    [middle] 1fr
+    [bottom];
+  /* template rows/columns with functions */
+  grid-template-columns: minmax(1em, 1fr) minmax(1em, 80ch) minmax(1em, 1fr);
+  /* getting really busy with named lines + functions */
+  grid-template-columns:
+    [full-start] minmax(1em, 1fr)
+    [main-start] minmax(1em, 80ch)
+    [main-end] minmax(1em, 1fr)
+    [full-end];
+
+  grid-template-areas:
+    "header header header"
+    "main   main   sidebar"
+    "main   main   sidebar2"
+    "footer footer footer";
+
+  /* Shorthand for grid-template-rows, grid-template-columns, and grid-template
+     areas. In one. This can get really crazy. */
+  grid-template:
+    [row1-start] "header header header" 25px [row1-end]
+    [row2-start] "footer footer footer" 25px [row2-end]
+    / auto 50px auto;
+
+  /* The. Worst. This one is shorthand for like everything here smashed into one. But rarely will you actually specify EVERYTHING. */
+  grid:
+    [row1-start] "header header header" 25px [row1-end]
+    [row2-start] "footer footer footer" 25px [row2-end]
+    / auto 50px auto;
+  /* simpler use case: */
+  grid: 200px auto / 1fr auto 1fr;
+
+  /* Okay, the the worst of it. The simpler syntaxes: */
+
+  grid-row-gap: 2em;
+  grid-column-gap: 1em;
+  /* shorthand for grid-row-gap + grid-column-gap: */
+  grid-gap: 2em 1em;
+
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+}
+
+.container > .item {
+  grid-column-start: 1;
+  grid-column-end: 2;
+  grid-row-start: -2;
+  grid-row-end: -1;
+
+  /* shorthands for the above: */
+  grid-column: 1 / 2;
+  grid-column: main;
+  grid-row: -2 / span 1;
+  grid-row: footer;
+
+  grid-area: main;
+  grid-area: 1 / main-start / 3 / main-end;
+}
+
+=====================================output=====================================
+/* quotes */
+div {
+  grid-template-areas:
+    "header header"
+    "main sidebar"
+    "footer footer";
+}
+
+/* numbers */
+div {
+  grid-template-columns:
+    [full-start] minmax(1.5em, 1fr)
+    [main-start] minmax(0.4ch, 75ch)
+    [main-end] minmax(1em, 1fr)
+    [full-end];
+}
+
+/* casing */
+div {
+  grid:
+    [top] 1fr
+    [middle] 1fr
+    bottom;
+
+  grid-template:
+    "a a a" 200px
+    "b b b" 200px
+    / 200px 200px auto;
+}
+
+/* break before first line if there are any breaks */
+div {
+  grid-template-columns: 1fr 100px 3em;
+  grid:
+    [wide-start] "header header header" 200px [wide-end]
+    "footer footer footer" 25px
+    / auto 50px auto;
+}
+
+/**
+ * https://github.com/prettier/prettier/issues/2703#issuecomment-341188126
+ */
+.container {
+  display: grid;
+
+  /* basic template rows/columns */
+  grid-template-columns: 1fr 100px 3em;
+  grid-template-rows: 1fr 100px 3em;
+  /* template rows/columns with named grid lines */
+  grid-template-columns:
+    [wide-start] 1fr
+    [main-start] 500px
+    [main-end] 1fr
+    [wide-end];
+  grid-template-rows:
+    [top] 1fr
+    [middle] 1fr
+    [bottom];
+  /* template rows/columns with functions */
+  grid-template-columns: minmax(1em, 1fr) minmax(1em, 80ch) minmax(1em, 1fr);
+  /* getting really busy with named lines + functions */
+  grid-template-columns:
+    [full-start] minmax(1em, 1fr)
+    [main-start] minmax(1em, 80ch)
+    [main-end] minmax(1em, 1fr)
+    [full-end];
+
+  grid-template-areas:
+    "header header header"
+    "main   main   sidebar"
+    "main   main   sidebar2"
+    "footer footer footer";
+
+  /* Shorthand for grid-template-rows, grid-template-columns, and grid-template
+     areas. In one. This can get really crazy. */
+  grid-template:
+    [row1-start] "header header header" 25px [row1-end]
+    [row2-start] "footer footer footer" 25px [row2-end]
+    / auto 50px auto;
+
+  /* The. Worst. This one is shorthand for like everything here smashed into one. But rarely will you actually specify EVERYTHING. */
+  grid:
+    [row1-start] "header header header" 25px [row1-end]
+    [row2-start] "footer footer footer" 25px [row2-end]
+    / auto 50px auto;
+  /* simpler use case: */
+  grid: 200px auto / 1fr auto 1fr;
+
+  /* Okay, the the worst of it. The simpler syntaxes: */
+
+  grid-row-gap: 2em;
+  grid-column-gap: 1em;
+  /* shorthand for grid-row-gap + grid-column-gap: */
+  grid-gap: 2em 1em;
+
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+}
+
+.container > .item {
+  grid-column-start: 1;
+  grid-column-end: 2;
+  grid-row-start: -2;
+  grid-row-end: -1;
+
+  /* shorthands for the above: */
+  grid-column: 1 / 2;
+  grid-column: main;
+  grid-row: -2 / span 1;
+  grid-row: footer;
+
+  grid-area: main;
+  grid-area: 1 / main-start / 3 / main-end;
+}
+
+================================================================================
+`;

tests/format/css/grid/grid.css

@@ -0,0 +1,114 @@
+/* quotes */
+div {
+  grid-template-areas:
+       'header header'
+       'main sidebar'
+       'footer footer';
+}
+
+/* numbers */
+div {
+  grid-template-columns:
+      [full-start] minmax(1.50em, 1fr)
+      [main-start] minmax(.40ch, 75ch)
+      [main-end] minmax(1em, 1.000fr)
+      [full-end];
+}
+
+/* casing */
+div {
+  GRID:
+    [top] 1fr
+    [middle] 1fr
+    bottom;
+
+  grid-TEMPLATE:
+        "a a a" 200px
+        "b b b" 200px
+        / 200px 200px auto;
+}
+
+/* break before first line if there are any breaks */
+div {
+  grid-template-columns:
+      1fr 100px 3em;
+  grid: [wide-start] "header header header" 200px [wide-end]
+      "footer footer footer" 25px
+      / auto 50px auto;
+}
+
+/**
+ * https://github.com/prettier/prettier/issues/2703#issuecomment-341188126
+ */
+.container {
+  display: grid;
+
+  /* basic template rows/columns */
+  grid-template-columns: 1fr 100px 3em;
+  grid-template-rows: 1fr 100px 3em;
+  /* template rows/columns with named grid lines */
+  grid-template-columns:
+    [wide-start] 1fr
+    [main-start] 500px
+    [main-end] 1fr
+    [wide-end];
+  grid-template-rows:
+    [top] 1fr
+    [middle] 1fr
+    [bottom];
+  /* template rows/columns with functions */
+  grid-template-columns: minmax(1em, 1fr) minmax(1em, 80ch) minmax(1em, 1fr);
+  /* getting really busy with named lines + functions */
+  grid-template-columns:
+    [full-start] minmax(1em, 1fr)
+    [main-start] minmax(1em, 80ch)
+    [main-end] minmax(1em, 1fr)
+    [full-end];
+
+  grid-template-areas:
+    "header header header"
+    "main   main   sidebar"
+    "main   main   sidebar2"
+    "footer footer footer";
+
+  /* Shorthand for grid-template-rows, grid-template-columns, and grid-template
+     areas. In one. This can get really crazy. */
+  grid-template:
+    [row1-start] "header header header" 25px [row1-end]
+    [row2-start] "footer footer footer" 25px [row2-end]
+    / auto 50px auto;
+
+  /* The. Worst. This one is shorthand for like everything here smashed into one. But rarely will you actually specify EVERYTHING. */
+  grid:
+    [row1-start] "header header header" 25px [row1-end]
+    [row2-start] "footer footer footer" 25px [row2-end]
+    / auto 50px auto;
+  /* simpler use case: */
+  grid: 200px auto / 1fr auto 1fr;
+
+  /* Okay, the the worst of it. The simpler syntaxes: */
+
+  grid-row-gap: 2em;
+  grid-column-gap: 1em;
+  /* shorthand for grid-row-gap + grid-column-gap: */
+  grid-gap: 2em 1em;
+
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+}
+
+.container > .item {
+  grid-column-start: 1;
+  grid-column-end: 2;
+  grid-row-start: -2;
+  grid-row-end: -1;
+
+  /* shorthands for the above: */
+  grid-column: 1 / 2;
+  grid-column: main;
+  grid-row: -2 / span 1;
+  grid-row: footer;
+
+  grid-area: main;
+  grid-area: 1 / main-start / 3 / main-end;
+}

tests/format/css/grid/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname, ["css"]);

tests/format/css/important/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`important.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+div {
+  max-height: none !important;
+}
+
+=====================================output=====================================
+div {
+  max-height: none !important;
+}
+
+================================================================================
+`;

tests/format/css/important/important.css

@@ -0,0 +1,3 @@
+div {
+  max-height: none !important;
+}

tests/format/css/important/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname, ["css"]);

tests/format/css/indent/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`indent.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+div {
+  background: var(fig-light-02) url(/images/inset-shadow-east-ltr.png) 100% 0 repeat-y;
+  box-shadow: 0 0 1px 2px rgba(88, 144, 255, 0.75), 0 1px 1px rgba(0, 0, 0, 0.15);
+  padding-bottom: calc(var(ads-help-tray-footer-with-support-link-height) + var(ads-help-tray-header-height-new));
+}
+
+=====================================output=====================================
+div {
+  background: var(fig-light-02) url(/images/inset-shadow-east-ltr.png) 100% 0
+    repeat-y;
+  box-shadow: 0 0 1px 2px rgba(88, 144, 255, 0.75),
+    0 1px 1px rgba(0, 0, 0, 0.15);
+  padding-bottom: calc(
+    var(ads-help-tray-footer-with-support-link-height) +
+      var(ads-help-tray-header-height-new)
+  );
+}
+
+================================================================================
+`;
+
+exports[`selectors.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+a {
+  ~ .Pagination-itemWrapper:not(.is-separator):not([data-priority^='#{$priority}'])
+    ~ .Pagination-itemWrapper.is-separator[data-priority^='#{$priority}'] {
+    display: flex;
+  }
+}
+
+=====================================output=====================================
+a {
+  ~ .Pagination-itemWrapper:not(.is-separator):not([data-priority^="#{$priority}"])
+    ~ .Pagination-itemWrapper.is-separator[data-priority^="#{$priority}"] {
+    display: flex;
+  }
+}
+
+================================================================================
+`;

tests/format/css/indent/indent.css

@@ -0,0 +1,5 @@
+div {
+  background: var(fig-light-02) url(/images/inset-shadow-east-ltr.png) 100% 0 repeat-y;
+  box-shadow: 0 0 1px 2px rgba(88, 144, 255, 0.75), 0 1px 1px rgba(0, 0, 0, 0.15);
+  padding-bottom: calc(var(ads-help-tray-footer-with-support-link-height) + var(ads-help-tray-header-height-new));
+}

tests/format/css/indent/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname, ["css"]);

tests/format/css/indent/selectors.css

@@ -0,0 +1,6 @@
+a {
+  ~ .Pagination-itemWrapper:not(.is-separator):not([data-priority^='#{$priority}'])
+    ~ .Pagination-itemWrapper.is-separator[data-priority^='#{$priority}'] {
+    display: flex;
+  }
+}

tests/format/css/inline-url/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,130 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`empty.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+@font-face {
+  src: url();
+}
+
+=====================================output=====================================
+@font-face {
+  src: url();
+}
+
+================================================================================
+`;
+
+exports[`inline_url.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+.stringContentIsNotModifiedEvenIfInvalid {
+  background: url('@images');
+  background: url("$images");
+  background: url('/+0PX!/"\\a?~^[]{} $%#');
+  background: url("/+0PX!/'\\a?~^[]{} $%#");
+  background: url(
+    "whitespace-around-string"
+  );
+}
+
+.validUnquotedUrls {
+  background: url(
+    whitespace-around-string
+  );
+  background-image: url(/images/product/simple_product_manager/breadcrumb/chevron_right.png);
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO4/B8AAqgB0yr7dJgAAAAASUVORK5CYII=);
+  background-image: url(data:application/font-woff;charset=utf-8;base64,ThisIsNormalBut/+0ThisIsLowerCased);
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO4/B8AAqgB0yr7dJgAAAAASUVORK5CYII=) center center no-repeat;
+  background: url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%229%22%20height=%229%22%3E%3Cpath%20d=%22M0%203h3%22%20stroke=%22red%22/%3E%3C/svg%3E);
+  offset-path: url(#path);
+  background: url(data/+0ThisShouldNotBeLowerCased);
+  background: url(https://foo/A*3I8oSY6AKRMAAAAAAAAAAABkARQnAQ);
+  background: url(https://example.com/some/quite,long,url,with,commas.jpg);
+  background: url(http://123.example.com);
+}
+@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap);
+
+.validUnqotedUrlsThatAreParsedByLess {
+  background: url(@foo);
+}
+
+.validUnquotedUrlsThatAreParsedBySass {
+  background: url($foo);
+  background: url($foo+$bar);
+  background: url($foo*3);
+  background: url($foo/$bar);
+}
+
+.invalidUnquotedUrlsButWeParseThemAnyway {
+  background: url(--var(foo-bar,#dadce0));
+  -fb-sprite: url(fbglyph:cross-outline, fig-white);
+}
+
+.number {
+  background-image: url(http://123.com);
+  background: url(path/to/123.jpg);
+  background: url(#123.foo);
+  background: no-repeat center/80% url(http://123.com);
+  background: no-repeat center/80% url(path/to/123.jpg);
+  background: no-repeat center/80% url(#123.foo);
+}
+
+=====================================output=====================================
+.stringContentIsNotModifiedEvenIfInvalid {
+  background: url("@images");
+  background: url("$images");
+  background: url('/+0PX!/"\\a?~^[]{} $%#');
+  background: url("/+0PX!/'\\a?~^[]{} $%#");
+  background: url("whitespace-around-string");
+}
+
+.validUnquotedUrls {
+  background: url(whitespace-around-string);
+  background-image: url(/images/product/simple_product_manager/breadcrumb/chevron_right.png);
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO4/B8AAqgB0yr7dJgAAAAASUVORK5CYII=);
+  background-image: url(data:application/font-woff;charset=utf-8;base64,ThisIsNormalBut/+0ThisIsLowerCased);
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO4/B8AAqgB0yr7dJgAAAAASUVORK5CYII=)
+    center center no-repeat;
+  background: url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%229%22%20height=%229%22%3E%3Cpath%20d=%22M0%203h3%22%20stroke=%22red%22/%3E%3C/svg%3E);
+  offset-path: url(#path);
+  background: url(data/+0ThisShouldNotBeLowerCased);
+  background: url(https://foo/A*3I8oSY6AKRMAAAAAAAAAAABkARQnAQ);
+  background: url(https://example.com/some/quite,long,url,with,commas.jpg);
+  background: url(http://123.example.com);
+}
+@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap);
+
+.validUnqotedUrlsThatAreParsedByLess {
+  background: url(@foo);
+}
+
+.validUnquotedUrlsThatAreParsedBySass {
+  background: url($foo);
+  background: url($foo+$bar);
+  background: url($foo*3);
+  background: url($foo/$bar);
+}
+
+.invalidUnquotedUrlsButWeParseThemAnyway {
+  background: url(--var(foo-bar, #dadce0));
+  -fb-sprite: url(fbglyph:cross-outline, fig-white);
+}
+
+.number {
+  background-image: url(http://123.com);
+  background: url(path/to/123.jpg);
+  background: url(#123.foo);
+  background: no-repeat center/80% url(http://123.com);
+  background: no-repeat center/80% url(path/to/123.jpg);
+  background: no-repeat center/80% url(#123.foo);
+}
+
+================================================================================
+`;