Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@thecrypticace
thecrypticace committed Jan 7, 2022
1 parent 85d418c commit c2ee08c
Show file tree
Hide file tree
Showing 36 changed files with 35 additions and 613 deletions.
2 changes: 0 additions & 2 deletions src/lib/expandTailwindAtRules.js
View file
Expand Up @@ -209,8 +209,6 @@ export default function expandTailwindAtRules(context) {
// compiled in an isolated environment like CSS modules
if (layerNodes.base) {
layerNodes.base.after(cloneNodes([...defaultNodes], root.source))
} else {
root.prepend(cloneNodes([...defaultNodes], root.source))
}

if (layerNodes.base) {
Expand Down
7 changes: 1 addition & 6 deletions tests/animations.test.js
View file
@@ -1,4 +1,4 @@
import { run, html, css, defaults } from './util/run'
import { run, html, css } from './util/run'

test('basic', () => {
let config = {
Expand All @@ -15,7 +15,6 @@ test('basic', () => {

return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
@keyframes spin {
to {
transform: rotate(360deg);
Expand Down Expand Up @@ -69,7 +68,6 @@ test('custom', () => {

return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
@keyframes one {
to {
transform: rotate(360deg);
Expand Down Expand Up @@ -100,7 +98,6 @@ test('custom prefixed', () => {

return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
@keyframes tw-one {
to {
transform: rotate(360deg);
Expand All @@ -127,7 +124,6 @@ test('multiple', () => {

return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
@keyframes bounce {
0%,
100% {
Expand Down Expand Up @@ -169,7 +165,6 @@ test('multiple custom', () => {

return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
@keyframes one {
to {
transform: rotate(360deg);
Expand Down
47 changes: 0 additions & 47 deletions tests/apply.test.css
View file
@@ -1,50 +1,3 @@
*,
::before,
::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
border-color: #e5e7eb;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
.basic-example {
border-radius: 0.375rem;
--tw-bg-opacity: 1;
Expand Down
20 changes: 0 additions & 20 deletions tests/apply.test.js
View file
Expand Up @@ -283,7 +283,6 @@ test('@apply classes from outside a @layer', async () => {

await run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
${defaults}
.font-bold {
font-weight: 700;
}
Expand Down Expand Up @@ -351,7 +350,6 @@ test('@applying classes from outside a @layer respects the source order', async

await run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
${defaults}
.baz {
text-decoration-line: underline;
text-decoration-line: none;
Expand Down Expand Up @@ -420,7 +418,6 @@ it('should remove duplicate properties when using apply with similar properties'

return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
.foo {
position: absolute;
top: 50%;
Expand Down Expand Up @@ -464,7 +461,6 @@ it('should apply all the definitions of a class', () => {

return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
${defaults}
.foo {
position: relative;
--tw-aspect-w: 1;
Expand Down Expand Up @@ -546,7 +542,6 @@ it('should not throw when the selector is different (but contains the base parti

return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
.bg-gray-500 {
--tw-bg-opacity: 1;
background-color: rgb(107 114 128 / var(--tw-bg-opacity));
Expand Down Expand Up @@ -682,7 +677,6 @@ it('should be possible to apply user css', () => {

return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
${defaults}
.foo {
color: red;
}
Expand Down Expand Up @@ -754,7 +748,6 @@ it('should not apply unrelated siblings when applying something from within atru

return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
.foo {
font-weight: bold;
color: green;
Expand Down Expand Up @@ -840,7 +833,6 @@ it('should be possible to apply a class from another rule with multiple selector

return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
${defaults}
.c {
text-decoration-line: underline;
}
Expand Down Expand Up @@ -871,7 +863,6 @@ it('should be possible to apply a class from another rule with multiple selector

return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
${defaults}
span,
.b {
text-decoration-line: underline;
Expand Down Expand Up @@ -906,7 +897,6 @@ it('should be possible to apply a class from another rule with multiple selector

return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
${defaults}
#a,
.b {
text-decoration-line: underline;
Expand All @@ -932,18 +922,8 @@ it('apply can emit defaults in isolated environments without @tailwind directive
}
`

// TODO: Do we want this to work?
return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
.foo {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
}
.foo:focus {
--tw-rotate: 90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
Expand Down
47 changes: 0 additions & 47 deletions tests/arbitrary-values.test.css
View file
@@ -1,50 +1,3 @@
*,
::before,
::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
border-color: #e5e7eb;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
.inset-\[11px\] {
top: 11px;
right: 11px;
Expand Down
24 changes: 4 additions & 20 deletions tests/arbitrary-values.test.js
View file
@@ -1,7 +1,7 @@
import fs from 'fs'
import path from 'path'

import { run, html, css, defaults } from './util/run'
import { run, html, css } from './util/run'

test('arbitrary values', () => {
let config = {
Expand All @@ -27,7 +27,6 @@ it('should be possible to differentiate between decoration utilities', () => {

return run('@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
${defaults}
.decoration-\[\#ccc\] {
text-decoration-color: #ccc;
}
Expand All @@ -50,7 +49,6 @@ it('should support modifiers for arbitrary values that contain the separator', (

return run('@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
${defaults}
.hover\:bg-\[url\(\'https\:\/\/github\.com\/tailwindlabs\.png\'\)\]:hover {
background-image: url('https://github.com/tailwindlabs.png');
}
Expand Down Expand Up @@ -81,7 +79,6 @@ it('should support arbitrary values for various background utilities', () => {

return run('@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
${defaults}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
Expand Down Expand Up @@ -121,9 +118,7 @@ it('should not generate any css if an unknown typehint is used', () => {
}

return run('@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
${defaults}
`)
return expect(result.css).toMatchFormattedCss(css``)
})
})

Expand All @@ -132,7 +127,6 @@ it('should handle unknown typehints', () => {

return run('@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
${defaults}
.w-\[length\:12px\] {
width: 12px;
}
Expand All @@ -145,10 +139,7 @@ it('should convert _ to spaces', () => {
// into an issue with `\2c ` escapes. If we use `\2c ` then JS complains
// about strict mode. But `\\2c ` is not what it expected.
function css(templates) {
return `
${defaults}\n
${templates.join('')}
`
return templates.join('')
}

let config = {
Expand Down Expand Up @@ -253,7 +244,6 @@ it('should not convert escaped underscores with spaces', () => {

return run('@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
${defaults}
.content-\[\'snake\\_case\'\] {
--tw-content: 'snake_case';
content: var(--tw-content);
Expand All @@ -270,9 +260,7 @@ it('should warn and not generate if arbitrary values are ambiguous', () => {
}

return run('@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
${defaults}
`)
return expect(result.css).toMatchFormattedCss(css``)
})
})

Expand All @@ -285,7 +273,6 @@ it('should support colons in URLs', () => {

return run('@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
${defaults}
.bg-\[url\(\'https\:\/\/www\.spacejam\.com\/1996\/img\/bg_stars\.gif\'\)\] {
background-image: url('https://www.spacejam.com/1996/img/bg_stars.gif');
}
Expand All @@ -302,7 +289,6 @@ it('should support unescaped underscores in URLs', () => {

return run('@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchFormattedCss(`
${defaults}
.bg-\\[url\\(\\'brown_potato\\.jpg\\'\\)\\2c _url\\(\\'red_tomato\\.png\\'\\)\\] {
background-image: url('brown_potato.jpg'), url('red_tomato.png');
}
Expand All @@ -323,7 +309,6 @@ it('should be possible to read theme values in arbitrary values (without quotes)

return run('@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
${defaults}
.w-\[theme\(spacing\.1\)\] {
width: calc(1 * 0.25rem);
}
Expand All @@ -347,7 +332,6 @@ it('should be possible to read theme values in arbitrary values (with quotes)',

return run('@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
${defaults}
.w-\[theme\(\'spacing\.1\'\)\] {
width: calc(1 * 0.25rem);
}
Expand Down

0 comments on commit c2ee08c

Please sign in to comment.