1 |
|
2 |
|
3 | import postcss from 'postcss'
|
4 | import assert from 'assert'
|
5 |
|
6 | import constants from '../src'
|
7 |
|
8 | const test = (input, expected) => {
|
9 | let processor = postcss([constants])
|
10 | assert.equal(processor.process(input).css, expected)
|
11 | }
|
12 |
|
13 | describe('constants', () => {
|
14 | it('should pass through an empty string', () => {
|
15 | test('', '')
|
16 | })
|
17 |
|
18 | it('should export a constant', () => {
|
19 | test('@value red blue;', ':export {\n red: blue\n}')
|
20 | })
|
21 |
|
22 | it('gives an error when there is no semicolon between lines', () => {
|
23 | const input = '@value red blue\n@value green yellow'
|
24 | let processor = postcss([constants])
|
25 | const result = processor.process(input)
|
26 | const warnings = result.warnings()
|
27 |
|
28 | assert.equal(warnings.length, 1)
|
29 | assert.equal(warnings[0].text, 'Invalid value definition: red blue\n@value green yellow')
|
30 | })
|
31 |
|
32 | it('should export a more complex constant', () => {
|
33 | test('@value small (max-width: 599px);', ':export {\n small: (max-width: 599px)\n}')
|
34 | })
|
35 |
|
36 | it('should replace constants within the file', () => {
|
37 | test('@value blue red; .foo { color: blue; }', ':export {\n blue: red;\n}\n.foo { color: red; }')
|
38 | })
|
39 |
|
40 | it('should import and re-export a simple constant', () => {
|
41 | test('@value red from "./colors.css";', ':import("./colors.css") {\n i__const_red_0: red\n}\n:export {\n red: i__const_red_0\n}')
|
42 | })
|
43 |
|
44 | it('should import a simple constant and replace usages', () => {
|
45 | test('@value red from "./colors.css"; .foo { color: red; }', ':import("./colors.css") {\n i__const_red_1: red;\n}\n:export {\n red: i__const_red_1;\n}\n.foo { color: i__const_red_1; }')
|
46 | })
|
47 |
|
48 | it('should import and alias a constant and replace usages', () => {
|
49 | test('@value blue as red from "./colors.css"; .foo { color: red; }', ':import("./colors.css") {\n i__const_red_2: blue;\n}\n:export {\n red: i__const_red_2;\n}\n.foo { color: i__const_red_2; }')
|
50 | })
|
51 |
|
52 | it('should import multiple from a single file', () => {
|
53 | test(
|
54 | `@value blue, red from "./colors.css";
|
55 | .foo { color: red; }
|
56 | .bar { color: blue }`,
|
57 | `:import("./colors.css") {
|
58 | i__const_blue_3: blue;
|
59 | i__const_red_4: red;
|
60 | }
|
61 | :export {
|
62 | blue: i__const_blue_3;
|
63 | red: i__const_red_4;
|
64 | }
|
65 | .foo { color: i__const_red_4; }
|
66 | .bar { color: i__const_blue_3 }`)
|
67 | })
|
68 |
|
69 | it('should import from a definition', () => {
|
70 | test(
|
71 | '@value colors: "./colors.css"; @value red from colors;',
|
72 | ':import("./colors.css") {\n i__const_red_5: red\n}\n' +
|
73 | ':export {\n colors: "./colors.css";\n red: i__const_red_5\n}'
|
74 | )
|
75 | })
|
76 |
|
77 | it('should only allow values for paths if defined in the right order', () => {
|
78 | test(
|
79 | '@value red from colors; @value colors: "./colors.css";',
|
80 | ':import(colors) {\n i__const_red_6: red\n}\n' +
|
81 | ':export {\n red: i__const_red_6;\n colors: "./colors.css"\n}'
|
82 | )
|
83 | })
|
84 |
|
85 | it('should allow transitive values', () => {
|
86 | test(
|
87 | '@value aaa: red;\n@value bbb: aaa;\n.a { color: bbb; }',
|
88 | ':export {\n aaa: red;\n bbb: red;\n}\n.a { color: red; }'
|
89 | )
|
90 | })
|
91 |
|
92 | it('should allow transitive values within calc', () => {
|
93 | test(
|
94 | '@value base: 10px;\n@value large: calc(base * 2);\n.a { margin: large; }',
|
95 | ':export {\n base: 10px;\n large: calc(10px * 2);\n}\n.a { margin: calc(10px * 2); }'
|
96 | )
|
97 | })
|
98 |
|
99 | it('should preserve import order', () => {
|
100 | test(
|
101 | '@value a from "./a.css"; @value b from "./b.css";',
|
102 | ':import("./a.css") {\n i__const_a_7: a\n}\n' +
|
103 | ':import("./b.css") {\n i__const_b_8: b\n}\n' +
|
104 | ':export {\n a: i__const_a_7;\n b: i__const_b_8\n}'
|
105 | )
|
106 | })
|
107 |
|
108 | it('should allow custom-property-style names', () => {
|
109 | test(
|
110 | '@value --red from "./colors.css"; .foo { color: --red; }',
|
111 | ':import("./colors.css") {\n i__const___red_9: --red;\n}\n' +
|
112 | ':export {\n --red: i__const___red_9;\n}\n' +
|
113 | '.foo { color: i__const___red_9; }')
|
114 | })
|
115 |
|
116 | it('should allow all colour types', () => {
|
117 | test(
|
118 | '@value named: red; @value 3char #0f0; @value 6char #00ff00; @value rgba rgba(34, 12, 64, 0.3); @value hsla hsla(220, 13.0%, 18.0%, 1);\n' +
|
119 | '.foo { color: named; background-color: 3char; border-top-color: 6char; border-bottom-color: rgba; outline-color: hsla; }',
|
120 | ':export {\n named: red;\n 3char: #0f0;\n 6char: #00ff00;\n rgba: rgba(34, 12, 64, 0.3);\n hsla: hsla(220, 13.0%, 18.0%, 1);\n}\n' +
|
121 | '.foo { color: red; background-color: #0f0; border-top-color: #00ff00; border-bottom-color: rgba(34, 12, 64, 0.3); outline-color: hsla(220, 13.0%, 18.0%, 1); }')
|
122 | })
|
123 | })
|