nweiz@google.com
9f3e165c1e
This changes "file:1:2" to "line 1, column 2 of file" and ":1:2" to "line 1, column 2" in [SourceFile.getLocationMessage]. The more machine-readable colon-separated format doesn't make sense for a message intended for humans. Since [Location.formatString] seems more likely to be consumed by machines, its format was left as-is. This also prepares version 0.9.1 for release. This was previously submitted as r36603. That caused buildbot errors and was rolled back by r36615. This CL fixes the test errors in r36603. R=sigmund@google.com Review URL: https://codereview.chromium.org//304603003 git-svn-id: https://dart.googlecode.com/svn/branches/bleeding_edge/dart@36717 260f80e4-7a28-3924-810f-c04153c831b5
927 lines
20 KiB
Dart
927 lines
20 KiB
Dart
// Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file
|
|
// for details. All rights reserved. Use of this source code is governed by a
|
|
// BSD-style license that can be found in the LICENSE file.
|
|
|
|
library var_test;
|
|
|
|
import 'package:unittest/unittest.dart';
|
|
import 'testing.dart';
|
|
|
|
List options = ['--no-colors', '--warnings_as_errors', 'memory'];
|
|
|
|
compileAndValidate(String input, String generated) {
|
|
var errors = [];
|
|
var stylesheet = compileCss(input, errors: errors, opts: options);
|
|
expect(stylesheet != null, true);
|
|
expect(errors.isEmpty, true, reason: errors.toString());
|
|
expect(prettyPrint(stylesheet), generated);
|
|
}
|
|
|
|
compilePolyfillAndValidate(String input, String generated) {
|
|
var errors = [];
|
|
var stylesheet = polyFillCompileCss(input, errors: errors, opts: options);
|
|
expect(stylesheet != null, true);
|
|
expect(errors.isEmpty, true, reason: errors.toString());
|
|
expect(prettyPrint(stylesheet), generated);
|
|
}
|
|
|
|
void simpleVar() {
|
|
final input = ''':root {
|
|
var-color-background: red;
|
|
var-color-foreground: blue;
|
|
|
|
var-c: #00ff00;
|
|
var-b: var(c);
|
|
var-a: var(b);
|
|
}
|
|
.testIt {
|
|
color: var(color-foreground);
|
|
background: var(color-background);
|
|
}
|
|
''';
|
|
|
|
final generated = ''':root {
|
|
var-color-background: #f00;
|
|
var-color-foreground: #00f;
|
|
var-c: #0f0;
|
|
var-b: var(c);
|
|
var-a: var(b);
|
|
}
|
|
.testIt {
|
|
color: var(color-foreground);
|
|
background: var(color-background);
|
|
}''';
|
|
|
|
final generatedPolyfill = ''':root {
|
|
}
|
|
.testIt {
|
|
color: #00f;
|
|
background: #f00;
|
|
}''';
|
|
|
|
compileAndValidate(input, generated);
|
|
compilePolyfillAndValidate(input, generatedPolyfill);
|
|
}
|
|
|
|
void expressionsVar() {
|
|
final errors = [];
|
|
final input = ''':root {
|
|
var-color-background: red;
|
|
var-color-foreground: blue;
|
|
|
|
var-c: #00ff00;
|
|
var-b: var(c);
|
|
var-a: var(b);
|
|
|
|
var-image: url(test.png);
|
|
|
|
var-b-width: 20cm;
|
|
var-m-width: 33%;
|
|
var-b-height: 30EM;
|
|
var-width: .6in;
|
|
var-length: 1.2in;
|
|
var-web-stuff: -10Px;
|
|
var-rgba: rgba(10,20,255);
|
|
var-transition: color 0.4s;
|
|
var-transform: rotate(20deg);
|
|
var-content: "✔";
|
|
var-text-shadow: 0 -1px 0 #bfbfbf;
|
|
var-font-family: Gentium;
|
|
var-src: url("http://example.com/fonts/Gentium.ttf");
|
|
var-src-1: local(Gentium Bold), local(Gentium-Bold), url("GentiumBold.ttf");
|
|
var-unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;
|
|
var-unicode-range-1: U+0A-FF, U+980-9FF, U+????, U+3???;
|
|
var-grid-columns: 10px ("content" 1fr 10px) [4];
|
|
}
|
|
|
|
.testIt {
|
|
color: var(color-foreground);
|
|
background: var(c);
|
|
background-image: var(image);
|
|
|
|
border-width: var(b-width);
|
|
margin-width: var(m-width);
|
|
border-height: var(b-height);
|
|
width: var(width);
|
|
length: var(length);
|
|
-web-stuff: var(web-stuff);
|
|
background-color: var(rgba);
|
|
|
|
transition: var(transition);
|
|
transform: var(transform);
|
|
content: var(content);
|
|
text-shadow: var(text-shadow);
|
|
}
|
|
|
|
@font-face {
|
|
font-family: var(font-family);
|
|
src: var(src);
|
|
unicode-range: var(unicode-range);
|
|
}
|
|
|
|
@font-face {
|
|
font-family: var(font-family);
|
|
src: var(src-1);
|
|
unicode-range: var(unicode-range-1);
|
|
}
|
|
|
|
.foobar {
|
|
grid-columns: var(grid-columns);
|
|
}
|
|
''';
|
|
|
|
final generated = ''':root {
|
|
var-color-background: #f00;
|
|
var-color-foreground: #00f;
|
|
var-c: #0f0;
|
|
var-b: var(c);
|
|
var-a: var(b);
|
|
var-image: url("test.png");
|
|
var-b-width: 20cm;
|
|
var-m-width: 33%;
|
|
var-b-height: 30em;
|
|
var-width: .6in;
|
|
var-length: 1.2in;
|
|
var-web-stuff: -10px;
|
|
var-rgba: rgba(10, 20, 255);
|
|
var-transition: color 0.4s;
|
|
var-transform: rotate(20deg);
|
|
var-content: "✔";
|
|
var-text-shadow: 0 -1px 0 #bfbfbf;
|
|
var-font-family: Gentium;
|
|
var-src: url("http://example.com/fonts/Gentium.ttf");
|
|
var-src-1: local(Gentium Bold), local(Gentium-Bold), url("GentiumBold.ttf");
|
|
var-unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;
|
|
var-unicode-range-1: U+0A-FF, U+980-9FF, U+????, U+3???;
|
|
var-grid-columns: 10px ("content" 1fr 10px) [4];
|
|
}
|
|
.testIt {
|
|
color: var(color-foreground);
|
|
background: var(c);
|
|
background-image: var(image);
|
|
border-width: var(b-width);
|
|
margin-width: var(m-width);
|
|
border-height: var(b-height);
|
|
width: var(width);
|
|
length: var(length);
|
|
-web-stuff: var(web-stuff);
|
|
background-color: var(rgba);
|
|
transition: var(transition);
|
|
transform: var(transform);
|
|
content: var(content);
|
|
text-shadow: var(text-shadow);
|
|
}
|
|
@font-face {
|
|
font-family: var(font-family);
|
|
src: var(src);
|
|
unicode-range: var(unicode-range);
|
|
}
|
|
@font-face {
|
|
font-family: var(font-family);
|
|
src: var(src-1);
|
|
unicode-range: var(unicode-range-1);
|
|
}
|
|
.foobar {
|
|
grid-columns: var(grid-columns);
|
|
}''';
|
|
|
|
compileAndValidate(input, generated);
|
|
|
|
var generatedPolyfill = r''':root {
|
|
}
|
|
.testIt {
|
|
color: #00f;
|
|
background: #0f0;
|
|
background-image: url("test.png");
|
|
border-width: 20cm;
|
|
margin-width: 33%;
|
|
border-height: 30em;
|
|
width: .6in;
|
|
length: 1.2in;
|
|
-web-stuff: -10px;
|
|
background-color: rgba(10, 20, 255);
|
|
transition: color 0.4s;
|
|
transform: rotate(20deg);
|
|
content: "✔";
|
|
text-shadow: 0 -1px 0 #bfbfbf;
|
|
}
|
|
@font-face {
|
|
font-family: Gentium;
|
|
src: url("http://example.com/fonts/Gentium.ttf");
|
|
unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;
|
|
}
|
|
@font-face {
|
|
font-family: Gentium;
|
|
src: local(Gentium Bold), local(Gentium-Bold), url("GentiumBold.ttf");
|
|
unicode-range: U+0A-FF, U+980-9FF, U+????, U+3???;
|
|
}
|
|
.foobar {
|
|
grid-columns: 10px ("content" 1fr 10px) [4];
|
|
}''';
|
|
|
|
compilePolyfillAndValidate(input, generatedPolyfill);
|
|
}
|
|
|
|
void defaultVar() {
|
|
final errors = [];
|
|
final input = '''
|
|
:root {
|
|
var-color-background: red;
|
|
var-color-foreground: blue;
|
|
|
|
var-a: var(b, #0a0);
|
|
var-b: var(c, #0b0);
|
|
var-c: #00ff00;
|
|
|
|
var-image: url(test.png);
|
|
|
|
var-b-width: 20cm;
|
|
var-m-width: 33%;
|
|
var-b-height: 30EM;
|
|
}
|
|
|
|
.test {
|
|
background-color: var(test, orange);
|
|
}
|
|
|
|
body {
|
|
background: var(a) var(image) no-repeat right top;
|
|
}
|
|
|
|
div {
|
|
background: var(color-background) url('img_tree.png') no-repeat right top;
|
|
}
|
|
|
|
.test-2 {
|
|
background: var(color-background) var(image-2, url('img_1.png'))
|
|
no-repeat right top;
|
|
}
|
|
|
|
.test-3 {
|
|
background: var(color-background) var(image) no-repeat right top;
|
|
}
|
|
|
|
.test-4 {
|
|
background: #ffff00 var(image) no-repeat right top;
|
|
}
|
|
|
|
.test-5 {
|
|
background: var(test-color, var(a)) var(image) no-repeat right top;
|
|
}
|
|
|
|
.test-6 {
|
|
border: red var(a-1, solid 20px);
|
|
}
|
|
''';
|
|
|
|
final generated = ''':root {
|
|
var-color-background: #f00;
|
|
var-color-foreground: #00f;
|
|
var-a: var(b, #0a0);
|
|
var-b: var(c, #0b0);
|
|
var-c: #0f0;
|
|
var-image: url("test.png");
|
|
var-b-width: 20cm;
|
|
var-m-width: 33%;
|
|
var-b-height: 30em;
|
|
}
|
|
.test {
|
|
background-color: var(test, #ffa500);
|
|
}
|
|
body {
|
|
background: var(a) var(image) no-repeat right top;
|
|
}
|
|
div {
|
|
background: var(color-background) url("img_tree.png") no-repeat right top;
|
|
}
|
|
.test-2 {
|
|
background: var(color-background) var(image-2, url("img_1.png")) no-repeat right top;
|
|
}
|
|
.test-3 {
|
|
background: var(color-background) var(image) no-repeat right top;
|
|
}
|
|
.test-4 {
|
|
background: #ff0 var(image) no-repeat right top;
|
|
}
|
|
.test-5 {
|
|
background: var(test-color, var(a)) var(image) no-repeat right top;
|
|
}
|
|
.test-6 {
|
|
border: #f00 var(a-1, solid 20px);
|
|
}''';
|
|
|
|
compileAndValidate(input, generated);
|
|
|
|
var generatedPolyfill = r''':root {
|
|
}
|
|
.test {
|
|
background-color: #ffa500;
|
|
}
|
|
body {
|
|
background: #0a0 url("test.png") no-repeat right top;
|
|
}
|
|
div {
|
|
background: #f00 url("img_tree.png") no-repeat right top;
|
|
}
|
|
.test-2 {
|
|
background: #f00 url("img_1.png") no-repeat right top;
|
|
}
|
|
.test-3 {
|
|
background: #f00 url("test.png") no-repeat right top;
|
|
}
|
|
.test-4 {
|
|
background: #ff0 url("test.png") no-repeat right top;
|
|
}
|
|
.test-5 {
|
|
background: #0a0 url("test.png") no-repeat right top;
|
|
}
|
|
.test-6 {
|
|
border: #f00 solid 20px;
|
|
}''';
|
|
|
|
compilePolyfillAndValidate(input, generatedPolyfill);
|
|
}
|
|
|
|
void undefinedVars() {
|
|
final errors = [];
|
|
final input = ''':root {
|
|
var-color-background: red;
|
|
var-color-foreground: blue;
|
|
|
|
var-a: var(b);
|
|
var-b: var(c);
|
|
var-c: #00ff00;
|
|
|
|
var-one: var(two);
|
|
var-two: var(one);
|
|
|
|
var-four: var(five);
|
|
var-five: var(six);
|
|
var-six: var(four);
|
|
|
|
var-def-1: var(def-2);
|
|
var-def-2: var(def-3);
|
|
var-def-3: var(def-2);
|
|
}
|
|
|
|
.testIt {
|
|
color: var(color-foreground);
|
|
background: var(color-background);
|
|
}
|
|
.test-1 {
|
|
color: var(c);
|
|
}
|
|
.test-2 {
|
|
color: var(one);
|
|
background: var(six);
|
|
}
|
|
''';
|
|
|
|
final generatedPolyfill = ''':root {
|
|
}
|
|
.testIt {
|
|
color: #00f;
|
|
background: #f00;
|
|
}
|
|
.test-1 {
|
|
color: #0f0;
|
|
}
|
|
.test-2 {
|
|
color: ;
|
|
background: ;
|
|
}''';
|
|
|
|
var errorStrings = [
|
|
'error on line 5, column 14: Variable is not defined.\n'
|
|
' var-a: var(b);\n'
|
|
' ^^',
|
|
'error on line 6, column 14: Variable is not defined.\n'
|
|
' var-b: var(c);\n'
|
|
' ^^',
|
|
'error on line 9, column 16: Variable is not defined.\n'
|
|
' var-one: var(two);\n'
|
|
' ^^^^',
|
|
'error on line 12, column 17: Variable is not defined.\n'
|
|
' var-four: var(five);\n'
|
|
' ^^^^^',
|
|
'error on line 13, column 17: Variable is not defined.\n'
|
|
' var-five: var(six);\n'
|
|
' ^^^^',
|
|
'error on line 16, column 18: Variable is not defined.\n'
|
|
' var-def-1: var(def-2);\n'
|
|
' ^^^^^^',
|
|
'error on line 17, column 18: Variable is not defined.\n'
|
|
' var-def-2: var(def-3);\n'
|
|
' ^^^^^^',
|
|
];
|
|
|
|
var generated = r''':root {
|
|
var-color-background: #f00;
|
|
var-color-foreground: #00f;
|
|
var-a: var(b);
|
|
var-b: var(c);
|
|
var-c: #0f0;
|
|
var-one: var(two);
|
|
var-two: var(one);
|
|
var-four: var(five);
|
|
var-five: var(six);
|
|
var-six: var(four);
|
|
var-def-1: var(def-2);
|
|
var-def-2: var(def-3);
|
|
var-def-3: var(def-2);
|
|
}
|
|
.testIt {
|
|
color: var(color-foreground);
|
|
background: var(color-background);
|
|
}
|
|
.test-1 {
|
|
color: var(c);
|
|
}
|
|
.test-2 {
|
|
color: var(one);
|
|
background: var(six);
|
|
}''';
|
|
int testBitMap = 0;
|
|
|
|
compileAndValidate(input, generated);
|
|
|
|
var stylesheet = polyFillCompileCss(input, errors: errors..clear(),
|
|
opts: options);
|
|
|
|
expect(stylesheet != null, true);
|
|
|
|
expect(errors.length, errorStrings.length, reason: errors.toString());
|
|
testBitMap = 0;
|
|
|
|
outer: for (var error in errors) {
|
|
var errorString = error.toString();
|
|
for (int i = 0; i < errorStrings.length; i++) {
|
|
if (errorString == errorStrings[i]) {
|
|
testBitMap |= 1 << i;
|
|
continue outer;
|
|
}
|
|
}
|
|
fail("Unexpected error string: $errorString");
|
|
}
|
|
expect(testBitMap, equals((1 << errorStrings.length) - 1));
|
|
expect(prettyPrint(stylesheet), generatedPolyfill);
|
|
}
|
|
|
|
parserVar() {
|
|
final input = ''':root {
|
|
var-color-background: red;
|
|
var-color-foreground: blue;
|
|
|
|
var-c: #00ff00;
|
|
var-b: var(c);
|
|
var-a: var(b);
|
|
|
|
var-image: url(test.png);
|
|
|
|
var-b-width: 20cm;
|
|
var-m-width: 33%;
|
|
var-b-height: 30EM;
|
|
var-width: .6in;
|
|
var-length: 1.2in;
|
|
var-web-stuff: -10Px;
|
|
var-rgba: rgba(10,20,255);
|
|
var-transition: color 0.4s;
|
|
var-transform: rotate(20deg);
|
|
var-content: "✔";
|
|
var-text-shadow: 0 -1px 0 #bfbfbf;
|
|
var-font-family: Gentium;
|
|
var-src: url("http://example.com/fonts/Gentium.ttf");
|
|
var-src-1: local(Gentium Bold), local(Gentium-Bold), url("GentiumBold.ttf");
|
|
var-unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;
|
|
var-unicode-range-1: U+0A-FF, U+980-9FF, U+????, U+3???;
|
|
var-grid-columns: 10px ("content" 1fr 10px) [4];
|
|
}
|
|
|
|
.testIt {
|
|
color: var(color-foreground);
|
|
background: var(c);
|
|
background-image: var(image);
|
|
|
|
border-width: var(b-width);
|
|
margin-width: var(m-width);
|
|
border-height: var(b-height);
|
|
width: var(width);
|
|
length: var(length);
|
|
-web-stuff: var(web-stuff);
|
|
background-color: var(rgba);
|
|
|
|
transition: var(transition);
|
|
transform: var(transform);
|
|
content: var(content);
|
|
text-shadow: var(text-shadow);
|
|
}
|
|
|
|
@font-face {
|
|
font-family: var(font-family);
|
|
src: var(src);
|
|
unicode-range: var(unicode-range);
|
|
}
|
|
|
|
@font-face {
|
|
font-family: var(font-family);
|
|
src: var(src-1);
|
|
unicode-range: var(unicode-range-1);
|
|
}
|
|
|
|
.foobar {
|
|
grid-columns: var(grid-columns);
|
|
}
|
|
''';
|
|
|
|
final generated = ''':root {
|
|
var-color-background: #f00;
|
|
var-color-foreground: #00f;
|
|
var-c: #0f0;
|
|
var-b: var(c);
|
|
var-a: var(b);
|
|
var-image: url("test.png");
|
|
var-b-width: 20cm;
|
|
var-m-width: 33%;
|
|
var-b-height: 30em;
|
|
var-width: .6in;
|
|
var-length: 1.2in;
|
|
var-web-stuff: -10px;
|
|
var-rgba: rgba(10, 20, 255);
|
|
var-transition: color 0.4s;
|
|
var-transform: rotate(20deg);
|
|
var-content: "✔";
|
|
var-text-shadow: 0 -1px 0 #bfbfbf;
|
|
var-font-family: Gentium;
|
|
var-src: url("http://example.com/fonts/Gentium.ttf");
|
|
var-src-1: local(Gentium Bold), local(Gentium-Bold), url("GentiumBold.ttf");
|
|
var-unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;
|
|
var-unicode-range-1: U+0A-FF, U+980-9FF, U+????, U+3???;
|
|
var-grid-columns: 10px ("content" 1fr 10px) [4];
|
|
}
|
|
.testIt {
|
|
color: var(color-foreground);
|
|
background: var(c);
|
|
background-image: var(image);
|
|
border-width: var(b-width);
|
|
margin-width: var(m-width);
|
|
border-height: var(b-height);
|
|
width: var(width);
|
|
length: var(length);
|
|
-web-stuff: var(web-stuff);
|
|
background-color: var(rgba);
|
|
transition: var(transition);
|
|
transform: var(transform);
|
|
content: var(content);
|
|
text-shadow: var(text-shadow);
|
|
}
|
|
@font-face {
|
|
font-family: var(font-family);
|
|
src: var(src);
|
|
unicode-range: var(unicode-range);
|
|
}
|
|
@font-face {
|
|
font-family: var(font-family);
|
|
src: var(src-1);
|
|
unicode-range: var(unicode-range-1);
|
|
}
|
|
.foobar {
|
|
grid-columns: var(grid-columns);
|
|
}''';
|
|
|
|
compileAndValidate(input, generated);
|
|
|
|
var generatedPolyfill = r''':root {
|
|
}
|
|
.testIt {
|
|
color: #00f;
|
|
background: #0f0;
|
|
background-image: url("test.png");
|
|
border-width: 20cm;
|
|
margin-width: 33%;
|
|
border-height: 30em;
|
|
width: .6in;
|
|
length: 1.2in;
|
|
-web-stuff: -10px;
|
|
background-color: rgba(10, 20, 255);
|
|
transition: color 0.4s;
|
|
transform: rotate(20deg);
|
|
content: "✔";
|
|
text-shadow: 0 -1px 0 #bfbfbf;
|
|
}
|
|
@font-face {
|
|
font-family: Gentium;
|
|
src: url("http://example.com/fonts/Gentium.ttf");
|
|
unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;
|
|
}
|
|
@font-face {
|
|
font-family: Gentium;
|
|
src: local(Gentium Bold), local(Gentium-Bold), url("GentiumBold.ttf");
|
|
unicode-range: U+0A-FF, U+980-9FF, U+????, U+3???;
|
|
}
|
|
.foobar {
|
|
grid-columns: 10px ("content" 1fr 10px) [4];
|
|
}''';
|
|
compilePolyfillAndValidate(input, generatedPolyfill);
|
|
}
|
|
|
|
testVar() {
|
|
final errors = [];
|
|
final input = '''
|
|
@color-background: red;
|
|
@color-foreground: blue;
|
|
|
|
.test {
|
|
background-color: var(color-background);
|
|
color: var(color-foreground);
|
|
}
|
|
''';
|
|
final generated = '''
|
|
var-color-background: #f00;
|
|
var-color-foreground: #00f;
|
|
|
|
.test {
|
|
background-color: var(color-background);
|
|
color: var(color-foreground);
|
|
}''';
|
|
|
|
var stylesheet = parseCss(input, errors: errors,
|
|
opts: ['--no-colors', 'memory']);
|
|
|
|
expect(stylesheet != null, true);
|
|
expect(errors.isEmpty, true, reason: errors.toString());
|
|
expect(prettyPrint(stylesheet), generated);
|
|
|
|
compileAndValidate(input, generated);
|
|
|
|
final input2 = '''
|
|
@color-background: red;
|
|
@color-foreground: blue;
|
|
|
|
.test {
|
|
background-color: @color-background;
|
|
color: @color-foreground;
|
|
}
|
|
''';
|
|
final generated2 = '''var-color-background: #f00;
|
|
var-color-foreground: #00f;
|
|
|
|
.test {
|
|
background-color: var(color-background);
|
|
color: var(color-foreground);
|
|
}''';
|
|
|
|
stylesheet = parseCss(input, errors: errors..clear(),
|
|
opts: ['--no-colors', 'memory']);
|
|
|
|
expect(stylesheet != null, true);
|
|
expect(errors.isEmpty, true, reason: errors.toString());
|
|
expect(prettyPrint(stylesheet), generated2);
|
|
|
|
compileAndValidate(input2, generated2);
|
|
}
|
|
|
|
testLess() {
|
|
final errors = [];
|
|
final input = '''
|
|
@color-background: red;
|
|
@color-foreground: blue;
|
|
|
|
.test {
|
|
background-color: var(color-background);
|
|
color: var(color-foreground);
|
|
}
|
|
''';
|
|
final generated = '''var-color-background: #f00;
|
|
var-color-foreground: #00f;
|
|
|
|
.test {
|
|
background-color: var(color-background);
|
|
color: var(color-foreground);
|
|
}''';
|
|
|
|
var stylesheet = parseCss(input, errors: errors,
|
|
opts: ['--no-colors', 'memory']);
|
|
|
|
expect(stylesheet != null, true);
|
|
expect(errors.isEmpty, true, reason: errors.toString());
|
|
expect(prettyPrint(stylesheet), generated);
|
|
|
|
compileAndValidate(input, generated);
|
|
|
|
final input2 = '''
|
|
@color-background: red;
|
|
@color-foreground: blue;
|
|
|
|
.test {
|
|
background-color: @color-background;
|
|
color: @color-foreground;
|
|
}
|
|
''';
|
|
final generated2 = '''var-color-background: #f00;
|
|
var-color-foreground: #00f;
|
|
|
|
.test {
|
|
background-color: var(color-background);
|
|
color: var(color-foreground);
|
|
}''';
|
|
|
|
stylesheet = parseCss(input, errors: errors..clear(),
|
|
opts: ['--no-colors', 'memory']);
|
|
|
|
expect(stylesheet != null, true);
|
|
expect(errors.isEmpty, true, reason: errors.toString());
|
|
expect(prettyPrint(stylesheet), generated2);
|
|
|
|
compileAndValidate(input2, generated2);
|
|
}
|
|
|
|
void polyfill() {
|
|
compilePolyfillAndValidate(r'''
|
|
@color-background: red;
|
|
@color-foreground: blue;
|
|
.test {
|
|
background-color: @color-background;
|
|
color: @color-foreground;
|
|
}''', r'''.test {
|
|
background-color: #f00;
|
|
color: #00f;
|
|
}''');
|
|
}
|
|
|
|
void testIndirects() {
|
|
compilePolyfillAndValidate('''
|
|
:root {
|
|
var-redef: #0f0;
|
|
|
|
var-a1: #fff;
|
|
var-a2: var(a1);
|
|
var-a3: var(a2);
|
|
|
|
var-redef: #000;
|
|
}
|
|
.test {
|
|
background-color: @a1;
|
|
color: @a2;
|
|
border-color: @a3;
|
|
}
|
|
.test-1 {
|
|
color: @redef;
|
|
}''', r''':root {
|
|
}
|
|
.test {
|
|
background-color: #fff;
|
|
color: #fff;
|
|
border-color: #fff;
|
|
}
|
|
.test-1 {
|
|
color: #000;
|
|
}''');
|
|
}
|
|
|
|
void includes() {
|
|
var errors = [];
|
|
var file1Input = r'''
|
|
:root {
|
|
var-redef: #0f0;
|
|
|
|
var-a1: #fff;
|
|
var-a2: var(a1);
|
|
var-a3: var(a2);
|
|
|
|
var-redef: #000;
|
|
}
|
|
.test-1 {
|
|
background-color: @a1;
|
|
color: @a2;
|
|
border-color: @a3;
|
|
}
|
|
.test-1a {
|
|
color: @redef;
|
|
}
|
|
''';
|
|
|
|
var file2Input = r'''
|
|
:root {
|
|
var-redef: #0b0;
|
|
var-b3: var(a3);
|
|
}
|
|
.test-2 {
|
|
color: var(b3);
|
|
background-color: var(redef);
|
|
border-color: var(a3);
|
|
}
|
|
''';
|
|
|
|
var input = r'''
|
|
:root {
|
|
var-redef: #0c0;
|
|
}
|
|
.test-main {
|
|
color: var(b3);
|
|
background-color: var(redef);
|
|
border-color: var(a3);
|
|
}
|
|
''';
|
|
|
|
var generated1 = r''':root {
|
|
var-redef: #0f0;
|
|
var-a1: #fff;
|
|
var-a2: var(a1);
|
|
var-a3: var(a2);
|
|
var-redef: #000;
|
|
}
|
|
.test-1 {
|
|
background-color: var(a1);
|
|
color: var(a2);
|
|
border-color: var(a3);
|
|
}
|
|
.test-1a {
|
|
color: var(redef);
|
|
}''';
|
|
|
|
var stylesheet1 = compileCss(file1Input, errors: errors, opts: options);
|
|
expect(stylesheet1 != null, true);
|
|
expect(errors.isEmpty, true, reason: errors.toString());
|
|
expect(prettyPrint(stylesheet1), generated1);
|
|
|
|
var generated2 = r''':root {
|
|
var-redef: #0b0;
|
|
var-b3: var(a3);
|
|
}
|
|
.test-2 {
|
|
color: var(b3);
|
|
background-color: var(redef);
|
|
border-color: var(a3);
|
|
}''';
|
|
|
|
var stylesheet2 = compileCss(file2Input, includes: [stylesheet1],
|
|
errors: errors..clear(), opts: options);
|
|
expect(stylesheet2 != null, true);
|
|
expect(errors.isEmpty, true, reason: errors.toString());
|
|
expect(prettyPrint(stylesheet2), generated2);
|
|
|
|
var generatedPolyfill1 = r''':root {
|
|
}
|
|
.test-1 {
|
|
background-color: #fff;
|
|
color: #fff;
|
|
border-color: #fff;
|
|
}
|
|
.test-1a {
|
|
color: #000;
|
|
}''';
|
|
var styleSheet1Polyfill = compileCss(file1Input, errors: errors..clear(),
|
|
polyfill: true, opts: options);
|
|
expect(styleSheet1Polyfill != null, true);
|
|
expect(errors.isEmpty, true, reason: errors.toString());
|
|
expect(prettyPrint(styleSheet1Polyfill), generatedPolyfill1);
|
|
|
|
var generatedPolyfill2 = r''':root {
|
|
}
|
|
.test-2 {
|
|
color: #fff;
|
|
background-color: #0b0;
|
|
border-color: #fff;
|
|
}''';
|
|
var styleSheet2Polyfill = compileCss(file2Input, includes: [stylesheet1],
|
|
errors: errors..clear(), polyfill: true, opts: options);
|
|
expect(styleSheet2Polyfill != null, true);
|
|
expect(errors.isEmpty, true, reason: errors.toString());
|
|
expect(prettyPrint(styleSheet2Polyfill), generatedPolyfill2);
|
|
|
|
// Make sure includes didn't change.
|
|
expect(prettyPrint(stylesheet1), generated1);
|
|
|
|
var generatedPolyfill = r''':root {
|
|
}
|
|
.test-main {
|
|
color: #fff;
|
|
background-color: #0c0;
|
|
border-color: #fff;
|
|
}''';
|
|
var stylesheetPolyfill = compileCss(input,
|
|
includes: [stylesheet1, stylesheet2], errors: errors..clear(),
|
|
polyfill: true, opts: options);
|
|
|
|
expect(stylesheetPolyfill != null, true);
|
|
expect(errors.isEmpty, true, reason: errors.toString());
|
|
expect(prettyPrint(stylesheetPolyfill), generatedPolyfill);
|
|
|
|
// Make sure includes didn't change.
|
|
expect(prettyPrint(stylesheet1), generated1);
|
|
expect(prettyPrint(stylesheet2), generated2);
|
|
}
|
|
|
|
main() {
|
|
test('Simple var', simpleVar);
|
|
test('Expressions var', expressionsVar);
|
|
test('Default value in var()', defaultVar);
|
|
test('CSS Parser only var', parserVar);
|
|
test('Var syntax', testVar);
|
|
test('Indirects', testIndirects);
|
|
test('Forward Refs', undefinedVars);
|
|
test('Less syntax', testLess);
|
|
test('Polyfill', polyfill);
|
|
test('Multi-file', includes);
|
|
}
|