Skip to content

Commit 10e3a7b

Browse files
dgkncadgknca
committed
2 parents 5e0e998 + 58e2db4 commit 10e3a7b

File tree

4 files changed

+2284
-25
lines changed

4 files changed

+2284
-25
lines changed

‎README.md

+3-7
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ There are no any `container-name` utilities by default. You should define your o
6565
## Example Usage
6666

6767
```html
68-
<div class=" h-60 w-60 bg-gray-300 overflow-auto resize container-type-size">
68+
<div class="overflow-auto bg-gray-300 resize h-60 w-60 container-type-size">
6969
<h1 class="bg-green-300 cq-w-6:bg-yellow-400">Resize the container and see the background color change</h1>
7070
</div>
7171
```
@@ -84,7 +84,7 @@ There are no any `container-name` utilities by default. You should define your o
8484
## Using Container Names
8585

8686
```html
87-
<div class=" h-60 w-60 bg-gray-300 overflow-auto resize container-type-size">
87+
<div class="overflow-auto bg-gray-300 resize h-60 w-60 container-type-size">
8888
<h1 class="bg-green-300 cq-w-sidebar-6:bg-yellow-400">Resize the container and see the background color change</h1>
8989
</div>
9090
```
@@ -136,8 +136,4 @@ module.exports = {
136136
}
137137
```
138138

139-
## [Demo Page](https://dgknca.github.io/tailwindcss-container-query/)
140-
141-
## TODO
142-
143-
- [ ] Add tests
139+
## [Demo Page](https://dgknca.github.io/tailwindcss-container-query/)

‎package.json

+3
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
],
1616
"license": "MIT",
1717
"scripts": {
18+
"test": "jest",
1819
"demo:dev": "npx tailwindcss -i ./demo/style.css -o ./demo/output.css --watch",
1920
"demo:build": "npx tailwindcss -i ./demo/style.css -o ./demo/output.css",
2021
"demo:deploy": "rm -rf demo/output.css && yarn run demo:build && gh-pages -d demo",
@@ -27,6 +28,8 @@
2728
"autoprefixer": "^10.4.0",
2829
"clean-css": "^5.2.2",
2930
"gh-pages": "^3.2.3",
31+
"jest": "^27.4.4",
32+
"jest-matcher-css": "^1.1.0",
3033
"postcss": "^8.4.4",
3134
"tailwindcss": "^3.0.0"
3235
}

‎test/index.test.js

+175
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
const cssMatcher = require('jest-matcher-css')
2+
const postcss = require('postcss')
3+
const tailwindcss = require('tailwindcss')
4+
5+
const defaultOptions = {
6+
corePlugins: { preflight: false },
7+
plugins: [require('../src')],
8+
}
9+
10+
function run(input, config, plugin = tailwindcss) {
11+
return postcss(
12+
plugin(config)
13+
)
14+
.process(input, {
15+
from: undefined
16+
})
17+
}
18+
19+
expect.extend({
20+
toMatchCss: cssMatcher
21+
})
22+
23+
it('should add the container query at-rule for `.cq-w-22` class and its contents', () => {
24+
const config = {
25+
...defaultOptions,
26+
content: [{ raw: String.raw`<div class="cq-w-22:bg-yellow-200"></div>` }],
27+
}
28+
29+
return run('@tailwind utilities;', config).then((result) => {
30+
expect(result.css).toMatchCss(String.raw`
31+
@container (min-width: 352px) {
32+
.cq-w-22\:bg-yellow-200 {
33+
--tw-bg-opacity: 1;
34+
background-color: rgb(254 240 138 / var(--tw-bg-opacity));
35+
}
36+
}
37+
`)
38+
})
39+
})
40+
41+
it('should add the container query at-rule for `.cq-h-22` class and its contents', () => {
42+
const config = {
43+
...defaultOptions,
44+
content: [{ raw: String.raw`<div class="cq-h-22:bg-yellow-200"></div>` }],
45+
}
46+
47+
return run('@tailwind utilities;', config).then((result) => {
48+
expect(result.css).toMatchCss(String.raw`
49+
@container (min-height: 352px) {
50+
.cq-h-22\:bg-yellow-200 {
51+
--tw-bg-opacity: 1;
52+
background-color: rgb(254 240 138 / var(--tw-bg-opacity));
53+
}
54+
}
55+
`)
56+
})
57+
})
58+
59+
it('should add the `container-type-size` class', () => {
60+
const config = {
61+
...defaultOptions,
62+
content: [{ raw: String.raw`<div class="container-type-size"></div>` }],
63+
}
64+
65+
return run('@tailwind utilities;', config).then((result) => {
66+
expect(result.css).toMatchCss(String.raw`
67+
.container-type-size {
68+
container-type: size;
69+
}
70+
`)
71+
})
72+
})
73+
74+
it('should add the `container-type-inline-size` class', () => {
75+
const config = {
76+
...defaultOptions,
77+
content: [{ raw: String.raw`<div class="container-type-inline-size"></div>` }],
78+
}
79+
80+
return run('@tailwind utilities;', config).then((result) => {
81+
expect(result.css).toMatchCss(String.raw`
82+
.container-type-inline-size {
83+
container-type: inline-size;
84+
}
85+
`)
86+
})
87+
})
88+
89+
it('should add the `container-type-block-size` class', () => {
90+
const config = {
91+
...defaultOptions,
92+
content: [{ raw: String.raw`<div class="container-type-block-size"></div>` }],
93+
}
94+
95+
return run('@tailwind utilities;', config).then((result) => {
96+
expect(result.css).toMatchCss(String.raw`
97+
.container-type-block-size {
98+
container-type: block-size;
99+
}
100+
`)
101+
})
102+
})
103+
104+
it('should add the `container-type-style` class', () => {
105+
const config = {
106+
...defaultOptions,
107+
content: [{ raw: String.raw`<div class="container-type-style"></div>` }],
108+
}
109+
110+
return run('@tailwind utilities;', config).then((result) => {
111+
expect(result.css).toMatchCss(String.raw`
112+
.container-type-style {
113+
container-type: style;
114+
}
115+
`)
116+
})
117+
})
118+
119+
it('should add the `container-type-state` class', () => {
120+
const config = {
121+
...defaultOptions,
122+
content: [{ raw: String.raw`<div class="container-type-state"></div>` }],
123+
}
124+
125+
return run('@tailwind utilities;', config).then((result) => {
126+
expect(result.css).toMatchCss(String.raw`
127+
.container-type-state {
128+
container-type: state;
129+
}
130+
`)
131+
})
132+
})
133+
134+
it('should create the `container-name-sidebar` class', () => {
135+
const config = {
136+
...defaultOptions,
137+
content: [{ raw: String.raw`<div class="container-name-sidebar"></div>` }],
138+
theme: {
139+
containerName: {
140+
sidebar: 'sidebar'
141+
}
142+
},
143+
}
144+
145+
return run('@tailwind utilities;', config).then((result) => {
146+
expect(result.css).toMatchCss(String.raw`
147+
.container-name-sidebar {
148+
container-name: sidebar;
149+
}
150+
`)
151+
})
152+
})
153+
154+
it('should create a named container query at-rule', () => {
155+
const config = {
156+
...defaultOptions,
157+
content: [{ raw: String.raw`<div class="cq-w-sidebar-22:bg-yellow-200"></div>` }],
158+
theme: {
159+
containerName: {
160+
sidebar: 'sidebar'
161+
}
162+
},
163+
}
164+
165+
return run('@tailwind utilities;', config).then((result) => {
166+
expect(result.css).toMatchCss(String.raw`
167+
@container sidebar (min-width: 352px) {
168+
.cq-w-22\:bg-yellow-200 {
169+
--tw-bg-opacity: 1;
170+
background-color: rgb(254 240 138 / var(--tw-bg-opacity));
171+
}
172+
}
173+
`)
174+
})
175+
})

0 commit comments

Comments
 (0)