1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066 |
- import { run, html, css } from './util/run'
- test('opacity', () => {
- let config = {
- darkMode: 'class',
- content: [
- {
- raw: html`
- <div class="divide-black"></div>
- <div class="border-black"></div>
- <div class="bg-black"></div>
- <div class="text-black"></div>
- <div class="placeholder-black"></div>
- `,
- },
- ],
- corePlugins: {
- backgroundOpacity: false,
- borderOpacity: false,
- divideOpacity: false,
- placeholderOpacity: false,
- textOpacity: false,
- },
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .divide-black > :not([hidden]) ~ :not([hidden]),
- .border-black {
- border-color: #000;
- }
- .bg-black {
- background-color: #000;
- }
- .text-black,
- .placeholder-black::placeholder {
- color: #000;
- }
- `)
- })
- })
- test('colors defined as functions work when opacity plugins are disabled', () => {
- let config = {
- darkMode: 'class',
- content: [
- {
- raw: html`
- <div class="divide-primary"></div>
- <div class="border-primary"></div>
- <div class="bg-primary"></div>
- <div class="text-primary"></div>
- <div class="placeholder-primary"></div>
- `,
- },
- ],
- theme: {
- colors: {
- primary: ({ opacityValue }) =>
- opacityValue === undefined
- ? 'rgb(var(--color-primary))'
- : `rgb(var(--color-primary) / ${opacityValue})`,
- },
- },
- corePlugins: {
- backgroundOpacity: false,
- borderOpacity: false,
- divideOpacity: false,
- placeholderOpacity: false,
- textOpacity: false,
- },
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .divide-primary > :not([hidden]) ~ :not([hidden]),
- .border-primary {
- border-color: rgb(var(--color-primary));
- }
- .bg-primary {
- background-color: rgb(var(--color-primary));
- }
- .text-primary,
- .placeholder-primary::placeholder {
- color: rgb(var(--color-primary));
- }
- `)
- })
- })
- it('can use <alpha-value> defining custom properties for colors (opacity plugins enabled)', () => {
- let config = {
- content: [
- {
- raw: html`
- <div class="divide-primary"></div>
- <div class="divide-primary divide-opacity-50"></div>
- <div class="border-primary"></div>
- <div class="border-primary border-opacity-50"></div>
- <div class="bg-primary"></div>
- <div class="bg-primary bg-opacity-50"></div>
- <div class="text-primary"></div>
- <div class="text-primary text-opacity-50"></div>
- <div class="placeholder-primary"></div>
- <div class="placeholder-primary placeholder-opacity-50"></div>
- <div class="ring-primary"></div>
- <div class="ring-primary ring-opacity-50"></div>
- `,
- },
- ],
- theme: {
- colors: {
- primary: 'rgb(var(--color-primary) / <alpha-value>)',
- },
- },
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .divide-primary > :not([hidden]) ~ :not([hidden]) {
- --tw-divide-opacity: 1;
- border-color: rgb(var(--color-primary) / var(--tw-divide-opacity));
- }
- .divide-opacity-50 > :not([hidden]) ~ :not([hidden]) {
- --tw-divide-opacity: 0.5;
- }
- .border-primary {
- --tw-border-opacity: 1;
- border-color: rgb(var(--color-primary) / var(--tw-border-opacity));
- }
- .border-opacity-50 {
- --tw-border-opacity: 0.5;
- }
- .bg-primary {
- --tw-bg-opacity: 1;
- background-color: rgb(var(--color-primary) / var(--tw-bg-opacity));
- }
- .bg-opacity-50 {
- --tw-bg-opacity: 0.5;
- }
- .text-primary {
- --tw-text-opacity: 1;
- color: rgb(var(--color-primary) / var(--tw-text-opacity));
- }
- .text-opacity-50 {
- --tw-text-opacity: 0.5;
- }
- .placeholder-primary::placeholder {
- --tw-placeholder-opacity: 1;
- color: rgb(var(--color-primary) / var(--tw-placeholder-opacity));
- }
- .placeholder-opacity-50::placeholder {
- --tw-placeholder-opacity: 0.5;
- }
- .ring-primary {
- --tw-ring-opacity: 1;
- --tw-ring-color: rgb(var(--color-primary) / var(--tw-ring-opacity));
- }
- .ring-opacity-50 {
- --tw-ring-opacity: 0.5;
- }
- `)
- })
- })
- it('can use rgb helper when defining custom properties for colors (opacity plugins disabled)', () => {
- let config = {
- content: [
- {
- raw: html`
- <div class="divide-primary"></div>
- <div class="divide-primary/50"></div>
- <div class="border-primary"></div>
- <div class="border-primary/50"></div>
- <div class="bg-primary"></div>
- <div class="bg-primary/50"></div>
- <div class="text-primary"></div>
- <div class="text-primary/50"></div>
- <div class="placeholder-primary"></div>
- <div class="placeholder-primary/50"></div>
- <div class="ring-primary"></div>
- <div class="ring-primary/50"></div>
- `,
- },
- ],
- theme: {
- colors: {
- primary: 'rgb(var(--color-primary) / <alpha-value>)',
- },
- },
- corePlugins: {
- backgroundOpacity: false,
- borderOpacity: false,
- divideOpacity: false,
- placeholderOpacity: false,
- textOpacity: false,
- ringOpacity: false,
- },
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .divide-primary > :not([hidden]) ~ :not([hidden]) {
- border-color: rgb(var(--color-primary) / 1);
- }
- .divide-primary\/50 > :not([hidden]) ~ :not([hidden]) {
- border-color: rgb(var(--color-primary) / 0.5);
- }
- .border-primary {
- border-color: rgb(var(--color-primary) / 1);
- }
- .border-primary\/50 {
- border-color: rgb(var(--color-primary) / 0.5);
- }
- .bg-primary {
- background-color: rgb(var(--color-primary) / 1);
- }
- .bg-primary\/50 {
- background-color: rgb(var(--color-primary) / 0.5);
- }
- .text-primary {
- color: rgb(var(--color-primary) / 1);
- }
- .text-primary\/50 {
- color: rgb(var(--color-primary) / 0.5);
- }
- .placeholder-primary::placeholder {
- color: rgb(var(--color-primary) / 1);
- }
- .placeholder-primary\/50::placeholder {
- color: rgb(var(--color-primary) / 0.5);
- }
- .ring-primary {
- --tw-ring-color: rgb(var(--color-primary) / 1);
- }
- .ring-primary\/50 {
- --tw-ring-color: rgb(var(--color-primary) / 0.5);
- }
- `)
- })
- })
- it('can use hsl helper when defining custom properties for colors (opacity plugins enabled)', () => {
- let config = {
- content: [
- {
- raw: html`
- <div class="divide-primary"></div>
- <div class="divide-primary divide-opacity-50"></div>
- <div class="border-primary"></div>
- <div class="border-primary border-opacity-50"></div>
- <div class="bg-primary"></div>
- <div class="bg-primary bg-opacity-50"></div>
- <div class="text-primary"></div>
- <div class="text-primary text-opacity-50"></div>
- <div class="placeholder-primary"></div>
- <div class="placeholder-primary placeholder-opacity-50"></div>
- <div class="ring-primary"></div>
- <div class="ring-primary ring-opacity-50"></div>
- `,
- },
- ],
- theme: {
- colors: {
- primary: 'hsl(var(--color-primary) / <alpha-value>)',
- },
- },
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .divide-primary > :not([hidden]) ~ :not([hidden]) {
- --tw-divide-opacity: 1;
- border-color: hsl(var(--color-primary) / var(--tw-divide-opacity));
- }
- .divide-opacity-50 > :not([hidden]) ~ :not([hidden]) {
- --tw-divide-opacity: 0.5;
- }
- .border-primary {
- --tw-border-opacity: 1;
- border-color: hsl(var(--color-primary) / var(--tw-border-opacity));
- }
- .border-opacity-50 {
- --tw-border-opacity: 0.5;
- }
- .bg-primary {
- --tw-bg-opacity: 1;
- background-color: hsl(var(--color-primary) / var(--tw-bg-opacity));
- }
- .bg-opacity-50 {
- --tw-bg-opacity: 0.5;
- }
- .text-primary {
- --tw-text-opacity: 1;
- color: hsl(var(--color-primary) / var(--tw-text-opacity));
- }
- .text-opacity-50 {
- --tw-text-opacity: 0.5;
- }
- .placeholder-primary::placeholder {
- --tw-placeholder-opacity: 1;
- color: hsl(var(--color-primary) / var(--tw-placeholder-opacity));
- }
- .placeholder-opacity-50::placeholder {
- --tw-placeholder-opacity: 0.5;
- }
- .ring-primary {
- --tw-ring-opacity: 1;
- --tw-ring-color: hsl(var(--color-primary) / var(--tw-ring-opacity));
- }
- .ring-opacity-50 {
- --tw-ring-opacity: 0.5;
- }
- `)
- })
- })
- it('can use hsl helper when defining custom properties for colors (opacity plugins disabled)', () => {
- let config = {
- content: [
- {
- raw: html`
- <div class="divide-primary"></div>
- <div class="divide-primary/50"></div>
- <div class="border-primary"></div>
- <div class="border-primary/50"></div>
- <div class="bg-primary"></div>
- <div class="bg-primary/50"></div>
- <div class="text-primary"></div>
- <div class="text-primary/50"></div>
- <div class="placeholder-primary"></div>
- <div class="placeholder-primary/50"></div>
- <div class="ring-primary"></div>
- <div class="ring-primary/50"></div>
- `,
- },
- ],
- theme: {
- colors: {
- primary: 'hsl(var(--color-primary) / <alpha-value>)',
- },
- },
- corePlugins: {
- backgroundOpacity: false,
- borderOpacity: false,
- divideOpacity: false,
- placeholderOpacity: false,
- textOpacity: false,
- ringOpacity: false,
- },
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .divide-primary > :not([hidden]) ~ :not([hidden]) {
- border-color: hsl(var(--color-primary) / 1);
- }
- .divide-primary\/50 > :not([hidden]) ~ :not([hidden]) {
- border-color: hsl(var(--color-primary) / 0.5);
- }
- .border-primary {
- border-color: hsl(var(--color-primary) / 1);
- }
- .border-primary\/50 {
- border-color: hsl(var(--color-primary) / 0.5);
- }
- .bg-primary {
- background-color: hsl(var(--color-primary) / 1);
- }
- .bg-primary\/50 {
- background-color: hsl(var(--color-primary) / 0.5);
- }
- .text-primary {
- color: hsl(var(--color-primary) / 1);
- }
- .text-primary\/50 {
- color: hsl(var(--color-primary) / 0.5);
- }
- .placeholder-primary::placeholder {
- color: hsl(var(--color-primary) / 1);
- }
- .placeholder-primary\/50::placeholder {
- color: hsl(var(--color-primary) / 0.5);
- }
- .ring-primary {
- --tw-ring-color: hsl(var(--color-primary) / 1);
- }
- .ring-primary\/50 {
- --tw-ring-color: hsl(var(--color-primary) / 0.5);
- }
- `)
- })
- })
- test('Theme function in JS can apply alpha values to colors (1)', () => {
- let input = css`
- @tailwind utilities;
- `
- let output = css`
- .text-foo {
- color: #3b82f680;
- }
- `
- return run(input, {
- content: [{ raw: html`text-foo` }],
- corePlugins: { textOpacity: false },
- theme: {
- colors: { blue: { 500: '#3b82f6' } },
- extend: {
- textColor: ({ theme }) => ({
- foo: theme('colors.blue.500 / 50%'),
- }),
- },
- },
- }).then((result) => {
- expect(result.css).toMatchFormattedCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('Theme function in JS can apply alpha values to colors (2)', () => {
- let input = css`
- @tailwind utilities;
- `
- let output = css`
- .text-foo {
- color: #3b82f680;
- }
- `
- return run(input, {
- content: [{ raw: html`text-foo` }],
- corePlugins: { textOpacity: false },
- theme: {
- colors: { blue: { 500: '#3b82f6' } },
- extend: {
- textColor: ({ theme }) => ({
- foo: theme('colors.blue.500 / 0.5'),
- }),
- },
- },
- }).then((result) => {
- expect(result.css).toMatchFormattedCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('Theme function in JS can apply alpha values to colors (3)', () => {
- let input = css`
- @tailwind utilities;
- `
- let output = css`
- .text-foo {
- color: rgb(59 130 246 / var(--my-alpha));
- }
- `
- return run(input, {
- content: [{ raw: html`text-foo` }],
- corePlugins: { textOpacity: false },
- theme: {
- colors: { blue: { 500: '#3b82f6' } },
- extend: {
- textColor: ({ theme }) => ({
- foo: theme('colors.blue.500 / var(--my-alpha)'),
- }),
- },
- },
- }).then((result) => {
- expect(result.css).toMatchFormattedCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('Theme function in JS can apply alpha values to colors (4)', () => {
- let input = css`
- @tailwind utilities;
- `
- let output = css`
- .text-foo {
- color: #3c83f680;
- }
- `
- return run(input, {
- content: [{ raw: html`text-foo` }],
- corePlugins: { textOpacity: false },
- theme: {
- colors: { blue: { 500: 'hsl(217, 91%, 60%)' } },
- extend: {
- textColor: ({ theme }) => ({
- foo: theme('colors.blue.500 / 50%'),
- }),
- },
- },
- }).then((result) => {
- expect(result.css).toMatchFormattedCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('Theme function in JS can apply alpha values to colors (5)', () => {
- let input = css`
- @tailwind utilities;
- `
- let output = css`
- .text-foo {
- color: #3c83f680;
- }
- `
- return run(input, {
- content: [{ raw: html`text-foo` }],
- corePlugins: { textOpacity: false },
- theme: {
- colors: { blue: { 500: 'hsl(217, 91%, 60%)' } },
- extend: {
- textColor: ({ theme }) => ({
- foo: theme('colors.blue.500 / 0.5'),
- }),
- },
- },
- }).then((result) => {
- expect(result.css).toMatchFormattedCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('Theme function in JS can apply alpha values to colors (6)', () => {
- let input = css`
- @tailwind utilities;
- `
- let output = css`
- .text-foo {
- color: hsl(217 91% 60% / var(--my-alpha));
- }
- `
- return run(input, {
- content: [{ raw: html`text-foo` }],
- corePlugins: { textOpacity: false },
- theme: {
- colors: { blue: { 500: 'hsl(217, 91%, 60%)' } },
- extend: {
- textColor: ({ theme }) => ({
- foo: theme('colors.blue.500 / var(--my-alpha)'),
- }),
- },
- },
- }).then((result) => {
- expect(result.css).toMatchFormattedCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('Theme function in JS can apply alpha values to colors (7)', () => {
- let input = css`
- @tailwind utilities;
- `
- let output = css`
- .text-foo {
- color: rgb(var(--foo) / var(--my-alpha));
- }
- `
- return run(input, {
- content: [{ raw: html`text-foo` }],
- corePlugins: { textOpacity: false },
- theme: {
- colors: {
- blue: {
- 500: 'rgb(var(--foo) / <alpha-value>)',
- },
- },
- extend: {
- textColor: ({ theme }) => ({
- foo: theme('colors.blue.500 / var(--my-alpha)'),
- }),
- },
- },
- }).then((result) => {
- expect(result.css).toMatchFormattedCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('Theme function prefers existing values in config', () => {
- let input = css`
- @tailwind utilities;
- `
- let output = css`
- .text-foo {
- color: purple;
- }
- `
- return run(input, {
- content: [{ raw: html`text-foo` }],
- corePlugins: { textOpacity: false },
- theme: {
- colors: {
- blue: {
- '500 / 50%': 'purple',
- },
- },
- extend: {
- textColor: ({ theme }) => ({
- foo: theme('colors.blue.500 / 50%'),
- }),
- },
- },
- }).then((result) => {
- expect(result.css).toMatchFormattedCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- it('should be possible to use an <alpha-value> as part of the color definition', () => {
- let config = {
- content: [
- {
- raw: html` <div class="bg-primary"></div> `,
- },
- ],
- corePlugins: ['backgroundColor', 'backgroundOpacity'],
- theme: {
- colors: {
- primary: 'rgb(var(--color-primary) / <alpha-value>)',
- },
- },
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .bg-primary {
- --tw-bg-opacity: 1;
- background-color: rgb(var(--color-primary) / var(--tw-bg-opacity));
- }
- `)
- })
- })
- it('should be possible to use an <alpha-value> as part of the color definition with an opacity modifiers', () => {
- let config = {
- content: [
- {
- raw: html` <div class="bg-primary/50"></div> `,
- },
- ],
- corePlugins: ['backgroundColor', 'backgroundOpacity'],
- theme: {
- colors: {
- primary: 'rgb(var(--color-primary) / <alpha-value>)',
- },
- },
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .bg-primary\/50 {
- background-color: rgb(var(--color-primary) / 0.5);
- }
- `)
- })
- })
- it('should be possible to use an <alpha-value> as part of the color definition with an opacity modifiers', () => {
- let config = {
- content: [
- {
- raw: html` <div class="bg-primary"></div> `,
- },
- ],
- corePlugins: ['backgroundColor'],
- theme: {
- colors: {
- primary: 'rgb(var(--color-primary) / <alpha-value>)',
- },
- },
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .bg-primary {
- background-color: rgb(var(--color-primary) / 1);
- }
- `)
- })
- })
- it('should be possible to use <alpha-value> inside arbitrary values', () => {
- let config = {
- content: [
- {
- raw: html` <div class="bg-[rgb(var(--color-primary)/<alpha-value>)]/50"></div> `,
- },
- ],
- corePlugins: ['backgroundColor', 'backgroundOpacity'],
- theme: {
- colors: {
- primary: 'rgb(var(--color-primary) / <alpha-value>)',
- },
- },
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .bg-\[rgb\(var\(--color-primary\)\/\<alpha-value\>\)\]\/50 {
- background-color: rgb(var(--color-primary) / 0.5);
- }
- `)
- })
- })
- it('Theme functions can reference values with slashes in brackets', () => {
- let config = {
- content: [
- {
- raw: html` <div class="bg-foo1 bg-foo2"></div> `,
- },
- ],
- theme: {
- colors: {
- 'a/b': '#000000',
- },
- extend: {
- backgroundColor: ({ theme }) => ({
- foo1: theme('colors[a/b]'),
- foo2: theme('colors[a/b]/50%'),
- }),
- },
- },
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .bg-foo1 {
- --tw-bg-opacity: 1;
- background-color: rgb(0 0 0 / var(--tw-bg-opacity));
- }
- .bg-foo2 {
- background-color: #00000080;
- }
- `)
- })
- })
- it('works with opacity values defined as a placeholder or a function in when colors is a function', () => {
- let config = {
- content: [
- {
- raw: html`
- <div
- class="bg-foo10 bg-foo20 bg-foo30 bg-foo40 bg-foo11 bg-foo21 bg-foo31 bg-foo41"
- ></div>
- `,
- },
- ],
- theme: {
- colors: () => ({
- foobar1: ({ opacityValue }) => `rgb(255 100 0 / ${opacityValue ?? '100%'})`,
- foobar2: `rgb(255 100 0 / <alpha-value>)`,
- foobar3: {
- 100: ({ opacityValue }) => `rgb(255 100 0 / ${opacityValue ?? '100%'})`,
- 200: `rgb(255 100 0 / <alpha-value>)`,
- },
- }),
- extend: {
- backgroundColor: ({ theme }) => ({
- foo10: theme('colors.foobar1'),
- foo20: theme('colors.foobar2'),
- foo30: theme('colors.foobar3.100'),
- foo40: theme('colors.foobar3.200'),
- foo11: theme('colors.foobar1 / 50%'),
- foo21: theme('colors.foobar2 / 50%'),
- foo31: theme('colors.foobar3.100 / 50%'),
- foo41: theme('colors.foobar3.200 / 50%'),
- }),
- },
- },
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .bg-foo10 {
- background-color: #ff6400;
- }
- .bg-foo11 {
- background-color: #ff640080;
- }
- .bg-foo20 {
- --tw-bg-opacity: 1;
- background-color: rgb(255 100 0 / var(--tw-bg-opacity));
- }
- .bg-foo21 {
- background-color: #ff640080;
- }
- .bg-foo30 {
- background-color: #ff6400;
- }
- .bg-foo31 {
- background-color: #ff640080;
- }
- .bg-foo40 {
- --tw-bg-opacity: 1;
- background-color: rgb(255 100 0 / var(--tw-bg-opacity));
- }
- .bg-foo41 {
- background-color: #ff640080;
- }
- `)
- })
- })
- it('The disableColorOpacityUtilitiesByDefault flag disables the color opacity plugins and removes their variables', () => {
- let config = {
- future: {
- disableColorOpacityUtilitiesByDefault: true,
- },
- content: [
- {
- raw: html`
- <div
- class="divide-blue-300 border-blue-300 bg-blue-300 text-blue-300 placeholder-blue-300 ring-blue-300"
- ></div>
- <div
- class="divide-blue-300/50 border-blue-300/50 bg-blue-300/50 text-blue-300/50 placeholder-blue-300/50 ring-blue-300/50"
- ></div>
- <div
- class="divide-blue-300/[var(--my-opacity)] border-blue-300/[var(--my-opacity)] bg-blue-300/[var(--my-opacity)] text-blue-300/[var(--my-opacity)] placeholder-blue-300/[var(--my-opacity)] ring-blue-300/[var(--my-opacity)]"
- ></div>
- <div
- class="divide-opacity-50 border-opacity-50 bg-opacity-50 text-opacity-50 placeholder-opacity-50 ring-opacity-50"
- ></div>
- `,
- },
- ],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .divide-blue-300 > :not([hidden]) ~ :not([hidden]) {
- border-color: #93c5fd;
- }
- .divide-blue-300\/50 > :not([hidden]) ~ :not([hidden]) {
- border-color: #93c5fd80;
- }
- .divide-blue-300\/\[var\(--my-opacity\)\] > :not([hidden]) ~ :not([hidden]) {
- border-color: rgb(147 197 253 / var(--my-opacity));
- }
- .border-blue-300 {
- border-color: #93c5fd;
- }
- .border-blue-300\/50 {
- border-color: #93c5fd80;
- }
- .border-blue-300\/\[var\(--my-opacity\)\] {
- border-color: rgb(147 197 253 / var(--my-opacity));
- }
- .bg-blue-300 {
- background-color: #93c5fd;
- }
- .bg-blue-300\/50 {
- background-color: #93c5fd80;
- }
- .bg-blue-300\/\[var\(--my-opacity\)\] {
- background-color: rgb(147 197 253 / var(--my-opacity));
- }
- .text-blue-300 {
- color: #93c5fd;
- }
- .text-blue-300\/50 {
- color: #93c5fd80;
- }
- .text-blue-300\/\[var\(--my-opacity\)\] {
- color: rgb(147 197 253 / var(--my-opacity));
- }
- .placeholder-blue-300::placeholder {
- color: #93c5fd;
- }
- .placeholder-blue-300\/50::placeholder {
- color: #93c5fd80;
- }
- .placeholder-blue-300\/\[var\(--my-opacity\)\]::placeholder {
- color: rgb(147 197 253 / var(--my-opacity));
- }
- .ring-blue-300 {
- --tw-ring-color: #93c5fd;
- }
- .ring-blue-300\/50 {
- --tw-ring-color: #93c5fd80;
- }
- .ring-blue-300\/\[var\(--my-opacity\)\] {
- --tw-ring-color: rgb(147 197 253 / var(--my-opacity));
- }
- `)
- })
- })
- it('You can re-enable any opacity plugin even when disableColorOpacityUtilitiesByDefault is enabled', () => {
- let config = {
- future: {
- disableColorOpacityUtilitiesByDefault: true,
- },
- corePlugins: {
- backgroundOpacity: true,
- borderOpacity: true,
- divideOpacity: true,
- placeholderOpacity: true,
- ringOpacity: true,
- textOpacity: true,
- },
- content: [
- {
- raw: html`
- <div
- class="divide-blue-300 border-blue-300 bg-blue-300 text-blue-300 placeholder-blue-300 ring-blue-300"
- ></div>
- <div
- class="divide-blue-300/50 border-blue-300/50 bg-blue-300/50 text-blue-300/50 placeholder-blue-300/50 ring-blue-300/50"
- ></div>
- <div
- class="divide-blue-300/[var(--my-opacity)] border-blue-300/[var(--my-opacity)] bg-blue-300/[var(--my-opacity)] text-blue-300/[var(--my-opacity)] placeholder-blue-300/[var(--my-opacity)] ring-blue-300/[var(--my-opacity)]"
- ></div>
- <div
- class="divide-opacity-50 border-opacity-50 bg-opacity-50 text-opacity-50 placeholder-opacity-50 ring-opacity-50"
- ></div>
- `,
- },
- ],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .divide-blue-300 > :not([hidden]) ~ :not([hidden]) {
- --tw-divide-opacity: 1;
- border-color: rgb(147 197 253 / var(--tw-divide-opacity));
- }
- .divide-blue-300\/50 > :not([hidden]) ~ :not([hidden]) {
- border-color: #93c5fd80;
- }
- .divide-blue-300\/\[var\(--my-opacity\)\] > :not([hidden]) ~ :not([hidden]) {
- border-color: rgb(147 197 253 / var(--my-opacity));
- }
- .divide-opacity-50 > :not([hidden]) ~ :not([hidden]) {
- --tw-divide-opacity: 0.5;
- }
- .border-blue-300 {
- --tw-border-opacity: 1;
- border-color: rgb(147 197 253 / var(--tw-border-opacity));
- }
- .border-blue-300\/50 {
- border-color: #93c5fd80;
- }
- .border-blue-300\/\[var\(--my-opacity\)\] {
- border-color: rgb(147 197 253 / var(--my-opacity));
- }
- .border-opacity-50 {
- --tw-border-opacity: 0.5;
- }
- .bg-blue-300 {
- --tw-bg-opacity: 1;
- background-color: rgb(147 197 253 / var(--tw-bg-opacity));
- }
- .bg-blue-300\/50 {
- background-color: #93c5fd80;
- }
- .bg-blue-300\/\[var\(--my-opacity\)\] {
- background-color: rgb(147 197 253 / var(--my-opacity));
- }
- .bg-opacity-50 {
- --tw-bg-opacity: 0.5;
- }
- .text-blue-300 {
- --tw-text-opacity: 1;
- color: rgb(147 197 253 / var(--tw-text-opacity));
- }
- .text-blue-300\/50 {
- color: #93c5fd80;
- }
- .text-blue-300\/\[var\(--my-opacity\)\] {
- color: rgb(147 197 253 / var(--my-opacity));
- }
- .text-opacity-50 {
- --tw-text-opacity: 0.5;
- }
- .placeholder-blue-300::placeholder {
- --tw-placeholder-opacity: 1;
- color: rgb(147 197 253 / var(--tw-placeholder-opacity));
- }
- .placeholder-blue-300\/50::placeholder {
- color: #93c5fd80;
- }
- .placeholder-blue-300\/\[var\(--my-opacity\)\]::placeholder {
- color: rgb(147 197 253 / var(--my-opacity));
- }
- .placeholder-opacity-50::placeholder {
- --tw-placeholder-opacity: 0.5;
- }
- .ring-blue-300 {
- --tw-ring-opacity: 1;
- --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
- }
- .ring-blue-300\/50 {
- --tw-ring-color: #93c5fd80;
- }
- .ring-blue-300\/\[var\(--my-opacity\)\] {
- --tw-ring-color: rgb(147 197 253 / var(--my-opacity));
- }
- .ring-opacity-50 {
- --tw-ring-opacity: 0.5;
- }
- `)
- })
- })
- it('can replace the potential alpha value in rgba/hsla syntax', async () => {
- let config = {
- content: [{ raw: html` <div class="text-primary-rgba/50 text-primary-hsla/50"></div> ` }],
- theme: {
- colors: {
- 'primary-rgba': 'rgba(var(--color), 0.1)',
- 'primary-hsla': 'hsla(var(--color), 0.1)',
- },
- },
- }
- let result = await run('@tailwind utilities', config)
- expect(result.css).toMatchFormattedCss(css`
- .text-primary-hsla\/50 {
- color: hsla(var(--color), 0.5);
- }
- .text-primary-rgba\/50 {
- color: rgba(var(--color), 0.5);
- }
- `)
- })
- it('variables with variable fallback values can use opacity modifier', async () => {
- let config = {
- content: [
- {
- raw: html`<div class="bg-[rgb(var(--some-var,var(--some-other-var)))]/50"></div>`,
- },
- ],
- }
- let result = await run(`@tailwind utilities;`, config)
- expect(result.css).toMatchFormattedCss(css`
- .bg-\[rgb\(var\(--some-var\,var\(--some-other-var\)\)\)\]\/50 {
- background-color: rgb(var(--some-var, var(--some-other-var)) / 0.5);
- }
- `)
- })
|