Fix @mixin, @media, @content, @debug, @warn, @error, @include, Sass v…

…ariables add a newline

lib/formatAtRuleParams.js

@@ -1,14 +1,17 @@
 function formatAtRuleParams (atrule) {
   var params = atrule.params
+  var atName = atrule.name
 
-  if (atrule.name === 'media') {
+   if (atName === 'media' || atName === 'include' || atName === 'mixin') {
     params = params.replace(/\s*:\s*/g, ': ')
+    params = params.replace(/\s*,\s*/g, ', ')
+    params = params.replace(/\s+/g, ' ')
     if (params.match(/^\(\s*/)) {
       params = params.replace(/^\(\s*/g, '(')
     } else {
       params = params.replace(/\s*\(\s*/g, ' (')
     }
-    params = params.replace(/\s*\)\s*/g, ')')
+    params = params.replace(/\s*\)/g, ')')
     params = params.replace(/\)\s*{/g, ') ')
   }
 

lib/formatAtRules.js

@@ -61,15 +61,32 @@ function formatAtRules (root) {
     }
 
     if (atrule.name === 'mixin') {
-      atrule.params = atrule.params.replace(/(^[A-Za-z0-9]+)\s*\(/, "$1 (")
+      atrule.params = atrule.params.replace(/(^[\w|-]+)\s*\(/, "$1(")
     }
 
-    if (atrule.name === 'extend') {
+    if (atrule.name === 'extend' ||
+        atrule.name === 'debug'  ||
+        atrule.name === 'warn'   ||
+        atrule.name === 'error' ) {
+      atrule.params = atrule.params.replace(/\s+/g, " ")
       atrule.raws.before = '\n' + getIndent(atrule)
       atrule.raws.between = ''
     }
 
+    if (atrule.name === 'warn' || atrule.name === 'error') {
+      atrule.params = atrule.params.replace(/("|')\s*/g, '"')
+      atrule.params = atrule.params.replace(/\s*("|')/g, '"')
+    }
+
+    if (atrule.name === 'content') {
+      atrule.raws.before = '\n' + getIndent(atrule)
+      atrule.raws.between = ''
+      atrule.raws.afterName = ''
+    }
+
     if (atrule.name === 'include') {
+      atrule.params = atrule.params.replace(/(^[\w|-]+)\s*\(/, "$1(")
+      atrule.params = atrule.params.replace(/\)\s*{/g, ') ')
       atrule.raws.before = '\n' + getIndent(atrule)
       atrule.raws.between = ''
     }

lib/formatSassVariables.js

@@ -1,7 +1,7 @@
 function formatSassVariables (root) {
   root.walkDecls(function (decl) {
     if (isSassVariable(decl)) {
-      decl.raws.before = ''
+      decl.raws.before = '\n'
       decl.raws.between = ': '
     }
   })

test/fixtures/at-media.css

@@ -0,0 +1,12 @@
+@media   (    max-width:600px    )      {}
+@media   (   min-width:700px) and (     orientation:    landscape){}
+@media (min-width: 700px), handheld and (orientation: landscape) {}
+@media    not      all     and (   monochrome    ) {}
+@media (   not     all    )    and     (   monochrome        ) {}
+@media (  not (   screen     and   (  color  )  )   )  ,   print and   (  color ){}
+@media    screen   and (   device-aspect-ratio:     16/9   ),   screen    and (device-aspect-ratio:16/10  ) {}
+
+@media   (  -webkit-min-device-pixel-ratio:2),
+         (min--moz-device-pixel-ratio: 2        ),
+         (min-resolution:           2dppx),
+         (min-resolution: 192dpi     ){}

test/fixtures/at-media.out.css

@@ -0,0 +1,23 @@
+@media (max-width: 600px) {
+}
+
+@media (min-width: 700px) and ( orientation: landscape) {
+}
+
+@media (min-width: 700px), handheld and (orientation: landscape) {
+}
+
+@media not all and (monochrome) {
+}
+
+@media (not all) and ( monochrome) {
+}
+
+@media (not ( screen and ( color))), print and ( color) {
+}
+
+@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) {
+}
+
+@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx), (min-resolution: 192dpi) {
+}

test/fixtures/readme.out.css

@@ -1,5 +1,5 @@
 // mixin for clearfix
-@mixin clearfix () {
+@mixin clearfix() {
   &:before,
   &:after {
     content: " ";

test/fixtures/sass-content.css

@@ -0,0 +1,19 @@
+/* https://robots.thoughtbot.com/sasss-content-directive */
+
+@mixin     apply-to-ie6-only     {
+  * html {     @content     ;}
+}
+
+   @include    apply-to-ie6-only   {
+  #logo {  background-image: url(/logo.gif);   }
+}
+
+
+@mixin      media($width) {
+         @media   only   screen   and   (max-width: $width)   {   @content;  }
+}
+
+
+@include       media(320px)  {
+  background: red;
+}

test/fixtures/sass-content.out.css

@@ -0,0 +1,20 @@
+/* https://robots.thoughtbot.com/sasss-content-directive */
+@mixin apply-to-ie6-only {
+  * html {
+    @content;
+  }
+}
+@include apply-to-ie6-only{
+  #logo {
+    background-image: url(/logo.gif);
+  }
+}
+
+@mixin media($width) {
+  @media only screen and (max-width: $width) {
+    @content;
+  }
+}
+@include media(320px){
+  background: red;
+}

test/fixtures/sass-include.css

@@ -1,3 +1,12 @@
 .class
 {
        padding:10px;@include        clearfix();}
+
+
+.class
+{@include rounded  (  top,left,   5px);
+       padding:10px;@include        clearfix     ();}
+
+.class
+{
+       padding:10px;@include   horizontal-line---foo__bar    (  1px   solid    #ccc )  ; }

test/fixtures/sass-include.out.css

@@ -2,3 +2,14 @@
   padding: 10px;
   @include clearfix();
 }
+
+.class {
+  @include rounded(top, left, 5px);
+  padding: 10px;
+  @include clearfix();
+}
+
+.class {
+  padding: 10px;
+  @include horizontal-line---foo__bar(1px solid #ccc);
+}

test/fixtures/sass-mixin.css

@@ -1,7 +1,3 @@
-@mixin      clearfix    ()      { &:before,
-  &:after {
-                content:" ";
-    display              : table;  }
-
-  &:after        {clear: both;}
-   }
+@mixin   horizontal-line    (   $border:   1px dashed #ccc,  $padding:10px   )  {
+    border-bottom:$border;
+}

test/fixtures/sass-mixin.out.css

@@ -1,11 +1,3 @@
-@mixin clearfix () {
-  &:before,
-  &:after {
-    content: " ";
-    display: table;
-  }
-
-  &:after {
-    clear: both;
-  }
+@mixin horizontal-line($border: 1px dashed #ccc, $padding: 10px) {
+    border-bottom:$border;
 }

test/fixtures/sass-single-at-rule.css

@@ -0,0 +1,26 @@
+.foo {
+  position: absolute; @debug   10px + 20px  ;
+  display: inline-block;
+  @error   '  Sorry,   but `#{$variable}` is not a valid value for $variable.  ';
+}
+
+
+@debug 10px    +    20px;  $wrn:20px;
+
+
+@warn
+"   The     `border-radius()`
+mixin will be deprecated in version 2.0.   ";
+
+
+.bar {
+  position: absolute;
+  $wrn: 20px;  @warn '   #{$wrn}   '; display: inline-block;
+}
+
+/* http://www.sitepoint.com/using-sasss-error-warn-and-debug-directives/ */
+@if unit($input) == 'px' {
+  @warn
+  "Please remember to use rem values in the `do-math()` function.";
+  // do px math and @return a value;
+}

test/fixtures/sass-single-at-rule.out.css

@@ -0,0 +1,23 @@
+.foo {
+  position: absolute;
+  @debug 10px + 20px;
+  display: inline-block;
+  @error "Sorry, but `#{$variable}` is not a valid value for $variable.";
+}
+@debug 10px + 20px;
+$wrn: 20px;
+@warn "The `border-radius()` mixin will be deprecated in version 2.0.";
+
+.bar {
+  position: absolute;
+  $wrn: 20px;
+  @warn "#{$wrn}";
+  display: inline-block;
+}
+
+/* http://www.sitepoint.com/using-sasss-error-warn-and-debug-directives/ */
+@if unit($input) == 'px' {
+  @warn "Please remember to use rem values in the `do-math()` function.";
+
+  // do px math and @return a value;
+}

test/fixtures/sass-variables.css

@@ -1 +1,7 @@
-   $font-small :10px;
+h2 {display:    inline-block;}
+
+$font-small:    10px;
+      $foo:'fooooo';
+.bar   {
+         font-size: $font-small;  content: $foo;
+}

test/fixtures/sass-variables.out.css

@@ -1 +1,10 @@
+h2 {
+  display: inline-block;
+}
 $font-small: 10px;
+$foo: 'fooooo';
+
+.bar {
+  font-size: $font-small;
+  content: $foo;
+}

test/fixtures/scss.out.css

@@ -1,5 +1,5 @@
 // mixin for clearfix
-@mixin clearfix () {
+@mixin clearfix() {
   &:before,
   &:after {
     content: " ";

test/index.js

@@ -30,6 +30,7 @@ test('nested-atrule')
 test('font-face')
 test('import')
 test('pseudo-element')
+test('at-media')
 
 test('sass-mixin')
 test('sass-extend')
@@ -39,3 +40,5 @@ test('inline-comment')
 test('sass-function')
 test('scss')
 test('sass-comment')
+test('sass-content')
+test('sass-single-at-rule')