wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions
tailwindcss/tests/evaluateTailwindFunctions.test.js
Robin Malfait 581cf6abcc
Merge engines (#11275) 
* Simplify CI, make oxide engine the default (#11281)

* remove integration tests for the `stable` engine

* make `integration-tests-oxide` the default integration tests workflow

* remove unnecessary CACHE_PREFIX

* drop `ci-stable.yml` workflow

* make `CI — Oxide` the default

+ drop testing against 3.3 branch (since this is stable only)
+ remove unnecessary CACHE_PREFIX

* drop `release-insiders-stable.yml` workflow

* make `Release Insiders — Oxide` the default

+ change release channel to just `insiders` instead of `oxide-insders`

* drop 3.3 branch from integration tests

* change job name for insiders release

This makes it consistent with the other job names

* prep `release-oxide.yml` workflow to be the default workflow

* add Tailwind Play update

Currently commented out until we figure out how this will work exactly.

* use `env.VERSION` for the version we want to release

* drop `release-stable.yml` workflow

* make `release-oxide.yml` the default `release.yml` workflow

* inline "Calculate environment variables" step

* cache node_modules and cargo related files/folders in the release step

* always use the default CLI

* drop oxide specific implementation

* ensure we test `--postcss` in the CLI

Even for the Oxide engine

* always process `@import` rules

* remove `generalizedModifiers` flag

This was already enabled by default. This commits removes some of the
outstanding references to it.

* remove built-in peer dependencies for the CLI

* drop unused esbuild dependency

* fix type for `configBag`

* setup Lightning CSS for the CLI

* drop `cssnano` dependency

We only used this in the CLI and we now use Lighting CSS which has this
built in already. Therefore we can get rid of this as a dependency.

* ensure `imported.css` file exists in integration tests

* passthrough `options` to lightningcss

Ideally we can read this from `result.map` instead. However this doesn't
get filled in for whatever reason even though we use `map: {inline:true}`.

You can run the `tests/cli.test.js`, and more specifically the
`--postcss supports process options with custom config` test.

* Always process CSS with Lightning CSS

Some tests temporarily skipped. Autoprefixer removed from `postcss.config.js` stubs since vendor prefixing handled by Lightning.

* Remove code for normalizing `@import "tailwindcss/*"` statements

* ensure tailwind doesn't crash when a `tailwind.config.js` file is not present

* add `log.group` to group multiple messages together with different types

* remove engine specific checks in integration tests

* remove unused imports/variables

Make linting check happy

* support `content: ['auto']`

This will allow us to still use auto content detection, but since this
is part of the `content` array, it also allows you to add custom paths
if you want.

E.g.:
```js
content: ['auto', './node_modules/my-library/*.{jsx,tsx}']
```

* ensure `content.files` is always an array

This allows us to simplify some checks because 'auto' will now be part
of the array instead of checking if `content.files` is auto or if it is
an array containing 'auto'.

* fix tests, ensure default config is not injected

* simplify `auto` normalization

* always use the defaultFullConfig

No need to override the defaultFullConfig with `{content: 'auto'}`
because this will be included in the default config already.

* drop condition which ensured `files` was an empty array

This is not needed anymore because when `content` is omitted it behaves
as if it was set to `auto`.

* drop removal of `content`

We used to remove the `content` from the actual configuration files when
using `tailwindcss init` for the oxide engine. This was to ensure that
`auto content detection` was used instead (by default).

But now it is always enabled by default therefore this is not needed
anymore.

* ensure setting `content: 'auto'` works

* improve file cache handling

We have to make sure that we get into the previous state whenver a test
is done.
We were using some `!fileCache[filePath]` checks, however we also used
`null` as a sentinel value when something wasn't found. But, `null` is
falsey as well so some checks where incorrect.

Using a dedicated value and a `Map` makes this safer and more correct
because we can now use `.has()`.

* drop `cleanupFile`, `removeFile` will already take care of it

* drop oxide check in `resolvedChangedContent`

At this point the `context.tailwindConfig.content.files` is already
fully resolved regardless of the engine we are in.

* refactor `parseCandidateStringsFromFiles` strategy, to make use of a proper feature flag

* use feature flag for sorting classes

Once the Oxide engine is the default default, then we can drop this
entirely because the result from the Rust parser will already be sorted.

* drop `crosscheck` from tests where it is safe

First pass of deleting `crosscheck`. These are all the places where we
didn't have any differences between the Oxide and Stable engine.

* replace `__OXIDE__` in corePlugins with feature flag

* use `globalThis.__OXIDE__ ?? false`

This will ensure that in places where we don't have `__OXIDE__` that we
can still properly fallback to `false`.

* use `flex` as the go-to utility when testing features

* prefer `space-utilities` tests instead of `oxide` test

* drop crosscheck check

Since the `oxideParser` is disabled by default, all the tests can use
the `stable` output.

* use simple `false` default values for feature flag defaults

* drop `__OXIDE__` injections in build scripts

* use stable `flex` and `z-{...}` utilities instead of color utilities

flex and z-index related utilities are more stable than the color
utilities right now because the color utilities will use a raw color
value or a combination with a css variable depending on a feature flag.

* drop unused `ENGINE` environment variable

* drop stable engine manifest files

* drop `swap-engines` tooling

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
2023-05-24 22:10:00 -04:00

1413 lines
28 KiB
JavaScript
Raw Blame History

import fs from 'fs'
import path from 'path'
import postcss from 'postcss'
import plugin from '../src/lib/evaluateTailwindFunctions'
import { run as runFull, html, css } from './util/run'
function run(input, opts = {}) {
return postcss([
plugin({
tailwindConfig: opts,
markInvalidUtilityNode() {
// no op
},
}),
]).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 #000;
}
`
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 retrieved without font-variation-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', { fontVariationSettings: '"opsz" 32' }],
serif: [['Times', 'serif'], { fontVariationSettings: '"opsz" 32' }],
mono: ['Menlo, monospace', { fontVariationSettings: '"opsz" 32' }],
},
},
}).then((result) => {
expect(result.css).toMatchCss(output)
expect(result.warnings().length).toBe(0)
})
})
test('font-variation-settings values can be retrieved', () => {
let input = css`
.heading {
font-family: theme('fontFamily.sans');
font-variation-settings: theme('fontFamily.sans[1].fontVariationSettings');
}
`
let output = css`
.heading {
font-family: Inter;
font-variation-settings: 'opsz' 32;
}
`
return run(input, {
theme: {
fontFamily: {
sans: ['Inter', { fontVariationSettings: "'opsz' 32" }],
},
},
}).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('font-feature-settings values can be retrieved', () => {
let input = css`
.heading {
font-family: theme('fontFamily.sans');
font-feature-settings: theme('fontFamily.sans[1].fontFeatureSettings');
}
`
let output = css`
.heading {
font-feature-settings: 'cv11';
font-family: Inter;
}
`
return run(input, {
theme: {
fontFamily: {
sans: ['Inter', { 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 #000, 1px 2px 3px #fff;
}
`
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 {
color: red;
}
}
`
let output = css`
@media (min-width: 600px) {
.foo {
color: red;
}
}
`
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 {
color: red;
}
}
`
let output = css`
@media (max-width: 600px) {
.foo {
color: red;
}
}
`
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 {
color: red;
}
}
`
let output = css`
@media (min-width: 600px) {
.foo {
color: red;
}
}
`
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 {
color: red;
}
}
`
let output = css`
@media (min-width: 600px) and (max-width: 700px) {
.foo {
color: red;
}
}
`
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 {
color: red;
}
}
`
let output = css`
@media monochrome {
.foo {
color: red;
}
}
`
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 {
color: red;
}
}
`
let output = css`
@media (min-width: 600px) {
.foo {
color: red;
}
}
`
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: #3b82f680;
}
`
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: #3b82f680;
}
`
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: #3c83f680;
}
`
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: #3c83f680;
}
`
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 {
color: rgb(var(--foo) / 1);
background: #00f;
}
`
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: #000;
}
.foo2 {
color: #00000080;
}
`
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: #f7cc5080;
}
`
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: #f7cc5080;
}
`
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: #050000;
}
.foo04 {
color: #051000;
}
`)
})
})
describe('context dependent', () => {
let configPath = path.resolve(__dirname, './evaluate-tailwind-functions.tailwind.config.js')
let filePath = path.resolve(__dirname, './evaluate-tailwind-functions.test.html')
let config = {
content: [filePath],
corePlugins: { preflight: false },
}
// Rebuild the config file for each test
beforeEach(() => fs.promises.writeFile(configPath, `module.exports = ${JSON.stringify(config)};`))
afterEach(() => fs.promises.unlink(configPath))
test('should not generate when theme fn doesnt resolve', async () => {
await fs.promises.writeFile(
filePath,
html`
<div class="underline [--box-shadow:theme('boxShadow.doesnotexist')]"></div>
<div class="bg-[theme('boxShadow.doesnotexist')]"></div>
`
)
// TODO: We need a way to reuse the context in our test suite without requiring writing to files
// It should be an explicit thing tho — like we create a context and pass it in or something
let result = await runFull('@tailwind utilities', configPath)
// 1. On first run it should work because it's been removed from the class cache
expect(result.css).toMatchCss(css`
.underline {
text-decoration-line: underline;
}
`)
// 2. But we get a warning in the console
expect().toHaveBeenWarnedWith(['invalid-theme-key-in-class'])
// 3. The second run should work fine because it's been removed from the class cache
result = await runFull('@tailwind utilities', configPath)
expect(result.css).toMatchCss(css`
.underline {
text-decoration-line: underline;
}
`)
// 4. But we've not received any further logs about it
expect().toHaveBeenWarnedWith(['invalid-theme-key-in-class'])
})
test('it works mayhaps', async () => {
let input = css`
.test {
/* prettier-ignore */
inset: calc(-1 * (2*theme("spacing.4")));
/* prettier-ignore */
padding: calc(-1 * (2* theme("spacing.4")));
}
`
let output = css`
.test {
/* prettier-ignore */
inset: calc(-1 * (2*1rem));
/* prettier-ignore */
padding: calc(-1 * (2* 1rem));
}
`
return run(input, {
theme: {
spacing: {
4: '1rem',
},
},
}).then((result) => {
expect(result.css).toMatchCss(output)
expect(result.warnings().length).toBe(0)
})
})
})
Reference in a new issue View git blame Copy permalink