tailwind-ctp-intellisense/packages/tailwindcss-intellisense/tests/extractClassNames.test.js

374 lines
7.4 KiB
JavaScript
Raw Normal View History

2020-04-11 21:20:45 +00:00
let postcss = require('postcss')
const esmImport = require('esm')(module)
2020-05-03 14:57:15 +00:00
const process = esmImport('../src/class-names/extractClassNames.js')
2020-04-11 21:20:45 +00:00
postcss = postcss([postcss.plugin('no-op', () => () => {})])
const processCss = async (css) =>
2020-04-11 21:20:45 +00:00
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',
},
],
},
})
})
2020-04-11 21:20:45 +00:00
test('foo', async () => {
const result = await processCss(`
@media (min-width: 640px) {
.sm__TAILWIND_SEPARATOR__bg-red {
background-color: red;
}
.sm__TAILWIND_SEPARATOR__hover__TAILWIND_SEPARATOR__bg-red:hover {
background-color: red;
}
}
.hover__TAILWIND_SEPARATOR__bg-red:hover {
background-color: red;
}
`)
expect(result).toEqual({
context: {
sm: ['@media (min-width: 640px)'],
hover: [':hover'],
2020-04-11 21:20:45 +00:00
},
classNames: {
sm: {
'bg-red': {
__rule: true,
__scope: null,
__context: ['@media (min-width: 640px)'],
'background-color': 'red',
2020-04-11 21:20:45 +00:00
},
hover: {
'bg-red': {
__rule: true,
__scope: null,
__context: ['@media (min-width: 640px)'],
__pseudo: [':hover'],
'background-color': 'red',
},
},
2020-04-11 21:20:45 +00:00
},
hover: {
'bg-red': {
__rule: true,
__scope: null,
2020-04-11 21:20:45 +00:00
__pseudo: [':hover'],
__context: [],
'background-color': 'red',
},
},
},
2020-04-11 21:20:45 +00:00
})
})
2020-04-30 19:02:46 +00:00
test('processes basic css', async () => {
2020-04-11 21:20:45 +00:00
const result = await processCss(`
2020-04-30 19:02:46 +00:00
.bg-red {
2020-04-11 21:20:45 +00:00
background-color: red;
}
`)
expect(result).toEqual({
context: {},
classNames: {
'bg-red': {
__rule: true,
__scope: null,
__context: [],
'background-color': 'red',
},
},
2020-04-11 21:20:45 +00:00
})
})
test('processes pseudo selectors', async () => {
const result = await processCss(`
.bg-red:first-child::after {
background-color: red;
}
`)
expect(result).toEqual({
context: {},
classNames: {
'bg-red': {
__rule: true,
__scope: null,
__context: [],
2020-04-11 21:20:45 +00:00
__pseudo: [':first-child', '::after'],
'background-color': 'red',
},
},
2020-04-11 21:20:45 +00:00
})
})
test('processes pseudo selectors in scope', async () => {
const result = await processCss(`
.scope:hover .bg-red {
background-color: red;
}
`)
expect(result).toEqual({
context: {},
classNames: {
scope: {
__context: [],
__pseudo: [':hover'],
__scope: null,
2020-04-11 21:20:45 +00:00
},
'bg-red': {
__context: [],
2020-04-11 21:20:45 +00:00
__rule: true,
__scope: '.scope:hover',
'background-color': 'red',
},
},
2020-04-11 21:20:45 +00:00
})
})
test('processes multiple class names in the same rule', async () => {
const result = await processCss(`
.bg-red,
.bg-red-again {
background-color: red;
}
`)
expect(result).toEqual({
context: {},
classNames: {
'bg-red': {
__rule: true,
__scope: null,
__context: [],
'background-color': 'red',
2020-04-11 21:20:45 +00:00
},
'bg-red-again': {
__rule: true,
__scope: null,
__context: [],
'background-color': 'red',
},
},
2020-04-11 21:20:45 +00:00
})
})
test('processes media queries', async () => {
const result = await processCss(`
@media (min-width: 768px) {
.bg-red {
background-color: red;
}
}
`)
expect(result).toEqual({
context: {},
classNames: {
'bg-red': {
__rule: true,
__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;
2020-04-11 21:20:45 +00:00
}
}
}
`)
expect(result).toEqual({
context: {},
classNames: {
'bg-red': {
__rule: true,
__scope: null,
__context: ['@supports (display: grid)', '@media (min-width: 768px)'],
'background-color': 'red',
},
},
2020-04-11 21:20:45 +00:00
})
})
test('merges declarations', async () => {
const result = await processCss(`
.bg-red {
background-color: red;
}
.bg-red {
color: white;
}
`)
expect(result).toEqual({
context: {},
classNames: {
'bg-red': {
__rule: true,
__scope: null,
__context: [],
2020-04-11 21:20:45 +00:00
'background-color': 'red',
color: 'white',
},
},
2020-04-11 21:20:45 +00:00
})
})
test('processes class name scope', async () => {
const result = await processCss(`
.scope .bg-red {
background-color: red;
}
`)
expect(result).toEqual({
context: {},
classNames: {
scope: {
__context: [],
__scope: null,
},
2020-04-11 21:20:45 +00:00
'bg-red': {
__rule: true,
__context: [],
2020-04-11 21:20:45 +00:00
__scope: '.scope',
'background-color': 'red',
},
},
2020-04-11 21:20:45 +00:00
})
})
test('processes multiple scopes for the same class name', async () => {
const result = await processCss(`
.scope1 .bg-red {
background-color: red;
}
.scope2 + .bg-red {
background-color: red;
}
.scope3 > .bg-red {
background-color: red;
}
`)
expect(result).toEqual({
context: {},
classNames: {
scope1: { __context: [], __scope: null },
scope2: { __context: [], __scope: null },
scope3: { __context: [], __scope: null },
2020-04-11 21:20:45 +00:00
'bg-red': [
{
__rule: true,
__context: [],
2020-04-11 21:20:45 +00:00
__scope: '.scope1',
'background-color': 'red',
2020-04-11 21:20:45 +00:00
},
{
__rule: true,
__context: [],
2020-04-11 21:20:45 +00:00
__scope: '.scope2 +',
'background-color': 'red',
2020-04-11 21:20:45 +00:00
},
{
__rule: true,
__context: [],
2020-04-11 21:20:45 +00:00
__scope: '.scope3 >',
'background-color': 'red',
},
],
},
2020-04-11 21:20:45 +00:00
})
})
test('processes multiple properties of the same name', async () => {
const result = await processCss(`
.bg-red {
background-color: blue;
background-color: red;
}
`)
expect(result).toEqual({
context: {},
classNames: {
'bg-red': {
__rule: true,
__context: [],
__scope: null,
'background-color': ['blue', 'red'],
},
},
})
})