[css/less/sass] colorizer tests

extensions/css/test/colorize-fixtures/test.css

@@ -0,0 +1,155 @@
+/* css Zen Garden default style v1.02 */
+/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/  */
+/* This file based on 'Tranquille' by Dave Shea */
+/* You may use this file as a foundation for any new work, but you may find it easier to start from scratch. */
+/* Not all elements are defined in this file, so you'll most likely want to refer to the xhtml as well. */
+/* Your images should be linked as if the CSS file sits in the same folder as the images. ie. no paths. */
+/* basic elements */
+
+.html {
+    padding: 0;
+    font-style: 0;
+}
+body {
+    font: 75% georgia, sans-serif;
+    line-height: 1.88889;
+    color: #555753;
+    background: #fff url(blossoms.jpg) no-repeat bottom right;
+    margin: 0;
+    padding: 0;
+    background-image: -webkit-linear-gradient(top, start-color, end-color);
+    background-image: -webkit-gradient(linear, left top, left bottom, from(start-color), to(end-color));
+    background-image: -moz-linear-gradient(top, start-color, end-color);
+    background-image: linear-gradient(to bottom, start-color, end-color);
+}
+
+p {
+    margin-top: 0;
+    text-align: justify;
+}
+
+h3 {
+    font: italic normal 1.4em georgia, sans-serif;
+    letter-spacing: 1px;
+    margin-bottom: 0;
+    color: #7D775C;
+}
+
+a:link {
+    font-weight: bold;
+    text-decoration: none;
+    color: #B7A5DF;
+}
+
+a:visited {
+    font-weight: bold;
+    text-decoration: none;
+    color: #D4CDDC;
+    cursor: pointer;
+}
+
+a:hover,
+a:focus,
+a:active {
+    text-decoration: underline;
+    color: #9685BA;
+}
+
+abbr {
+    border-bottom: none;
+}
+
+
+/* specific divs */
+
+.page-wrapper {
+    background: url(zen-bg.jpg) no-repeat top left;
+    padding: 0 175px 0 110px;
+    margin: 0;
+    position: relative;
+}
+
+.intro {
+    min-width: 470px;
+    width: 100%;
+}
+
+header h1 {
+    background: transparent url(h1.gif) no-repeat top left;
+    margin-top: 10px;
+    display: block;
+    width: 219px;
+    height: 87px;
+    float: left;
+    text-indent: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+header {
+    padding-top: 20px;
+    height: 87px;
+}
+
+.summary {
+    clear: both;
+    margin: 20px 20px 20px 10px;
+    width: 160px;
+    float: left;
+}
+
+.summary p {
+    font: italic 1.1em/2.2 georgia;
+    text-align: center;
+}
+
+.preamble {
+    clear: right;
+    padding: 0px 10px 0 10px;
+}
+
+.supporting {
+    padding-left: 10px;
+    margin-bottom: 40px;
+}
+
+#footer {
+    text-align: center
+}
+
+footer a:link,
+footer a:visited {
+    margin-right: 20px;
+}
+
+.sidebar {
+    margin-left: 600px;
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+.sidebar .wrapper {
+    font: 10px verdana, sans-serif;
+    background: transparent url(paper-bg.jpg) top left repeat-y;
+    padding: 10px;
+    margin-top: 150px;
+    width: 130px;
+}
+
+.sidebar li a:link {
+    color: #988F5E;
+}
+
+.sidebar li a:visited {
+    color: '#B3AE94';
+}
+
+.extra1 {
+    background: transparent url(cr2.gif) top left no-repeat;
+    position: absolute;
+    top: 40px;
+    right: 0;
+    width: 148px;
+    height: 110px;
+}

extensions/less/test/colorize-fixtures/test.less

@@ -0,0 +1,46 @@
+@base: #f938ab;
+
+.box-shadow(@style, @c) when (iscolor(@c)) {
+	border-radius: @style @c;
+}
+
+.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
+	.box-shadow(@style, rgba(0, 0, 0, @alpha));
+}
+
+.box {
+	color: saturate(@base, 5%);
+	border-color: lighten(@base, 30%);
+
+	div {
+		.box-shadow((0 0 5px), 30%);
+	}
+}
+
+#header {
+	h1 {
+		font-size: 26px;
+		font-weight: bold;
+	}
+
+	p { font-size: 12px;
+		a { text-decoration: none;
+			&:hover { border-width: 1px }
+		}
+	}
+}
+
+@the-border: 1px;
+@base-color: #111;
+@red:        #842210;
+
+#header {
+	color: (@base-color * 3);
+	border-left: @the-border;
+	border-right: (@the-border * 2);
+}
+
+#footer {
+	color: (@base-color + #003300);
+	border-color: desaturate(@red, 10%);
+}

