8000 Inline plugin functions in tests · iandreyev/tailwindcss@ac80992 · GitHub
Skip to content

Commit ac80992

Browse files
adamwathanadamwathan
committed
Inline plugin functions in tests
1 parent 9234df3 commit ac80992

File tree

1 file changed

+79
-80
lines changed

1 file changed

+79
-80
lines changed

‎__tests__/processPlugins.test.js‎

Lines changed: 79 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -6,72 +6,25 @@ function css(nodes) {
66
return postcss.root({ nodes }).toString()
77
}
88

9-
function objectFitPlugin(variants = []) {
10-
return function({ rule, addUtilities }) {
11-
addUtilities(
12-
[
13-
rule('.object-fill', {
14-
'object-fit': 'fill',
15-
}),
16-
rule('.object-contain', {
17-
'object-fit': 'contain',
18-
}),
19-
rule('.object-cover', {
20-
'object-fit': 'cover',
21-
}),
22-
],
23-
variants
24-
)
25-
}
26-
}
27-
28-
function buttonPlugin() {
29-
return function({ rule, addComponents }) {
30-
addComponents([
31-
rule('.btn-blue', {
32-
'background-color': 'blue',
33-
color: 'white',
34-
padding: '.5rem 1rem',
35-
'border-radius': '.25rem',
36-
}),
37-
rule('.btn-blue:hover', {
38-
'background-color': 'darkblue',
39-
}),
40-
])
41-
}
42-
}
43-
44-
function containerPlugin() {
45-
return function({ rule, atRule, addComponents }) {
46-
addComponents([
47-
rule('.container', {
48-
width: '100%',
49-
}),
50-
atRule('@media (min-width: 100px)', [
51-
rule('.container', {
52-
'max-width': '100px',
53-
}),
54-
]),
55-
atRule('@media (min-width: 200px)', [
56-
rule('.container', {
57-
'max-width': '200px',
58-
}),
59-
]),
60-
atRule('@media (min-width: 300px)', [
61-
rule('.container', {
62-
'max-width': '300px',
63-
}),
64-
]),
65-
])
66-
}
67-
}
68-
699
test('plugins can create utilities', () => {
70-
const config = {
71-
plugins: [objectFitPlugin()],
72-
}
73-
74-
const [components, utilities] = processPlugins(config)
10+
const [components, utilities] = processPlugins({
11+
plugins: [
12+
function({ rule, addUtilities }) {
13+
addUtilities(
14+
[
15+
rule('.object-fill', {
16+
'object-fit': 'fill',
17+
}),
18+
rule('.object-contain', {
19+
'object-fit': 'contain',
20+
}),
21+
rule('.object-cover', {
22+
'object-fit': 'cover',
23+
}),
24+
])
25+
}
26+
],
27+
})
7528

7629
expect(components.length).toBe(0)
7730
expect(css(utilities)).toMatchCss(`
@@ -90,11 +43,24 @@ test('plugins can create utilities', () => {
9043
})
9144

9245
test('plugins can create utilities with variants', () => {
93-
const config = {
94-
plugins: [objectFitPlugin(['responsive', 'hover', 'group-hover', 'focus'])],
95-
}
96-
97-
const [components, utilities] = processPlugins(config)
46+
const [components, utilities] = processPlugins({
47+
plugins: [
48+
function({ rule, addUtilities }) {
49+
addUtilities(
50+
[
51+
rule('.object-fill', {
52+
'object-fit': 'fill',
53+
}),
54+
rule('.object-contain', {
55+
'object-fit': 'contain',
56+
}),
57+
rule('.object-cover', {
58+
'object-fit': 'cover',
59+
}),
60+
], ['responsive', 'hover', 'group-hover', 'focus'])
61+
}
62+
],
63+
})
9864

9965
expect(components.length).toBe(0)
10066
expect(css(utilities)).toMatchCss(`
@@ -113,11 +79,23 @@ test('plugins can create utilities with variants', () => {
11379
})
11480

11581
test('plugins can create components', () => {
116-
const config = {
117-
plugins: [buttonPlugin()],
118-
}
119-
120-
const [components, utilities] = processPlugins(config)
82+
const [components, utilities] = processPlugins({
83+
plugins: [
84+
function({ rule, addComponents }) {
85+
addComponents([
86+
rule('.btn-blue', {
87+
'background-color': 'blue',
88+
color: 'white',
89+
padding: '.5rem 1rem',
90+
'border-radius': '.25rem',
91+
}),
92+
rule('.btn-blue:hover', {
93+
'background-color': 'darkblue',
94+
}),
95+
])
96+
}
97+
],
98+
})
12199

122100
expect(utilities.length).toBe(0)
123101
expect(css(components)).toMatchCss(`
@@ -134,11 +112,32 @@ test('plugins can create components', () => {
134112
})
135113

136114
test('plugins can create components with media queries', () => {
137-
const config = {
138-
plugins: [containerPlugin()],
139-
}
140-
141-
const [components, utilities] = processPlugins(config)
115+
const [components, utilities] = processPlugins({
116+
plugins: [
117+
function({ rule, atRule, addComponents }) {
118+
addComponents([
119+
rule('.container', {
120+
width: '100%',
121+
}),
122+
atRule('@media (min-width: 100px)', [
123+
rule('.container', {
124+
'max-width': '100px',
125+
}),
126+
]),
127+
atRule('@media (min-width: 200px)', [
128+
rule('.container', {
129+
'max-width': '200px',
130+
}),
131+
]),
132+
atRule('@media (min-width: 300px)', [
133+
rule('.container', {
134+
'max-width': '300px',
135+
}),
136+
]),
137+
])
138+
}
139+
],
140+
})
142141

143142
expect(utilities.length).toBe(0)
144143
expect(css(components)).toMatchCss(`

0 commit comments

Comments
 (0)