mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
c8bf2d49b6
* disable color opacity plugins by default for the `oxide` engine * update tests to reflect this change in the `oxide` engine * update changelog * reflect changes in integration tests
1324 lines
39 KiB
JavaScript
1324 lines
39 KiB
JavaScript
import { crosscheck, run, html, css, defaults } from './util/run'
|
|
|
|
crosscheck(({ stable, oxide }) => {
|
|
test('it works', () => {
|
|
let config = {
|
|
darkMode: 'class',
|
|
content: [
|
|
{
|
|
raw: html`
|
|
<div class="range:text-right multi:text-left"></div>
|
|
<div
|
|
class="container hover:container sm:container md:container text-center sm:text-center md:text-center"
|
|
></div>
|
|
<div class="grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
|
|
<div class="test-apply-font-variant"></div>
|
|
<div class="mt-6 mx-1 ms-4 me-8"></div>
|
|
<div class="pt-6 px-1 ps-4 pe-8"></div>
|
|
<div class="inset-6 inset-x-1 start-4 end-8"></div>
|
|
<div class="border-2 border-s-0 border-e-4"></div>
|
|
<div class="border-black border-s-green-500 border-e-red-400"></div>
|
|
<div class="rounded-s rounded-e rounded-ss rounded-es"></div>
|
|
<div class="bg-black"></div>
|
|
<div class="md:hover:border-r-blue-500/30"></div>
|
|
<div class="custom-util"></div>
|
|
<div class="hover:custom-util"></div>
|
|
<div class="group-hover:custom-util"></div>
|
|
<div class="foo:custom-util"></div>
|
|
<div class="foo:hover:custom-util"></div>
|
|
<div class="sm:custom-util"></div>
|
|
<div class="dark:custom-util"></div>
|
|
<div class="motion-safe:custom-util"></div>
|
|
<div class="md:dark:motion-safe:foo:active:custom-util"></div>
|
|
<div class="aspect-w-1 aspect-h-2"></div>
|
|
<div class="aspect-w-3 aspect-h-4"></div>
|
|
<div class="magic-none magic-tons"></div>
|
|
<div class="focus:font-normal"></div>
|
|
<div class="font-medium"></div>
|
|
<div class="bg-gradient-to-r from-foo"></div>
|
|
<div class="custom-component custom-util"></div>
|
|
<div class="bg-opacity-50"></div>
|
|
<div class="focus:ring-2 focus:ring-blue-500"></div>
|
|
<div class="hover:font-bold"></div>
|
|
<div class="disabled:font-bold"></div>
|
|
<div class="focus:hover:font-light"></div>
|
|
<div class="first:pt-0"></div>
|
|
<div class="container"></div>
|
|
<div class="bg-hero--home-1"></div>
|
|
<div class="group-hover:opacity-100"></div>
|
|
<div class="group-active:opacity-10"></div>
|
|
<div class="sm:motion-safe:group-active:focus:opacity-10"></div>
|
|
<div class="motion-safe:transition"></div>
|
|
<div class="motion-reduce:transition"></div>
|
|
<div class="md:motion-safe:hover:transition"></div>
|
|
<div class="md:sm:text-center shadow-sm md:shadow-sm"></div>
|
|
<div class="md:sm:text-center shadow-sm md:shadow-sm"></div>
|
|
<div class="bg-green-500 md:opacity-50 md:hover:opacity-20 sm:tabular-nums"></div>
|
|
<div
|
|
class="text-center shadow-md hover:shadow-lg transform scale-50 hover:scale-75"
|
|
></div>
|
|
|
|
<script>
|
|
defineComponent({
|
|
name: 'HelloWorld',
|
|
props: {
|
|
msg: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
things: Array /* PropType<string[]> */,
|
|
},
|
|
setup: () => {
|
|
const count = ref(0)
|
|
// Weird regex-looking stuff that once caused a stack overflow in candidatePermutations
|
|
const pattern = ' ]-[] '
|
|
return {
|
|
count,
|
|
stuff: [] /* string[] | undefined */,
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
`,
|
|
},
|
|
],
|
|
corePlugins: { preflight: false },
|
|
theme: {
|
|
extend: {
|
|
screens: {
|
|
range: { min: '1280px', max: '1535px' },
|
|
multi: [{ min: '640px', max: '767px' }, { max: '868px' }],
|
|
},
|
|
gradientColorStops: {
|
|
foo: '#bada55',
|
|
},
|
|
backgroundImage: {
|
|
'hero--home-1': "url('/images/homepage-1.jpg')",
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
function ({ addVariant }) {
|
|
addVariant(
|
|
'foo',
|
|
({ container }) => {
|
|
container.walkRules((rule) => {
|
|
rule.selector = `.foo\\:${rule.selector.slice(1)}`
|
|
rule.walkDecls((decl) => {
|
|
decl.important = true
|
|
})
|
|
})
|
|
},
|
|
{ before: 'sm' }
|
|
)
|
|
},
|
|
function ({ addUtilities, addBase, theme }) {
|
|
addBase({
|
|
h1: {
|
|
fontSize: theme('fontSize.2xl'),
|
|
fontWeight: theme('fontWeight.bold'),
|
|
'&:first-child': {
|
|
marginTop: '0px',
|
|
},
|
|
},
|
|
})
|
|
addUtilities(
|
|
{
|
|
'.magic-none': {
|
|
magic: 'none',
|
|
},
|
|
'.magic-tons': {
|
|
magic: 'tons',
|
|
},
|
|
},
|
|
['responsive', 'hover']
|
|
)
|
|
},
|
|
],
|
|
}
|
|
|
|
let input = css`
|
|
@layer utilities {
|
|
.custom-util {
|
|
background: #abcdef;
|
|
}
|
|
*,
|
|
::before,
|
|
::after,
|
|
::backdrop {
|
|
margin: 10px;
|
|
}
|
|
}
|
|
@layer components {
|
|
.test-apply-font-variant {
|
|
@apply ordinal tabular-nums;
|
|
}
|
|
.custom-component {
|
|
background: #123456;
|
|
}
|
|
*,
|
|
::before,
|
|
::after,
|
|
::backdrop {
|
|
padding: 5px;
|
|
}
|
|
.foo .bg-black {
|
|
appearance: none;
|
|
}
|
|
}
|
|
@layer base {
|
|
div {
|
|
background: #654321;
|
|
}
|
|
}
|
|
.theme-test {
|
|
font-family: theme('fontFamily.sans');
|
|
color: theme('colors.blue.500');
|
|
}
|
|
@screen lg {
|
|
.screen-test {
|
|
color: purple;
|
|
}
|
|
}
|
|
.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-y-4;
|
|
}
|
|
.nested {
|
|
.example {
|
|
@apply font-bold hover:font-normal;
|
|
}
|
|
}
|
|
.apply-order-a {
|
|
@apply m-5 mt-6;
|
|
}
|
|
.apply-order-b {
|
|
@apply m-5 mt-6;
|
|
}
|
|
.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(input, config).then((result) => {
|
|
stable.expect(result.css).toMatchFormattedCss(css`
|
|
.theme-test {
|
|
color: #3b82f6;
|
|
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;
|
|
}
|
|
@media (min-width: 1024px) {
|
|
.screen-test {
|
|
color: purple;
|
|
}
|
|
}
|
|
.apply-1,
|
|
.apply-2 {
|
|
margin-top: 1.5rem;
|
|
}
|
|
.apply-test {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(236 72 153 / var(--tw-bg-opacity));
|
|
margin-top: 1.5rem;
|
|
}
|
|
.apply-test:hover,
|
|
.apply-test:hover:focus {
|
|
font-weight: 700;
|
|
}
|
|
@media (min-width: 640px) {
|
|
.apply-test {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
|
|
}
|
|
.apply-test:nth-child(2n):focus {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(251 207 232 / var(--tw-bg-opacity));
|
|
}
|
|
}
|
|
.apply-components {
|
|
width: 100%;
|
|
}
|
|
@media (min-width: 640px) {
|
|
.apply-components {
|
|
max-width: 640px;
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
.apply-components {
|
|
max-width: 768px;
|
|
}
|
|
}
|
|
@media (min-width: 1024px) {
|
|
.apply-components {
|
|
max-width: 1024px;
|
|
}
|
|
}
|
|
@media (min-width: 1280px) {
|
|
.apply-components {
|
|
max-width: 1280px;
|
|
}
|
|
}
|
|
@media (min-width: 1536px) {
|
|
.apply-components {
|
|
max-width: 1536px;
|
|
}
|
|
}
|
|
.apply-components {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.drop-empty-rules:hover,
|
|
.group:hover .apply-group,
|
|
.dark .apply-dark-mode {
|
|
font-weight: 700;
|
|
}
|
|
.apply-with-existing:hover {
|
|
font-weight: 400;
|
|
}
|
|
@media (min-width: 640px) {
|
|
.apply-with-existing:hover {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
|
|
}
|
|
}
|
|
.multiple,
|
|
.selectors {
|
|
font-weight: 700;
|
|
}
|
|
.group:hover .multiple,
|
|
.group:hover .selectors {
|
|
font-weight: 400;
|
|
}
|
|
.list > :not([hidden]) ~ :not([hidden]) {
|
|
--tw-space-y-reverse: 0;
|
|
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
|
|
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
|
|
}
|
|
.nested .example {
|
|
font-weight: 700;
|
|
}
|
|
.nested .example:hover {
|
|
font-weight: 400;
|
|
}
|
|
.apply-order-a,
|
|
.apply-order-b {
|
|
margin: 1.5rem 1.25rem 1.25rem;
|
|
}
|
|
.dark .group:hover .apply-dark-group-example-a {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
|
|
}
|
|
@media (min-width: 640px) {
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.group:active .crazy-example:focus {
|
|
opacity: 0.1;
|
|
}
|
|
}
|
|
}
|
|
h1 {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
}
|
|
h1:first-child {
|
|
margin-top: 0;
|
|
}
|
|
div {
|
|
background: #654321;
|
|
}
|
|
${defaults}
|
|
.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;
|
|
}
|
|
}
|
|
.test-apply-font-variant {
|
|
--tw-ordinal: ordinal;
|
|
--tw-numeric-spacing: tabular-nums;
|
|
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
|
|
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
|
}
|
|
.custom-component {
|
|
background: #123456;
|
|
}
|
|
*,
|
|
:before,
|
|
:after,
|
|
::backdrop {
|
|
padding: 5px;
|
|
}
|
|
.foo .bg-black {
|
|
appearance: none;
|
|
}
|
|
.inset-6 {
|
|
inset: 1.5rem;
|
|
}
|
|
.inset-x-1 {
|
|
left: 0.25rem;
|
|
right: 0.25rem;
|
|
}
|
|
.end-8 {
|
|
inset-inline-end: 2rem;
|
|
}
|
|
.start-4 {
|
|
inset-inline-start: 1rem;
|
|
}
|
|
.mx-1 {
|
|
margin-left: 0.25rem;
|
|
margin-right: 0.25rem;
|
|
}
|
|
.me-8 {
|
|
margin-inline-end: 2rem;
|
|
}
|
|
.ms-4 {
|
|
margin-inline-start: 1rem;
|
|
}
|
|
.mt-6 {
|
|
margin-top: 1.5rem;
|
|
}
|
|
.scale-50 {
|
|
--tw-scale-x: 0.5;
|
|
--tw-scale-y: 0.5;
|
|
transform: translate(var(--tw-translate-x), 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));
|
|
}
|
|
.transform {
|
|
transform: translate(var(--tw-translate-x), 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));
|
|
}
|
|
.grid-cols-\[200px\,repeat\(auto-fill\,minmax\(15\%\,100px\)\)\,300px\] {
|
|
grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
|
|
}
|
|
.rounded-e {
|
|
border-start-end-radius: 0.25rem;
|
|
border-end-end-radius: 0.25rem;
|
|
}
|
|
.rounded-s {
|
|
border-start-start-radius: 0.25rem;
|
|
border-end-start-radius: 0.25rem;
|
|
}
|
|
.rounded-es {
|
|
border-end-start-radius: 0.25rem;
|
|
}
|
|
.rounded-ss {
|
|
border-start-start-radius: 0.25rem;
|
|
}
|
|
.border-2 {
|
|
border-width: 2px;
|
|
}
|
|
.border-e-4 {
|
|
border-inline-end-width: 4px;
|
|
}
|
|
.border-s-0 {
|
|
border-inline-start-width: 0;
|
|
}
|
|
.border-black {
|
|
--tw-border-opacity: 1;
|
|
border-color: rgb(0 0 0 / var(--tw-border-opacity));
|
|
}
|
|
.border-e-red-400 {
|
|
--tw-border-opacity: 1;
|
|
border-inline-end-color: rgb(248 113 113 / var(--tw-border-opacity));
|
|
}
|
|
.border-s-green-500 {
|
|
--tw-border-opacity: 1;
|
|
border-inline-start-color: rgb(34 197 94 / var(--tw-border-opacity));
|
|
}
|
|
.bg-black {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
|
}
|
|
.bg-green-500 {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
|
|
}
|
|
.bg-opacity-50 {
|
|
--tw-bg-opacity: 0.5;
|
|
}
|
|
.bg-gradient-to-r {
|
|
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
|
}
|
|
.bg-hero--home-1 {
|
|
background-image: url('/images/homepage-1.jpg');
|
|
}
|
|
.from-foo {
|
|
--tw-gradient-from: #bada55;
|
|
--tw-gradient-to: #bada5500;
|
|
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
|
}
|
|
.px-1 {
|
|
padding-left: 0.25rem;
|
|
padding-right: 0.25rem;
|
|
}
|
|
.pe-8 {
|
|
padding-inline-end: 2rem;
|
|
}
|
|
.ps-4 {
|
|
padding-inline-start: 1rem;
|
|
}
|
|
.pt-6 {
|
|
padding-top: 1.5rem;
|
|
}
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
.font-medium {
|
|
font-weight: 500;
|
|
}
|
|
.shadow-md {
|
|
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
|
|
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
|
|
0 2px 4px -2px var(--tw-shadow-color);
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
|
var(--tw-shadow);
|
|
}
|
|
.shadow-sm {
|
|
--tw-shadow: 0 1px 2px 0 #0000000d;
|
|
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
|
var(--tw-shadow);
|
|
}
|
|
.magic-none {
|
|
magic: none;
|
|
}
|
|
.magic-tons {
|
|
magic: tons;
|
|
}
|
|
.custom-util {
|
|
background: #abcdef;
|
|
}
|
|
*,
|
|
:before,
|
|
:after,
|
|
::backdrop {
|
|
margin: 10px;
|
|
}
|
|
.hover\:container:hover {
|
|
width: 100%;
|
|
}
|
|
@media (min-width: 640px) {
|
|
.hover\:container:hover {
|
|
max-width: 640px;
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
.hover\:container:hover {
|
|
max-width: 768px;
|
|
}
|
|
}
|
|
@media (min-width: 1024px) {
|
|
.hover\:container:hover {
|
|
max-width: 1024px;
|
|
}
|
|
}
|
|
@media (min-width: 1280px) {
|
|
.hover\:container:hover {
|
|
max-width: 1280px;
|
|
}
|
|
}
|
|
@media (min-width: 1536px) {
|
|
.hover\:container:hover {
|
|
max-width: 1536px;
|
|
}
|
|
}
|
|
@media (min-width: 640px) {
|
|
.sm\:container {
|
|
width: 100%;
|
|
}
|
|
@media (min-width: 640px) {
|
|
.sm\:container {
|
|
max-width: 640px;
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
.sm\:container {
|
|
max-width: 768px;
|
|
}
|
|
}
|
|
@media (min-width: 1024px) {
|
|
.sm\:container {
|
|
max-width: 1024px;
|
|
}
|
|
}
|
|
@media (min-width: 1280px) {
|
|
.sm\:container {
|
|
max-width: 1280px;
|
|
}
|
|
}
|
|
@media (min-width: 1536px) {
|
|
.sm\:container {
|
|
max-width: 1536px;
|
|
}
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
.md\:container {
|
|
width: 100%;
|
|
}
|
|
@media (min-width: 640px) {
|
|
.md\:container {
|
|
max-width: 640px;
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
.md\:container {
|
|
max-width: 768px;
|
|
}
|
|
}
|
|
@media (min-width: 1024px) {
|
|
.md\:container {
|
|
max-width: 1024px;
|
|
}
|
|
}
|
|
@media (min-width: 1280px) {
|
|
.md\:container {
|
|
max-width: 1280px;
|
|
}
|
|
}
|
|
@media (min-width: 1536px) {
|
|
.md\:container {
|
|
max-width: 1536px;
|
|
}
|
|
}
|
|
}
|
|
.first\:pt-0:first-child {
|
|
padding-top: 0;
|
|
}
|
|
.hover\:scale-75:hover {
|
|
--tw-scale-x: 0.75;
|
|
--tw-scale-y: 0.75;
|
|
transform: translate(var(--tw-translate-x), 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));
|
|
}
|
|
.hover\:font-bold:hover {
|
|
font-weight: 700;
|
|
}
|
|
.hover\:shadow-lg:hover {
|
|
--tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
|
|
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
|
|
0 4px 6px -4px var(--tw-shadow-color);
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
|
var(--tw-shadow);
|
|
}
|
|
.hover\:custom-util:hover {
|
|
background: #abcdef;
|
|
}
|
|
.focus\:font-normal:focus {
|
|
font-weight: 400;
|
|
}
|
|
.focus\:ring-2:focus {
|
|
--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(2px + 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);
|
|
}
|
|
.focus\:ring-blue-500:focus {
|
|
--tw-ring-opacity: 1;
|
|
--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
|
|
}
|
|
.focus\:hover\:font-light:hover:focus {
|
|
font-weight: 300;
|
|
}
|
|
.disabled\:font-bold:disabled {
|
|
font-weight: 700;
|
|
}
|
|
.group:hover .group-hover\:opacity-100 {
|
|
opacity: 1;
|
|
}
|
|
.group:hover .group-hover\:custom-util {
|
|
background: #abcdef;
|
|
}
|
|
.group:active .group-active\:opacity-10 {
|
|
opacity: 0.1;
|
|
}
|
|
.foo\:custom-util,
|
|
.foo\:hover\:custom-util:hover {
|
|
background: #abcdef !important;
|
|
}
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.motion-safe\:transition {
|
|
transition-property: color, background-color, border-color, text-decoration-color, fill,
|
|
stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
|
transition-duration: 0.15s;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.motion-safe\:custom-util {
|
|
background: #abcdef;
|
|
}
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.motion-reduce\:transition {
|
|
transition-property: color, background-color, border-color, text-decoration-color, fill,
|
|
stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
|
transition-duration: 0.15s;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
}
|
|
.dark .dark\:custom-util {
|
|
background: #abcdef;
|
|
}
|
|
@media (min-width: 640px) {
|
|
.sm\:text-center {
|
|
text-align: center;
|
|
}
|
|
.sm\:tabular-nums {
|
|
--tw-numeric-spacing: tabular-nums;
|
|
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
|
|
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
|
}
|
|
.sm\:custom-util {
|
|
background: #abcdef;
|
|
}
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.group:active .sm\:motion-safe\:group-active\:focus\:opacity-10:focus {
|
|
opacity: 0.1;
|
|
}
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
.md\:text-center {
|
|
text-align: center;
|
|
}
|
|
.md\:opacity-50 {
|
|
opacity: 0.5;
|
|
}
|
|
.md\:shadow-sm {
|
|
--tw-shadow: 0 1px 2px 0 #0000000d;
|
|
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
|
var(--tw-shadow);
|
|
}
|
|
.md\:hover\:border-r-blue-500\/30:hover {
|
|
border-right-color: #3b82f64d;
|
|
}
|
|
.md\:hover\:opacity-20:hover {
|
|
opacity: 0.2;
|
|
}
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.md\:motion-safe\:hover\:transition:hover {
|
|
transition-property: color, background-color, border-color, text-decoration-color,
|
|
fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
|
transition-duration: 0.15s;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.dark .md\:dark\:motion-safe\:foo\:active\:custom-util:active {
|
|
background: #abcdef !important;
|
|
}
|
|
}
|
|
@media (min-width: 640px) {
|
|
.md\:sm\:text-center {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
@media (min-width: 1280px) and (max-width: 1535px) {
|
|
.range\:text-right {
|
|
text-align: right;
|
|
}
|
|
}
|
|
@media (min-width: 640px) and (max-width: 767px), (max-width: 868px) {
|
|
.multi\:text-left {
|
|
text-align: left;
|
|
}
|
|
}
|
|
`)
|
|
oxide.expect(result.css).toMatchFormattedCss(css`
|
|
.theme-test {
|
|
color: #3b82f6;
|
|
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;
|
|
}
|
|
@media (min-width: 1024px) {
|
|
.screen-test {
|
|
color: purple;
|
|
}
|
|
}
|
|
.apply-1,
|
|
.apply-2 {
|
|
margin-top: 1.5rem;
|
|
}
|
|
.apply-test {
|
|
background-color: #ec4899;
|
|
margin-top: 1.5rem;
|
|
}
|
|
.apply-test:hover,
|
|
.apply-test:hover:focus {
|
|
font-weight: 700;
|
|
}
|
|
@media (min-width: 640px) {
|
|
.apply-test {
|
|
background-color: #22c55e;
|
|
}
|
|
.apply-test:nth-child(2n):focus {
|
|
background-color: #fbcfe8;
|
|
}
|
|
}
|
|
.apply-components {
|
|
width: 100%;
|
|
}
|
|
@media (min-width: 640px) {
|
|
.apply-components {
|
|
max-width: 640px;
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
.apply-components {
|
|
max-width: 768px;
|
|
}
|
|
}
|
|
@media (min-width: 1024px) {
|
|
.apply-components {
|
|
max-width: 1024px;
|
|
}
|
|
}
|
|
@media (min-width: 1280px) {
|
|
.apply-components {
|
|
max-width: 1280px;
|
|
}
|
|
}
|
|
@media (min-width: 1536px) {
|
|
.apply-components {
|
|
max-width: 1536px;
|
|
}
|
|
}
|
|
.apply-components {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.drop-empty-rules:hover,
|
|
.group:hover .apply-group,
|
|
.dark .apply-dark-mode {
|
|
font-weight: 700;
|
|
}
|
|
.apply-with-existing:hover {
|
|
font-weight: 400;
|
|
}
|
|
@media (min-width: 640px) {
|
|
.apply-with-existing:hover {
|
|
background-color: #22c55e;
|
|
}
|
|
}
|
|
.multiple,
|
|
.selectors {
|
|
font-weight: 700;
|
|
}
|
|
.group:hover .multiple,
|
|
.group:hover .selectors {
|
|
font-weight: 400;
|
|
}
|
|
.list > :not([hidden]) ~ :not([hidden]) {
|
|
--tw-space-y-reverse: 0;
|
|
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
|
|
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
|
|
}
|
|
.nested .example {
|
|
font-weight: 700;
|
|
}
|
|
.nested .example:hover {
|
|
font-weight: 400;
|
|
}
|
|
.apply-order-a,
|
|
.apply-order-b {
|
|
margin: 1.5rem 1.25rem 1.25rem;
|
|
}
|
|
.dark .group:hover .apply-dark-group-example-a {
|
|
background-color: #22c55e;
|
|
}
|
|
@media (min-width: 640px) {
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.group:active .crazy-example:focus {
|
|
opacity: 0.1;
|
|
}
|
|
}
|
|
}
|
|
h1 {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
}
|
|
h1:first-child {
|
|
margin-top: 0;
|
|
}
|
|
div {
|
|
background: #654321;
|
|
}
|
|
${defaults}
|
|
.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;
|
|
}
|
|
}
|
|
.test-apply-font-variant {
|
|
--tw-ordinal: ordinal;
|
|
--tw-numeric-spacing: tabular-nums;
|
|
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
|
|
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
|
}
|
|
.custom-component {
|
|
background: #123456;
|
|
}
|
|
*,
|
|
:before,
|
|
:after,
|
|
::backdrop {
|
|
padding: 5px;
|
|
}
|
|
.foo .bg-black {
|
|
appearance: none;
|
|
}
|
|
.inset-6 {
|
|
inset: 1.5rem;
|
|
}
|
|
.inset-x-1 {
|
|
left: 0.25rem;
|
|
right: 0.25rem;
|
|
}
|
|
.end-8 {
|
|
inset-inline-end: 2rem;
|
|
}
|
|
.start-4 {
|
|
inset-inline-start: 1rem;
|
|
}
|
|
.mx-1 {
|
|
margin-left: 0.25rem;
|
|
margin-right: 0.25rem;
|
|
}
|
|
.me-8 {
|
|
margin-inline-end: 2rem;
|
|
}
|
|
.ms-4 {
|
|
margin-inline-start: 1rem;
|
|
}
|
|
.mt-6 {
|
|
margin-top: 1.5rem;
|
|
}
|
|
.scale-50 {
|
|
--tw-scale-x: 0.5;
|
|
--tw-scale-y: 0.5;
|
|
transform: translate(var(--tw-translate-x), 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));
|
|
}
|
|
.transform {
|
|
transform: translate(var(--tw-translate-x), 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));
|
|
}
|
|
.grid-cols-\[200px\,repeat\(auto-fill\,minmax\(15\%\,100px\)\)\,300px\] {
|
|
grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
|
|
}
|
|
.rounded-e {
|
|
border-start-end-radius: 0.25rem;
|
|
border-end-end-radius: 0.25rem;
|
|
}
|
|
.rounded-s {
|
|
border-start-start-radius: 0.25rem;
|
|
border-end-start-radius: 0.25rem;
|
|
}
|
|
.rounded-es {
|
|
border-end-start-radius: 0.25rem;
|
|
}
|
|
.rounded-ss {
|
|
border-start-start-radius: 0.25rem;
|
|
}
|
|
.border-2 {
|
|
border-width: 2px;
|
|
}
|
|
.border-e-4 {
|
|
border-inline-end-width: 4px;
|
|
}
|
|
.border-s-0 {
|
|
border-inline-start-width: 0;
|
|
}
|
|
.border-black {
|
|
border-color: #000;
|
|
}
|
|
.border-e-red-400 {
|
|
border-inline-end-color: #f87171;
|
|
}
|
|
.border-s-green-500 {
|
|
border-inline-start-color: #22c55e;
|
|
}
|
|
.bg-black {
|
|
background-color: #000;
|
|
}
|
|
.bg-green-500 {
|
|
background-color: #22c55e;
|
|
}
|
|
.bg-gradient-to-r {
|
|
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
|
}
|
|
.bg-hero--home-1 {
|
|
background-image: url('/images/homepage-1.jpg');
|
|
}
|
|
.from-foo {
|
|
--tw-gradient-from: #bada55;
|
|
--tw-gradient-to: #bada5500;
|
|
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
|
}
|
|
.px-1 {
|
|
padding-left: 0.25rem;
|
|
padding-right: 0.25rem;
|
|
}
|
|
.pe-8 {
|
|
padding-inline-end: 2rem;
|
|
}
|
|
.ps-4 {
|
|
padding-inline-start: 1rem;
|
|
}
|
|
.pt-6 {
|
|
padding-top: 1.5rem;
|
|
}
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
.font-medium {
|
|
font-weight: 500;
|
|
}
|
|
.shadow-md {
|
|
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
|
|
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
|
|
0 2px 4px -2px var(--tw-shadow-color);
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
|
var(--tw-shadow);
|
|
}
|
|
.shadow-sm {
|
|
--tw-shadow: 0 1px 2px 0 #0000000d;
|
|
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
|
var(--tw-shadow);
|
|
}
|
|
.magic-none {
|
|
magic: none;
|
|
}
|
|
.magic-tons {
|
|
magic: tons;
|
|
}
|
|
.custom-util {
|
|
background: #abcdef;
|
|
}
|
|
*,
|
|
:before,
|
|
:after,
|
|
::backdrop {
|
|
margin: 10px;
|
|
}
|
|
.hover\:container:hover {
|
|
width: 100%;
|
|
}
|
|
@media (min-width: 640px) {
|
|
.hover\:container:hover {
|
|
max-width: 640px;
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
.hover\:container:hover {
|
|
max-width: 768px;
|
|
}
|
|
}
|
|
@media (min-width: 1024px) {
|
|
.hover\:container:hover {
|
|
max-width: 1024px;
|
|
}
|
|
}
|
|
@media (min-width: 1280px) {
|
|
.hover\:container:hover {
|
|
max-width: 1280px;
|
|
}
|
|
}
|
|
@media (min-width: 1536px) {
|
|
.hover\:container:hover {
|
|
max-width: 1536px;
|
|
}
|
|
}
|
|
@media (min-width: 640px) {
|
|
.sm\:container {
|
|
width: 100%;
|
|
}
|
|
@media (min-width: 640px) {
|
|
.sm\:container {
|
|
max-width: 640px;
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
.sm\:container {
|
|
max-width: 768px;
|
|
}
|
|
}
|
|
@media (min-width: 1024px) {
|
|
.sm\:container {
|
|
max-width: 1024px;
|
|
}
|
|
}
|
|
@media (min-width: 1280px) {
|
|
.sm\:container {
|
|
max-width: 1280px;
|
|
}
|
|
}
|
|
@media (min-width: 1536px) {
|
|
.sm\:container {
|
|
max-width: 1536px;
|
|
}
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
.md\:container {
|
|
width: 100%;
|
|
}
|
|
@media (min-width: 640px) {
|
|
.md\:container {
|
|
max-width: 640px;
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
.md\:container {
|
|
max-width: 768px;
|
|
}
|
|
}
|
|
@media (min-width: 1024px) {
|
|
.md\:container {
|
|
max-width: 1024px;
|
|
}
|
|
}
|
|
@media (min-width: 1280px) {
|
|
.md\:container {
|
|
max-width: 1280px;
|
|
}
|
|
}
|
|
@media (min-width: 1536px) {
|
|
.md\:container {
|
|
max-width: 1536px;
|
|
}
|
|
}
|
|
}
|
|
.first\:pt-0:first-child {
|
|
padding-top: 0;
|
|
}
|
|
.hover\:scale-75:hover {
|
|
--tw-scale-x: 0.75;
|
|
--tw-scale-y: 0.75;
|
|
transform: translate(var(--tw-translate-x), 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));
|
|
}
|
|
.hover\:font-bold:hover {
|
|
font-weight: 700;
|
|
}
|
|
.hover\:shadow-lg:hover {
|
|
--tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
|
|
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
|
|
0 4px 6px -4px var(--tw-shadow-color);
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
|
var(--tw-shadow);
|
|
}
|
|
.hover\:custom-util:hover {
|
|
background: #abcdef;
|
|
}
|
|
.focus\:font-normal:focus {
|
|
font-weight: 400;
|
|
}
|
|
.focus\:ring-2:focus {
|
|
--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(2px + 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);
|
|
}
|
|
.focus\:ring-blue-500:focus {
|
|
--tw-ring-color: #3b82f6;
|
|
}
|
|
.focus\:hover\:font-light:hover:focus {
|
|
font-weight: 300;
|
|
}
|
|
.disabled\:font-bold:disabled {
|
|
font-weight: 700;
|
|
}
|
|
.group:hover .group-hover\:opacity-100 {
|
|
opacity: 1;
|
|
}
|
|
.group:hover .group-hover\:custom-util {
|
|
background: #abcdef;
|
|
}
|
|
.group:active .group-active\:opacity-10 {
|
|
opacity: 0.1;
|
|
}
|
|
.foo\:custom-util,
|
|
.foo\:hover\:custom-util:hover {
|
|
background: #abcdef !important;
|
|
}
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.motion-safe\:transition {
|
|
transition-property: color, background-color, border-color, text-decoration-color, fill,
|
|
stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
|
transition-duration: 0.15s;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.motion-safe\:custom-util {
|
|
background: #abcdef;
|
|
}
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.motion-reduce\:transition {
|
|
transition-property: color, background-color, border-color, text-decoration-color, fill,
|
|
stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
|
transition-duration: 0.15s;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
}
|
|
.dark .dark\:custom-util {
|
|
background: #abcdef;
|
|
}
|
|
@media (min-width: 640px) {
|
|
.sm\:text-center {
|
|
text-align: center;
|
|
}
|
|
.sm\:tabular-nums {
|
|
--tw-numeric-spacing: tabular-nums;
|
|
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
|
|
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
|
}
|
|
.sm\:custom-util {
|
|
background: #abcdef;
|
|
}
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.group:active .sm\:motion-safe\:group-active\:focus\:opacity-10:focus {
|
|
opacity: 0.1;
|
|
}
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
.md\:text-center {
|
|
text-align: center;
|
|
}
|
|
.md\:opacity-50 {
|
|
opacity: 0.5;
|
|
}
|
|
.md\:shadow-sm {
|
|
--tw-shadow: 0 1px 2px 0 #0000000d;
|
|
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
|
var(--tw-shadow);
|
|
}
|
|
.md\:hover\:border-r-blue-500\/30:hover {
|
|
border-right-color: #3b82f64d;
|
|
}
|
|
.md\:hover\:opacity-20:hover {
|
|
opacity: 0.2;
|
|
}
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.md\:motion-safe\:hover\:transition:hover {
|
|
transition-property: color, background-color, border-color, text-decoration-color,
|
|
fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
|
transition-duration: 0.15s;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.dark .md\:dark\:motion-safe\:foo\:active\:custom-util:active {
|
|
background: #abcdef !important;
|
|
}
|
|
}
|
|
@media (min-width: 640px) {
|
|
.md\:sm\:text-center {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
@media (min-width: 1280px) and (max-width: 1535px) {
|
|
.range\:text-right {
|
|
text-align: right;
|
|
}
|
|
}
|
|
@media (min-width: 640px) and (max-width: 767px), (max-width: 868px) {
|
|
.multi\:text-left {
|
|
text-align: left;
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
})
|