Remove old stuff
parent
316357530f
commit
b3a4df7949
File diff suppressed because it is too large
Load Diff
|
@ -51,7 +51,6 @@
|
||||||
"fast-glob": "3.2.4",
|
"fast-glob": "3.2.4",
|
||||||
"find-up": "5.0.0",
|
"find-up": "5.0.0",
|
||||||
"is-builtin-module": "3.2.1",
|
"is-builtin-module": "3.2.1",
|
||||||
"jest": "25.5.4",
|
|
||||||
"klona": "2.0.4",
|
"klona": "2.0.4",
|
||||||
"license-checker": "25.0.1",
|
"license-checker": "25.0.1",
|
||||||
"minimatch": "5.1.4",
|
"minimatch": "5.1.4",
|
||||||
|
|
|
@ -4,15 +4,7 @@ import { readFileSync } from 'fs'
|
||||||
import { dirname, resolve } from 'path'
|
import { dirname, resolve } from 'path'
|
||||||
import { fileURLToPath } from 'url'
|
import { fileURLToPath } from 'url'
|
||||||
|
|
||||||
const exclude = [
|
const exclude = [/^@types\//, 'esbuild', 'rimraf', 'prettier', 'typescript', 'license-checker']
|
||||||
/^@types\//,
|
|
||||||
'esbuild',
|
|
||||||
'rimraf',
|
|
||||||
'jest',
|
|
||||||
'prettier',
|
|
||||||
'typescript',
|
|
||||||
'license-checker',
|
|
||||||
]
|
|
||||||
|
|
||||||
function isExcluded(name) {
|
function isExcluded(name) {
|
||||||
for (let pattern of exclude) {
|
for (let pattern of exclude) {
|
||||||
|
|
|
@ -321,7 +321,6 @@
|
||||||
"copy:notices": "cp ../tailwindcss-language-server/ThirdPartyNotices.txt ./dist/ThirdPartyNotices.txt",
|
"copy:notices": "cp ../tailwindcss-language-server/ThirdPartyNotices.txt ./dist/ThirdPartyNotices.txt",
|
||||||
"vscode:prepublish": "npm run build && npm run copy:notices",
|
"vscode:prepublish": "npm run build && npm run copy:notices",
|
||||||
"clean": "rimraf dist",
|
"clean": "rimraf dist",
|
||||||
"test": "jest",
|
|
||||||
"check": "tsc --noEmit"
|
"check": "tsc --noEmit"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
@ -1,373 +0,0 @@
|
||||||
let postcss = require('postcss')
|
|
||||||
const esmImport = require('esm')(module)
|
|
||||||
const process = esmImport('../src/class-names/extractClassNames.js')
|
|
||||||
postcss = postcss([postcss.plugin('no-op', () => () => {})])
|
|
||||||
|
|
||||||
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) {
|
|
||||||
.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'],
|
|
||||||
},
|
|
||||||
classNames: {
|
|
||||||
sm: {
|
|
||||||
'bg-red': {
|
|
||||||
__rule: true,
|
|
||||||
__scope: null,
|
|
||||||
__context: ['@media (min-width: 640px)'],
|
|
||||||
'background-color': 'red',
|
|
||||||
},
|
|
||||||
hover: {
|
|
||||||
'bg-red': {
|
|
||||||
__rule: true,
|
|
||||||
__scope: null,
|
|
||||||
__context: ['@media (min-width: 640px)'],
|
|
||||||
__pseudo: [':hover'],
|
|
||||||
'background-color': 'red',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
hover: {
|
|
||||||
'bg-red': {
|
|
||||||
__rule: true,
|
|
||||||
__scope: null,
|
|
||||||
__pseudo: [':hover'],
|
|
||||||
__context: [],
|
|
||||||
'background-color': 'red',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
test('processes basic css', async () => {
|
|
||||||
const result = await processCss(`
|
|
||||||
.bg-red {
|
|
||||||
background-color: red;
|
|
||||||
}
|
|
||||||
`)
|
|
||||||
|
|
||||||
expect(result).toEqual({
|
|
||||||
context: {},
|
|
||||||
classNames: {
|
|
||||||
'bg-red': {
|
|
||||||
__rule: true,
|
|
||||||
__scope: null,
|
|
||||||
__context: [],
|
|
||||||
'background-color': 'red',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
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: [],
|
|
||||||
__pseudo: [':first-child', '::after'],
|
|
||||||
'background-color': 'red',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
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,
|
|
||||||
},
|
|
||||||
'bg-red': {
|
|
||||||
__context: [],
|
|
||||||
__rule: true,
|
|
||||||
__scope: '.scope:hover',
|
|
||||||
'background-color': 'red',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
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',
|
|
||||||
},
|
|
||||||
'bg-red-again': {
|
|
||||||
__rule: true,
|
|
||||||
__scope: null,
|
|
||||||
__context: [],
|
|
||||||
'background-color': 'red',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`)
|
|
||||||
|
|
||||||
expect(result).toEqual({
|
|
||||||
context: {},
|
|
||||||
classNames: {
|
|
||||||
'bg-red': {
|
|
||||||
__rule: true,
|
|
||||||
__scope: null,
|
|
||||||
__context: ['@supports (display: grid)', '@media (min-width: 768px)'],
|
|
||||||
'background-color': 'red',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
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: [],
|
|
||||||
'background-color': 'red',
|
|
||||||
color: 'white',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
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,
|
|
||||||
},
|
|
||||||
'bg-red': {
|
|
||||||
__rule: true,
|
|
||||||
__context: [],
|
|
||||||
__scope: '.scope',
|
|
||||||
'background-color': 'red',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
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 },
|
|
||||||
'bg-red': [
|
|
||||||
{
|
|
||||||
__rule: true,
|
|
||||||
__context: [],
|
|
||||||
__scope: '.scope1',
|
|
||||||
'background-color': 'red',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
__rule: true,
|
|
||||||
__context: [],
|
|
||||||
__scope: '.scope2 +',
|
|
||||||
'background-color': 'red',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
__rule: true,
|
|
||||||
__context: [],
|
|
||||||
__scope: '.scope3 >',
|
|
||||||
'background-color': 'red',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
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'],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
})
|
|
Loading…
Reference in New Issue