1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225 |
- import postcss from 'postcss'
- import plugin from '../src/lib/evaluateTailwindFunctions'
- import tailwind from '../src/index'
- import { css } from './util/run'
- function run(input, opts = {}) {
- return postcss([plugin({ tailwindConfig: opts })]).process(input, { from: undefined })
- }
- function runFull(input, config) {
- return postcss([tailwind(config)]).process(input, { from: undefined })
- }
- test('it looks up values in the theme using dot notation', () => {
- let input = css`
- .banana {
- color: theme('colors.yellow');
- }
- `
- let output = css`
- .banana {
- color: #f7cc50;
- }
- `
- return run(input, {
- theme: {
- colors: {
- yellow: '#f7cc50',
- },
- },
- }).then((result) => {
- expect(result.css).toEqual(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('it looks up values in the theme using bracket notation', () => {
- let input = css`
- .banana {
- color: theme('colors[yellow]');
- }
- `
- let output = css`
- .banana {
- color: #f7cc50;
- }
- `
- return run(input, {
- theme: {
- colors: {
- yellow: '#f7cc50',
- },
- },
- }).then((result) => {
- expect(result.css).toEqual(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('it looks up values in the theme using consecutive bracket notation', () => {
- let input = css`
- .banana {
- color: theme('colors[yellow][100]');
- }
- `
- let output = css`
- .banana {
- color: #f7cc50;
- }
- `
- return run(input, {
- theme: {
- colors: {
- yellow: {
- 100: '#f7cc50',
- },
- },
- },
- }).then((result) => {
- expect(result.css).toEqual(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('it looks up values in the theme using bracket notation that have dots in them', () => {
- let input = css`
- .banana {
- padding-top: theme('spacing[1.5]');
- }
- `
- let output = css`
- .banana {
- padding-top: 0.375rem;
- }
- `
- return run(input, {
- theme: {
- spacing: {
- '1.5': '0.375rem',
- },
- },
- }).then((result) => {
- expect(result.css).toEqual(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('theme with mismatched brackets throws an error ', async () => {
- let config = {
- theme: {
- spacing: {
- '1.5': '0.375rem',
- },
- },
- }
- let input = (path) => css`
- .banana {
- padding-top: theme('${path}');
- }
- `
- await expect(run(input('spacing[1.5]]'), config)).rejects.toThrowError(
- `Path is invalid. Has unbalanced brackets: spacing[1.5]]`
- )
- await expect(run(input('spacing[[1.5]'), config)).rejects.toThrowError(
- `Path is invalid. Has unbalanced brackets: spacing[[1.5]`
- )
- await expect(run(input('spacing[a['), config)).rejects.toThrowError(
- `Path is invalid. Has unbalanced brackets: spacing[a[`
- )
- })
- test('color can be a function', () => {
- let input = css`
- .backgroundColor {
- color: theme('backgroundColor.fn');
- }
- .borderColor {
- color: theme('borderColor.fn');
- }
- .caretColor {
- color: theme('caretColor.fn');
- }
- .colors {
- color: theme('colors.fn');
- }
- .divideColor {
- color: theme('divideColor.fn');
- }
- .fill {
- color: theme('fill.fn');
- }
- .gradientColorStops {
- color: theme('gradientColorStops.fn');
- }
- .placeholderColor {
- color: theme('placeholderColor.fn');
- }
- .ringColor {
- color: theme('ringColor.fn');
- }
- .ringOffsetColor {
- color: theme('ringOffsetColor.fn');
- }
- .stroke {
- color: theme('stroke.fn');
- }
- .textColor {
- color: theme('textColor.fn');
- }
- `
- let output = css`
- .backgroundColor {
- color: #f00;
- }
- .borderColor {
- color: #f00;
- }
- .caretColor {
- color: #f00;
- }
- .colors {
- color: #f00;
- }
- .divideColor {
- color: #f00;
- }
- .fill {
- color: #f00;
- }
- .gradientColorStops {
- color: #f00;
- }
- .placeholderColor {
- color: #f00;
- }
- .ringColor {
- color: #f00;
- }
- .ringOffsetColor {
- color: #f00;
- }
- .stroke {
- color: #f00;
- }
- .textColor {
- color: #f00;
- }
- `
- let fn = () => `#f00`
- return run(input, {
- theme: {
- backgroundColor: { fn },
- borderColor: { fn },
- caretColor: { fn },
- colors: { fn },
- divideColor: { fn },
- fill: { fn },
- gradientColorStops: { fn },
- placeholderColor: { fn },
- ringColor: { fn },
- ringOffsetColor: { fn },
- stroke: { fn },
- textColor: { fn },
- },
- }).then((result) => {
- expect(result.css).toEqual(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('quotes are optional around the lookup path', () => {
- let input = css`
- .banana {
- color: theme(colors.yellow);
- }
- `
- let output = css`
- .banana {
- color: #f7cc50;
- }
- `
- return run(input, {
- theme: {
- colors: {
- yellow: '#f7cc50',
- },
- },
- }).then((result) => {
- expect(result.css).toEqual(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('a default value can be provided', () => {
- let input = css`
- .cookieMonster {
- color: theme('colors.blue', #0000ff);
- }
- `
- let output = css`
- .cookieMonster {
- color: #0000ff;
- }
- `
- return run(input, {
- theme: {
- colors: {
- yellow: '#f7cc50',
- },
- },
- }).then((result) => {
- expect(result.css).toEqual(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('the default value can use the theme function', () => {
- let input = css`
- .cookieMonster {
- color: theme('colors.blue', theme('colors.yellow'));
- }
- `
- let output = css`
- .cookieMonster {
- color: #f7cc50;
- }
- `
- return run(input, {
- theme: {
- colors: {
- yellow: '#f7cc50',
- },
- },
- }).then((result) => {
- expect(result.css).toEqual(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('quotes are preserved around default values', () => {
- let input = css`
- .heading {
- font-family: theme('fontFamily.sans', 'Helvetica Neue');
- }
- `
- let output = css`
- .heading {
- font-family: 'Helvetica Neue';
- }
- `
- return run(input, {
- theme: {
- fontFamily: {
- serif: 'Constantia',
- },
- },
- }).then((result) => {
- expect(result.css).toEqual(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('an unquoted list is valid as a default value', () => {
- let input = css`
- .heading {
- font-family: theme('fontFamily.sans', Helvetica, Arial, sans-serif);
- }
- `
- let output = css`
- .heading {
- font-family: Helvetica, Arial, sans-serif;
- }
- `
- return run(input, {
- theme: {
- fontFamily: {
- serif: 'Constantia',
- },
- },
- }).then((result) => {
- expect(result.css).toEqual(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('a missing root theme value throws', () => {
- let input = css`
- .heading {
- color: theme('colours.gray.100');
- }
- `
- return expect(
- run(input, {
- theme: {
- colors: {
- yellow: '#f7cc50',
- },
- },
- })
- ).rejects.toThrowError(
- `'colours.gray.100' does not exist in your theme config. Your theme has the following top-level keys: 'colors'`
- )
- })
- test('a missing nested theme property throws', () => {
- let input = css`
- .heading {
- color: theme('colors.red');
- }
- `
- return expect(
- run(input, {
- theme: {
- colors: {
- blue: 'blue',
- yellow: '#f7cc50',
- },
- },
- })
- ).rejects.toThrowError(
- `'colors.red' does not exist in your theme config. 'colors' has the following valid keys: 'blue', 'yellow'`
- )
- })
- test('a missing nested theme property with a close alternative throws with a suggestion', () => {
- let input = css`
- .heading {
- color: theme('colors.yellw');
- }
- `
- return expect(
- run(input, {
- theme: {
- colors: {
- yellow: '#f7cc50',
- },
- },
- })
- ).rejects.toThrowError(
- `'colors.yellw' does not exist in your theme config. Did you mean 'colors.yellow'?`
- )
- })
- test('a path through a non-object throws', () => {
- let input = css`
- .heading {
- color: theme('colors.yellow.100');
- }
- `
- return expect(
- run(input, {
- theme: {
- colors: {
- yellow: '#f7cc50',
- },
- },
- })
- ).rejects.toThrowError(
- `'colors.yellow.100' does not exist in your theme config. 'colors.yellow' is not an object.`
- )
- })
- test('a path which exists but is not a string throws', () => {
- let input = css`
- .heading {
- color: theme('colors.yellow');
- }
- `
- return expect(
- run(input, {
- theme: {
- colors: {
- yellow: Symbol(),
- },
- },
- })
- ).rejects.toThrowError(`'colors.yellow' was found but does not resolve to a string.`)
- })
- test('a path which exists but is invalid throws', () => {
- let input = css`
- .heading {
- color: theme('colors');
- }
- `
- return expect(
- run(input, {
- theme: {
- colors: {},
- },
- })
- ).rejects.toThrowError(`'colors' was found but does not resolve to a string.`)
- })
- test('a path which is an object throws with a suggested key', () => {
- let input = css`
- .heading {
- color: theme('colors');
- }
- `
- return expect(
- run(input, {
- theme: {
- colors: {
- yellow: '#f7cc50',
- },
- },
- })
- ).rejects.toThrowError(
- `'colors' was found but does not resolve to a string. Did you mean something like 'colors.yellow'?`
- )
- })
- test('array values are joined by default', () => {
- let input = css`
- .heading {
- font-family: theme('fontFamily.sans');
- }
- `
- let output = css`
- .heading {
- font-family: Inter, Helvetica, sans-serif;
- }
- `
- return run(input, {
- theme: {
- fontFamily: {
- sans: ['Inter', 'Helvetica', 'sans-serif'],
- },
- },
- }).then((result) => {
- expect(result.css).toEqual(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('font sizes are retrieved without default line-heights or letter-spacing', () => {
- let input = css`
- .heading-1 {
- font-size: theme('fontSize.lg');
- }
- .heading-2 {
- font-size: theme('fontSize.xl');
- }
- `
- let output = css`
- .heading-1 {
- font-size: 20px;
- }
- .heading-2 {
- font-size: 24px;
- }
- `
- return run(input, {
- theme: {
- fontSize: {
- lg: ['20px', '28px'],
- xl: ['24px', { lineHeight: '32px', letterSpacing: '-0.01em' }],
- },
- },
- }).then((result) => {
- expect(result.css).toMatchCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('outlines are retrieved without default outline-offset', () => {
- let input = css`
- .element {
- outline: theme('outline.black');
- }
- `
- let output = css`
- .element {
- outline: 2px dotted black;
- }
- `
- return run(input, {
- theme: {
- outline: {
- black: ['2px dotted black', '4px'],
- },
- },
- }).then((result) => {
- expect(result.css).toMatchCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('font-family values are joined when an array', () => {
- let input = css`
- .element {
- font-family: theme('fontFamily.sans');
- }
- `
- let output = css`
- .element {
- font-family: Helvetica, Arial, sans-serif;
- }
- `
- return run(input, {
- theme: {
- fontFamily: {
- sans: ['Helvetica', 'Arial', 'sans-serif'],
- },
- },
- }).then((result) => {
- expect(result.css).toMatchCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('font-family values are retrieved without font-feature-settings', () => {
- let input = css`
- .heading-1 {
- font-family: theme('fontFamily.sans');
- }
- .heading-2 {
- font-family: theme('fontFamily.serif');
- }
- .heading-3 {
- font-family: theme('fontFamily.mono');
- }
- `
- let output = css`
- .heading-1 {
- font-family: Inter;
- }
- .heading-2 {
- font-family: Times, serif;
- }
- .heading-3 {
- font-family: Menlo, monospace;
- }
- `
- return run(input, {
- theme: {
- fontFamily: {
- sans: ['Inter', { fontFeatureSettings: '"cv11"' }],
- serif: [['Times', 'serif'], { fontFeatureSettings: '"cv11"' }],
- mono: ['Menlo, monospace', { fontFeatureSettings: '"cv11"' }],
- },
- },
- }).then((result) => {
- expect(result.css).toMatchCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('box-shadow values are joined when an array', () => {
- let input = css`
- .element {
- box-shadow: theme('boxShadow.wtf');
- }
- `
- let output = css`
- .element {
- box-shadow: 0 0 2px black, 1px 2px 3px white;
- }
- `
- return run(input, {
- theme: {
- boxShadow: {
- wtf: ['0 0 2px black', '1px 2px 3px white'],
- },
- },
- }).then((result) => {
- expect(result.css).toMatchCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('transition-property values are joined when an array', () => {
- let input = css`
- .element {
- transition-property: theme('transitionProperty.colors');
- }
- `
- let output = css`
- .element {
- transition-property: color, fill;
- }
- `
- return run(input, {
- theme: {
- transitionProperty: {
- colors: ['color', 'fill'],
- },
- },
- }).then((result) => {
- expect(result.css).toMatchCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('transition-duration values are joined when an array', () => {
- let input = css`
- .element {
- transition-duration: theme('transitionDuration.lol');
- }
- `
- let output = css`
- .element {
- transition-duration: 1s, 2s;
- }
- `
- return run(input, {
- theme: {
- transitionDuration: {
- lol: ['1s', '2s'],
- },
- },
- }).then((result) => {
- expect(result.css).toMatchCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('basic screen function calls are expanded', () => {
- let input = css`
- @media screen(sm) {
- .foo {
- }
- }
- `
- let output = css`
- @media (min-width: 600px) {
- .foo {
- }
- }
- `
- return run(input, {
- theme: { screens: { sm: '600px' } },
- }).then((result) => {
- expect(result.css).toMatchCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('screen function supports max-width screens', () => {
- let input = css`
- @media screen(sm) {
- .foo {
- }
- }
- `
- let output = css`
- @media (max-width: 600px) {
- .foo {
- }
- }
- `
- return run(input, {
- theme: { screens: { sm: { max: '600px' } } },
- }).then((result) => {
- expect(result.css).toMatchCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('screen function supports min-width screens', () => {
- let input = css`
- @media screen(sm) {
- .foo {
- }
- }
- `
- let output = css`
- @media (min-width: 600px) {
- .foo {
- }
- }
- `
- return run(input, {
- theme: { screens: { sm: { min: '600px' } } },
- }).then((result) => {
- expect(result.css).toMatchCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('screen function supports min-width and max-width screens', () => {
- let input = css`
- @media screen(sm) {
- .foo {
- }
- }
- `
- let output = css`
- @media (min-width: 600px) and (max-width: 700px) {
- .foo {
- }
- }
- `
- return run(input, {
- theme: { screens: { sm: { min: '600px', max: '700px' } } },
- }).then((result) => {
- expect(result.css).toMatchCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('screen function supports raw screens', () => {
- let input = css`
- @media screen(mono) {
- .foo {
- }
- }
- `
- let output = css`
- @media monochrome {
- .foo {
- }
- }
- `
- return run(input, {
- theme: { screens: { mono: { raw: 'monochrome' } } },
- }).then((result) => {
- expect(result.css).toMatchCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('screen arguments can be quoted', () => {
- let input = css`
- @media screen('sm') {
- .foo {
- }
- }
- `
- let output = css`
- @media (min-width: 600px) {
- .foo {
- }
- }
- `
- return run(input, {
- theme: { screens: { sm: '600px' } },
- }).then((result) => {
- expect(result.css).toMatchCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('Theme function can extract alpha values for colors (1)', () => {
- let input = css`
- .foo {
- color: theme(colors.blue.500 / 50%);
- }
- `
- let output = css`
- .foo {
- color: rgb(59 130 246 / 50%);
- }
- `
- return run(input, {
- theme: {
- colors: { blue: { 500: '#3b82f6' } },
- },
- }).then((result) => {
- expect(result.css).toMatchCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('Theme function can extract alpha values for colors (2)', () => {
- let input = css`
- .foo {
- color: theme(colors.blue.500 / 0.5);
- }
- `
- let output = css`
- .foo {
- color: rgb(59 130 246 / 0.5);
- }
- `
- return run(input, {
- theme: {
- colors: { blue: { 500: '#3b82f6' } },
- },
- }).then((result) => {
- expect(result.css).toMatchCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('Theme function can extract alpha values for colors (3)', () => {
- let input = css`
- .foo {
- color: theme(colors.blue.500 / var(--my-alpha));
- }
- `
- let output = css`
- .foo {
- color: rgb(59 130 246 / var(--my-alpha));
- }
- `
- return run(input, {
- theme: {
- colors: { blue: { 500: '#3b82f6' } },
- },
- }).then((result) => {
- expect(result.css).toMatchCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('Theme function can extract alpha values for colors (4)', () => {
- let input = css`
- .foo {
- color: theme(colors.blue.500 / 50%);
- }
- `
- let output = css`
- .foo {
- color: hsl(217 91% 60% / 50%);
- }
- `
- return run(input, {
- theme: {
- colors: {
- blue: { 500: 'hsl(217, 91%, 60%)' },
- },
- },
- }).then((result) => {
- expect(result.css).toMatchCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('Theme function can extract alpha values for colors (5)', () => {
- let input = css`
- .foo {
- color: theme(colors.blue.500 / 0.5);
- }
- `
- let output = css`
- .foo {
- color: hsl(217 91% 60% / 0.5);
- }
- `
- return run(input, {
- theme: {
- colors: {
- blue: { 500: 'hsl(217, 91%, 60%)' },
- },
- },
- }).then((result) => {
- expect(result.css).toMatchCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('Theme function can extract alpha values for colors (6)', () => {
- let input = css`
- .foo {
- color: theme(colors.blue.500 / var(--my-alpha));
- }
- `
- let output = css`
- .foo {
- color: hsl(217 91% 60% / var(--my-alpha));
- }
- `
- return run(input, {
- theme: {
- colors: {
- blue: { 500: 'hsl(217, 91%, 60%)' },
- },
- },
- }).then((result) => {
- expect(result.css).toMatchCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('Theme function can extract alpha values for colors (7)', () => {
- let input = css`
- .foo {
- color: theme(colors.blue.500 / var(--my-alpha));
- }
- `
- let output = css`
- .foo {
- color: rgb(var(--foo) / var(--my-alpha));
- }
- `
- return runFull(input, {
- theme: {
- colors: {
- blue: {
- 500: 'rgb(var(--foo) / <alpha-value>)',
- },
- },
- },
- }).then((result) => {
- expect(result.css).toMatchCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('Theme function can extract alpha values for colors (8)', () => {
- let input = css`
- .foo {
- color: theme(colors.blue.500 / theme(opacity.myalpha));
- }
- `
- let output = css`
- .foo {
- color: rgb(var(--foo) / 50%);
- }
- `
- return runFull(input, {
- theme: {
- colors: {
- blue: {
- 500: 'rgb(var(--foo) / <alpha-value>)',
- },
- },
- opacity: {
- myalpha: '50%',
- },
- },
- }).then((result) => {
- expect(result.css).toMatchCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('Theme functions replace the alpha value placeholder even with no alpha provided', () => {
- let input = css`
- .foo {
- background: theme(colors.blue.400);
- color: theme(colors.blue.500);
- }
- `
- let output = css`
- .foo {
- background: rgb(0 0 255 / 1);
- color: rgb(var(--foo) / 1);
- }
- `
- return runFull(input, {
- theme: {
- colors: {
- blue: {
- 400: 'rgb(0 0 255 / <alpha-value>)',
- 500: 'rgb(var(--foo) / <alpha-value>)',
- },
- },
- },
- }).then((result) => {
- expect(result.css).toMatchCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('Theme functions can reference values with slashes in brackets', () => {
- let input = css`
- .foo1 {
- color: theme(colors[a/b]);
- }
- .foo2 {
- color: theme(colors[a/b]/50%);
- }
- `
- let output = css`
- .foo1 {
- color: #000000;
- }
- .foo2 {
- color: rgb(0 0 0 / 50%);
- }
- `
- return runFull(input, {
- theme: {
- colors: {
- 'a/b': '#000000',
- },
- },
- }).then((result) => {
- expect(result.css).toMatchCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('Theme functions with alpha value inside quotes', () => {
- let input = css`
- .foo {
- color: theme('colors.yellow / 50%');
- }
- `
- let output = css`
- .foo {
- color: rgb(247 204 80 / 50%);
- }
- `
- return runFull(input, {
- theme: {
- colors: {
- yellow: '#f7cc50',
- },
- },
- }).then((result) => {
- expect(result.css).toMatchCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- test('Theme functions with alpha with quotes value around color only', () => {
- let input = css`
- .foo {
- color: theme('colors.yellow' / 50%);
- }
- `
- let output = css`
- .foo {
- color: rgb(247 204 80 / 50%);
- }
- `
- return runFull(input, {
- theme: {
- colors: {
- yellow: '#f7cc50',
- },
- },
- }).then((result) => {
- expect(result.css).toMatchCss(output)
- expect(result.warnings().length).toBe(0)
- })
- })
- it('can find values with slashes in the theme key while still allowing for alpha values ', () => {
- let input = css`
- .foo00 {
- color: theme(colors.foo-5);
- }
- .foo01 {
- color: theme(colors.foo-5/10);
- }
- .foo02 {
- color: theme(colors.foo-5/10/25);
- }
- .foo03 {
- color: theme(colors.foo-5 / 10);
- }
- .foo04 {
- color: theme(colors.foo-5/10 / 25);
- }
- `
- return runFull(input, {
- theme: {
- colors: {
- 'foo-5': '#050000',
- 'foo-5/10': '#051000',
- 'foo-5/10/25': '#051025',
- },
- },
- }).then((result) => {
- expect(result.css).toMatchCss(css`
- .foo00 {
- color: #050000;
- }
- .foo01 {
- color: #051000;
- }
- .foo02 {
- color: #051025;
- }
- .foo03 {
- color: rgb(5 0 0 / 10);
- }
- .foo04 {
- color: rgb(5 16 0 / 25);
- }
- `)
- })
- })
|