extensions/vscode-colorize-tests/test/colorize-fixtures/test.scss

@@ -0,0 +1,336 @@
+// snippets from the Sass documentation at http://sass-lang.com/
+
+/* css stuff */
+/* charset */
+@charset "UTF-8";
+
+/* nested rules */
+#main {
+  width: 97%;
+  p, div {
+    font-size: 2em;
+    a { font-weight: bold; }
+  }
+  pre { font-size: 3em; }
+}
+
+/* parent selector (&) */
+#main {
+  color: black;
+  a {
+    font-weight: bold;
+    &:hover { color: red; }
+  }
+}
+
+/* nested properties */
+.funky {
+  font: 2px/3px {
+    family: fantasy;
+    size: 30em;
+    weight: bold;
+  }
+  color: black;
+}
+
+/* nesting conflicts */
+tr.default {
+  foo: { // properties
+    foo : 1;
+  }
+  foo: 1px; // rule
+  foo.bar { // selector
+    foo : 1;
+  }
+  foo:bar { // selector
+    foo : 1;
+  }
+  foo: 1px; // rule
+}
+
+/* extended comment syntax */
+/* This comment is
+ * several lines long.
+ * since it uses the CSS comment syntax,
+ * it will appear in the CSS output. */
+body { color: black; }
+
+// These comments are only one line long each.
+// They won't appear in the CSS output,
+// since they use the single-line comment syntax.
+a { color: green; }
+
+/* variables */
+$width: 5em;
+$width: "Second width?" !default;
+#main {
+  $localvar: 6em;
+  width: $width;
+
+  $font-size: 12px;
+  $line-height: 30px;
+  font: #{$font-size}/#{$line-height};
+}
+$name: foo;
+$attr: border;
+p.#{$name} {
+  #{$attr}-color: blue;
+}
+
+/* variable declaration with whitespaces */
+// Set the color of your columns
+$grid-background-column-color     : rgba(100, 100, 225, 0.25)   !default;
+
+/* operations*/
+p {
+  width: (1em + 2em) * 3;
+  color: #010203 + #040506;
+  font-family: sans- + "serif";
+  margin: 3px + 4px auto;
+  content: "I ate #{5 + 10} pies!";
+  color: hsl(0, 100%, 50%);
+  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
+}
+/* functions*/
+$grid-width: 40px;
+$gutter-width: 10px;
+@function grid-width($n) {
+  @return $n * $grid-width + ($n - 1) * $gutter-width;
+}
+#sidebar { width: grid-width(5); }
+
+/* @import */
+@import "foo.scss";
+$family: unquote("Droid+Sans");
+@import "rounded-corners", url("http://fonts.googleapis.com/css?family=#{$family}");
+#main {
+  @import "example";
+}
+
+/* @media */
+.sidebar {
+  width: 300px;
+  @media screen and (orientation: landscape) {
+    width: 500px;
+  }
+}
+
+/* @extend */
+.error {
+  border: 1px #f00;
+  background-color: #fdd;
+}
+.seriousError {
+  @extend .error;
+  border-width: 3px;
+}
+#context a%extreme {
+  color: blue;
+  font-weight: bold;
+  font-size: 2em;
+}
+.notice {
+  @extend %extreme !optional;
+}
+
+/* @debug and @warn */
+@debug 10em + 12em;
+@mixin adjust-location($x, $y) {
+  @if unitless($x) {
+    @warn "Assuming #{$x} to be in pixels";
+    $x: 1px * $x;
+  }
+  @if unitless($y) {
+    @warn "Assuming #{$y} to be in pixels";
+    $y: 1px * $y;
+  }
+  position: relative; left: $x; top: $y;
+}
+
+/* control directives */
+
+/* if statement */
+p {
+  @if 1 + 1 == 2 { border: 1px solid;  }
+  @if 5 < 3      { border: 2px dotted; }
+  @if null       { border: 3px double; }
+}
+
+/* if else statement */
+$type: monster;
+p {
+  @if $type == ocean {
+    color: blue;
+  } @else {
+    color: black;
+  }
+}
+
+/* for statement */
+@for $i from 1 through 3 {
+  .item-#{$i} { width: 2em * $i; }
+}
+
+/* each statement */
+@each $animal in puma, sea-slug, egret, salamander {
+  .#{$animal}-icon {
+    background-image: url('/images/#{$animal}.png');
+  }
+}
+
+/* while statement */
+$i: 6;
+@while $i > 0 {
+  .item-#{$i} { width: 2em * $i; }
+  $i: $i - 2;
+}
+
+/* function with controlstatements */
+@function foo($total, $a) {
+  @for $i from 0 to $total {
+    @if (unit($a) == "%") and ($i == ($total - 1)) {
+      $z: 100%;
+      @return '1';
+    }
+  }
+  @return $grid;
+}
+
+/* @mixin simple*/
+@mixin large-text {
+  font: {
+    family: Arial;
+    size: 20px;
+    weight: bold;
+  }
+  color: #ff0000;
+}
+.page-title {
+  @include large-text;
+  padding: 4px;
+}
+
+/* mixin with parameters */
+@mixin sexy-border($color, $width: 1in) {
+  border: {
+    color: $color;
+    width: $width;
+    style: dashed;
+  }
+}
+p { @include sexy-border(blue); }
+
+/* mixin with varargs */
+@mixin box-shadow($shadows...) {
+  -moz-box-shadow: $shadows;
+  -webkit-box-shadow: $shadows;
+  box-shadow: $shadows;
+}
+.shadows {
+  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
+}
+
+/* include with varargs */
+@mixin colors($text, $background, $border) {
+  color: $text;
+  background-color: $background;
+  border-color: $border;
+}
+$values: #ff0000, #00ff00, #0000ff;
+.primary {
+  @include colors($values...);
+}
+
+/* include with body */
+@mixin apply-to-ie6-only {
+  * html {
+    @content;
+  }
+}
+@include apply-to-ie6-only {
+  #logo {
+    background-image: url(/logo.gif);
+  }
+}
+
+
+
+/* attributes */
+[rel="external"]::after {
+    content: 's';
+}
+/*page */
+@page :left {
+  margin-left: 4cm;
+  margin-right: 3cm;
+}
+
+/* missing semicolons */
+tr.default {
+  foo.bar {
+    $foo: 1px
+  }
+  foo: {
+    foo : white
+  }
+  foo.bar1 {
+    @extend tr.default
+  }
+  foo.bar2 {
+    @import "compass"
+  }
+  bar: black
+}
+
+/* rules without whitespace */
+legend {foo{a:s}margin-top:0;margin-bottom:#123;margin-top:s(1)}
+
+/* extend with interpolation variable */
+@mixin error($a: false) {
+  @extend .#{$a};
+  @extend ##{$a};
+}
+#bar {a: 1px;}
+.bar {b: 1px;}
+foo {
+  @include error('bar');
+}
+
+/* css3: @font face */
+@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
+
+/* rule names with variables */
+.orbit-#{$d}-prev {
+  #{$d}-style: 0;
+  foo-#{$d}: 1;
+  #{$d}-bar-#{$d}: 2;
+  foo-#{$d}-bar: 1;
+}
+
+/* keyframes */
+@-webkit-keyframes NAME-YOUR-ANIMATION {
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
+}
+@-moz-keyframes NAME-YOUR-ANIMATION {
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
+}
+@-o-keyframes NAME-YOUR-ANIMATION {
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
+}
+@keyframes NAME-YOUR-ANIMATION {
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+/* string escaping */
+[data-icon='test-1']:before {
+  content:'\\';
+}
+/* a comment */
+$var1: '\'';
+$var2: "\"";
+/* another comment */
+