mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Improve tests (#5108)
* change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
This commit is contained in:
Robin Malfait
GitHub
parent
f7e9831436
commit
bfc9fa79d4
@ -1,12 +1,6 @@
|
||||
.translate-x-5,
|
||||
.-translate-x-4,
|
||||
.translate-y-6,
|
||||
.-translate-x-3,
|
||||
.rotate-3,
|
||||
.skew-y-12,
|
||||
.skew-x-12,
|
||||
.scale-95,
|
||||
.transform {
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
@ -17,23 +11,11 @@
|
||||
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
|
||||
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
|
||||
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.border,
|
||||
.border-2,
|
||||
.border-t,
|
||||
.border-b-4 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
|
||||
}
|
||||
.shadow,
|
||||
.shadow-md,
|
||||
.shadow-lg {
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
}
|
||||
.ring,
|
||||
.ring-4 {
|
||||
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
@ -41,17 +23,6 @@
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
}
|
||||
.blur-md,
|
||||
.brightness-150,
|
||||
.contrast-50,
|
||||
.drop-shadow-md,
|
||||
.grayscale,
|
||||
.hue-rotate-60,
|
||||
.invert,
|
||||
.saturate-200,
|
||||
.sepia,
|
||||
.filter {
|
||||
--tw-blur: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-brightness: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-contrast: var(--tw-empty, /*!*/ /*!*/);
|
||||
@ -63,17 +34,6 @@
|
||||
--tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
.backdrop-blur-lg,
|
||||
.backdrop-brightness-50,
|
||||
.backdrop-contrast-0,
|
||||
.backdrop-grayscale,
|
||||
.backdrop-hue-rotate-90,
|
||||
.backdrop-invert,
|
||||
.backdrop-opacity-75,
|
||||
.backdrop-saturate-150,
|
||||
.backdrop-sepia,
|
||||
.backdrop-filter {
|
||||
--tw-backdrop-blur: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-backdrop-brightness: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-backdrop-contrast: var(--tw-empty, /*!*/ /*!*/);
|
||||
|
||||
@ -9,6 +9,10 @@ function run(input, config = {}) {
|
||||
})
|
||||
}
|
||||
|
||||
function css(templates) {
|
||||
return templates.join('')
|
||||
}
|
||||
|
||||
test('basic usage', () => {
|
||||
let config = {
|
||||
mode: 'jit',
|
||||
@ -18,13 +22,13 @@ test('basic usage', () => {
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
let css = `
|
||||
let input = css`
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
`
|
||||
|
||||
return run(css, config).then((result) => {
|
||||
return run(input, config).then((result) => {
|
||||
let expectedPath = path.resolve(__dirname, './basic-usage.test.css')
|
||||
let expected = fs.readFileSync(expectedPath, 'utf8')
|
||||
|
||||
|
||||
@ -126,9 +126,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.scale-50,
|
||||
.transform,
|
||||
.hover\:scale-75 {
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
@ -139,16 +139,9 @@
|
||||
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
|
||||
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
|
||||
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.shadow-sm,
|
||||
.shadow-md,
|
||||
.hover\:shadow-lg,
|
||||
.md\:shadow-sm {
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
}
|
||||
.focus\:ring-2 {
|
||||
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
|
||||
@ -9,6 +9,10 @@ function run(input, config = {}) {
|
||||
})
|
||||
}
|
||||
|
||||
function css(templates) {
|
||||
return templates.join('')
|
||||
}
|
||||
|
||||
test('it works', () => {
|
||||
let config = {
|
||||
darkMode: 'class',
|
||||
@ -71,100 +75,101 @@ test('it works', () => {
|
||||
],
|
||||
}
|
||||
|
||||
let css = `
|
||||
@layer utilities {
|
||||
.custom-util {
|
||||
background: #abcdef;
|
||||
let input = css`
|
||||
@layer utilities {
|
||||
.custom-util {
|
||||
background: #abcdef;
|
||||
}
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
margin: 10px;
|
||||
@layer components {
|
||||
.test-apply-font-variant {
|
||||
@apply ordinal tabular-nums;
|
||||
}
|
||||
.custom-component {
|
||||
background: #123456;
|
||||
}
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 5px;
|
||||
}
|
||||
.foo .bg-black {
|
||||
appearance: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@layer components {
|
||||
.test-apply-font-variant {
|
||||
@apply ordinal tabular-nums;
|
||||
@layer base {
|
||||
div {
|
||||
background: #654321;
|
||||
}
|
||||
}
|
||||
.custom-component {
|
||||
background: #123456;
|
||||
.theme-test {
|
||||
font-family: theme('fontFamily.sans');
|
||||
color: theme('colors.blue.500');
|
||||
}
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
padding: 5px;
|
||||
@screen lg {
|
||||
.screen-test {
|
||||
color: purple;
|
||||
}
|
||||
}
|
||||
.foo .bg-black {
|
||||
appearance: none;
|
||||
.apply-1 {
|
||||
@apply mt-6;
|
||||
}
|
||||
}
|
||||
@layer base {
|
||||
div {
|
||||
background: #654321;
|
||||
.apply-2 {
|
||||
@apply mt-6;
|
||||
}
|
||||
}
|
||||
.theme-test {
|
||||
font-family: theme('fontFamily.sans');
|
||||
color: theme('colors.blue.500');
|
||||
}
|
||||
@screen lg {
|
||||
.screen-test {
|
||||
color: purple;
|
||||
.apply-test {
|
||||
@apply mt-6 bg-pink-500 hover:font-bold focus:hover:font-bold sm:bg-green-500 sm:focus:even:bg-pink-200;
|
||||
}
|
||||
}
|
||||
.apply-1 {
|
||||
@apply mt-6;
|
||||
}
|
||||
.apply-2 {
|
||||
@apply mt-6;
|
||||
}
|
||||
.apply-test {
|
||||
@apply mt-6 bg-pink-500 hover:font-bold focus:hover:font-bold sm:bg-green-500 sm:focus:even:bg-pink-200;
|
||||
}
|
||||
.apply-components {
|
||||
@apply container mx-auto;
|
||||
}
|
||||
.drop-empty-rules {
|
||||
@apply hover:font-bold;
|
||||
}
|
||||
.apply-group {
|
||||
@apply group-hover:font-bold;
|
||||
}
|
||||
.apply-dark-mode {
|
||||
@apply dark:font-bold;
|
||||
}
|
||||
.apply-with-existing:hover {
|
||||
@apply font-normal sm:bg-green-500;
|
||||
}
|
||||
.multiple, .selectors {
|
||||
@apply font-bold group-hover:font-normal;
|
||||
}
|
||||
.list {
|
||||
@apply space-x-4;
|
||||
}
|
||||
.nested {
|
||||
.example {
|
||||
@apply font-bold hover:font-normal;
|
||||
.apply-components {
|
||||
@apply container mx-auto;
|
||||
}
|
||||
}
|
||||
.apply-order-a {
|
||||
@apply m-5 mt-6;
|
||||
}
|
||||
.apply-order-b {
|
||||
@apply mt-6 m-5;
|
||||
}
|
||||
.apply-dark-group-example-a {
|
||||
@apply dark:group-hover:bg-green-500;
|
||||
}
|
||||
.crazy-example {
|
||||
@apply sm:motion-safe:group-active:focus:opacity-10;
|
||||
}
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
`
|
||||
.drop-empty-rules {
|
||||
@apply hover:font-bold;
|
||||
}
|
||||
.apply-group {
|
||||
@apply group-hover:font-bold;
|
||||
}
|
||||
.apply-dark-mode {
|
||||
@apply dark:font-bold;
|
||||
}
|
||||
.apply-with-existing:hover {
|
||||
@apply font-normal sm:bg-green-500;
|
||||
}
|
||||
.multiple,
|
||||
.selectors {
|
||||
@apply font-bold group-hover:font-normal;
|
||||
}
|
||||
.list {
|
||||
@apply space-x-4;
|
||||
}
|
||||
.nested {
|
||||
.example {
|
||||
@apply font-bold hover:font-normal;
|
||||
}
|
||||
}
|
||||
.apply-order-a {
|
||||
@apply m-5 mt-6;
|
||||
}
|
||||
.apply-order-b {
|
||||
@apply mt-6 m-5;
|
||||
}
|
||||
.apply-dark-group-example-a {
|
||||
@apply dark:group-hover:bg-green-500;
|
||||
}
|
||||
.crazy-example {
|
||||
@apply sm:motion-safe:group-active:focus:opacity-10;
|
||||
}
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
`
|
||||
|
||||
return run(css, config).then((result) => {
|
||||
return run(input, config).then((result) => {
|
||||
let expectedPath = path.resolve(__dirname, './kitchen-sink.test.css')
|
||||
let expected = fs.readFileSync(expectedPath, 'utf8')
|
||||
|
||||
|
||||
@ -1,825 +0,0 @@
|
||||
.translate-x-5,
|
||||
.-translate-x-4,
|
||||
.translate-y-6,
|
||||
.-translate-x-3,
|
||||
.rotate-3,
|
||||
.skew-y-12,
|
||||
.skew-x-12,
|
||||
.scale-95,
|
||||
.transform {
|
||||
--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-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
|
||||
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
|
||||
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.border,
|
||||
.border-2 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
|
||||
}
|
||||
.shadow,
|
||||
.shadow-md,
|
||||
.shadow-lg {
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
}
|
||||
.ring,
|
||||
.ring-4 {
|
||||
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgba(59, 130, 246, 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
}
|
||||
.blur-md,
|
||||
.brightness-150,
|
||||
.contrast-50,
|
||||
.drop-shadow-md,
|
||||
.grayscale,
|
||||
.hue-rotate-60,
|
||||
.invert,
|
||||
.saturate-200,
|
||||
.sepia,
|
||||
.filter {
|
||||
--tw-blur: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-brightness: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-contrast: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-grayscale: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-invert: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-saturate: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-sepia: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
.backdrop-blur-lg,
|
||||
.backdrop-brightness-50,
|
||||
.backdrop-contrast-0,
|
||||
.backdrop-grayscale,
|
||||
.backdrop-hue-rotate-90,
|
||||
.backdrop-invert,
|
||||
.backdrop-opacity-75,
|
||||
.backdrop-saturate-150,
|
||||
.backdrop-sepia,
|
||||
.backdrop-filter {
|
||||
--tw-backdrop-blur: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-backdrop-brightness: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-backdrop-contrast: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-backdrop-grayscale: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-backdrop-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-backdrop-invert: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-backdrop-opacity: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-backdrop-saturate: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-backdrop-sepia: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
|
||||
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
|
||||
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
|
||||
var(--tw-backdrop-sepia);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1536px) {
|
||||
.container {
|
||||
max-width: 1536px;
|
||||
}
|
||||
}
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
.pointer-events-none {
|
||||
pointer-events: none;
|
||||
}
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
.inset-0 {
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
.inset-y-4 {
|
||||
top: 1rem;
|
||||
bottom: 1rem;
|
||||
}
|
||||
.inset-x-2 {
|
||||
left: 0.5rem;
|
||||
right: 0.5rem;
|
||||
}
|
||||
.top-6 {
|
||||
top: 1.5rem;
|
||||
}
|
||||
.right-8 {
|
||||
right: 2rem;
|
||||
}
|
||||
.bottom-12 {
|
||||
bottom: 3rem;
|
||||
}
|
||||
.left-16 {
|
||||
left: 4rem;
|
||||
}
|
||||
.isolate {
|
||||
isolation: isolate;
|
||||
}
|
||||
.isolation-auto {
|
||||
isolation: auto;
|
||||
}
|
||||
.z-30 {
|
||||
z-index: 30;
|
||||
}
|
||||
.order-last {
|
||||
order: 9999;
|
||||
}
|
||||
.order-2 {
|
||||
order: 2;
|
||||
}
|
||||
.col-span-3 {
|
||||
grid-column: span 3 / span 3;
|
||||
}
|
||||
.col-start-1 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.col-end-4 {
|
||||
grid-column-end: 4;
|
||||
}
|
||||
.row-span-2 {
|
||||
grid-row: span 2 / span 2;
|
||||
}
|
||||
.row-start-3 {
|
||||
grid-row-start: 3;
|
||||
}
|
||||
.row-end-5 {
|
||||
grid-row-end: 5;
|
||||
}
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
.clear-left {
|
||||
clear: left;
|
||||
}
|
||||
.m-4 {
|
||||
margin: 1rem;
|
||||
}
|
||||
.my-2 {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.mt-0 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
.mr-1 {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
.mb-3 {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.ml-4 {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.box-border {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.inline-grid {
|
||||
display: inline-grid;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.h-16 {
|
||||
height: 4rem;
|
||||
}
|
||||
.max-h-screen {
|
||||
max-height: 100vh;
|
||||
}
|
||||
.min-h-0 {
|
||||
min-height: 0px;
|
||||
}
|
||||
.w-12 {
|
||||
width: 3rem;
|
||||
}
|
||||
.min-w-min {
|
||||
min-width: min-content;
|
||||
}
|
||||
.max-w-full {
|
||||
max-width: 100%;
|
||||
}
|
||||
.flex-1 {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
.flex-shrink {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
.flex-shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.flex-grow-0 {
|
||||
flex-grow: 0;
|
||||
}
|
||||
.table-fixed {
|
||||
table-layout: fixed;
|
||||
}
|
||||
.border-collapse {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.origin-top-right {
|
||||
transform-origin: top right;
|
||||
}
|
||||
.translate-x-5 {
|
||||
--tw-translate-x: 1.25rem;
|
||||
transform: var(--tw-transform);
|
||||
}
|
||||
.-translate-x-4 {
|
||||
--tw-translate-x: -1rem;
|
||||
transform: var(--tw-transform);
|
||||
}
|
||||
.translate-y-6 {
|
||||
--tw-translate-y: 1.5rem;
|
||||
transform: var(--tw-transform);
|
||||
}
|
||||
.-translate-x-3 {
|
||||
--tw-translate-x: -0.75rem;
|
||||
transform: var(--tw-transform);
|
||||
}
|
||||
.rotate-3 {
|
||||
--tw-rotate: 3deg;
|
||||
transform: var(--tw-transform);
|
||||
}
|
||||
.skew-y-12 {
|
||||
--tw-skew-y: 12deg;
|
||||
transform: var(--tw-transform);
|
||||
}
|
||||
.skew-x-12 {
|
||||
--tw-skew-x: 12deg;
|
||||
transform: var(--tw-transform);
|
||||
}
|
||||
.scale-95 {
|
||||
--tw-scale-x: 0.95;
|
||||
--tw-scale-y: 0.95;
|
||||
transform: var(--tw-transform);
|
||||
}
|
||||
.transform {
|
||||
transform: var(--tw-transform);
|
||||
}
|
||||
.transform-gpu {
|
||||
--tw-transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)
|
||||
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
|
||||
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.animate-none {
|
||||
animation: none;
|
||||
}
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.animate-spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.select-none {
|
||||
user-select: none;
|
||||
}
|
||||
.resize-none {
|
||||
resize: none;
|
||||
}
|
||||
.list-inside {
|
||||
list-style-position: inside;
|
||||
}
|
||||
.list-disc {
|
||||
list-style-type: disc;
|
||||
}
|
||||
.appearance-none {
|
||||
appearance: none;
|
||||
}
|
||||
.auto-cols-min {
|
||||
grid-auto-columns: min-content;
|
||||
}
|
||||
.grid-flow-row {
|
||||
grid-auto-flow: row;
|
||||
}
|
||||
.auto-rows-max {
|
||||
grid-auto-rows: max-content;
|
||||
}
|
||||
.grid-cols-4 {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
.grid-rows-3 {
|
||||
grid-template-rows: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
.flex-row-reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.place-content-start {
|
||||
place-content: start;
|
||||
}
|
||||
.place-items-end {
|
||||
place-items: end;
|
||||
}
|
||||
.content-center {
|
||||
align-content: center;
|
||||
}
|
||||
.items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.justify-items-end {
|
||||
justify-items: end;
|
||||
}
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
.gap-x-2 {
|
||||
column-gap: 0.5rem;
|
||||
}
|
||||
.gap-y-3 {
|
||||
row-gap: 0.75rem;
|
||||
}
|
||||
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(1rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
.space-y-reverse > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 1;
|
||||
}
|
||||
.space-x-reverse > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 1;
|
||||
}
|
||||
.divide-x-2 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-x-reverse: 0;
|
||||
border-right-width: calc(2px * var(--tw-divide-x-reverse));
|
||||
border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
|
||||
}
|
||||
.divide-y-4 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-y-reverse: 0;
|
||||
border-top-width: calc(4px * calc(1 - var(--tw-divide-y-reverse)));
|
||||
border-bottom-width: calc(4px * var(--tw-divide-y-reverse));
|
||||
}
|
||||
.divide-x-0 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-x-reverse: 0;
|
||||
border-right-width: calc(0px * var(--tw-divide-x-reverse));
|
||||
border-left-width: calc(0px * calc(1 - var(--tw-divide-x-reverse)));
|
||||
}
|
||||
.divide-y-0 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-y-reverse: 0;
|
||||
border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
|
||||
border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
|
||||
}
|
||||
.divide-dotted > :not([hidden]) ~ :not([hidden]) {
|
||||
border-style: dotted;
|
||||
}
|
||||
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-opacity: 1;
|
||||
border-color: rgba(229, 231, 235, var(--tw-divide-opacity));
|
||||
}
|
||||
.divide-opacity-50 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-opacity: 0.5;
|
||||
}
|
||||
.place-self-center {
|
||||
place-self: center;
|
||||
}
|
||||
.self-end {
|
||||
align-self: flex-end;
|
||||
}
|
||||
.justify-self-start {
|
||||
justify-self: start;
|
||||
}
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
.overscroll-contain {
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.overflow-ellipsis {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.whitespace-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.break-words {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
.rounded-md {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
.border {
|
||||
border-width: 1px;
|
||||
}
|
||||
.border-2 {
|
||||
border-width: 2px;
|
||||
}
|
||||
.border-solid {
|
||||
border-style: solid;
|
||||
}
|
||||
.border-black {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(0, 0, 0, var(--tw-border-opacity));
|
||||
}
|
||||
.border-opacity-10 {
|
||||
--tw-border-opacity: 0.1;
|
||||
}
|
||||
.bg-green-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
|
||||
}
|
||||
.bg-opacity-20 {
|
||||
--tw-bg-opacity: 0.2;
|
||||
}
|
||||
.bg-gradient-to-r {
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
}
|
||||
.from-red-300 {
|
||||
--tw-gradient-from: #fca5a5;
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(252, 165, 165, 0));
|
||||
}
|
||||
.via-purple-200 {
|
||||
--tw-gradient-stops: var(--tw-gradient-from), #ddd6fe,
|
||||
var(--tw-gradient-to, rgba(221, 214, 254, 0));
|
||||
}
|
||||
.to-blue-400 {
|
||||
--tw-gradient-to: #60a5fa;
|
||||
}
|
||||
.decoration-slice {
|
||||
box-decoration-break: slice;
|
||||
}
|
||||
.decoration-clone {
|
||||
box-decoration-break: clone;
|
||||
}
|
||||
.bg-cover {
|
||||
background-size: cover;
|
||||
}
|
||||
.bg-local {
|
||||
background-attachment: local;
|
||||
}
|
||||
.bg-clip-border {
|
||||
background-clip: border-box;
|
||||
}
|
||||
.bg-top {
|
||||
background-position: top;
|
||||
}
|
||||
.bg-no-repeat {
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.bg-origin-border {
|
||||
background-origin: border-box;
|
||||
}
|
||||
.bg-origin-padding {
|
||||
background-origin: padding-box;
|
||||
}
|
||||
.bg-origin-content {
|
||||
background-origin: content-box;
|
||||
}
|
||||
.fill-current {
|
||||
fill: currentColor;
|
||||
}
|
||||
.stroke-current {
|
||||
stroke: currentColor;
|
||||
}
|
||||
.stroke-2 {
|
||||
stroke-width: 2;
|
||||
}
|
||||
.object-cover {
|
||||
object-fit: cover;
|
||||
}
|
||||
.object-bottom {
|
||||
object-position: bottom;
|
||||
}
|
||||
.p-4 {
|
||||
padding: 1rem;
|
||||
}
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
.px-3 {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
.pt-1 {
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
.pr-2 {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
.pb-3 {
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
.pl-4 {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.align-middle {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.font-sans {
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
}
|
||||
.text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
.font-medium {
|
||||
font-weight: 500;
|
||||
}
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.not-italic {
|
||||
font-style: normal;
|
||||
}
|
||||
.ordinal,
|
||||
.slashed-zero,
|
||||
.lining-nums,
|
||||
.oldstyle-nums,
|
||||
.proportional-nums,
|
||||
.tabular-nums,
|
||||
.diagonal-fractions,
|
||||
.stacked-fractions {
|
||||
--tw-ordinal: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-slashed-zero: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-numeric-figure: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-numeric-spacing: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-numeric-fraction: var(--tw-empty, /*!*/ /*!*/);
|
||||
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
|
||||
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
||||
}
|
||||
.ordinal {
|
||||
--tw-ordinal: ordinal;
|
||||
}
|
||||
.tabular-nums {
|
||||
--tw-numeric-spacing: tabular-nums;
|
||||
}
|
||||
.diagonal-fractions {
|
||||
--tw-numeric-fraction: diagonal-fractions;
|
||||
}
|
||||
.leading-relaxed {
|
||||
line-height: 1.625;
|
||||
}
|
||||
.leading-5 {
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
.tracking-tight {
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
.text-indigo-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(99, 102, 241, var(--tw-text-opacity));
|
||||
}
|
||||
.text-opacity-10 {
|
||||
--tw-text-opacity: 0.1;
|
||||
}
|
||||
.underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.antialiased {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.placeholder-green-300::placeholder {
|
||||
--tw-placeholder-opacity: 1;
|
||||
color: rgba(110, 231, 183, var(--tw-placeholder-opacity));
|
||||
}
|
||||
.placeholder-opacity-60::placeholder {
|
||||
--tw-placeholder-opacity: 0.6;
|
||||
}
|
||||
.opacity-90 {
|
||||
opacity: 0.9;
|
||||
}
|
||||
.bg-blend-darken {
|
||||
background-blend-mode: darken;
|
||||
}
|
||||
.bg-blend-difference {
|
||||
background-blend-mode: difference;
|
||||
}
|
||||
.mix-blend-multiply {
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
.mix-blend-saturation {
|
||||
mix-blend-mode: saturation;
|
||||
}
|
||||
.shadow {
|
||||
--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||||
var(--tw-shadow);
|
||||
}
|
||||
.shadow-md {
|
||||
--tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||||
var(--tw-shadow);
|
||||
}
|
||||
.shadow-lg {
|
||||
--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||||
var(--tw-shadow);
|
||||
}
|
||||
.outline-none {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.outline-black {
|
||||
outline: 2px dotted black;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.ring {
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
|
||||
var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
|
||||
var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
}
|
||||
.ring-4 {
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
|
||||
var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width))
|
||||
var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
}
|
||||
.ring-white {
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgba(255, 255, 255, var(--tw-ring-opacity));
|
||||
}
|
||||
.ring-opacity-40 {
|
||||
--tw-ring-opacity: 0.4;
|
||||
}
|
||||
.ring-offset-2 {
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
.ring-offset-blue-300 {
|
||||
--tw-ring-offset-color: #93c5fd;
|
||||
}
|
||||
.blur-md {
|
||||
--tw-blur: blur(12px);
|
||||
filter: var(--tw-filter);
|
||||
}
|
||||
.brightness-150 {
|
||||
--tw-brightness: brightness(1.5);
|
||||
filter: var(--tw-filter);
|
||||
}
|
||||
.contrast-50 {
|
||||
--tw-contrast: contrast(0.5);
|
||||
filter: var(--tw-filter);
|
||||
}
|
||||
.drop-shadow-md {
|
||||
--tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07))
|
||||
drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
|
||||
filter: var(--tw-filter);
|
||||
}
|
||||
.grayscale {
|
||||
--tw-grayscale: grayscale(100%);
|
||||
filter: var(--tw-filter);
|
||||
}
|
||||
.hue-rotate-60 {
|
||||
--tw-hue-rotate: hue-rotate(60deg);
|
||||
filter: var(--tw-filter);
|
||||
}
|
||||
.invert {
|
||||
--tw-invert: invert(100%);
|
||||
filter: var(--tw-filter);
|
||||
}
|
||||
.saturate-200 {
|
||||
--tw-saturate: saturate(2);
|
||||
filter: var(--tw-filter);
|
||||
}
|
||||
.sepia {
|
||||
--tw-sepia: sepia(100%);
|
||||
filter: var(--tw-filter);
|
||||
}
|
||||
.filter {
|
||||
filter: var(--tw-filter);
|
||||
}
|
||||
.filter-none {
|
||||
filter: none;
|
||||
}
|
||||
.backdrop-blur-lg {
|
||||
--tw-backdrop-blur: blur(16px);
|
||||
backdrop-filter: var(--tw-backdrop-filter);
|
||||
}
|
||||
.backdrop-brightness-50 {
|
||||
--tw-backdrop-brightness: brightness(0.5);
|
||||
backdrop-filter: var(--tw-backdrop-filter);
|
||||
}
|
||||
.backdrop-contrast-0 {
|
||||
--tw-backdrop-contrast: contrast(0);
|
||||
backdrop-filter: var(--tw-backdrop-filter);
|
||||
}
|
||||
.backdrop-grayscale {
|
||||
--tw-backdrop-grayscale: grayscale(100%);
|
||||
backdrop-filter: var(--tw-backdrop-filter);
|
||||
}
|
||||
.backdrop-hue-rotate-90 {
|
||||
--tw-backdrop-hue-rotate: hue-rotate(90deg);
|
||||
backdrop-filter: var(--tw-backdrop-filter);
|
||||
}
|
||||
.backdrop-invert {
|
||||
--tw-backdrop-invert: invert(100%);
|
||||
backdrop-filter: var(--tw-backdrop-filter);
|
||||
}
|
||||
.backdrop-opacity-75 {
|
||||
--tw-backdrop-opacity: opacity(0.75);
|
||||
backdrop-filter: var(--tw-backdrop-filter);
|
||||
}
|
||||
.backdrop-saturate-150 {
|
||||
--tw-backdrop-saturate: saturate(1.5);
|
||||
backdrop-filter: var(--tw-backdrop-filter);
|
||||
}
|
||||
.backdrop-sepia {
|
||||
--tw-backdrop-sepia: sepia(100%);
|
||||
backdrop-filter: var(--tw-backdrop-filter);
|
||||
}
|
||||
.backdrop-filter {
|
||||
backdrop-filter: var(--tw-backdrop-filter);
|
||||
}
|
||||
.backdrop-filter-none {
|
||||
backdrop-filter: none;
|
||||
}
|
||||
.transition {
|
||||
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow,
|
||||
transform, filter, backdrop-filter;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
.transition-all {
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
.delay-300 {
|
||||
transition-delay: 300ms;
|
||||
}
|
||||
.duration-200 {
|
||||
transition-duration: 200ms;
|
||||
}
|
||||
.ease-in-out {
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
@ -8,140 +8,6 @@
|
||||
<link rel="stylesheet" href="./tailwind.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="sr-only"></div>
|
||||
<div class="content-center"></div>
|
||||
<div class="items-start"></div>
|
||||
<div class="self-end"></div>
|
||||
<div class="animate-none"></div>
|
||||
<div class="animate-spin"></div>
|
||||
<div class="appearance-none"></div>
|
||||
<div class="bg-local"></div>
|
||||
<div class="bg-clip-border"></div>
|
||||
<div class="bg-green-500"></div>
|
||||
<div class="bg-gradient-to-r"></div>
|
||||
<div class="bg-opacity-20"></div>
|
||||
<div class="bg-top"></div>
|
||||
<div class="bg-no-repeat"></div>
|
||||
<div class="bg-cover"></div>
|
||||
<div class="bg-origin-border bg-origin-padding bg-origin-content"></div>
|
||||
<div class="border-collapse"></div>
|
||||
<div class="border-black"></div>
|
||||
<div class="border-opacity-10"></div>
|
||||
<div class="rounded-md"></div>
|
||||
<div class="border-solid"></div>
|
||||
<div class="border"></div>
|
||||
<div class="border-2"></div>
|
||||
<div class="shadow"></div>
|
||||
<div class="shadow-md"></div>
|
||||
<div class="shadow-lg"></div>
|
||||
<div class="decoration-clone decoration-slice"></div>
|
||||
<div class="box-border"></div>
|
||||
<div class="clear-left"></div>
|
||||
<div class="container"></div>
|
||||
<div class="cursor-pointer"></div>
|
||||
<div class="hidden inline-grid"></div>
|
||||
<div class="divide-gray-200"></div>
|
||||
<div class="divide-opacity-50"></div>
|
||||
<div class="divide-dotted"></div>
|
||||
<div class="divide-x-2 divide-y-4 divide-x-0 divide-y-0"></div>
|
||||
<div class="fill-current"></div>
|
||||
<div class="flex-1"></div>
|
||||
<div class="flex-row-reverse"></div>
|
||||
<div class="flex-grow"></div>
|
||||
<div class="flex-grow-0"></div>
|
||||
<div class="flex-shrink"></div>
|
||||
<div class="flex-shrink-0"></div>
|
||||
<div class="flex-wrap"></div>
|
||||
<div class="float-right"></div>
|
||||
<div class="font-sans"></div>
|
||||
<div class="text-2xl"></div>
|
||||
<div class="antialiased"></div>
|
||||
<div class="not-italic"></div>
|
||||
<div class="tabular-nums ordinal diagonal-fractions"></div>
|
||||
<div class="font-medium"></div>
|
||||
<div class="gap-x-2 gap-y-3 gap-4"></div>
|
||||
<div class="from-red-300 via-purple-200 to-blue-400"></div>
|
||||
<div class="auto-cols-min"></div>
|
||||
<div class="grid-flow-row"></div>
|
||||
<div class="auto-rows-max"></div>
|
||||
<div class="col-span-3"></div>
|
||||
<div class="col-start-1"></div>
|
||||
<div class="col-end-4"></div>
|
||||
<div class="row-span-2"></div>
|
||||
<div class="row-start-3"></div>
|
||||
<div class="row-end-5"></div>
|
||||
<div class="grid-cols-4"></div>
|
||||
<div class="grid-rows-3"></div>
|
||||
<div class="h-16"></div>
|
||||
<div class="inset-0 inset-y-4 inset-x-2 top-6 right-8 bottom-12 left-16"></div>
|
||||
<div class="isolate isolation-auto"></div>
|
||||
<div class="justify-center"></div>
|
||||
<div class="justify-items-end"></div>
|
||||
<div class="justify-self-start"></div>
|
||||
<div class="tracking-tight"></div>
|
||||
<div class="leading-relaxed leading-5"></div>
|
||||
<div class="list-inside"></div>
|
||||
<div class="list-disc"></div>
|
||||
<div class="m-4 my-2 mx-auto mt-0 mr-1 mb-3 ml-4"></div>
|
||||
<div class="max-h-screen"></div>
|
||||
<div class="max-w-full"></div>
|
||||
<div class="min-h-0"></div>
|
||||
<div class="min-w-min"></div>
|
||||
<div class="object-cover"></div>
|
||||
<div class="object-bottom"></div>
|
||||
<div class="opacity-90"></div>
|
||||
<div class="bg-blend-darken bg-blend-difference"></div>
|
||||
<div class="mix-blend-multiply mix-blend-saturation"></div>
|
||||
<div class="order-last order-2"></div>
|
||||
<div class="outline-none outline-black"></div>
|
||||
<div class="overflow-hidden"></div>
|
||||
<div class="overscroll-contain"></div>
|
||||
<div class="p-4 py-2 px-3 pt-1 pr-2 pb-3 pl-4"></div>
|
||||
<div class="place-content-start"></div>
|
||||
<div class="placeholder-green-300"></div>
|
||||
<div class="placeholder-opacity-60"></div>
|
||||
<div class="place-items-end"></div>
|
||||
<div class="place-self-center"></div>
|
||||
<div class="pointer-events-none"></div>
|
||||
<div class="absolute"></div>
|
||||
<div class="resize-none"></div>
|
||||
<div class="ring-white"></div>
|
||||
<div class="ring-offset-blue-300"></div>
|
||||
<div class="ring-offset-2"></div>
|
||||
<div class="ring-opacity-40"></div>
|
||||
<div class="ring ring-4"></div>
|
||||
<div
|
||||
class="filter filter-none blur-md brightness-150 contrast-50 drop-shadow-md grayscale hue-rotate-60 invert saturate-200 sepia"
|
||||
></div>
|
||||
<div
|
||||
class="backdrop-filter backdrop-filter-none backdrop-blur-lg backdrop-brightness-50 backdrop-contrast-0 backdrop-grayscale backdrop-hue-rotate-90 backdrop-invert backdrop-opacity-75 backdrop-saturate-150 backdrop-sepia"
|
||||
></div>
|
||||
<div class="rotate-3"></div>
|
||||
<div class="scale-95"></div>
|
||||
<div class="skew-y-12 skew-x-12"></div>
|
||||
<div class="space-x-4 space-y-3 space-x-reverse space-y-reverse"></div>
|
||||
<div class="stroke-current"></div>
|
||||
<div class="stroke-2"></div>
|
||||
<div class="table-fixed"></div>
|
||||
<div class="text-center"></div>
|
||||
<div class="text-indigo-500"></div>
|
||||
<div class="underline"></div>
|
||||
<div class="text-opacity-10"></div>
|
||||
<div class="overflow-ellipsis truncate"></div>
|
||||
<div class="uppercase"></div>
|
||||
<div class="transform transform-gpu"></div>
|
||||
<div class="origin-top-right"></div>
|
||||
<div class="delay-300"></div>
|
||||
<div class="duration-200"></div>
|
||||
<div class="transition transition-all"></div>
|
||||
<div class="ease-in-out"></div>
|
||||
<div class="translate-x-5 -translate-x-4 translate-y-6 -translate-x-3"></div>
|
||||
<div class="select-none"></div>
|
||||
<div class="align-middle"></div>
|
||||
<div class="invisible"></div>
|
||||
<div class="whitespace-nowrap"></div>
|
||||
<div class="w-12"></div>
|
||||
<div class="break-words"></div>
|
||||
<div class="z-30"></div>
|
||||
<div class="font-bold"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import postcss from 'postcss'
|
||||
import fs from 'fs'
|
||||
import path from 'path'
|
||||
import tailwind from '../../src/jit/index.js'
|
||||
|
||||
@ -9,6 +8,10 @@ function run(input, config = {}) {
|
||||
})
|
||||
}
|
||||
|
||||
function css(templates) {
|
||||
return templates.join('')
|
||||
}
|
||||
|
||||
test('relative purge paths', () => {
|
||||
let config = {
|
||||
purge: ['./tests/jit/relative-purge-paths.test.html'],
|
||||
@ -18,16 +21,17 @@ test('relative purge paths', () => {
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
let css = `
|
||||
let input = css`
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
`
|
||||
|
||||
return run(css, config).then((result) => {
|
||||
let expectedPath = path.resolve(__dirname, './relative-purge-paths.test.css')
|
||||
let expected = fs.readFileSync(expectedPath, 'utf8')
|
||||
|
||||
expect(result.css).toMatchFormattedCss(expected)
|
||||
return run(input, config).then((result) => {
|
||||
expect(result.css).toIncludeCss(css`
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
||||
@ -10,6 +10,10 @@ function run(input, config = {}) {
|
||||
})
|
||||
}
|
||||
|
||||
function css(templates) {
|
||||
return templates.join('')
|
||||
}
|
||||
|
||||
test('basic utilities', async () => {
|
||||
let config = {
|
||||
mode: 'jit',
|
||||
@ -23,17 +27,17 @@ test('basic utilities', async () => {
|
||||
corePlugins: ['transform', 'scale', 'rotate', 'skew'],
|
||||
}
|
||||
|
||||
let css = `
|
||||
let input = css`
|
||||
@tailwind base;
|
||||
/* --- */
|
||||
@tailwind utilities;
|
||||
`
|
||||
|
||||
return run(css, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(`
|
||||
.rotate-3,
|
||||
.skew-y-6,
|
||||
.scale-x-110 {
|
||||
return run(input, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(css`
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
@ -75,17 +79,17 @@ test('with pseudo-class variants', async () => {
|
||||
corePlugins: ['transform', 'scale', 'rotate', 'skew'],
|
||||
}
|
||||
|
||||
let css = `
|
||||
let input = css`
|
||||
@tailwind base;
|
||||
/* --- */
|
||||
@tailwind utilities;
|
||||
`
|
||||
|
||||
return run(css, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(`
|
||||
.hover\\:scale-x-110,
|
||||
.focus\\:rotate-3,
|
||||
.hover\\:focus\\:skew-y-6 {
|
||||
return run(input, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(css`
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
@ -127,16 +131,17 @@ test('with pseudo-element variants', async () => {
|
||||
corePlugins: ['transform', 'scale', 'rotate', 'skew'],
|
||||
}
|
||||
|
||||
let css = `
|
||||
let input = css`
|
||||
@tailwind base;
|
||||
/* --- */
|
||||
@tailwind utilities;
|
||||
`
|
||||
|
||||
return run(css, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(`
|
||||
.before\\:scale-x-110::before,
|
||||
.after\\:rotate-3::after {
|
||||
return run(input, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(css`
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
@ -176,16 +181,17 @@ test('with multi-class variants', async () => {
|
||||
corePlugins: ['transform', 'scale', 'rotate', 'skew'],
|
||||
}
|
||||
|
||||
let css = `
|
||||
let input = css`
|
||||
@tailwind base;
|
||||
/* --- */
|
||||
@tailwind utilities;
|
||||
`
|
||||
|
||||
return run(css, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(`
|
||||
.group-hover\\:scale-x-110,
|
||||
.peer-focus\\:rotate-3 {
|
||||
return run(input, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(css`
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
@ -223,16 +229,17 @@ test('with multi-class pseudo-element variants', async () => {
|
||||
corePlugins: ['transform', 'scale', 'rotate', 'skew'],
|
||||
}
|
||||
|
||||
let css = `
|
||||
let input = css`
|
||||
@tailwind base;
|
||||
/* --- */
|
||||
@tailwind utilities;
|
||||
`
|
||||
|
||||
return run(css, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(`
|
||||
.group-hover\\:before\\:scale-x-110::before,
|
||||
.peer-focus\\:after\\:rotate-3::after {
|
||||
return run(input, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(css`
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
@ -272,16 +279,17 @@ test('with multi-class pseudo-element and pseudo-class variants', async () => {
|
||||
corePlugins: ['transform', 'scale', 'rotate', 'skew'],
|
||||
}
|
||||
|
||||
let css = `
|
||||
let input = css`
|
||||
@tailwind base;
|
||||
/* --- */
|
||||
@tailwind utilities;
|
||||
`
|
||||
|
||||
return run(css, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(`
|
||||
.group-hover\\:hover\\:before\\:scale-x-110::before,
|
||||
.peer-focus\\:focus\\:after\\:rotate-3::after {
|
||||
return run(input, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(css`
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
@ -321,7 +329,7 @@ test('with apply', async () => {
|
||||
corePlugins: ['transform', 'scale', 'rotate', 'skew'],
|
||||
}
|
||||
|
||||
let css = `
|
||||
let input = css`
|
||||
@tailwind base;
|
||||
/* --- */
|
||||
@tailwind utilities;
|
||||
@ -370,19 +378,11 @@ test('with apply', async () => {
|
||||
}
|
||||
`
|
||||
|
||||
return run(css, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(`
|
||||
.foo,
|
||||
.bar::before,
|
||||
.baz::before,
|
||||
span,
|
||||
.media-queries,
|
||||
.a,
|
||||
.b,
|
||||
.c,
|
||||
.a::before,
|
||||
.b::after,
|
||||
.recursive {
|
||||
return run(input, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(css`
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
@ -457,16 +457,17 @@ test('with borders', async () => {
|
||||
corePlugins: ['borderWidth', 'borderColor', 'borderOpacity'],
|
||||
}
|
||||
|
||||
let css = `
|
||||
let input = css`
|
||||
@tailwind base;
|
||||
/* --- */
|
||||
@tailwind utilities;
|
||||
`
|
||||
|
||||
return run(css, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(`
|
||||
.border,
|
||||
.md\\:border-2 {
|
||||
return run(input, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(css`
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
|
||||
}
|
||||
@ -500,21 +501,20 @@ test('with shadows', async () => {
|
||||
corePlugins: ['boxShadow', 'ringColor', 'ringWidth'],
|
||||
}
|
||||
|
||||
let css = `
|
||||
let input = css`
|
||||
@tailwind base;
|
||||
/* --- */
|
||||
@tailwind utilities;
|
||||
`
|
||||
|
||||
return run(css, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(`
|
||||
.shadow,
|
||||
.md\\:shadow-xl {
|
||||
return run(input, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(css`
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
}
|
||||
.ring-1 {
|
||||
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
@ -563,14 +563,14 @@ test('when no utilities that need the defaults are used', async () => {
|
||||
corePlugins: ['transform', 'scale', 'rotate', 'skew'],
|
||||
}
|
||||
|
||||
let css = `
|
||||
let input = css`
|
||||
@tailwind base;
|
||||
/* --- */
|
||||
@tailwind utilities;
|
||||
`
|
||||
|
||||
return run(css, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(`
|
||||
return run(input, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(css`
|
||||
/* --- */
|
||||
`)
|
||||
})
|
||||
@ -589,14 +589,14 @@ test('when a utility uses defaults but they do not exist', async () => {
|
||||
corePlugins: ['rotate'],
|
||||
}
|
||||
|
||||
let css = `
|
||||
let input = css`
|
||||
@tailwind base;
|
||||
/* --- */
|
||||
@tailwind utilities;
|
||||
`
|
||||
|
||||
return run(css, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(`
|
||||
return run(input, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(css`
|
||||
/* --- */
|
||||
.rotate-3 {
|
||||
--tw-rotate: 3deg;
|
||||
@ -619,7 +619,7 @@ test('selectors are reduced to the lowest possible specificity', async () => {
|
||||
corePlugins: [],
|
||||
}
|
||||
|
||||
let css = `
|
||||
let input = css`
|
||||
@defaults test {
|
||||
--color: black;
|
||||
}
|
||||
@ -641,12 +641,12 @@ test('selectors are reduced to the lowest possible specificity', async () => {
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
div[data-foo="bar"]#other {
|
||||
div[data-foo='bar']#other {
|
||||
@defaults test;
|
||||
fill: var(--color);
|
||||
}
|
||||
|
||||
div[data-bar="baz"] {
|
||||
div[data-bar='baz'] {
|
||||
@defaults test;
|
||||
stroke: var(--color);
|
||||
}
|
||||
@ -656,21 +656,17 @@ test('selectors are reduced to the lowest possible specificity', async () => {
|
||||
--article: var(--color);
|
||||
}
|
||||
|
||||
div[data-foo="bar"]#another::before {
|
||||
div[data-foo='bar']#another::before {
|
||||
@defaults test;
|
||||
fill: var(--color);
|
||||
}
|
||||
`
|
||||
|
||||
return run(css, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(`
|
||||
.foo,
|
||||
[id="app"],
|
||||
[id="page"],
|
||||
[id="other"],
|
||||
[data-bar="baz"],
|
||||
article,
|
||||
[id="another"]::before {
|
||||
return run(input, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(css`
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
--color: black;
|
||||
}
|
||||
|
||||
@ -688,11 +684,11 @@ test('selectors are reduced to the lowest possible specificity', async () => {
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
div[data-foo="bar"]#other {
|
||||
div[data-foo='bar']#other {
|
||||
fill: var(--color);
|
||||
}
|
||||
|
||||
div[data-bar="baz"] {
|
||||
div[data-bar='baz'] {
|
||||
stroke: var(--color);
|
||||
}
|
||||
|
||||
@ -700,7 +696,7 @@ test('selectors are reduced to the lowest possible specificity', async () => {
|
||||
--article: var(--color);
|
||||
}
|
||||
|
||||
div[data-foo="bar"]#another::before {
|
||||
div[data-foo='bar']#another::before {
|
||||
fill: var(--color);
|
||||
}
|
||||
`)
|
||||
|
||||
@ -1,110 +1,6 @@
|
||||
.first\:shadow-md,
|
||||
.last\:shadow-md,
|
||||
.only\:shadow-md,
|
||||
.odd\:shadow-md,
|
||||
.even\:shadow-md,
|
||||
.first-of-type\:shadow-md,
|
||||
.last-of-type\:shadow-md,
|
||||
.only-of-type\:shadow-md,
|
||||
.visited\:shadow-md,
|
||||
.target\:shadow-md,
|
||||
.default\:shadow-md,
|
||||
.checked\:shadow-md,
|
||||
.indeterminate\:shadow-md,
|
||||
.placeholder-shown\:shadow-md,
|
||||
.autofill\:shadow-md,
|
||||
.required\:shadow-md,
|
||||
.valid\:shadow-md,
|
||||
.invalid\:shadow-md,
|
||||
.in-range\:shadow-md,
|
||||
.out-of-range\:shadow-md,
|
||||
.read-only\:shadow-md,
|
||||
.empty\:shadow-md,
|
||||
.focus-within\:shadow-md,
|
||||
.hover\:shadow-md,
|
||||
.focus\:shadow-md,
|
||||
.focus\:hover\:shadow-md,
|
||||
.focus-visible\:shadow-md,
|
||||
.active\:shadow-md,
|
||||
.disabled\:shadow-md,
|
||||
.group-first\:shadow-md,
|
||||
.group-last\:shadow-md,
|
||||
.group-only\:shadow-md,
|
||||
.group-odd\:shadow-md,
|
||||
.group-even\:shadow-md,
|
||||
.group-first-of-type\:shadow-md,
|
||||
.group-last-of-type\:shadow-md,
|
||||
.group-only-of-type\:shadow-md,
|
||||
.group-visited\:shadow-md,
|
||||
.group-target\:shadow-md,
|
||||
.group-default\:shadow-md,
|
||||
.group-checked\:shadow-md,
|
||||
.group-indeterminate\:shadow-md,
|
||||
.group-placeholder-shown\:shadow-md,
|
||||
.group-autofill\:shadow-md,
|
||||
.group-required\:shadow-md,
|
||||
.group-valid\:shadow-md,
|
||||
.group-invalid\:shadow-md,
|
||||
.group-in-range\:shadow-md,
|
||||
.group-out-of-range\:shadow-md,
|
||||
.group-read-only\:shadow-md,
|
||||
.group-empty\:shadow-md,
|
||||
.group-focus-within\:shadow-md,
|
||||
.group-hover\:shadow-md,
|
||||
.group-focus\:shadow-md,
|
||||
.group-focus\:group-hover\:shadow-md,
|
||||
.group-focus-visible\:shadow-md,
|
||||
.group-active\:shadow-md,
|
||||
.group-disabled\:shadow-md,
|
||||
.group-disabled\:group-focus\:group-hover\:shadow-md,
|
||||
.group-disabled\:group-focus\:group-hover\:first\:shadow-md,
|
||||
.peer-first\:shadow-md,
|
||||
.peer-last\:shadow-md,
|
||||
.peer-only\:shadow-md,
|
||||
.peer-odd\:shadow-md,
|
||||
.peer-even\:shadow-md,
|
||||
.peer-first-of-type\:shadow-md,
|
||||
.peer-last-of-type\:shadow-md,
|
||||
.peer-only-of-type\:shadow-md,
|
||||
.peer-visited\:shadow-md,
|
||||
.peer-target\:shadow-md,
|
||||
.peer-default\:shadow-md,
|
||||
.peer-checked\:shadow-md,
|
||||
.peer-indeterminate\:shadow-md,
|
||||
.peer-placeholder-shown\:shadow-md,
|
||||
.peer-autofill\:shadow-md,
|
||||
.peer-required\:shadow-md,
|
||||
.peer-valid\:shadow-md,
|
||||
.peer-invalid\:shadow-md,
|
||||
.peer-in-range\:shadow-md,
|
||||
.peer-out-of-range\:shadow-md,
|
||||
.peer-read-only\:shadow-md,
|
||||
.peer-empty\:shadow-md,
|
||||
.peer-focus-within\:shadow-md,
|
||||
.peer-hover\:shadow-md,
|
||||
.peer-focus\:shadow-md,
|
||||
.peer-focus\:peer-hover\:shadow-md,
|
||||
.peer-focus-visible\:shadow-md,
|
||||
.peer-active\:shadow-md,
|
||||
.peer-disabled\:shadow-md,
|
||||
.peer-disabled\:peer-focus\:peer-hover\:shadow-md,
|
||||
.peer-disabled\:peer-focus\:peer-hover\:first\:shadow-md,
|
||||
.ltr\:shadow-md,
|
||||
.rtl\:shadow-md,
|
||||
.motion-safe\:shadow-md,
|
||||
.motion-reduce\:shadow-md,
|
||||
.dark\:shadow-md,
|
||||
.dark\:group-disabled\:group-focus\:group-hover\:shadow-md,
|
||||
.dark\:peer-disabled\:peer-focus\:peer-hover\:shadow-md,
|
||||
.sm\:shadow-md,
|
||||
.sm\:active\:shadow-md,
|
||||
.md\:shadow-md,
|
||||
.md\:group-focus\:shadow-md,
|
||||
.lg\:shadow-md,
|
||||
.lg\:dark\:shadow-md,
|
||||
.xl\:shadow-md,
|
||||
.\32xl\:shadow-md,
|
||||
.\32xl\:dark\:motion-safe\:focus-within\:shadow-md {
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
|
||||
@ -9,6 +9,10 @@ function run(input, config = {}) {
|
||||
})
|
||||
}
|
||||
|
||||
function css(templates) {
|
||||
return templates.join('')
|
||||
}
|
||||
|
||||
test('variants', () => {
|
||||
let config = {
|
||||
darkMode: 'class',
|
||||
@ -19,13 +23,13 @@ test('variants', () => {
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
let css = `
|
||||
let input = css`
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
`
|
||||
|
||||
return run(css, config).then((result) => {
|
||||
return run(input, config).then((result) => {
|
||||
let expectedPath = path.resolve(__dirname, './variants.test.css')
|
||||
let expected = fs.readFileSync(expectedPath, 'utf8')
|
||||
|
||||
@ -42,19 +46,19 @@ test('stacked peer variants', async () => {
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
let css = `
|
||||
let input = css`
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
`
|
||||
|
||||
let expected = `
|
||||
let expected = css`
|
||||
.peer:disabled:focus:hover ~ .peer-disabled\\:peer-focus\\:peer-hover\\:border-blue-500 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(59, 130, 246, var(--tw-border-opacity));
|
||||
}
|
||||
`
|
||||
|
||||
let result = await run(css, config)
|
||||
let result = await run(input, config)
|
||||
expect(result.css).toIncludeCss(expected)
|
||||
})
|
||||
|
||||
@ -4,6 +4,16 @@ import postcss from 'postcss'
|
||||
import tailwind from '../src/index'
|
||||
import config from '../stubs/defaultConfig.stub.js'
|
||||
|
||||
function dropTailwindHeader(css) {
|
||||
let [header, ...lines] = css.split('\n')
|
||||
|
||||
expect(
|
||||
/\/*! tailwindcss v\d*\.\d*\.\d* \| MIT License \| https:\/\/tailwindcss.com \*\//g.test(header)
|
||||
).toBe(true)
|
||||
|
||||
return lines.join('\n')
|
||||
}
|
||||
|
||||
it('generates the right CSS using the default settings', () => {
|
||||
const inputPath = path.resolve(`${__dirname}/fixtures/tailwind-input.css`)
|
||||
const input = fs.readFileSync(inputPath, 'utf8')
|
||||
@ -16,7 +26,7 @@ it('generates the right CSS using the default settings', () => {
|
||||
'utf8'
|
||||
)
|
||||
|
||||
expect(result.css).toBe(expected)
|
||||
expect(dropTailwindHeader(result.css)).toBe(dropTailwindHeader(expected))
|
||||
})
|
||||
})
|
||||
|
||||
@ -32,7 +42,7 @@ it('generates the right CSS when "important" is enabled', () => {
|
||||
'utf8'
|
||||
)
|
||||
|
||||
expect(result.css).toBe(expected)
|
||||
expect(dropTailwindHeader(result.css)).toBe(dropTailwindHeader(expected))
|
||||
})
|
||||
})
|
||||
|
||||
@ -48,7 +58,7 @@ it('generates the right CSS when using @import instead of @tailwind', () => {
|
||||
'utf8'
|
||||
)
|
||||
|
||||
expect(result.css).toBe(expected)
|
||||
expect(dropTailwindHeader(result.css)).toBe(dropTailwindHeader(expected))
|
||||
})
|
||||
})
|
||||
|
||||
@ -69,7 +79,7 @@ it('generates the right CSS when enabling flagged features', () => {
|
||||
'utf8'
|
||||
)
|
||||
|
||||
expect(result.css).toBe(expected)
|
||||
expect(dropTailwindHeader(result.css)).toBe(dropTailwindHeader(expected))
|
||||
})
|
||||
})
|
||||
|
||||
@ -97,7 +107,7 @@ it('generates the right CSS when color opacity plugins are disabled', () => {
|
||||
'utf8'
|
||||
)
|
||||
|
||||
expect(result.css).toBe(expected)
|
||||
expect(dropTailwindHeader(result.css)).toBe(dropTailwindHeader(expected))
|
||||
})
|
||||
})
|
||||
|
||||
@ -139,6 +149,6 @@ it('generates the right CSS when "important" is enabled', () => {
|
||||
'utf8'
|
||||
)
|
||||
|
||||
expect(result.css).toBe(expected)
|
||||
expect(dropTailwindHeader(result.css)).toBe(dropTailwindHeader(expected))
|
||||
})
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user