wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Cleanup oxide — Part #2 (#13312)

Browse source 
* remove all oxide related code

* Update lightningcss to version 1.24.1

* update tests to match bumped Lightning CSS output

---------

Co-authored-by: depfu[bot] <23717796+depfu[bot]@users.noreply.github.com>
This commit is contained in:
Robin Malfait 2024-03-22 17:12:14 +01:00 • committed by GitHub
parent c28c718f72
commit 44b3b429a8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
109 changed files with 25893 additions and 29415 deletions
Download patch file Download diff file Expand all files Collapse all files

556
tests/parseObjectStyles.test.js
View file

@ -1,319 +1,317 @@
import parseObjectStyles from '../src/util/parseObjectStyles'
import postcss from 'postcss'
import { crosscheck, css } from './util/run'
import { css } from './util/run'
function toCss(nodes) {
return postcss.root({ nodes }).toString()
}
crosscheck(() => {
test('it parses simple single class definitions', () => {
const result = parseObjectStyles({
'.foobar': {
backgroundColor: 'red',
color: 'white',
padding: '1rem',
},
})
expect(toCss(result)).toMatchFormattedCss(css`
.foobar {
color: #fff;
background-color: red;
padding: 1rem;
}
`)
test('it parses simple single class definitions', () => {
const result = parseObjectStyles({
'.foobar': {
backgroundColor: 'red',
color: 'white',
padding: '1rem',
},
})
test('it parses multiple class definitions', () => {
const result = parseObjectStyles({
'.foo': {
backgroundColor: 'red',
color: 'white',
padding: '1rem',
},
'.bar': {
width: '200px',
height: '100px',
},
})
expect(toCss(result)).toMatchFormattedCss(css`
.foobar {
color: #fff;
background-color: red;
padding: 1rem;
}
`)
})
expect(toCss(result)).toMatchFormattedCss(css`
.foo {
color: #fff;
background-color: red;
padding: 1rem;
}
.bar {
width: 200px;
height: 100px;
}
`)
test('it parses multiple class definitions', () => {
const result = parseObjectStyles({
'.foo': {
backgroundColor: 'red',
color: 'white',
padding: '1rem',
},
'.bar': {
width: '200px',
height: '100px',
},
})
test('it parses nested pseudo-selectors', () => {
const result = parseObjectStyles({
'.foo': {
backgroundColor: 'red',
color: 'white',
padding: '1rem',
'&:hover': {
backgroundColor: 'orange',
},
'&:focus': {
backgroundColor: 'blue',
},
},
})
expect(toCss(result)).toMatchFormattedCss(css`
.foo {
color: #fff;
background-color: red;
padding: 1rem;
}
.bar {
width: 200px;
height: 100px;
}
`)
})
expect(toCss(result)).toMatchFormattedCss(css`
test('it parses nested pseudo-selectors', () => {
const result = parseObjectStyles({
'.foo': {
backgroundColor: 'red',
color: 'white',
padding: '1rem',
'&:hover': {
backgroundColor: 'orange',
},
'&:focus': {
backgroundColor: 'blue',
},
},
})
expect(toCss(result)).toMatchFormattedCss(css`
.foo {
color: #fff;
background-color: red;
padding: 1rem;
}
.foo:hover {
background-color: orange;
}
.foo:focus {
background-color: #00f;
}
`)
})
test('it parses top-level media queries', () => {
const result = parseObjectStyles({
'@media (min-width: 200px)': {
'.foo': {
backgroundColor: 'orange',
},
},
})
expect(toCss(result)).toMatchFormattedCss(css`
@media (min-width: 200px) {
.foo {
color: #fff;
background-color: red;
padding: 1rem;
}
.foo:hover {
background-color: orange;
}
.foo:focus {
background-color: #00f;
}
`)
})
}
`)
})
test('it parses top-level media queries', () => {
const result = parseObjectStyles({
test('it parses nested media queries', () => {
const result = parseObjectStyles({
'.foo': {
backgroundColor: 'red',
color: 'white',
padding: '1rem',
'@media (min-width: 200px)': {
'.foo': {
backgroundColor: 'orange',
},
backgroundColor: 'orange',
},
})
expect(toCss(result)).toMatchFormattedCss(css`
@media (min-width: 200px) {
.foo {
background-color: orange;
}
}
`)
},
})
test('it parses nested media queries', () => {
const result = parseObjectStyles({
'.foo': {
backgroundColor: 'red',
color: 'white',
padding: '1rem',
expect(toCss(result)).toMatchFormattedCss(css`
.foo {
color: #fff;
background-color: red;
padding: 1rem;
}
@media (min-width: 200px) {
.foo {
background-color: orange;
}
}
`)
})
test('it bubbles nested screen rules', () => {
const result = parseObjectStyles({
'.foo': {
backgroundColor: 'red',
color: 'white',
padding: '1rem',
'@screen sm': {
backgroundColor: 'orange',
},
},
})
expect(toCss(result)).toMatchFormattedCss(css`
.foo {
color: #fff;
background-color: red;
padding: 1rem;
}
@screen sm {
.foo {
background-color: orange;
}
}
`)
})
test('it parses pseudo-selectors in nested media queries', () => {
const result = parseObjectStyles({
'.foo': {
backgroundColor: 'red',
color: 'white',
padding: '1rem',
'&:hover': {
'@media (min-width: 200px)': {
backgroundColor: 'orange',
},
},
})
expect(toCss(result)).toMatchFormattedCss(css`
.foo {
color: #fff;
background-color: red;
padding: 1rem;
}
@media (min-width: 200px) {
.foo {
background-color: orange;
}
}
`)
},
})
test('it bubbles nested screen rules', () => {
const result = parseObjectStyles({
'.foo': {
backgroundColor: 'red',
color: 'white',
padding: '1rem',
'@screen sm': {
backgroundColor: 'orange',
},
},
})
expect(toCss(result)).toMatchFormattedCss(css`
.foo {
color: #fff;
background-color: red;
padding: 1rem;
}
@screen sm {
.foo {
background-color: orange;
}
}
`)
})
test('it parses pseudo-selectors in nested media queries', () => {
const result = parseObjectStyles({
'.foo': {
backgroundColor: 'red',
color: 'white',
padding: '1rem',
'&:hover': {
'@media (min-width: 200px)': {
backgroundColor: 'orange',
},
},
},
})
expect(toCss(result)).toMatchFormattedCss(css`
.foo {
color: #fff;
background-color: red;
padding: 1rem;
}
@media (min-width: 200px) {
.foo:hover {
background-color: orange;
}
}
`)
})
test('it parses descendant selectors', () => {
const result = parseObjectStyles({
'.foo': {
backgroundColor: 'red',
color: 'white',
padding: '1rem',
'.bar': {
backgroundColor: 'orange',
},
},
})
expect(toCss(result)).toMatchFormattedCss(css`
.foo {
color: #fff;
background-color: red;
padding: 1rem;
}
.foo .bar {
expect(toCss(result)).toMatchFormattedCss(css`
.foo {
color: #fff;
background-color: red;
padding: 1rem;
}
@media (min-width: 200px) {
.foo:hover {
background-color: orange;
}
`)
}
`)
})
test('it parses descendant selectors', () => {
const result = parseObjectStyles({
'.foo': {
backgroundColor: 'red',
color: 'white',
padding: '1rem',
'.bar': {
backgroundColor: 'orange',
},
},
})
test('it parses nested multi-class selectors', () => {
const result = parseObjectStyles({
'.foo': {
backgroundColor: 'red',
color: 'white',
padding: '1rem',
expect(toCss(result)).toMatchFormattedCss(css`
.foo {
color: #fff;
background-color: red;
padding: 1rem;
}
.foo .bar {
background-color: orange;
}
`)
})
test('it parses nested multi-class selectors', () => {
const result = parseObjectStyles({
'.foo': {
backgroundColor: 'red',
color: 'white',
padding: '1rem',
'&.bar': {
backgroundColor: 'orange',
},
},
})
expect(toCss(result)).toMatchFormattedCss(css`
.foo {
color: #fff;
background-color: red;
padding: 1rem;
}
.foo.bar {
background-color: orange;
}
`)
})
test('it parses nested multi-class selectors in media queries', () => {
const result = parseObjectStyles({
'.foo': {
backgroundColor: 'red',
color: 'white',
padding: '1rem',
'@media (min-width: 200px)': {
'&.bar': {
backgroundColor: 'orange',
},
},
})
},
})
expect(toCss(result)).toMatchFormattedCss(css`
.foo {
color: #fff;
background-color: red;
padding: 1rem;
}
expect(toCss(result)).toMatchFormattedCss(css`
.foo {
color: #fff;
background-color: red;
padding: 1rem;
}
@media (min-width: 200px) {
.foo.bar {
background-color: orange;
}
`)
})
test('it parses nested multi-class selectors in media queries', () => {
const result = parseObjectStyles({
'.foo': {
backgroundColor: 'red',
color: 'white',
padding: '1rem',
'@media (min-width: 200px)': {
'&.bar': {
backgroundColor: 'orange',
},
},
},
})
expect(toCss(result)).toMatchFormattedCss(css`
.foo {
color: #fff;
background-color: red;
padding: 1rem;
}
@media (min-width: 200px) {
.foo.bar {
background-color: orange;
}
}
`)
})
test('it strips empty selectors when nesting', () => {
const result = parseObjectStyles({
'.foo': {
'.bar': {
backgroundColor: 'orange',
},
},
})
expect(toCss(result)).toMatchFormattedCss(css`
.foo .bar {
background-color: orange;
}
`)
})
test('it can parse an array of styles', () => {
const result = parseObjectStyles([
{
'.foo': {
backgroundColor: 'orange',
},
},
{
'.bar': {
backgroundColor: 'red',
},
},
{
'.foo': {
backgroundColor: 'blue',
},
},
])
expect(toCss(result)).toMatchFormattedCss(css`
.foo {
background-color: orange;
}
.bar {
background-color: red;
}
.foo {
background-color: #00f;
}
`)
})
test('custom properties preserve their case', () => {
const result = parseObjectStyles({
':root': {
'--colors-aColor-500': '0',
},
})
expect(toCss(result)).toMatchFormattedCss(css`
:root {
--colors-aColor-500: 0;
}
`)
})
}
`)
})
test('it strips empty selectors when nesting', () => {
const result = parseObjectStyles({
'.foo': {
'.bar': {
backgroundColor: 'orange',
},
},
})
expect(toCss(result)).toMatchFormattedCss(css`
.foo .bar {
background-color: orange;
}
`)
})
test('it can parse an array of styles', () => {
const result = parseObjectStyles([
{
'.foo': {
backgroundColor: 'orange',
},
},
{
'.bar': {
backgroundColor: 'red',
},
},
{
'.foo': {
backgroundColor: 'blue',
},
},
])
expect(toCss(result)).toMatchFormattedCss(css`
.foo {
background-color: orange;
}
.bar {
background-color: red;
}
.foo {
background-color: #00f;
}
`)
})
test('custom properties preserve their case', () => {
const result = parseObjectStyles({
':root': {
'--colors-aColor-500': '0',
},
})
expect(toCss(result)).toMatchFormattedCss(css`
:root {
--colors-aColor-500: 0;
}
`)
})