Skip to content
This repository was archived by the owner on Apr 6, 2021. It is now read-only.

Commit 8b7c9df

Browse files
bradlcbradlc
committed
add arbitrary values test
1 parent 6fe9cb4 commit 8b7c9df

File tree

3 files changed

+133
-0
lines changed

3 files changed

+133
-0
lines changed

‎tests/08-arbitrary-values.test.css

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
* {
2+
--tw-shadow: 0 0 #0000;
3+
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
4+
--tw-ring-offset-width: 0px;
5+
--tw-ring-offset-color: #fff;
6+
--tw-ring-color: rgba(59, 130, 246, 0.5);
7+
--tw-ring-offset-shadow: 0 0 #0000;
8+
--tw-ring-shadow: 0 0 #0000;
9+
}
10+
.w-\[3\.23rem\] {
11+
width: 3.23rem;
12+
}
13+
.w-\[calc\(100\%\+1rem\)\] {
14+
width: calc(100% + 1rem);
15+
}
16+
.rotate-\[23deg\] {
17+
--tw-rotate: 23deg;
18+
}
19+
.rotate-\[2\.3rad\] {
20+
--tw-rotate: 2.3rad;
21+
}
22+
.rotate-\[401grad\] {
23+
--tw-rotate: 401grad;
24+
}
25+
.rotate-\[1\.5turn\] {
26+
--tw-rotate: 1.5turn;
27+
}
28+
.grid-cols-\[200px\,repeat\(auto-fill\,minmax\(15\%\,100px\)\)\,300px\] {
29+
grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
30+
}
31+
.space-x-\[20cm\] > :not([hidden]) ~ :not([hidden]) {
32+
--tw-space-x-reverse: 0;
33+
margin-right: calc(20cm * var(--tw-space-x-reverse));
34+
margin-left: calc(20cm * calc(1 - var(--tw-space-x-reverse)));
35+
}
36+
.space-x-\[calc\(20\%-1cm\)\] > :not([hidden]) ~ :not([hidden]) {
37+
--tw-space-x-reverse: 0;
38+
margin-right: calc(calc(20% - 1cm) * var(--tw-space-x-reverse));
39+
margin-left: calc(calc(20% - 1cm) * calc(1 - var(--tw-space-x-reverse)));
40+
}
41+
.border-\[2\.5px\] {
42+
border-width: 2.5px;
43+
}
44+
.border-\[\#f00\] {
45+
--tw-border-opacity: 1;
46+
border-color: rgba(255, 0, 0, var(--tw-border-opacity));
47+
}
48+
.bg-\[\#0f0\] {
49+
--tw-bg-opacity: 1;
50+
background-color: rgba(0, 255, 0, var(--tw-bg-opacity));
51+
}
52+
.bg-\[\#ff0000\] {
53+
--tw-bg-opacity: 1;
54+
background-color: rgba(255, 0, 0, var(--tw-bg-opacity));
55+
}
56+
.bg-\[\#0000ffcc\] {
57+
background-color: #0000ffcc;
58+
}
59+
.bg-\[rgb\(123\,123\,123\)\] {
60+
--tw-bg-opacity: 1;
61+
background-color: rgba(123, 123, 123, var(--tw-bg-opacity));
62+
}
63+
.bg-\[rgba\(123\,123\,123\,0\.5\)\] {
64+
background-color: rgba(123, 123, 123, 0.5);
65+
}
66+
.bg-\[hsl\(0\,100\%\,50\%\)\] {
67+
--tw-bg-opacity: 1;
68+
background-color: rgba(255, 0, 0, var(--tw-bg-opacity));
69+
}
70+
.bg-\[hsla\(0\,100\%\,50\%\,0\.3\)\] {
71+
background-color: hsla(0, 100%, 50%, 0.3);
72+
}
73+
.bg-opacity-\[0\.11\] {
74+
--tw-bg-opacity: 0.11;
75+
}
76+
.text-\[2\.23rem\] {
77+
font-size: 2.23rem;
78+
}

‎tests/08-arbitrary-values.test.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Title</title>
8+
<link rel="stylesheet" href="./tailwind.css" />
9+
</head>
10+
<body>
11+
<div class="bg-[#0f0] bg-[#ff0000] bg-[#0000ffcc]"></div>
12+
<div class="bg-[rgb(123,123,123)] bg-[rgba(123,123,123,0.5)]"></div>
13+
<div class="bg-[hsl(0,100%,50%)] bg-[hsla(0,100%,50%,0.3)]"></div>
14+
<div class="bg-opacity-[0.11]"></div>
15+
<div class="border-[#f00]"></div>
16+
<div class="border-[2.5px]"></div>
17+
<div class="w-[3.23rem]"></div>
18+
<div class="w-[calc(100%+1rem)]"></div>
19+
<div class="space-x-[20cm]"></div>
20+
<div class="space-x-[calc(20%-1cm)]"></div>
21+
<div class="grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
22+
<div class="rotate-[23deg] rotate-[2.3rad] rotate-[401grad] rotate-[1.5turn]"></div>
23+
<div class="text-[2.23rem]"></div>
24+
</body>
25+
</html>

‎tests/08-arbitrary-values.test.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
const postcss = require('postcss')
2+
const tailwind = require('../src/index.js')
3+
const fs = require('fs')
4+
const path = require('path')
5+
6+
function run(input, config = {}) {
7+
return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
8+
}
9+
10+
test('arbitrary values', () => {
11+
let config = {
12+
purge: [path.resolve(__dirname, './08-arbitrary-values.test.html')],
13+
corePlugins: { preflight: false },
14+
theme: {},
15+
plugins: [],
16+
}
17+
18+
let css = `
19+
@tailwind base;
20+
@tailwind components;
21+
@tailwind utilities;
22+
`
23+
24+
return run(css, config).then((result) => {
25+
let expectedPath = path.resolve(__dirname, './08-arbitrary-values.test.css')
26+
let expected = fs.readFileSync(expectedPath, 'utf8')
27+
28+
expect(result.css).toMatchCss(expected)
29+
})
30+
})

0 commit comments

Comments
 (0)