Skip to content

Commit 577f536

Browse files
adamwathanadamwathan
committed
Update tests that relied on changed implementation details
1 parent b527dcf commit 577f536

File tree

1 file changed

+163
-147
lines changed

1 file changed

+163
-147
lines changed

‎__tests__/processPlugins.test.js‎

Lines changed: 163 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -979,64 +979,46 @@ test('plugins can add multiple sets of utilities and components', () => {
979979
})
980980

981981
test('plugins respect prefix and important options by default when adding utilities', () => {
982-
const { utilities } = processPlugins(
983-
[
984-
function({ addUtilities }) {
985-
addUtilities({
986-
'.rotate-90': {
987-
transform: 'rotate(90deg)',
988-
},
989-
})
990-
},
991-
],
992-
makeConfig({
982+
return _postcss([
983+
tailwind({
993984
prefix: 'tw-',
994985
important: true,
995-
})
996-
)
997-
998-
expect(css(utilities)).toMatchCss(`
999-
@layer utilities {
1000-
@variants {
986+
corePlugins: [],
987+
plugins: [
988+
function({ addUtilities }) {
989+
addUtilities({
990+
'.rotate-90': {
991+
transform: 'rotate(90deg)',
992+
},
993+
})
994+
},
995+
],
996+
}),
997+
])
998+
.process(
999+
`
1000+
@tailwind utilities;
1001+
`,
1002+
{ from: undefined }
1003+
)
1004+
.then(result => {
1005+
const expected = `
10011006
.tw-rotate-90 {
10021007
transform: rotate(90deg) !important
10031008
}
1004-
}
1005-
}
1006-
`)
1007-
})
1009+
`
10081010

1009-
test('when important is a selector it is used to scope utilities instead of adding !important', () => {
1010-
const { utilities } = processPlugins(
1011-
[
1012-
function({ addUtilities }) {
1013-
addUtilities({
1014-
'.rotate-90': {
1015-
transform: 'rotate(90deg)',
1016-
},
1017-
})
1018-
},
1019-
],
1020-
makeConfig({
1021-
important: '#app',
1011+
expect(result.css).toMatchCss(expected)
10221012
})
1023-
)
1024-
1025-
expect(css(utilities)).toMatchCss(`
1026-
@layer utilities {
1027-
@variants {
1028-
#app .rotate-90 {
1029-
transform: rotate(90deg)
1030-
}
1031-
}
1032-
}
1033-
`)
10341013
})
10351014

1036-
test('when important contains a class an error is thrown', () => {
1037-
expect(() => {
1038-
processPlugins(
1039-
[
1015+
test('when important is a selector it is used to scope utilities instead of adding !important', () => {
1016+
return _postcss([
1017+
tailwind({
1018+
prefix: 'tw-',
1019+
important: '#app',
1020+
corePlugins: [],
1021+
plugins: [
10401022
function({ addUtilities }) {
10411023
addUtilities({
10421024
'.rotate-90': {
@@ -1045,65 +1027,89 @@ test('when important contains a class an error is thrown', () => {
10451027
})
10461028
},
10471029
],
1048-
makeConfig({
1049-
important: '#app .project',
1050-
})
1030+
}),
1031+
])
1032+
.process(
1033+
`
1034+
@tailwind utilities;
1035+
`,
1036+
{ from: undefined }
10511037
)
1052-
}).toThrow()
1038+
.then(result => {
1039+
const expected = `
1040+
#app .tw-rotate-90 {
1041+
transform: rotate(90deg)
1042+
}
1043+
`
1044+
1045+
expect(result.css).toMatchCss(expected)
1046+
})
10531047
})
10541048

10551049
test('when important is a selector it scopes all selectors in a rule, even though defining utilities like this is stupid', () => {
1056-
const { utilities } = processPlugins(
1057-
[
1058-
function({ addUtilities }) {
1059-
addUtilities({
1060-
'.rotate-90, .rotate-1\\/4': {
1061-
transform: 'rotate(90deg)',
1062-
},
1063-
})
1064-
},
1065-
],
1066-
makeConfig({
1050+
return _postcss([
1051+
tailwind({
10671052
important: '#app',
1068-
})
1069-
)
1070-
1071-
expect(css(utilities)).toMatchCss(`
1072-
@layer utilities {
1073-
@variants {
1053+
corePlugins: [],
1054+
plugins: [
1055+
function({ addUtilities }) {
1056+
addUtilities({
1057+
'.rotate-90, .rotate-1\\/4': {
1058+
transform: 'rotate(90deg)',
1059+
},
1060+
})
1061+
},
1062+
],
1063+
}),
1064+
])
1065+
.process(
1066+
`
1067+
@tailwind utilities;
1068+
`,
1069+
{ from: undefined }
1070+
)
1071+
.then(result => {
1072+
const expected = `
10741073
#app .rotate-90, #app .rotate-1\\/4 {
10751074
transform: rotate(90deg)
10761075
}
1077-
}
1078-
}
1079-
`)
1076+
`
1077+
1078+
expect(result.css).toMatchCss(expected)
1079+
})
10801080
})
10811081

10821082
test('important utilities are not made double important when important option is used', () => {
1083-
const { utilities } = processPlugins(
1084-
[
1085-
function({ addUtilities }) {
1086-
addUtilities({
1087-
'.rotate-90': {
1088-
transform: 'rotate(90deg) !important',
1089-
},
1090-
})
1091-
},
1092-
],
1093-
makeConfig({
1083+
return _postcss([
1084+
tailwind({
10941085
important: true,
1095-
})
1096-
)
1097-
1098-
expect(css(utilities)).toMatchCss(`
1099-
@layer utilities {
1100-
@variants {
1086+
corePlugins: [],
1087+
plugins: [
1088+
function({ addUtilities }) {
1089+
addUtilities({
1090+
'.rotate-90': {
1091+
transform: 'rotate(90deg) !important',
1092+
},
1093+
})
1094+
},
1095+
],
1096+
}),
1097+
])
1098+
.process(
1099+
`
1100+
@tailwind utilities;
1101+
`,
1102+
{ from: undefined }
1103+
)
1104+
.then(result => {
1105+
const expected = `
11011106
.rotate-90 {
11021107
transform: rotate(90deg) !important
11031108
}
1104-
}
1105-
}
1106-
`)
1109+
`
1110+
1111+
expect(result.css).toMatchCss(expected)
1112+
})
11071113
})
11081114

11091115
test("component declarations respect the 'prefix' option by default", () => {
@@ -1346,69 +1352,79 @@ test("plugins can apply the user's chosen prefix to components manually", () =>
13461352
})
13471353

13481354
test('prefix can optionally be ignored for utilities', () => {
1349-
const { utilities } = processPlugins(
1350-
[
1351-
function({ addUtilities }) {
1352-
addUtilities(
1353-
{
1354-
'.rotate-90': {
1355-
transform: 'rotate(90deg)',
1356-
},
1357-
},
1358-
{
1359-
respectPrefix: false,
1360-
}
1361-
)
1362-
},
1363-
],
1364-
makeConfig({
1355+
return _postcss([
1356+
tailwind({
13651357
prefix: 'tw-',
1366-
important: true,
1367-
})
1368-
)
1369-
1370-
expect(css(utilities)).toMatchCss(`
1371-
@layer utilities {
1372-
@variants {
1358+
corePlugins: [],
1359+
plugins: [
1360+
function({ addUtilities }) {
1361+
addUtilities(
1362+
{
1363+
'.rotate-90': {
1364+
transform: 'rotate(90deg)',
1365+
},
1366+
},
1367+
{
1368+
respectPrefix: false,
1369+
}
1370+
)
1371+
},
1372+
],
1373+
}),
1374+
])
1375+
.process(
1376+
`
1377+
@tailwind utilities;
1378+
`,
1379+
{ from: undefined }
1380+
)
1381+
.then(result => {
1382+
const expected = `
13731383
.rotate-90 {
1374-
transform: rotate(90deg) !important
1384+
transform: rotate(90deg)
13751385
}
1376-
}
1377-
}
1378-
`)
1386+
`
1387+
1388+
expect(result.css).toMatchCss(expected)
1389+
})
13791390
})
13801391

13811392
test('important can optionally be ignored for utilities', () => {
1382-
const { utilities } = processPlugins(
1383-
[
1384-
function({ addUtilities }) {
1385-
addUtilities(
1386-
{
1387-
'.rotate-90': {
1388-
transform: 'rotate(90deg)',
1389-
},
1390-
},
1391-
{
1392-
respectImportant: false,
1393-
}
1394-
)
1395-
},
1396-
],
1397-
makeConfig({
1398-
prefix: 'tw-',
1393+
return _postcss([
1394+
tailwind({
13991395
important: true,
1400-
})
1401-
)
1402-
1403-
expect(css(utilities)).toMatchCss(`
1404-
@layer utilities {
1405-
@variants {
1406-
.tw-rotate-90 {
1396+
corePlugins: [],
1397+
plugins: [
1398+
function({ addUtilities }) {
1399+
addUtilities(
1400+
{
1401+
'.rotate-90': {
1402+
transform: 'rotate(90deg)',
1403+
},
1404+
},
1405+
{
1406+
respectImportant: false,
1407+
}
1408+
)
1409+
},
1410+
],
1411+
}),
1412+
])
1413+
.process(
1414+
`
1415+
@tailwind utilities;
1416+
`,
1417+
{ from: undefined }
1418+
)
1419+
.then(result => {
1420+
const expected = `
1421+
.rotate-90 {
14071422
transform: rotate(90deg)
14081423
}
1409-
}
1410-
}
1411-
`)
1424+
`
1425+
1426+
expect(result.css).toMatchCss(expected)
1427+
})
14121428
})
14131429

14141430
test('variants can still be specified when ignoring prefix and important options', () => {

0 commit comments

Comments
 (0)