123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574 |
- import { run, html, css } from './util/run'
- test('match utilities with modifiers', async () => {
- let config = {
- content: [
- {
- raw: html`<div
- class="test test/foo test-1/foo test-2/foo test/[foo] test-1/[foo] test-[8]/[9]"
- ></div> `,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- ({ matchUtilities }) => {
- matchUtilities(
- {
- test: (value, { modifier }) => ({
- color: `${value}_${modifier}`,
- }),
- },
- {
- values: {
- DEFAULT: 'default',
- bar: 'bar',
- '1': 'one',
- '2': 'two',
- '1/foo': 'onefoo',
- '[8]/[9]': 'eightnine',
- },
- modifiers: 'any',
- }
- )
- },
- ],
- }
- let input = css`
- @tailwind utilities;
- `
- let result = await run(input, config)
- expect(result.css).toMatchFormattedCss(css`
- .test {
- color: default_null;
- }
- .test-1\/\[foo\] {
- color: one_[foo];
- }
- .test-1\/foo {
- color: onefoo_null;
- }
- .test-2\/foo {
- color: two_foo;
- }
- .test-\[8\]\/\[9\] {
- color: eightnine_null;
- }
- .test\/\[foo\] {
- color: default_[foo];
- }
- .test\/foo {
- color: default_foo;
- }
- `)
- })
- test('match utilities with modifiers in the config', async () => {
- let config = {
- content: [
- {
- raw: html`<div class="test test/foo test-1/foo test/[bar] test-1/[bar]"></div> `,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- ({ matchUtilities }) => {
- matchUtilities(
- {
- test: (value, { modifier }) => ({
- color: `${value}_${modifier}`,
- }),
- },
- {
- values: {
- DEFAULT: 'default',
- bar: 'bar',
- '1': 'one',
- },
- modifiers: {
- foo: 'mewtwo',
- },
- }
- )
- },
- ],
- }
- let input = css`
- @tailwind utilities;
- `
- let result = await run(input, config)
- expect(result.css).toMatchFormattedCss(css`
- .test {
- color: default_null;
- }
- .test-1\/\[bar\] {
- color: one_bar;
- }
- .test-1\/foo {
- color: one_mewtwo;
- }
- .test\/\[bar\] {
- color: default_bar;
- }
- .test\/foo {
- color: default_mewtwo;
- }
- `)
- })
- test('match utilities can omit utilities by returning null', async () => {
- let config = {
- content: [
- {
- raw: html`<div class="test test/good test/bad"></div> `,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- ({ matchUtilities }) => {
- matchUtilities(
- {
- test: (value, { modifier }) =>
- modifier === 'bad'
- ? null
- : {
- color: `${value}_${modifier}`,
- },
- },
- {
- values: {
- DEFAULT: 'default',
- bar: 'bar',
- '1': 'one',
- },
- modifiers: 'any',
- }
- )
- },
- ],
- }
- let input = css`
- @tailwind utilities;
- `
- let result = await run(input, config)
- expect(result.css).toMatchFormattedCss(css`
- .test {
- color: default_null;
- }
- .test\/good {
- color: default_good;
- }
- `)
- })
- test('matching utilities with a basic configured value', () => {
- let config = {
- content: [{ raw: html`<div class="test-foo"></div>` }],
- theme: {},
- plugins: [
- function ({ matchUtilities }) {
- matchUtilities(
- {
- test: (value) => ({ value }),
- },
- {
- values: {
- foo: 'value_foo',
- },
- }
- )
- },
- ],
- corePlugins: [],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .test-foo {
- value: value_foo;
- }
- `)
- })
- })
- test('matching utilities with an arbitrary value and configured modifier', () => {
- let config = {
- content: [{ raw: html`<div class="test-[foo]/bar"></div>` }],
- theme: {},
- plugins: [
- function ({ matchUtilities }) {
- matchUtilities(
- {
- test: (value, { modifier }) => ({ value, modifier }),
- },
- {
- modifiers: {
- bar: 'configured_bar',
- },
- }
- )
- },
- ],
- corePlugins: [],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .test-\[foo\]\/bar {
- value: foo;
- modifier: configured_bar;
- }
- `)
- })
- })
- test('matching utilities with an configured value and an arbitrary modifier (raw)', () => {
- let config = {
- content: [{ raw: html`<div class="test-foo/[bar]"></div>` }],
- theme: {},
- plugins: [
- function ({ matchUtilities }) {
- matchUtilities(
- {
- test: (value, { modifier }) => ({ value, modifier }),
- },
- {
- values: {
- foo: 'configured_foo',
- },
- modifiers: 'any', // Raw `[value]`
- }
- )
- },
- ],
- corePlugins: [],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .test-foo\/\[bar\] {
- value: configured_foo;
- modifier: [bar];
- }
- `)
- })
- })
- test('matching utilities with an configured value and an arbitrary modifier (non-raw)', () => {
- let config = {
- content: [{ raw: html`<div class="test-foo/[bar]"></div>` }],
- theme: {},
- plugins: [
- function ({ matchUtilities }) {
- matchUtilities(
- {
- test: (value, { modifier }) => ({ value, modifier }),
- },
- {
- values: {
- foo: 'configured_foo',
- },
- modifiers: {},
- }
- )
- },
- ],
- corePlugins: [],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .test-foo\/\[bar\] {
- value: configured_foo;
- modifier: bar;
- }
- `)
- })
- })
- test('matching utilities with an configured value and a configured modifier', () => {
- let config = {
- content: [{ raw: html`<div class="test-foo/bar"></div>` }],
- theme: {},
- plugins: [
- function ({ matchUtilities }) {
- matchUtilities(
- {
- test: (value, { modifier }) => ({ value, modifier }),
- },
- {
- values: {
- foo: 'configured_foo',
- },
- modifiers: {
- bar: 'configured_bar',
- },
- }
- )
- },
- ],
- corePlugins: [],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .test-foo\/bar {
- value: configured_foo;
- modifier: configured_bar;
- }
- `)
- })
- })
- test('matching utilities with an arbitrary value and an arbitrary modifier (raw)', () => {
- let config = {
- content: [{ raw: html`<div class="test-[foo]/[bar]"></div>` }],
- theme: {},
- plugins: [
- function ({ matchUtilities }) {
- matchUtilities(
- {
- test: (value, { modifier }) => ({ value, modifier }),
- },
- {
- modifiers: 'any',
- }
- )
- },
- ],
- corePlugins: [],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .test-\[foo\]\/\[bar\] {
- value: foo;
- modifier: [bar];
- }
- `)
- })
- })
- test('matching utilities with an arbitrary value and an arbitrary modifier (non-raw)', () => {
- let config = {
- content: [{ raw: html`<div class="test-[foo]/[bar]"></div>` }],
- theme: {},
- plugins: [
- function ({ matchUtilities }) {
- matchUtilities(
- {
- test: (value, { modifier }) => ({ value, modifier }),
- },
- {
- modifiers: {},
- }
- )
- },
- ],
- corePlugins: [],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .test-\[foo\]\/\[bar\] {
- value: foo;
- modifier: bar;
- }
- `)
- })
- })
- test('matching utilities with a lookup value that looks like an arbitrary value and modifier', () => {
- let config = {
- content: [{ raw: html`<div class="test-[foo]/[bar]"></div>` }],
- theme: {},
- plugins: [
- function ({ matchUtilities }) {
- matchUtilities(
- {
- test: (value, { modifier }) => ({ value, modifier }),
- },
- {
- values: {
- '[foo]/[bar]': 'hello',
- },
- }
- )
- },
- ],
- corePlugins: [],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .test-\[foo\]\/\[bar\] {
- value: hello;
- }
- `)
- })
- })
- test('matching utilities with a lookup value that looks like an arbitrary value and modifier (with modifiers = any)', () => {
- let config = {
- content: [{ raw: html`<div class="test-[foo]/[bar]"></div>` }],
- theme: {},
- plugins: [
- function ({ matchUtilities }) {
- matchUtilities(
- {
- test: (value, { modifier }) => ({ value, modifier }),
- },
- {
- values: {
- '[foo]/[bar]': 'hello',
- },
- modifiers: 'any',
- }
- )
- },
- ],
- corePlugins: [],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .test-\[foo\]\/\[bar\] {
- value: hello;
- }
- `)
- })
- })
- test('matching utilities with a lookup value that looks like an arbitrary value and modifier (with modifiers = {})', () => {
- let config = {
- content: [{ raw: html`<div class="test-[foo]/[bar]"></div>` }],
- theme: {},
- plugins: [
- function ({ matchUtilities }) {
- matchUtilities(
- {
- test: (value, { modifier }) => ({ value, modifier }),
- },
- {
- values: {
- '[foo]/[bar]': 'hello',
- },
- modifiers: {},
- }
- )
- },
- ],
- corePlugins: [],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .test-\[foo\]\/\[bar\] {
- value: hello;
- }
- `)
- })
- })
- test('matching utilities with a lookup value that looks like an arbitrary value and a configured modifier', () => {
- let config = {
- content: [{ raw: html`<div class="test-[foo]/bar"></div>` }],
- theme: {},
- plugins: [
- function ({ matchUtilities }) {
- matchUtilities(
- {
- test: (value, { modifier }) => ({ value, modifier }),
- },
- {
- values: {
- '[foo]/bar': 'hello',
- },
- }
- )
- },
- ],
- corePlugins: [],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .test-\[foo\]\/bar {
- value: hello;
- }
- `)
- })
- })
- test('matching utilities with a lookup value that looks like a configured value and an arbitrary modifier', () => {
- let config = {
- content: [{ raw: html`<div class="test-foo/[bar]"></div>` }],
- theme: {},
- plugins: [
- function ({ matchUtilities }) {
- matchUtilities(
- {
- test: (value, { modifier }) => ({ value, modifier }),
- },
- {
- values: {
- 'foo/[bar]': 'hello',
- },
- }
- )
- },
- ],
- corePlugins: [],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .test-foo\/\[bar\] {
- value: hello;
- }
- `)
- })
- })
- test('matching utilities with a lookup value that does not match the configured type', () => {
- let config = {
- content: [{ raw: html`<div class="test-foo"></div>` }],
- theme: {},
- plugins: [
- function ({ matchUtilities }) {
- matchUtilities(
- {
- test: (value, { modifier }) => ({ value, modifier }),
- },
- {
- values: {
- foo: 'not-a-percentage',
- },
- type: ['percentage'],
- }
- )
- },
- ],
- corePlugins: [],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .test-foo {
- value: not-a-percentage;
- }
- `)
- })
- })
|