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('should export a more complex constant', () => {
|
23 | test('@value small (max-width: 599px);', ':export {\n small: (max-width: 599px)\n}')
|
24 | })
|
25 |
|
26 | it('should replace constants within the file', () => {
|
27 | test('@value blue red; .foo { color: blue; }', ':export {\n blue: red;\n}\n.foo { color: red; }')
|
28 | })
|
29 |
|
30 | it('should import and re-export a simple constant', () => {
|
31 | 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}')
|
32 | })
|
33 |
|
34 | it('should import a simple constant and replace usages', () => {
|
35 | 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; }')
|
36 | })
|
37 |
|
38 | it('should import and alias a constant and replace usages', () => {
|
39 | 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; }')
|
40 | })
|
41 |
|
42 | it('should import multiple from a single file', () => {
|
43 | test(
|
44 | `@value blue, red from "./colors.css";
|
45 | .foo { color: red; }
|
46 | .bar { color: blue }`,
|
47 | `:import("./colors.css") {
|
48 | i__const_blue_3: blue;
|
49 | i__const_red_4: red;
|
50 | }
|
51 | :export {
|
52 | blue: i__const_blue_3;
|
53 | red: i__const_red_4;
|
54 | }
|
55 | .foo { color: i__const_red_4; }
|
56 | .bar { color: i__const_blue_3 }`)
|
57 | })
|
58 |
|
59 | it('should import from a definition', () => {
|
60 | test(
|
61 | '@value colors: "./colors.css"; @value red from colors;',
|
62 | ':import("./colors.css") {\n i__const_red_5: red\n}\n' +
|
63 | ':export {\n colors: "./colors.css";\n red: i__const_red_5\n}'
|
64 | )
|
65 | })
|
66 |
|
67 | it('should only allow values for paths if defined in the right order', () => {
|
68 | test(
|
69 | '@value red from colors; @value colors: "./colors.css";',
|
70 | ':import(colors) {\n i__const_red_6: red\n}\n' +
|
71 | ':export {\n red: i__const_red_6;\n colors: "./colors.css"\n}'
|
72 | )
|
73 | })
|
74 |
|
75 | it('should allow transitive values', () => {
|
76 | test(
|
77 | '@value aaa: red;\n@value bbb: aaa;\n.a { color: bbb; }',
|
78 | ':export {\n aaa: red;\n bbb: red;\n}\n.a { color: red; }'
|
79 | )
|
80 | })
|
81 |
|
82 | it('should allow transitive values within calc', () => {
|
83 | test(
|
84 | '@value base: 10px;\n@value large: calc(base * 2);\n.a { margin: large; }',
|
85 | ':export {\n base: 10px;\n large: calc(10px * 2);\n}\n.a { margin: calc(10px * 2); }'
|
86 | )
|
87 | })
|
88 |
|
89 | it('should preserve import order', () => {
|
90 | test(
|
91 | '@value a from "./a.css"; @value b from "./b.css";',
|
92 | ':import("./a.css") {\n i__const_a_7: a\n}\n' +
|
93 | ':import("./b.css") {\n i__const_b_8: b\n}\n' +
|
94 | ':export {\n a: i__const_a_7;\n b: i__const_b_8\n}'
|
95 | )
|
96 | })
|
97 |
|
98 | it('should allow custom-property-style names', () => {
|
99 | test(
|
100 | '@value --red from "./colors.css"; .foo { color: --red; }',
|
101 | ':import("./colors.css") {\n i__const___red_9: --red;\n}\n' +
|
102 | ':export {\n --red: i__const___red_9;\n}\n' +
|
103 | '.foo { color: i__const___red_9; }')
|
104 | })
|
105 | })
|
106 |
|