|
|
diff --git a/packages/tailwindcss-class-names/tests/extractClassNames.test.js b/packages/tailwindcss-class-names/tests/extractClassNames.test.js
index b276787c05b815552a7f1ca835d2efa5ac5fe396..19290e671a71bea06ee61060cba5c41002db3ce1 100644
--- a/packages/tailwindcss-class-names/tests/extractClassNames.test.js
+++ b/packages/tailwindcss-class-names/tests/extractClassNames.test.js
@@ -3,9 +3,73 @@ const esmImport = require('esm')(module)
const process = esmImport('../src/extractClassNames.mjs').default
postcss = postcss([postcss.plugin('no-op', () => () => {})])
-const processCss = async css =>
+const processCss = async (css) =>
process(await postcss.process(css, { from: undefined }))
+test('processes default container plugin', async () => {
+ const result = await processCss(`
+ .container {
+ width: 100%
+ }
+
+ @media (min-width: 640px) {
+ .container {
+ max-width: 640px
+ }
+ }
+
+ @media (min-width: 768px) {
+ .container {
+ max-width: 768px
+ }
+ }
+
+ @media (min-width: 1024px) {
+ .container {
+ max-width: 1024px
+ }
+ }
+
+ @media (min-width: 1280px) {
+ .container {
+ max-width: 1280px
+ }
+ }
+ `)
+ expect(result).toEqual({
+ context: {},
+ classNames: {
+ container: [
+ { __context: [], __rule: true, __scope: null, width: '100%' },
+ {
+ __rule: true,
+ __scope: null,
+ __context: ['@media (min-width: 640px)'],
+ 'max-width': '640px',
+ },
+ {
+ __rule: true,
+ __scope: null,
+ __context: ['@media (min-width: 768px)'],
+ 'max-width': '768px',
+ },
+ {
+ __rule: true,
+ __scope: null,
+ __context: ['@media (min-width: 1024px)'],
+ 'max-width': '1024px',
+ },
+ {
+ __rule: true,
+ __scope: null,
+ __context: ['@media (min-width: 1280px)'],
+ 'max-width': '1280px',
+ },
+ ],
+ },
+ })
+})
+
test('foo', async () => {
const result = await processCss(`
@media (min-width: 640px) {
@@ -24,43 +88,42 @@
expect(result).toEqual({
context: {
sm: ['@media (min-width: 640px)'],
- hover: [':hover']
+ hover: [':hover'],
},
classNames: {
sm: {
'bg-red': {
__rule: true,
- '@media (min-width: 640px)': {
- __decls: true,
- 'background-color': 'red'
- }
+ __scope: null,
+ __context: ['@media (min-width: 640px)'],
+ 'background-color': 'red',
},
hover: {
'bg-red': {
__rule: true,
- '@media (min-width: 640px)': {
- __decls: true,
- __pseudo: [':hover'],
- 'background-color': 'red'
- }
- }
- }
+ __scope: null,
+ __context: ['@media (min-width: 640px)'],
+ __pseudo: [':hover'],
+ 'background-color': 'red',
+ },
+ },
},
hover: {
'bg-red': {
__rule: true,
- __decls: true,
+ __scope: null,
__pseudo: [':hover'],
- 'background-color': 'red'
- }
- }
- }
+ __context: [],
+ 'background-color': 'red',
+ },
+ },
+ },
})
})
-test('processes basic css', async () => {
+test.only('processes basic css', async () => {
const result = await processCss(`
- .bg-red {
+ .bg-red\\:foo {
background-color: red;
}
`)
@@ -70,10 +133,11 @@ context: {},
classNames: {
'bg-red': {
__rule: true,
- __decls: true,
- 'background-color': 'red'
- }
- }
+ __scope: null,
+ __context: [],
+ 'background-color': 'red',
+ },
+ },
})
})
@@ -89,11 +153,12 @@ context: {},
classNames: {
'bg-red': {
__rule: true,
- __decls: true,
+ __scope: null,
+ __context: [],
__pseudo: [':first-child', '::after'],
- 'background-color': 'red'
- }
- }
+ 'background-color': 'red',
+ },
+ },
})
})
@@ -108,15 +173,17 @@ expect(result).toEqual({
context: {},
classNames: {
scope: {
- __pseudo: [':hover']
+ __context: [],
+ __pseudo: [':hover'],
+ __scope: null,
},
'bg-red': {
+ __context: [],
__rule: true,
- __decls: true,
__scope: '.scope:hover',
- 'background-color': 'red'
- }
- }
+ 'background-color': 'red',
+ },
+ },
})
})
@@ -133,15 +200,17 @@ context: {},
classNames: {
'bg-red': {
__rule: true,
- __decls: true,
- 'background-color': 'red'
+ __scope: null,
+ __context: [],
+ 'background-color': 'red',
},
'bg-red-again': {
__rule: true,
- __decls: true,
- 'background-color': 'red'
- }
- }
+ __scope: null,
+ __context: [],
+ 'background-color': 'red',
+ },
+ },
})
})
@@ -159,12 +228,35 @@ context: {},
classNames: {
'bg-red': {
__rule: true,
- '@media (min-width: 768px)': {
- __decls: true,
- 'background-color': 'red'
+ __scope: null,
+ __context: ['@media (min-width: 768px)'],
+ 'background-color': 'red',
+ },
+ },
+ })
+})
+
+test('processes nested at-rules', async () => {
+ const result = await processCss(`
+ @supports (display: grid) {
+ @media (min-width: 768px) {
+ .bg-red {
+ background-color: red;
}
}
}
+ `)
+
+ expect(result).toEqual({
+ context: {},
+ classNames: {
+ 'bg-red': {
+ __rule: true,
+ __scope: null,
+ __context: ['@supports (display: grid)', '@media (min-width: 768px)'],
+ 'background-color': 'red',
+ },
+ },
})
})
@@ -183,11 +275,12 @@ context: {},
classNames: {
'bg-red': {
__rule: true,
- __decls: true,
+ __scope: null,
+ __context: [],
'background-color': 'red',
- color: 'white'
- }
- }
+ color: 'white',
+ },
+ },
})
})
@@ -201,14 +294,17 @@
expect(result).toEqual({
context: {},
classNames: {
- scope: {},
+ scope: {
+ __context: [],
+ __scope: null,
+ },
'bg-red': {
__rule: true,
- __decls: true,
+ __context: [],
__scope: '.scope',
- 'background-color': 'red'
- }
- }
+ 'background-color': 'red',
+ },
+ },
})
})
@@ -228,29 +324,29 @@
expect(result).toEqual({
context: {},
classNames: {
- scope1: {},
- scope2: {},
- scope3: {},
+ scope1: { __context: [], __scope: null },
+ scope2: { __context: [], __scope: null },
+ scope3: { __context: [], __scope: null },
'bg-red': [
{
__rule: true,
- __decls: true,
+ __context: [],
__scope: '.scope1',
- 'background-color': 'red'
+ 'background-color': 'red',
},
{
__rule: true,
- __decls: true,
+ __context: [],
__scope: '.scope2 +',
- 'background-color': 'red'
+ 'background-color': 'red',
},
{
__rule: true,
- __decls: true,
+ __context: [],
__scope: '.scope3 >',
- 'background-color': 'red'
- }
- ]
- }
+ 'background-color': 'red',
+ },
+ ],
+ },
})
})
|