diff --git a/tests/jit/animations.test.js b/tests/animations.test.js similarity index 75% rename from tests/jit/animations.test.js rename to tests/animations.test.js index 6eb731fe5..f167b3717 100644 --- a/tests/jit/animations.test.js +++ b/tests/animations.test.js @@ -1,18 +1,10 @@ -import postcss from 'postcss' -import path from 'path' -import tailwind from '../../src' - -function run(input, config = {}) { - return postcss(tailwind(config)).process(input, { - from: path.resolve(__filename), - }) -} +import { run, html, css } from './util/run' test('basic', () => { let config = { content: [ { - raw: ` + raw: html`
@@ -21,10 +13,8 @@ test('basic', () => { ], } - let css = `@tailwind utilities` - - return run(css, config).then((result) => { - expect(result.css).toMatchFormattedCss(` + return run('@tailwind utilities', config).then((result) => { + expect(result.css).toMatchFormattedCss(css` @keyframes spin { to { transform: rotate(360deg); @@ -63,7 +53,7 @@ test('basic', () => { test('custom', () => { let config = { - content: [{ raw: `
` }], + content: [{ raw: html`
` }], theme: { extend: { keyframes: { @@ -76,10 +66,8 @@ test('custom', () => { }, } - let css = `@tailwind utilities` - - return run(css, config).then((result) => { - expect(result.css).toMatchFormattedCss(` + return run('@tailwind utilities', config).then((result) => { + expect(result.css).toMatchFormattedCss(css` @keyframes one { to { transform: rotate(360deg); @@ -108,10 +96,8 @@ test('custom prefixed', () => { }, } - let css = `@tailwind utilities` - - return run(css, config).then((result) => { - expect(result.css).toMatchFormattedCss(` + return run('@tailwind utilities', config).then((result) => { + expect(result.css).toMatchFormattedCss(css` @keyframes tw-one { to { transform: rotate(360deg); @@ -126,7 +112,7 @@ test('custom prefixed', () => { test('multiple', () => { let config = { - content: [{ raw: `
` }], + content: [{ raw: html`
` }], theme: { extend: { animation: { @@ -136,10 +122,8 @@ test('multiple', () => { }, } - let css = `@tailwind utilities` - - return run(css, config).then((result) => { - expect(result.css).toMatchFormattedCss(` + return run('@tailwind utilities', config).then((result) => { + expect(result.css).toMatchFormattedCss(css` @keyframes bounce { 0%, 100% { @@ -165,7 +149,7 @@ test('multiple', () => { test('multiple custom', () => { let config = { - content: [{ raw: `
` }], + content: [{ raw: html`
` }], theme: { extend: { keyframes: { @@ -179,10 +163,8 @@ test('multiple custom', () => { }, } - let css = `@tailwind utilities` - - return run(css, config).then((result) => { - expect(result.css).toMatchFormattedCss(` + return run('@tailwind utilities', config).then((result) => { + expect(result.css).toMatchFormattedCss(css` @keyframes one { to { transform: rotate(360deg); diff --git a/tests/jit/apply.test.css b/tests/apply.test.css similarity index 100% rename from tests/jit/apply.test.css rename to tests/apply.test.css diff --git a/tests/jit/apply.test.html b/tests/apply.test.html similarity index 100% rename from tests/jit/apply.test.html rename to tests/apply.test.html diff --git a/tests/apply.test.js b/tests/apply.test.js new file mode 100644 index 000000000..0c96c273d --- /dev/null +++ b/tests/apply.test.js @@ -0,0 +1,256 @@ +import fs from 'fs' +import path from 'path' + +import { run, css } from './util/run' + +test('@apply', () => { + let config = { + darkMode: 'class', + content: [path.resolve(__dirname, './apply.test.html')], + } + + let input = css` + @tailwind components; + @tailwind utilities; + + @layer components { + .basic-example { + @apply px-4 py-2 bg-blue-500 rounded-md; + } + .class-order { + @apply pt-4 pr-1 px-3 py-7 p-8; + } + .with-additional-properties { + font-weight: 500; + @apply text-right; + } + .variants { + @apply xl:focus:font-black hover:font-bold lg:font-light focus:font-medium font-semibold; + } + .only-variants { + @apply xl:focus:font-black hover:font-bold lg:font-light focus:font-medium; + } + .apply-group-variant { + @apply group-hover:text-center lg:group-hover:text-left; + } + .apply-dark-variant { + @apply dark:text-center dark:hover:text-right lg:dark:text-left; + } + .apply-custom-utility { + @apply custom-util hover:custom-util lg:custom-util xl:focus:custom-util; + } + .multiple, + .selectors { + @apply px-4 py-2 bg-blue-500 rounded-md; + } + .multiple-variants, + .selectors-variants { + @apply hover:text-center active:text-right lg:focus:text-left; + } + .multiple-group, + .selectors-group { + @apply group-hover:text-center lg:group-hover:text-left; + } + /* TODO: This works but the generated CSS is unnecessarily verbose. */ + .complex-utilities { + @apply ordinal tabular-nums focus:diagonal-fractions shadow-lg hover:shadow-xl; + } + .basic-nesting-parent { + .basic-nesting-child { + @apply font-bold hover:font-normal; + } + } + .use-base-only-a { + @apply font-bold; + } + .use-base-only-b { + @apply use-base-only-a font-normal; + } + .use-dependant-only-a { + @apply font-bold; + } + .use-dependant-only-b { + @apply use-dependant-only-a font-normal; + } + .btn { + @apply font-bold py-2 px-4 rounded; + } + .btn-blue { + @apply btn bg-blue-500 hover:bg-blue-700 text-white; + } + .recursive-apply-a { + @apply font-black sm:font-thin; + } + .recursive-apply-b { + @apply recursive-apply-a font-semibold md:font-extralight; + } + .recursive-apply-c { + @apply recursive-apply-b font-bold lg:font-light; + } + .use-with-other-properties-base { + color: green; + @apply font-bold; + } + .use-with-other-properties-component { + @apply use-with-other-properties-base; + } + .add-sibling-properties { + padding: 2rem; + @apply px-4 hover:px-2 lg:px-10 xl:focus:px-1; + padding-top: 3px; + @apply use-with-other-properties-base; + } + + h1 { + @apply text-2xl lg:text-2xl sm:text-3xl; + } + h2 { + @apply text-2xl; + @apply lg:text-2xl; + @apply sm:text-2xl; + } + + .important-modifier { + @apply px-4 !rounded-md; + } + + .important-modifier-variant { + @apply px-4 hover:!rounded-md; + } + } + + @layer utilities { + .custom-util { + custom: stuff; + } + + .foo { + @apply animate-spin; + } + + .bar { + @apply animate-pulse !important; + } + } + ` + + return run(input, config).then((result) => { + let expectedPath = path.resolve(__dirname, './apply.test.css') + let expected = fs.readFileSync(expectedPath, 'utf8') + + expect(result.css).toMatchFormattedCss(expected) + }) +}) + +test('@apply error with unknown utility', async () => { + let config = { + darkMode: 'class', + content: [path.resolve(__dirname, './apply.test.html')], + } + + let input = css` + @tailwind components; + @tailwind utilities; + + @layer components { + .foo { + @apply a-utility-that-does-not-exist; + } + } + ` + + await expect(run(input, config)).rejects.toThrowError('class does not exist') +}) + +test('@apply error with nested @screen', async () => { + let config = { + darkMode: 'class', + content: [path.resolve(__dirname, './apply.test.html')], + } + + let input = css` + @tailwind components; + @tailwind utilities; + + @layer components { + .foo { + @screen md { + @apply text-black; + } + } + } + ` + + await expect(run(input, config)).rejects.toThrowError( + '@apply is not supported within nested at-rules like @screen' + ) +}) + +test('@apply error with nested @anyatrulehere', async () => { + let config = { + darkMode: 'class', + content: [path.resolve(__dirname, './apply.test.html')], + } + + let input = css` + @tailwind components; + @tailwind utilities; + + @layer components { + .foo { + @genie { + @apply text-black; + } + } + } + ` + + await expect(run(input, config)).rejects.toThrowError( + '@apply is not supported within nested at-rules like @genie' + ) +}) + +test('@apply error when using .group utility', async () => { + let config = { + darkMode: 'class', + content: [{ raw: '
' }], + } + + let input = css` + @tailwind components; + @tailwind utilities; + + @layer components { + .foo { + @apply group; + } + } + ` + + await expect(run(input, config)).rejects.toThrowError( + `@apply should not be used with the 'group' utility` + ) +}) + +test('@apply error when using a prefixed .group utility', async () => { + let config = { + prefix: 'tw-', + darkMode: 'class', + content: [{ raw: '
' }], + } + + let input = css` + @tailwind components; + @tailwind utilities; + + @layer components { + .foo { + @apply tw-group; + } + } + ` + + await expect(run(input, config)).rejects.toThrowError( + `@apply should not be used with the 'tw-group' utility` + ) +}) diff --git a/tests/jit/arbitrary-values.test.css b/tests/arbitrary-values.test.css similarity index 100% rename from tests/jit/arbitrary-values.test.css rename to tests/arbitrary-values.test.css diff --git a/tests/jit/arbitrary-values.test.html b/tests/arbitrary-values.test.html similarity index 100% rename from tests/jit/arbitrary-values.test.html rename to tests/arbitrary-values.test.html diff --git a/tests/jit/arbitrary-values.test.js b/tests/arbitrary-values.test.js similarity index 51% rename from tests/jit/arbitrary-values.test.js rename to tests/arbitrary-values.test.js index 15b053d62..e75d7f988 100644 --- a/tests/jit/arbitrary-values.test.js +++ b/tests/arbitrary-values.test.js @@ -1,25 +1,14 @@ -import postcss from 'postcss' import fs from 'fs' import path from 'path' -import tailwind from '../../src' -function run(input, config = {}) { - return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) }) -} +import { run } from './util/run' test('arbitrary values', () => { let config = { content: [path.resolve(__dirname, './arbitrary-values.test.html')], - corePlugins: { preflight: false }, - theme: {}, - plugins: [], } - let css = ` - @tailwind utilities; - ` - - return run(css, config).then((result) => { + return run('@tailwind utilities', config).then((result) => { let expectedPath = path.resolve(__dirname, './arbitrary-values.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') diff --git a/tests/jit/basic-usage.test.css b/tests/basic-usage.test.css similarity index 100% rename from tests/jit/basic-usage.test.css rename to tests/basic-usage.test.css diff --git a/tests/jit/basic-usage.test.html b/tests/basic-usage.test.html similarity index 100% rename from tests/jit/basic-usage.test.html rename to tests/basic-usage.test.html diff --git a/tests/jit/basic-usage.test.js b/tests/basic-usage.test.js similarity index 65% rename from tests/jit/basic-usage.test.js rename to tests/basic-usage.test.js index 2430b2d16..33adf24df 100644 --- a/tests/jit/basic-usage.test.js +++ b/tests/basic-usage.test.js @@ -1,24 +1,12 @@ -import postcss from 'postcss' import fs from 'fs' import path from 'path' -import tailwind from '../../src' -function run(input, config = {}) { - return postcss(tailwind(config)).process(input, { - from: path.resolve(__filename), - }) -} - -function css(templates) { - return templates.join('') -} +import { run, css } from './util/run' test('basic usage', () => { let config = { content: [path.resolve(__dirname, './basic-usage.test.html')], corePlugins: { preflight: false }, - theme: {}, - plugins: [], } let input = css` diff --git a/tests/jit/collapse-adjacent-rules.test.css b/tests/collapse-adjacent-rules.test.css similarity index 100% rename from tests/jit/collapse-adjacent-rules.test.css rename to tests/collapse-adjacent-rules.test.css diff --git a/tests/jit/collapse-adjacent-rules.test.html b/tests/collapse-adjacent-rules.test.html similarity index 100% rename from tests/jit/collapse-adjacent-rules.test.html rename to tests/collapse-adjacent-rules.test.html diff --git a/tests/collapse-adjacent-rules.test.js b/tests/collapse-adjacent-rules.test.js new file mode 100644 index 000000000..709f71269 --- /dev/null +++ b/tests/collapse-adjacent-rules.test.js @@ -0,0 +1,56 @@ +import fs from 'fs' +import path from 'path' + +import { run, css } from './util/run' + +test('collapse adjacent rules', () => { + let config = { + content: [path.resolve(__dirname, './collapse-adjacent-rules.test.html')], + corePlugins: { preflight: false }, + theme: {}, + plugins: [], + } + + let input = css` + @tailwind base; + @font-face { + font-family: 'Inter'; + src: url('/fonts/Inter.woff2') format('woff2'), url('/fonts/Inter.woff') format('woff'); + } + @font-face { + font-family: 'Gilroy'; + src: url('/fonts/Gilroy.woff2') format('woff2'), url('/fonts/Gilroy.woff') format('woff'); + } + @page { + margin: 1cm; + } + @tailwind components; + @tailwind utilities; + @layer base { + @font-face { + font-family: 'Poppins'; + src: url('/fonts/Poppins.woff2') format('woff2'), url('/fonts/Poppins.woff') format('woff'); + } + @font-face { + font-family: 'Proxima Nova'; + src: url('/fonts/ProximaNova.woff2') format('woff2'), + url('/fonts/ProximaNova.woff') format('woff'); + } + } + .foo, + .bar { + color: black; + } + .foo, + .bar { + font-weight: 700; + } + ` + + return run(input, config).then((result) => { + let expectedPath = path.resolve(__dirname, './collapse-adjacent-rules.test.css') + let expected = fs.readFileSync(expectedPath, 'utf8') + + expect(result.css).toMatchFormattedCss(expected) + }) +}) diff --git a/tests/jit/color-opacity-modifiers.test.js b/tests/color-opacity-modifiers.test.js similarity index 55% rename from tests/jit/color-opacity-modifiers.test.js rename to tests/color-opacity-modifiers.test.js index 2e716fb39..0f5b9438f 100644 --- a/tests/jit/color-opacity-modifiers.test.js +++ b/tests/color-opacity-modifiers.test.js @@ -1,30 +1,12 @@ -import postcss from 'postcss' -import path from 'path' -import tailwind from '../../src' - -function run(input, config = {}) { - const { currentTestName } = expect.getState() - - return postcss(tailwind(config)).process(input, { - from: `${path.resolve(__filename)}?test=${currentTestName}`, - }) -} +import { run, css, html } from './util/run' test('basic color opacity modifier', async () => { let config = { - content: [ - { - raw: '
', - }, - ], - theme: {}, - plugins: [], + content: [{ raw: html`
` }], } - let css = `@tailwind utilities` - - return run(css, config).then((result) => { - expect(result.css).toMatchFormattedCss(` + return run('@tailwind utilities', config).then((result) => { + expect(result.css).toMatchFormattedCss(css` .bg-red-500\\/50 { background-color: rgba(239, 68, 68, 0.5); } @@ -34,11 +16,7 @@ test('basic color opacity modifier', async () => { test('colors with slashes are matched first', async () => { let config = { - content: [ - { - raw: '
', - }, - ], + content: [{ raw: html`
` }], theme: { extend: { colors: { @@ -46,13 +24,10 @@ test('colors with slashes are matched first', async () => { }, }, }, - plugins: [], } - let css = `@tailwind utilities` - - return run(css, config).then((result) => { - expect(result.css).toMatchFormattedCss(` + return run('@tailwind utilities', config).then((result) => { + expect(result.css).toMatchFormattedCss(css` .bg-red-500\\/50 { --tw-bg-opacity: 1; background-color: rgba(255, 0, 0, var(--tw-bg-opacity)); @@ -63,19 +38,11 @@ test('colors with slashes are matched first', async () => { test('arbitrary color opacity modifier', async () => { let config = { - content: [ - { - raw: 'bg-red-500/[var(--opacity)]', - }, - ], - theme: {}, - plugins: [], + content: [{ raw: html`
` }], } - let css = `@tailwind utilities` - - return run(css, config).then((result) => { - expect(result.css).toMatchFormattedCss(` + return run('@tailwind utilities', config).then((result) => { + expect(result.css).toMatchFormattedCss(css` .bg-red-500\\/\\[var\\(--opacity\\)\\] { background-color: rgba(239, 68, 68, var(--opacity)); } @@ -85,29 +52,17 @@ test('arbitrary color opacity modifier', async () => { test('missing alpha generates nothing', async () => { let config = { - content: [ - { - raw: '
', - }, - ], - theme: {}, - plugins: [], + content: [{ raw: html`
` }], } - let css = `@tailwind utilities` - - return run(css, config).then((result) => { + return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(``) }) }) test('values not in the opacity config are ignored', async () => { let config = { - content: [ - { - raw: '
', - }, - ], + content: [{ raw: html`
` }], theme: { opacity: { 0: '0', @@ -117,23 +72,16 @@ test('values not in the opacity config are ignored', async () => { 100: '1', }, }, - plugins: [], } - let css = `@tailwind utilities` - - return run(css, config).then((result) => { + return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(``) }) }) test('function colors are supported', async () => { let config = { - content: [ - { - raw: '
', - }, - ], + content: [{ raw: html`
` }], theme: { colors: { blue: ({ opacityValue }) => { @@ -141,13 +89,10 @@ test('function colors are supported', async () => { }, }, }, - plugins: [], } - let css = `@tailwind utilities` - - return run(css, config).then((result) => { - expect(result.css).toMatchFormattedCss(` + return run('@tailwind utilities', config).then((result) => { + expect(result.css).toMatchFormattedCss(css` .bg-blue\\/50 { background-color: rgba(var(--colors-blue), 0.5); } @@ -159,7 +104,7 @@ test('utilities that support any type are supported', async () => { let config = { content: [ { - raw: ` + raw: html`
@@ -174,10 +119,8 @@ test('utilities that support any type are supported', async () => { plugins: [], } - let css = `@tailwind utilities` - - return run(css, config).then((result) => { - expect(result.css).toMatchFormattedCss(` + return run('@tailwind utilities', config).then((result) => { + expect(result.css).toMatchFormattedCss(css` .from-red-500\\/50 { --tw-gradient-from: rgba(239, 68, 68, 0.5); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 68, 68, 0)); diff --git a/tests/configurePlugins.test.js b/tests/configurePlugins.test.js index 03d9852a0..85828bf78 100644 --- a/tests/configurePlugins.test.js +++ b/tests/configurePlugins.test.js @@ -3,12 +3,7 @@ import configurePlugins from '../src/util/configurePlugins' test('setting a plugin to false removes it', () => { const plugins = ['fontSize', 'display', 'backgroundPosition'] - const configuredPlugins = configurePlugins( - { - display: false, - }, - plugins - ) + const configuredPlugins = configurePlugins({ display: false }, plugins) expect(configuredPlugins).toEqual(['fontSize', 'backgroundPosition']) }) diff --git a/tests/containerPlugin.test.js b/tests/containerPlugin.test.js index 4bb8615fb..f2d19ec1e 100644 --- a/tests/containerPlugin.test.js +++ b/tests/containerPlugin.test.js @@ -1,32 +1,9 @@ -import path from 'path' -import postcss from 'postcss' - -import tailwind from '../src' - -function run(input, config = {}) { - return postcss(tailwind(config)).process(input, { - from: path.resolve(__filename), - }) -} - -function css(templates) { - return templates.join('') -} - -function html(templates) { - return templates.join('') -} +import { run, html, css } from './util/run' test('options are not required', () => { - let config = { - content: [{ raw: html`
` }], - } + let config = { content: [{ raw: html`
` }] } - let content = css` - @tailwind components; - ` - - return run(content, config).then((result) => { + return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` .container { width: 100%; @@ -70,11 +47,7 @@ test('screens can be passed explicitly', () => { }, } - let content = css` - @tailwind components; - ` - - return run(content, config).then((result) => { + return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` .container { width: 100%; @@ -103,11 +76,7 @@ test('screens are ordered ascending by min-width', () => { }, } - let content = css` - @tailwind components; - ` - - return run(content, config).then((result) => { + return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` .container { width: 100%; @@ -140,11 +109,7 @@ test('screens are deduplicated by min-width', () => { }, } - let content = css` - @tailwind components; - ` - - return run(content, config).then((result) => { + return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` .container { width: 100%; @@ -173,11 +138,7 @@ test('the container can be centered by default', () => { }, } - let content = css` - @tailwind components; - ` - - return run(content, config).then((result) => { + return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` .container { width: 100%; @@ -223,11 +184,7 @@ test('horizontal padding can be included by default', () => { }, } - let content = css` - @tailwind components; - ` - - return run(content, config).then((result) => { + return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` .container { width: 100%; @@ -284,11 +241,7 @@ test('responsive horizontal padding can be included by default', () => { }, } - let content = css` - @tailwind components; - ` - - return run(content, config).then((result) => { + return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` .container { width: 100%; @@ -337,11 +290,7 @@ test('setting all options at once', () => { }, } - let content = css` - @tailwind components; - ` - - return run(content, config).then((result) => { + return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` .container { width: 100%; @@ -374,11 +323,7 @@ test('container can use variants', () => { }, } - let content = css` - @tailwind components; - ` - - return run(content, config).then((result) => { + return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` @media (min-width: 1024px) { .lg\\:hover\\:container:hover { diff --git a/tests/jit/context-reuse.test.html b/tests/context-reuse.test.html similarity index 100% rename from tests/jit/context-reuse.test.html rename to tests/context-reuse.test.html diff --git a/tests/jit/context-reuse.test.js b/tests/context-reuse.test.js similarity index 100% rename from tests/jit/context-reuse.test.js rename to tests/context-reuse.test.js diff --git a/tests/jit/context-reuse.worker.js b/tests/context-reuse.worker.js similarity index 100% rename from tests/jit/context-reuse.worker.js rename to tests/context-reuse.worker.js diff --git a/tests/jit/custom-extractors.test.css b/tests/custom-extractors.test.css similarity index 100% rename from tests/jit/custom-extractors.test.css rename to tests/custom-extractors.test.css diff --git a/tests/jit/custom-extractors.test.html b/tests/custom-extractors.test.html similarity index 100% rename from tests/jit/custom-extractors.test.html rename to tests/custom-extractors.test.html diff --git a/tests/jit/custom-extractors.test.js b/tests/custom-extractors.test.js similarity index 60% rename from tests/jit/custom-extractors.test.js rename to tests/custom-extractors.test.js index a24b7a258..042ff2787 100644 --- a/tests/jit/custom-extractors.test.js +++ b/tests/custom-extractors.test.js @@ -1,25 +1,15 @@ -import postcss from 'postcss' import fs from 'fs' import path from 'path' -function run(input, config = {}) { - jest.resetModules() - let tailwind = require('../../src') - return postcss(tailwind(config)).process(input, { - from: path.resolve(__filename), - }) -} +import { run } from './util/run' function customExtractor(content) { - const matches = content.match(/class="([^"]+)"/) + let matches = content.match(/class="([^"]+)"/) return matches ? matches[1].split(/\s+/) : [] } -const css = ` - @tailwind utilities; -` -const expectedPath = path.resolve(__dirname, './custom-extractors.test.css') -const expected = fs.readFileSync(expectedPath, 'utf8') +let expectedPath = path.resolve(__dirname, './custom-extractors.test.css') +let expected = fs.readFileSync(expectedPath, 'utf8') test('defaultExtractor', () => { let config = { @@ -29,12 +19,9 @@ test('defaultExtractor', () => { defaultExtractor: customExtractor, }, }, - corePlugins: { preflight: false }, - theme: {}, - plugins: [], } - return run(css, config).then((result) => { + return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(expected) }) }) @@ -52,12 +39,9 @@ test('extractors array', () => { ], }, }, - corePlugins: { preflight: false }, - theme: {}, - plugins: [], } - return run(css, config).then((result) => { + return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(expected) }) }) @@ -68,12 +52,9 @@ test('extract function', () => { content: [path.resolve(__dirname, './custom-extractors.test.html')], extract: customExtractor, }, - corePlugins: { preflight: false }, - theme: {}, - plugins: [], } - return run(css, config).then((result) => { + return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(expected) }) }) @@ -86,12 +67,9 @@ test('extract.DEFAULT', () => { DEFAULT: customExtractor, }, }, - corePlugins: { preflight: false }, - theme: {}, - plugins: [], } - return run(css, config).then((result) => { + return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(expected) }) }) @@ -104,12 +82,9 @@ test('extract.{extension}', () => { html: customExtractor, }, }, - corePlugins: { preflight: false }, - theme: {}, - plugins: [], } - return run(css, config).then((result) => { + return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(expected) }) }) diff --git a/tests/jit/custom-separator.test.css b/tests/custom-separator.test.css similarity index 100% rename from tests/jit/custom-separator.test.css rename to tests/custom-separator.test.css diff --git a/tests/jit/custom-separator.test.html b/tests/custom-separator.test.html similarity index 100% rename from tests/jit/custom-separator.test.html rename to tests/custom-separator.test.html diff --git a/tests/jit/custom-separator.test.js b/tests/custom-separator.test.js similarity index 60% rename from tests/jit/custom-separator.test.js rename to tests/custom-separator.test.js index 27138b911..1040f2afc 100644 --- a/tests/jit/custom-separator.test.js +++ b/tests/custom-separator.test.js @@ -1,27 +1,16 @@ -import postcss from 'postcss' import fs from 'fs' import path from 'path' -import tailwind from '../../src' -function run(input, config = {}) { - return postcss(tailwind(config)).process(input, { - from: path.resolve(__filename), - }) -} +import { run } from './util/run' test('custom separator', () => { let config = { darkMode: 'class', content: [path.resolve(__dirname, './custom-separator.test.html')], separator: '_', - corePlugins: {}, - theme: {}, - plugins: [], } - let css = `@tailwind utilities` - - return run(css, config).then((result) => { + return run('@tailwind utilities', config).then((result) => { let expectedPath = path.resolve(__dirname, './custom-separator.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') @@ -34,14 +23,9 @@ test('dash is not supported', () => { darkMode: 'class', content: [{ raw: 'lg-hover-font-bold' }], separator: '-', - corePlugins: {}, - theme: {}, - plugins: [], } - let css = `@tailwind utilities` - - return expect(run(css, config)).rejects.toThrowError( + return expect(run('@tailwind utilities', config)).rejects.toThrowError( "The '-' character cannot be used as a custom separator in JIT mode due to parsing ambiguity. Please use another character like '_' instead." ) }) diff --git a/tests/custom-transformers.test.js b/tests/custom-transformers.test.js new file mode 100644 index 000000000..9402dd300 --- /dev/null +++ b/tests/custom-transformers.test.js @@ -0,0 +1,66 @@ +import { run, html, css } from './util/run' + +function customTransformer(content) { + return content.replace(/uppercase/g, 'lowercase') +} + +test('transform function', () => { + let config = { + content: { + content: [{ raw: html`
` }], + transform: customTransformer, + }, + } + + return run('@tailwind utilities', config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + .lowercase { + text-transform: lowercase; + } + `) + }) +}) + +test('transform.DEFAULT', () => { + let config = { + content: { + content: [{ raw: html`
` }], + transform: { + DEFAULT: customTransformer, + }, + }, + } + + return run('@tailwind utilities', config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + .lowercase { + text-transform: lowercase; + } + `) + }) +}) + +test('transform.{extension}', () => { + let config = { + content: { + content: [ + { raw: html`
`, extension: 'html' }, + { raw: html`
`, extension: 'php' }, + ], + transform: { + html: customTransformer, + }, + }, + } + + return run('@tailwind utilities', config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + .uppercase { + text-transform: uppercase; + } + .lowercase { + text-transform: lowercase; + } + `) + }) +}) diff --git a/tests/customConfig.test.js b/tests/customConfig.test.js index 07031d553..23713a552 100644 --- a/tests/customConfig.test.js +++ b/tests/customConfig.test.js @@ -1,40 +1,14 @@ import fs from 'fs' import path from 'path' -import postcss from 'postcss' -import tailwind from '../src/index' import { cjsConfigFile, defaultConfigFile } from '../src/constants' import inTempDirectory from '../jest/runInTempDirectory' -// NOTE: If we ever want to abstract this logic, then we have to watch out -// because in most tests we default to an empty object here. However, in this -// tests we do want to check the difference between no config (undefined) and a -// config (empty object or full object). -function run(input, config /* Undefined is important in this case */) { - return postcss(tailwind(config)).process(input, { - from: path.resolve(__filename), - }) -} - -function css(templates) { - return templates.join('') -} - -function html(templates) { - return templates.join('') -} - -function javascript(templates) { - return templates.join('') -} +import { run, html, css, javascript } from './util/run' test('it uses the values from the custom config file', () => { let config = require(path.resolve(`${__dirname}/fixtures/custom-config.js`)) - let content = css` - @tailwind utilities; - ` - - return run(content, config).then((result) => { + return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` @media (min-width: 400px) { .mobile\\:font-bold { @@ -55,11 +29,7 @@ test('custom config can be passed as an object', () => { }, } - let content = css` - @tailwind utilities; - ` - - return run(content, config).then((result) => { + return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` @media (min-width: 400px) { .mobile\\:font-bold { @@ -75,11 +45,7 @@ test('custom config path can be passed using `config` property in an object', () config: path.resolve(`${__dirname}/fixtures/custom-config.js`), } - let content = css` - @tailwind utilities; - ` - - return run(content, config).then((result) => { + return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` @media (min-width: 400px) { .mobile\\:font-bold { @@ -102,11 +68,7 @@ test('custom config can be passed under the `config` property', () => { }, } - let content = css` - @tailwind utilities; - ` - - return run(content, config).then((result) => { + return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` @media (min-width: 400px) { .mobile\\:font-bold { @@ -131,11 +93,7 @@ test('tailwind.config.cjs is picked up by default', () => { }` ) - let content = css` - @tailwind utilities; - ` - - return run(content).then((result) => { + return run('@tailwind utilities').then((result) => { expect(result.css).toMatchFormattedCss(css` @media (min-width: 400px) { .mobile\\:font-bold { @@ -161,11 +119,7 @@ test('tailwind.config.js is picked up by default', () => { }` ) - let content = css` - @tailwind utilities; - ` - - return run(content).then((result) => { + return run('@tailwind utilities').then((result) => { expect(result.css).toMatchFormattedCss(css` @media (min-width: 400px) { .mobile\\:font-bold { @@ -191,11 +145,7 @@ test('tailwind.config.cjs is picked up by default when passing an empty object', }` ) - let content = css` - @tailwind utilities; - ` - - return run(content, {}).then((result) => { + return run('@tailwind utilities', {}).then((result) => { expect(result.css).toMatchFormattedCss(css` @media (min-width: 400px) { .mobile\\:font-bold { @@ -221,11 +171,7 @@ test('tailwind.config.js is picked up by default when passing an empty object', }` ) - let content = css` - @tailwind utilities; - ` - - return run(content, {}).then((result) => { + return run('@tailwind utilities', {}).then((result) => { expect(result.css).toMatchFormattedCss(css` @media (min-width: 400px) { .mobile\\:font-bold { @@ -252,11 +198,7 @@ test('the default config can be overridden using the presets key', () => { }, } - let content = css` - @tailwind utilities; - ` - - return run(content, config).then((result) => { + return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` .min-h-0 { min-height: 0px; @@ -286,11 +228,7 @@ test('presets can be functions', () => { }, } - let content = css` - @tailwind utilities; - ` - - return run(content, config).then((result) => { + return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` .min-h-0 { min-height: 0px; @@ -321,11 +259,7 @@ test('the default config can be removed by using an empty presets key in a prese }, } - let content = css` - @tailwind utilities; - ` - - return run(content, config).then((result) => { + return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` .min-h-primary { min-height: 48px; @@ -376,11 +310,7 @@ test('presets can have their own presets', () => { }, } - let content = css` - @tailwind utilities; - ` - - return run(content, config).then((result) => { + return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` .bg-transparent { background-color: transparent; @@ -437,11 +367,7 @@ test('function presets can be mixed with object presets', () => { }, } - let content = css` - @tailwind utilities; - ` - - return run(content, config).then((result) => { + return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` .bg-transparent { background-color: transparent; diff --git a/tests/jit/dark-mode.test.js b/tests/dark-mode.test.js similarity index 82% rename from tests/jit/dark-mode.test.js rename to tests/dark-mode.test.js index 9bbd003f3..1aab1c85c 100644 --- a/tests/jit/dark-mode.test.js +++ b/tests/dark-mode.test.js @@ -1,28 +1,10 @@ -import postcss from 'postcss' -import path from 'path' -import tailwind from '../../src' - -function run(input, config = {}) { - return postcss(tailwind(config)).process(input, { - from: path.resolve(__filename), - }) -} - -function css(templates) { - return templates.join('') -} - -function html(templates) { - return templates.join('') -} +import { run, html, css } from './util/run' it('should be possible to use the darkMode "class" mode', () => { let config = { darkMode: 'class', content: [{ raw: html`
` }], corePlugins: { preflight: false }, - theme: {}, - plugins: [], } let input = css` @@ -45,8 +27,6 @@ it('should be possible to use the darkMode "media" mode', () => { darkMode: 'media', content: [{ raw: html`
` }], corePlugins: { preflight: false }, - theme: {}, - plugins: [], } let input = css` @@ -70,8 +50,6 @@ it('should default to the `media` mode when no mode is provided', () => { let config = { content: [{ raw: html`
` }], corePlugins: { preflight: false }, - theme: {}, - plugins: [], } let input = css` @@ -96,8 +74,6 @@ it('should default to the `media` mode when mode is set to `false`', () => { darkMode: false, content: [{ raw: html`
` }], corePlugins: { preflight: false }, - theme: {}, - plugins: [], } let input = css` diff --git a/tests/extractor-edge-cases.test.js b/tests/extractor-edge-cases.test.js new file mode 100644 index 000000000..01f780166 --- /dev/null +++ b/tests/extractor-edge-cases.test.js @@ -0,0 +1,29 @@ +import { run, html, css } from './util/run' + +test('PHP arrays', async () => { + let config = { + content: [ + { raw: html`

">Hello world

` }, + ], + } + + return run('@tailwind utilities', config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + .max-w-\\[16rem\\] { + max-width: 16rem; + } + `) + }) +}) + +test('arbitrary values with quotes', async () => { + let config = { content: [{ raw: html`
` }] } + + return run('@tailwind utilities', config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + .content-\\[\\'hello\\]\\'\\] { + content: 'hello]'; + } + `) + }) +}) diff --git a/tests/jit/import-syntax.test.css b/tests/import-syntax.test.css similarity index 100% rename from tests/jit/import-syntax.test.css rename to tests/import-syntax.test.css diff --git a/tests/jit/import-syntax.test.html b/tests/import-syntax.test.html similarity index 100% rename from tests/jit/import-syntax.test.html rename to tests/import-syntax.test.html diff --git a/tests/jit/import-syntax.test.js b/tests/import-syntax.test.js similarity index 60% rename from tests/jit/import-syntax.test.js rename to tests/import-syntax.test.js index 04f375c8a..79aa8e2ed 100644 --- a/tests/jit/import-syntax.test.js +++ b/tests/import-syntax.test.js @@ -1,19 +1,12 @@ -import postcss from 'postcss' import fs from 'fs' import path from 'path' -import tailwind from '../../src' -function run(input, config = {}) { - return postcss(tailwind(config)).process(input, { - from: path.resolve(__filename), - }) -} +import { run, css } from './util/run' test('using @import instead of @tailwind', () => { let config = { content: [path.resolve(__dirname, './import-syntax.test.html')], corePlugins: { preflight: false }, - theme: {}, plugins: [ function ({ addBase }) { addBase({ @@ -25,13 +18,13 @@ test('using @import instead of @tailwind', () => { ], } - let css = ` - @import "tailwindcss/base"; - @import "tailwindcss/components"; - @import "tailwindcss/utilities"; + let input = css` + @import 'tailwindcss/base'; + @import 'tailwindcss/components'; + @import 'tailwindcss/utilities'; ` - return run(css, config).then((result) => { + return run(input, config).then((result) => { let expectedPath = path.resolve(__dirname, './import-syntax.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') diff --git a/tests/jit/important-boolean.test.css b/tests/important-boolean.test.css similarity index 100% rename from tests/jit/important-boolean.test.css rename to tests/important-boolean.test.css diff --git a/tests/jit/important-boolean.test.html b/tests/important-boolean.test.html similarity index 100% rename from tests/jit/important-boolean.test.html rename to tests/important-boolean.test.html diff --git a/tests/jit/important-boolean.test.js b/tests/important-boolean.test.js similarity index 83% rename from tests/jit/important-boolean.test.js rename to tests/important-boolean.test.js index e236bf575..20fc4d1ee 100644 --- a/tests/jit/important-boolean.test.js +++ b/tests/important-boolean.test.js @@ -1,13 +1,7 @@ -import postcss from 'postcss' import fs from 'fs' import path from 'path' -import tailwind from '../../src' -function run(input, config = {}) { - return postcss(tailwind(config)).process(input, { - from: path.resolve(__filename), - }) -} +import { run, css } from './util/run' test('important boolean', () => { let config = { @@ -15,7 +9,6 @@ test('important boolean', () => { darkMode: 'class', content: [path.resolve(__dirname, './important-boolean.test.html')], corePlugins: { preflight: false }, - theme: {}, plugins: [ function ({ addComponents, addUtilities }) { addComponents( @@ -49,7 +42,7 @@ test('important boolean', () => { ], } - let css = ` + let input = css` @tailwind base; @tailwind components; @layer components { @@ -63,7 +56,7 @@ test('important boolean', () => { @tailwind utilities; ` - return run(css, config).then((result) => { + return run(input, config).then((result) => { let expectedPath = path.resolve(__dirname, './important-boolean.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') diff --git a/tests/jit/important-modifier-prefix.test.css b/tests/important-modifier-prefix.test.css similarity index 100% rename from tests/jit/important-modifier-prefix.test.css rename to tests/important-modifier-prefix.test.css diff --git a/tests/jit/important-modifier-prefix.test.html b/tests/important-modifier-prefix.test.html similarity index 100% rename from tests/jit/important-modifier-prefix.test.html rename to tests/important-modifier-prefix.test.html diff --git a/tests/jit/important-modifier-prefix.test.js b/tests/important-modifier-prefix.test.js similarity index 67% rename from tests/jit/important-modifier-prefix.test.js rename to tests/important-modifier-prefix.test.js index 54c0ae55c..243aa2012 100644 --- a/tests/jit/important-modifier-prefix.test.js +++ b/tests/important-modifier-prefix.test.js @@ -1,13 +1,7 @@ -import postcss from 'postcss' import fs from 'fs' import path from 'path' -import tailwind from '../../src' -function run(input, config = {}) { - return postcss(tailwind(config)).process(input, { - from: path.resolve(__filename), - }) -} +import { run, css } from './util/run' test('important modifier with prefix', () => { let config = { @@ -16,17 +10,15 @@ test('important modifier with prefix', () => { darkMode: 'class', content: [path.resolve(__dirname, './important-modifier-prefix.test.html')], corePlugins: { preflight: false }, - theme: {}, - plugins: [], } - let css = ` + let input = css` @tailwind base; @tailwind components; @tailwind utilities; ` - return run(css, config).then((result) => { + return run(input, config).then((result) => { let expectedPath = path.resolve(__dirname, './important-modifier-prefix.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') diff --git a/tests/jit/important-modifier.test.css b/tests/important-modifier.test.css similarity index 100% rename from tests/jit/important-modifier.test.css rename to tests/important-modifier.test.css diff --git a/tests/jit/important-modifier.test.html b/tests/important-modifier.test.html similarity index 100% rename from tests/jit/important-modifier.test.html rename to tests/important-modifier.test.html diff --git a/tests/jit/important-modifier.test.js b/tests/important-modifier.test.js similarity index 65% rename from tests/jit/important-modifier.test.js rename to tests/important-modifier.test.js index 024a50e1f..c68c8dcd5 100644 --- a/tests/jit/important-modifier.test.js +++ b/tests/important-modifier.test.js @@ -1,13 +1,7 @@ -import postcss from 'postcss' import fs from 'fs' import path from 'path' -import tailwind from '../../src' -function run(input, config = {}) { - return postcss(tailwind(config)).process(input, { - from: path.resolve(__filename), - }) -} +import { run, css } from './util/run' test('important modifier', () => { let config = { @@ -15,17 +9,15 @@ test('important modifier', () => { darkMode: 'class', content: [path.resolve(__dirname, './important-modifier.test.html')], corePlugins: { preflight: false }, - theme: {}, - plugins: [], } - let css = ` + let input = css` @tailwind base; @tailwind components; @tailwind utilities; ` - return run(css, config).then((result) => { + return run(input, config).then((result) => { let expectedPath = path.resolve(__dirname, './important-modifier.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') diff --git a/tests/jit/important-selector.test.css b/tests/important-selector.test.css similarity index 100% rename from tests/jit/important-selector.test.css rename to tests/important-selector.test.css diff --git a/tests/jit/important-selector.test.html b/tests/important-selector.test.html similarity index 100% rename from tests/jit/important-selector.test.html rename to tests/important-selector.test.html diff --git a/tests/jit/important-selector.test.js b/tests/important-selector.test.js similarity index 83% rename from tests/jit/important-selector.test.js rename to tests/important-selector.test.js index 2a92a27b2..1da8064d8 100644 --- a/tests/jit/important-selector.test.js +++ b/tests/important-selector.test.js @@ -1,13 +1,7 @@ -import postcss from 'postcss' import fs from 'fs' import path from 'path' -import tailwind from '../../src' -function run(input, config = {}) { - return postcss(tailwind(config)).process(input, { - from: path.resolve(__filename), - }) -} +import { run, css } from './util/run' test('important selector', () => { let config = { @@ -15,7 +9,6 @@ test('important selector', () => { darkMode: 'class', content: [path.resolve(__dirname, './important-selector.test.html')], corePlugins: { preflight: false }, - theme: {}, plugins: [ function ({ addComponents, addUtilities }) { addComponents( @@ -49,7 +42,7 @@ test('important selector', () => { ], } - let css = ` + let input = css` @tailwind base; @tailwind components; @layer components { @@ -63,7 +56,7 @@ test('important selector', () => { @tailwind utilities; ` - return run(css, config).then((result) => { + return run(input, config).then((result) => { let expectedPath = path.resolve(__dirname, './important-selector.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') diff --git a/tests/jit/apply.test.js b/tests/jit/apply.test.js deleted file mode 100644 index 3dba79d3f..000000000 --- a/tests/jit/apply.test.js +++ /dev/null @@ -1,278 +0,0 @@ -import postcss from 'postcss' -import fs from 'fs' -import path from 'path' -import tailwind from '../../src' - -function run(input, config = {}) { - const { currentTestName } = expect.getState() - - return postcss(tailwind(config)).process(input, { - from: `${path.resolve(__filename)}?test=${currentTestName}`, - }) -} - -function css(templates) { - return templates.join('') -} - -test('@apply', () => { - let config = { - darkMode: 'class', - content: [path.resolve(__dirname, './apply.test.html')], - corePlugins: { preflight: false }, - theme: {}, - plugins: [], - } - - let css = ` - @tailwind components; - @tailwind utilities; - - @layer components { - .basic-example { - @apply px-4 py-2 bg-blue-500 rounded-md; - } - .class-order { - @apply pt-4 pr-1 px-3 py-7 p-8; - } - .with-additional-properties { - font-weight: 500; - @apply text-right; - } - .variants { - @apply xl:focus:font-black hover:font-bold lg:font-light focus:font-medium font-semibold; - } - .only-variants { - @apply xl:focus:font-black hover:font-bold lg:font-light focus:font-medium; - } - .apply-group-variant { - @apply group-hover:text-center lg:group-hover:text-left; - } - .apply-dark-variant { - @apply dark:text-center dark:hover:text-right lg:dark:text-left; - } - .apply-custom-utility { - @apply custom-util hover:custom-util lg:custom-util xl:focus:custom-util; - } - .multiple, .selectors { - @apply px-4 py-2 bg-blue-500 rounded-md; - } - .multiple-variants, .selectors-variants { - @apply hover:text-center active:text-right lg:focus:text-left; - } - .multiple-group, .selectors-group { - @apply group-hover:text-center lg:group-hover:text-left; - } - /* TODO: This works but the generated CSS is unnecessarily verbose. */ - .complex-utilities { - @apply ordinal tabular-nums focus:diagonal-fractions shadow-lg hover:shadow-xl; - } - .basic-nesting-parent { - .basic-nesting-child { - @apply font-bold hover:font-normal; - } - } - .use-base-only-a { - @apply font-bold; - } - .use-base-only-b { - @apply use-base-only-a font-normal; - } - .use-dependant-only-a { - @apply font-bold; - } - .use-dependant-only-b { - @apply use-dependant-only-a font-normal; - } - .btn { - @apply font-bold py-2 px-4 rounded; - } - .btn-blue { - @apply btn bg-blue-500 hover:bg-blue-700 text-white; - } - .recursive-apply-a { - @apply font-black sm:font-thin; - } - .recursive-apply-b { - @apply recursive-apply-a font-semibold md:font-extralight; - } - .recursive-apply-c { - @apply recursive-apply-b font-bold lg:font-light; - } - .use-with-other-properties-base { - color: green; - @apply font-bold; - } - .use-with-other-properties-component { - @apply use-with-other-properties-base; - } - .add-sibling-properties { - padding: 2rem; - @apply px-4 hover:px-2 lg:px-10 xl:focus:px-1; - padding-top: 3px; - @apply use-with-other-properties-base; - } - - h1 { - @apply text-2xl lg:text-2xl sm:text-3xl; - } - h2 { - @apply text-2xl; - @apply lg:text-2xl; - @apply sm:text-2xl; - } - - .important-modifier { - @apply px-4 !rounded-md; - } - - .important-modifier-variant { - @apply px-4 hover:!rounded-md; - } - } - - @layer utilities { - .custom-util { - custom: stuff; - } - - .foo { - @apply animate-spin; - } - - .bar { - @apply animate-pulse !important; - } - } -` - - return run(css, config).then((result) => { - let expectedPath = path.resolve(__dirname, './apply.test.css') - let expected = fs.readFileSync(expectedPath, 'utf8') - - expect(result.css).toMatchFormattedCss(expected) - }) -}) - -test('@apply error with unknown utility', async () => { - let config = { - darkMode: 'class', - content: [path.resolve(__dirname, './apply.test.html')], - corePlugins: { preflight: false }, - plugins: [], - } - - let css = ` - @tailwind components; - @tailwind utilities; - - @layer components { - .foo { - @apply a-utility-that-does-not-exist; - } - } -` - - await expect(run(css, config)).rejects.toThrowError('class does not exist') -}) - -test('@apply error with nested @screen', async () => { - let config = { - darkMode: 'class', - content: [path.resolve(__dirname, './apply.test.html')], - corePlugins: { preflight: false }, - plugins: [], - } - - let css = ` - @tailwind components; - @tailwind utilities; - - @layer components { - .foo { - @screen md { - @apply text-black; - } - } - } -` - - await expect(run(css, config)).rejects.toThrowError( - '@apply is not supported within nested at-rules like @screen' - ) -}) - -test('@apply error with nested @anyatrulehere', async () => { - let config = { - darkMode: 'class', - content: [path.resolve(__dirname, './apply.test.html')], - corePlugins: { preflight: false }, - plugins: [], - } - - let css = ` - @tailwind components; - @tailwind utilities; - - @layer components { - .foo { - @genie { - @apply text-black; - } - } - } - ` - - await expect(run(css, config)).rejects.toThrowError( - '@apply is not supported within nested at-rules like @genie' - ) -}) - -test('@apply error when using .group utility', async () => { - let config = { - darkMode: 'class', - content: [{ raw: '
' }], - corePlugins: { preflight: false }, - plugins: [], - } - - let input = css` - @tailwind components; - @tailwind utilities; - - @layer components { - .foo { - @apply group; - } - } - ` - - await expect(run(input, config)).rejects.toThrowError( - `@apply should not be used with the 'group' utility` - ) -}) - -test('@apply error when using a prefixed .group utility', async () => { - let config = { - prefix: 'tw-', - darkMode: 'class', - content: [{ raw: '
' }], - corePlugins: { preflight: false }, - plugins: [], - } - - let css = ` - @tailwind components; - @tailwind utilities; - - @layer components { - .foo { - @apply tw-group; - } - } - ` - - await expect(run(css, config)).rejects.toThrowError( - `@apply should not be used with the 'tw-group' utility` - ) -}) diff --git a/tests/jit/collapse-adjacent-rules.test.js b/tests/jit/collapse-adjacent-rules.test.js deleted file mode 100644 index 4608dca63..000000000 --- a/tests/jit/collapse-adjacent-rules.test.js +++ /dev/null @@ -1,64 +0,0 @@ -import postcss from 'postcss' -import fs from 'fs' -import path from 'path' -import tailwind from '../../src' - -function run(input, config = {}) { - return postcss(tailwind(config)).process(input, { - from: path.resolve(__filename), - }) -} - -test('collapse adjacent rules', () => { - let config = { - content: [path.resolve(__dirname, './collapse-adjacent-rules.test.html')], - corePlugins: { preflight: false }, - theme: {}, - plugins: [], - } - - let css = ` - @tailwind base; - @font-face { - font-family: "Inter"; - src: url("/fonts/Inter.woff2") format("woff2"), - url("/fonts/Inter.woff") format("woff"); - } - @font-face { - font-family: "Gilroy"; - src: url("/fonts/Gilroy.woff2") format("woff2"), - url("/fonts/Gilroy.woff") format("woff"); - } - @page { - margin: 1cm; - } - @tailwind components; - @tailwind utilities; - @layer base { - @font-face { - font-family: "Poppins"; - src: url("/fonts/Poppins.woff2") format("woff2"), - url("/fonts/Poppins.woff") format("woff"); - } - @font-face { - font-family: "Proxima Nova"; - src: url("/fonts/ProximaNova.woff2") format("woff2"), - url("/fonts/ProximaNova.woff") format("woff"); - } - } - .foo, .bar { - color: black; - } - .foo, - .bar { - font-weight: 700; - } - ` - - return run(css, config).then((result) => { - let expectedPath = path.resolve(__dirname, './collapse-adjacent-rules.test.css') - let expected = fs.readFileSync(expectedPath, 'utf8') - - expect(result.css).toMatchFormattedCss(expected) - }) -}) diff --git a/tests/jit/custom-transformers.test.js b/tests/jit/custom-transformers.test.js deleted file mode 100644 index d006e4750..000000000 --- a/tests/jit/custom-transformers.test.js +++ /dev/null @@ -1,85 +0,0 @@ -import postcss from 'postcss' -import path from 'path' - -function run(input, config = {}) { - jest.resetModules() - const tailwind = require('../../src') - return postcss(tailwind(config)).process(input, { - from: path.resolve(__filename), - }) -} - -function customTransformer(content) { - return content.replace(/uppercase/g, 'lowercase') -} - -const css = ` - @tailwind utilities; -` - -test('transform function', () => { - let config = { - content: { - content: [{ raw: '
' }], - transform: customTransformer, - }, - theme: {}, - plugins: [], - } - - return run(css, config).then((result) => { - expect(result.css).toMatchFormattedCss(` - .lowercase { - text-transform: lowercase; - } - `) - }) -}) - -test('transform.DEFAULT', () => { - let config = { - content: { - content: [{ raw: '
' }], - transform: { - DEFAULT: customTransformer, - }, - }, - theme: {}, - plugins: [], - } - - return run(css, config).then((result) => { - expect(result.css).toMatchFormattedCss(` - .lowercase { - text-transform: lowercase; - } - `) - }) -}) - -test('transform.{extension}', () => { - let config = { - content: { - content: [ - { raw: '
', extension: 'html' }, - { raw: '
', extension: 'php' }, - ], - transform: { - html: customTransformer, - }, - }, - theme: {}, - plugins: [], - } - - return run(css, config).then((result) => { - expect(result.css).toMatchFormattedCss(` - .uppercase { - text-transform: uppercase; - } - .lowercase { - text-transform: lowercase; - } - `) - }) -}) diff --git a/tests/jit/extractor-edge-cases.test.js b/tests/jit/extractor-edge-cases.test.js deleted file mode 100644 index ac1819802..000000000 --- a/tests/jit/extractor-edge-cases.test.js +++ /dev/null @@ -1,55 +0,0 @@ -import postcss from 'postcss' -import path from 'path' -import tailwind from '../../src' - -function run(input, config = {}) { - const { currentTestName } = expect.getState() - - return postcss(tailwind(config)).process(input, { - from: `${path.resolve(__filename)}?test=${currentTestName}`, - }) -} - -test('PHP arrays', async () => { - let config = { - content: [ - { - raw: `

">Hello world

`, - }, - ], - theme: {}, - plugins: [], - } - - let css = `@tailwind utilities` - - return run(css, config).then((result) => { - expect(result.css).toMatchFormattedCss(` - .max-w-\\[16rem\\] { - max-width: 16rem; - } - `) - }) -}) - -test('arbitrary values with quotes', async () => { - let config = { - content: [ - { - raw: `
`, - }, - ], - theme: {}, - plugins: [], - } - - let css = `@tailwind utilities` - - return run(css, config).then((result) => { - expect(result.css).toMatchFormattedCss(` - .content-\\[\\'hello\\]\\'\\] { - content: 'hello]'; - } - `) - }) -}) diff --git a/tests/jit/relative-purge-paths.test.js b/tests/jit/relative-purge-paths.test.js deleted file mode 100644 index 5bc32547b..000000000 --- a/tests/jit/relative-purge-paths.test.js +++ /dev/null @@ -1,36 +0,0 @@ -import postcss from 'postcss' -import path from 'path' -import tailwind from '../../src' - -function run(input, config = {}) { - return postcss(tailwind(config)).process(input, { - from: path.resolve(__filename), - }) -} - -function css(templates) { - return templates.join('') -} - -test('relative purge paths', () => { - let config = { - content: ['./tests/jit/relative-purge-paths.test.html'], - corePlugins: { preflight: false }, - theme: {}, - plugins: [], - } - - let input = css` - @tailwind base; - @tailwind components; - @tailwind utilities; - ` - - return run(input, config).then((result) => { - expect(result.css).toIncludeCss(css` - .font-bold { - font-weight: 700; - } - `) - }) -}) diff --git a/tests/jit/kitchen-sink.test.css b/tests/kitchen-sink.test.css similarity index 100% rename from tests/jit/kitchen-sink.test.css rename to tests/kitchen-sink.test.css diff --git a/tests/jit/kitchen-sink.test.html b/tests/kitchen-sink.test.html similarity index 100% rename from tests/jit/kitchen-sink.test.html rename to tests/kitchen-sink.test.html diff --git a/tests/jit/kitchen-sink.test.js b/tests/kitchen-sink.test.js similarity index 93% rename from tests/jit/kitchen-sink.test.js rename to tests/kitchen-sink.test.js index f9c26d83c..1c4d5ec05 100644 --- a/tests/jit/kitchen-sink.test.js +++ b/tests/kitchen-sink.test.js @@ -1,17 +1,7 @@ -import postcss from 'postcss' import fs from 'fs' import path from 'path' -import tailwind from '../../src' -function run(input, config = {}) { - return postcss(tailwind(config)).process(input, { - from: path.resolve(__filename), - }) -} - -function css(templates) { - return templates.join('') -} +import { run, css } from './util/run' test('it works', () => { let config = { diff --git a/tests/jit/layer-at-rules.test.js b/tests/layer-at-rules.test.js similarity index 74% rename from tests/jit/layer-at-rules.test.js rename to tests/layer-at-rules.test.js index 61216fe6f..ac89d1784 100644 --- a/tests/jit/layer-at-rules.test.js +++ b/tests/layer-at-rules.test.js @@ -1,20 +1,4 @@ -import postcss from 'postcss' -import path from 'path' -import tailwind from '../../src' - -function run(input, config = {}) { - return postcss(tailwind(config)).process(input, { - from: path.resolve(__filename), - }) -} - -function css(templates) { - return templates.join('') -} - -function html(templates) { - return templates.join('') -} +import { run, html, css } from './util/run' test('custom user-land utilities', () => { let config = { diff --git a/tests/jit/layer-without-tailwind.test.css b/tests/layer-without-tailwind.test.css similarity index 100% rename from tests/jit/layer-without-tailwind.test.css rename to tests/layer-without-tailwind.test.css diff --git a/tests/jit/layer-without-tailwind.test.html b/tests/layer-without-tailwind.test.html similarity index 100% rename from tests/jit/layer-without-tailwind.test.html rename to tests/layer-without-tailwind.test.html diff --git a/tests/jit/layer-without-tailwind.test.js b/tests/layer-without-tailwind.test.js similarity index 64% rename from tests/jit/layer-without-tailwind.test.js rename to tests/layer-without-tailwind.test.js index 6ac5e1e09..80aeb68b2 100644 --- a/tests/jit/layer-without-tailwind.test.js +++ b/tests/layer-without-tailwind.test.js @@ -1,23 +1,13 @@ -import postcss from 'postcss' import path from 'path' -import tailwind from '../../src' -function run(input, config = {}) { - const { currentTestName } = expect.getState() - - return postcss(tailwind(config)).process(input, { - from: `${path.resolve(__filename)}?test=${currentTestName}`, - }) -} +import { run, css } from './util/run' test('using @layer without @tailwind', async () => { let config = { content: [path.resolve(__dirname, './layer-without-tailwind.test.html')], - theme: {}, - plugins: [], } - let css = ` + let input = css` @layer components { .foo { color: black; @@ -25,7 +15,7 @@ test('using @layer without @tailwind', async () => { } ` - await expect(run(css, config)).rejects.toThrowError( + await expect(run(input, config)).rejects.toThrowError( '`@layer components` is used but no matching `@tailwind components` directive is present.' ) }) @@ -33,11 +23,9 @@ test('using @layer without @tailwind', async () => { test('using @responsive without @tailwind', async () => { let config = { content: [path.resolve(__dirname, './layer-without-tailwind.test.html')], - theme: {}, - plugins: [], } - let css = ` + let input = css` @responsive { .foo { color: black; @@ -45,7 +33,7 @@ test('using @responsive without @tailwind', async () => { } ` - await expect(run(css, config)).rejects.toThrowError( + await expect(run(input, config)).rejects.toThrowError( '`@responsive` is used but `@tailwind utilities` is missing.' ) }) @@ -53,11 +41,9 @@ test('using @responsive without @tailwind', async () => { test('using @variants without @tailwind', async () => { let config = { content: [path.resolve(__dirname, './layer-without-tailwind.test.html')], - theme: {}, - plugins: [], } - let css = ` + let input = css` @variants hover { .foo { color: black; @@ -65,7 +51,7 @@ test('using @variants without @tailwind', async () => { } ` - await expect(run(css, config)).rejects.toThrowError( + await expect(run(input, config)).rejects.toThrowError( '`@variants` is used but `@tailwind utilities` is missing.' ) }) @@ -73,11 +59,9 @@ test('using @variants without @tailwind', async () => { test('non-Tailwind @layer rules are okay', async () => { let config = { content: [path.resolve(__dirname, './layer-without-tailwind.test.html')], - theme: {}, - plugins: [], } - let css = ` + let input = css` @layer custom { .foo { color: black; @@ -85,8 +69,8 @@ test('non-Tailwind @layer rules are okay', async () => { } ` - return run(css, config).then((result) => { - expect(result.css).toMatchFormattedCss(` + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` @layer custom { .foo { color: black; diff --git a/tests/jit/modify-selectors.test.css b/tests/modify-selectors.test.css similarity index 100% rename from tests/jit/modify-selectors.test.css rename to tests/modify-selectors.test.css diff --git a/tests/jit/modify-selectors.test.html b/tests/modify-selectors.test.html similarity index 100% rename from tests/jit/modify-selectors.test.html rename to tests/modify-selectors.test.html diff --git a/tests/jit/modify-selectors.test.js b/tests/modify-selectors.test.js similarity index 82% rename from tests/jit/modify-selectors.test.js rename to tests/modify-selectors.test.js index c562495d7..a586415ef 100644 --- a/tests/jit/modify-selectors.test.js +++ b/tests/modify-selectors.test.js @@ -1,14 +1,8 @@ -import postcss from 'postcss' import fs from 'fs' import path from 'path' -import tailwind from '../../src' import selectorParser from 'postcss-selector-parser' -function run(input, config = {}) { - return postcss(tailwind(config)).process(input, { - from: path.resolve(__filename), - }) -} +import { run, css } from './util/run' test('modify selectors', () => { let config = { @@ -32,7 +26,7 @@ test('modify selectors', () => { ], } - let css = ` + let input = css` @tailwind components; @tailwind utilities; @@ -43,7 +37,7 @@ test('modify selectors', () => { } ` - return run(css, config).then((result) => { + return run(input, config).then((result) => { let expectedPath = path.resolve(__dirname, './modify-selectors.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') diff --git a/tests/jit/mutable.test.css b/tests/mutable.test.css similarity index 100% rename from tests/jit/mutable.test.css rename to tests/mutable.test.css diff --git a/tests/jit/mutable.test.html b/tests/mutable.test.html similarity index 100% rename from tests/jit/mutable.test.html rename to tests/mutable.test.html diff --git a/tests/jit/mutable.test.js b/tests/mutable.test.js similarity index 81% rename from tests/jit/mutable.test.js rename to tests/mutable.test.js index 1ced6f27e..931a7d37d 100644 --- a/tests/jit/mutable.test.js +++ b/tests/mutable.test.js @@ -1,7 +1,8 @@ import postcss from 'postcss' import fs from 'fs' import path from 'path' -import tailwind from '../../src' + +import { run } from './util/run' function pluginThatMutatesRules() { return (root) => { @@ -17,12 +18,6 @@ function pluginThatMutatesRules() { } } -function run(input, config = {}) { - return postcss(tailwind(config)).process(input, { - from: path.resolve(__filename), - }) -} - test.only('plugins mutating rules after tailwind doesnt break it', async () => { let config = { content: [path.resolve(__dirname, './mutable.test.html')], @@ -34,8 +29,6 @@ test.only('plugins mutating rules after tailwind doesnt break it', async () => { plugins: [], } - let css = `@tailwind utilities;` - function checkResult(result) { let expectedPath = path.resolve(__dirname, './mutable.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') @@ -44,7 +37,7 @@ test.only('plugins mutating rules after tailwind doesnt break it', async () => { } // Verify the first run produces the expected result - let firstRun = await run(css, config) + let firstRun = await run('@tailwind utilities', config) checkResult(firstRun) // Outside of the context of tailwind jit more postcss plugins may operate on the AST: @@ -54,6 +47,6 @@ test.only('plugins mutating rules after tailwind doesnt break it', async () => { }) // Verify subsequent runs don't produce mutated rules - let secondRun = await run(css, config) + let secondRun = await run('@tailwind utilities', config) checkResult(secondRun) }) diff --git a/tests/jit/opacity.test.css b/tests/opacity.test.css similarity index 100% rename from tests/jit/opacity.test.css rename to tests/opacity.test.css diff --git a/tests/jit/opacity.test.html b/tests/opacity.test.html similarity index 100% rename from tests/jit/opacity.test.html rename to tests/opacity.test.html diff --git a/tests/jit/opacity.test.js b/tests/opacity.test.js similarity index 63% rename from tests/jit/opacity.test.js rename to tests/opacity.test.js index 54b27c16f..9fde486bb 100644 --- a/tests/jit/opacity.test.js +++ b/tests/opacity.test.js @@ -1,11 +1,7 @@ -import postcss from 'postcss' import fs from 'fs' import path from 'path' -import tailwind from '../../src' -function run(input, config = {}) { - return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) }) -} +import { run } from './util/run' test('opacity', () => { let config = { @@ -18,15 +14,9 @@ test('opacity', () => { placeholderOpacity: false, textOpacity: false, }, - theme: {}, - plugins: [], } - let css = ` - @tailwind utilities; - ` - - return run(css, config).then((result) => { + return run('@tailwind utilities', config).then((result) => { let expectedPath = path.resolve(__dirname, './opacity.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') diff --git a/tests/jit/parallel-variants.test.js b/tests/parallel-variants.test.js similarity index 66% rename from tests/jit/parallel-variants.test.js rename to tests/parallel-variants.test.js index 7b291cda0..2f8004633 100644 --- a/tests/jit/parallel-variants.test.js +++ b/tests/parallel-variants.test.js @@ -1,24 +1,16 @@ -import postcss from 'postcss' -import path from 'path' -import tailwind from '../../src' -import { transformAllSelectors, updateAllClasses } from '../../src/util/pluginUtils.js' +import { transformAllSelectors, updateAllClasses } from '../src/util/pluginUtils.js' -function run(input, config = {}) { - const { currentTestName } = expect.getState() - - return postcss(tailwind(config)).process(input, { - from: `${path.resolve(__filename)}?test=${currentTestName}`, - }) -} +import { run, html, css } from './util/run' test('basic parallel variants', async () => { let config = { content: [ { - raw: '
', + raw: html`
`, }, ], - theme: {}, plugins: [ function test({ addVariant, config }) { addVariant('test', [ @@ -39,10 +31,8 @@ test('basic parallel variants', async () => { ], } - let css = `@tailwind utilities` - - return run(css, config).then((result) => { - expect(result.css).toMatchFormattedCss(` + return run('@tailwind utilities', config).then((result) => { + expect(result.css).toMatchFormattedCss(css` .font-normal { font-weight: 400; } diff --git a/tests/plugins/animation.test.js b/tests/plugins/animation.test.js deleted file mode 100644 index 565234852..000000000 --- a/tests/plugins/animation.test.js +++ /dev/null @@ -1,152 +0,0 @@ -import postcss from 'postcss' -import processPlugins from '../../src/util/processPlugins' -import plugin from '../../src/plugins/animation' - -function css(nodes) { - return postcss.root({ nodes }).toString() -} - -test('defining animation and keyframes', () => { - const config = { - theme: { - animation: { - none: 'none', - spin: 'spin 1s linear infinite', - ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite', - blink: 'blink 1s step-end infinite', - }, - keyframes: { - spin: { to: { transform: 'rotate(360deg)' } }, - ping: { '75%, 100%': { transform: 'scale(2)', opacity: '0' } }, - blink: { '50%': { transform: 'scale(2)' } }, - }, - }, - variants: { - animation: [], - }, - } - - const { utilities } = processPlugins([plugin()], config) - - expect(css(utilities)).toMatchCss(` - @layer utilities { - @variants { - @keyframes spin { - to { transform: rotate(360deg); } - } - } - } - - @layer utilities { - @variants { - @keyframes ping { - 75%, 100% { transform: scale(2); opacity: 0; } - } - } - } - - @layer utilities { - @variants { - @keyframes blink { - 50% { transform: scale(2); } - } - } - } - - @layer utilities { - @variants { - .animate-none { animation: none; } - .animate-spin { animation: spin 1s linear infinite; } - .animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } - .animate-blink { animation: blink 1s step-end infinite; } - } - } - `) -}) - -test('defining animation and keyframes with prefix', () => { - const config = { - prefix: 'tw-', - theme: { - animation: { - none: 'none', - spin: 'spin 1s linear infinite', - ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite', - }, - keyframes: { - spin: { to: { transform: 'rotate(360deg)' } }, - ping: { '75%, 100%': { transform: 'scale(2)', opacity: '0' } }, - }, - }, - variants: { - animation: [], - }, - } - - const { utilities } = processPlugins([plugin()], config) - - expect(css(utilities)).toMatchCss(` - @layer utilities { - @variants { - @keyframes tw-spin { - to { transform: rotate(360deg); } - } - } - } - - @layer utilities { - @variants { - @keyframes tw-ping { - 75%, 100% { transform: scale(2); opacity: 0; } - } - } - } - - @layer utilities { - @variants { - .tw-animate-none { animation: none; } - .tw-animate-spin { animation: tw-spin 1s linear infinite; } - .tw-animate-ping { animation: tw-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } - } - } - `) -}) - -test('defining animation and keyframes with prefix (skip undefined animations)', () => { - const config = { - prefix: 'tw-', - theme: { - animation: { - none: 'none', - spin: 'spin 1s linear infinite', - ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite', - }, - keyframes: { - spin: { to: { transform: 'rotate(360deg)' } }, - }, - }, - variants: { - animation: [], - }, - } - - const { utilities } = processPlugins([plugin()], config) - - expect(css(utilities)).toMatchCss(` - @layer utilities { - @variants { - @keyframes tw-spin { - to { transform: rotate(360deg); } - } - } - } - - @layer utilities { - @variants { - .tw-animate-none { animation: none; } - .tw-animate-spin { animation: tw-spin 1s linear infinite; } - .tw-animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } - } - } - `) -}) diff --git a/tests/plugins/fontSize.test.js b/tests/plugins/fontSize.test.js index 53f46c929..d772bd4e1 100644 --- a/tests/plugins/fontSize.test.js +++ b/tests/plugins/fontSize.test.js @@ -1,23 +1,7 @@ -import postcss from 'postcss' -import path from 'path' -import tailwind from '../../src/index.js' - -function run(input, config = {}) { - return postcss(tailwind(config)).process(input, { - from: path.resolve(__filename), - }) -} - -function css(templates) { - return templates.join('') -} - -function html(templates) { - return templates.join('') -} +import { run, html, css } from '../util/run' test('font-size utilities can include a default line-height', () => { - const config = { + let config = { content: [{ raw: html`
` }], theme: { fontSize: { @@ -26,10 +10,6 @@ test('font-size utilities can include a default line-height', () => { lg: ['20px', '28px'], }, }, - corePlugins: ['fontSize'], - variants: { - fontSize: [], - }, } return run('@tailwind utilities', config).then((result) => { @@ -50,7 +30,7 @@ test('font-size utilities can include a default line-height', () => { }) test('font-size utilities can include a default letter-spacing', () => { - const config = { + let config = { content: [{ raw: html`
` }], theme: { fontSize: { @@ -59,10 +39,6 @@ test('font-size utilities can include a default letter-spacing', () => { lg: ['20px', { letterSpacing: '-0.02em' }], }, }, - corePlugins: ['fontSize'], - variants: { - fontSize: [], - }, } return run('@tailwind utilities', config).then((result) => { @@ -83,7 +59,7 @@ test('font-size utilities can include a default letter-spacing', () => { }) test('font-size utilities can include a default line-height and letter-spacing', () => { - const config = { + let config = { content: [{ raw: html`
` }], theme: { fontSize: { @@ -92,10 +68,6 @@ test('font-size utilities can include a default line-height and letter-spacing', lg: ['20px', { lineHeight: '28px', letterSpacing: '-0.02em' }], }, }, - corePlugins: ['fontSize'], - variants: { - fontSize: [], - }, } return run('@tailwind utilities', config).then((result) => { diff --git a/tests/plugins/gradientColorStops.test.js b/tests/plugins/gradientColorStops.test.js index 46201cc0d..9047ff699 100644 --- a/tests/plugins/gradientColorStops.test.js +++ b/tests/plugins/gradientColorStops.test.js @@ -1,20 +1,4 @@ -import path from 'path' -import postcss from 'postcss' -import tailwind from '../../src/index' - -function run(input, config = {}) { - return postcss(tailwind(config)).process(input, { - from: path.resolve(__filename), - }) -} - -function css(templates) { - return templates.join('') -} - -function html(templates) { - return templates.join('') -} +import { run, html, css } from '../util/run' test('opacity variables are given to colors defined as closures', () => { let config = { @@ -44,14 +28,9 @@ test('opacity variables are given to colors defined as closures', () => { 50: '0.5', }, }, - plugins: [], } - let content = css` - @tailwind utilities; - ` - - return run(content, config).then((result) => { + return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` .from-primary { --tw-gradient-from: rgb(31, 31, 31); diff --git a/tests/jit/prefix.fn.test.css b/tests/prefix.fn.test.css similarity index 100% rename from tests/jit/prefix.fn.test.css rename to tests/prefix.fn.test.css diff --git a/tests/jit/prefix.fn.test.html b/tests/prefix.fn.test.html similarity index 100% rename from tests/jit/prefix.fn.test.html rename to tests/prefix.fn.test.html diff --git a/tests/jit/prefix.fn.test.js b/tests/prefix.fn.test.js similarity index 64% rename from tests/jit/prefix.fn.test.js rename to tests/prefix.fn.test.js index 8007bb9dd..419e4735e 100644 --- a/tests/jit/prefix.fn.test.js +++ b/tests/prefix.fn.test.js @@ -1,13 +1,7 @@ -import postcss from 'postcss' import fs from 'fs' import path from 'path' -import tailwind from '../../src' -function run(input, config = {}) { - return postcss(tailwind(config)).process(input, { - from: path.resolve(__filename), - }) -} +import { run } from './util/run' test('prefix fn', () => { let config = { @@ -20,14 +14,9 @@ test('prefix fn', () => { }, content: [path.resolve(__dirname, './prefix.fn.test.html')], corePlugins: { preflight: false }, - theme: {}, } - let css = ` - @tailwind utilities; - ` - - return run(css, config).then((result) => { + return run('@tailwind utilities', config).then((result) => { let expectedPath = path.resolve(__dirname, './prefix.fn.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') diff --git a/tests/jit/prefix.test.css b/tests/prefix.test.css similarity index 100% rename from tests/jit/prefix.test.css rename to tests/prefix.test.css diff --git a/tests/jit/prefix.test.html b/tests/prefix.test.html similarity index 100% rename from tests/jit/prefix.test.html rename to tests/prefix.test.html diff --git a/tests/jit/prefix.test.js b/tests/prefix.test.js similarity index 86% rename from tests/jit/prefix.test.js rename to tests/prefix.test.js index bb656c472..20fb279ad 100644 --- a/tests/jit/prefix.test.js +++ b/tests/prefix.test.js @@ -1,13 +1,7 @@ -import postcss from 'postcss' import fs from 'fs' import path from 'path' -import tailwind from '../../src' -function run(input, config = {}) { - return postcss(tailwind(config)).process(input, { - from: path.resolve(__filename), - }) -} +import { run, css } from './util/run' test('prefix', () => { let config = { @@ -56,7 +50,7 @@ test('prefix', () => { ], } - let css = ` + let input = css` @tailwind base; @tailwind components; @layer components { @@ -72,7 +66,7 @@ test('prefix', () => { } ` - return run(css, config).then((result) => { + return run(input, config).then((result) => { let expectedPath = path.resolve(__dirname, './prefix.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') diff --git a/tests/jit/raw-content.test.css b/tests/raw-content.test.css similarity index 100% rename from tests/jit/raw-content.test.css rename to tests/raw-content.test.css diff --git a/tests/jit/raw-content.test.html b/tests/raw-content.test.html similarity index 100% rename from tests/jit/raw-content.test.html rename to tests/raw-content.test.html diff --git a/tests/jit/raw-content.test.js b/tests/raw-content.test.js similarity index 64% rename from tests/jit/raw-content.test.js rename to tests/raw-content.test.js index 497532bdf..563d2b50c 100644 --- a/tests/jit/raw-content.test.js +++ b/tests/raw-content.test.js @@ -1,33 +1,23 @@ -import postcss from 'postcss' import fs from 'fs' import path from 'path' -beforeEach(() => { - jest.resetModules() -}) +import { run, css } from './util/run' -function run(tailwind, input, config = {}) { - return postcss(tailwind(config)).process(input, { - from: path.resolve(__filename), - }) -} +beforeEach(() => jest.resetModules()) test('raw content', () => { - let tailwind = require('../../src') - + let tailwind = require('../src') let config = { content: [{ raw: fs.readFileSync(path.resolve(__dirname, './raw-content.test.html'), 'utf8') }], corePlugins: { preflight: false }, - theme: {}, - plugins: [], } - let css = ` + let input = css` @tailwind components; @tailwind utilities; ` - return run(tailwind, css, config).then((result) => { + return run(input, config, tailwind).then((result) => { let expectedPath = path.resolve(__dirname, './raw-content.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') @@ -36,8 +26,7 @@ test('raw content', () => { }) test('raw content with extension', () => { - let tailwind = require('../../src') - + let tailwind = require('../src') let config = { content: { content: [ @@ -56,14 +45,10 @@ test('raw content with extension', () => { }, }, corePlugins: { preflight: false }, - theme: {}, - plugins: [], } - let css = `@tailwind utilities;` - - return run(tailwind, css, config).then((result) => { - expect(result.css).toMatchFormattedCss(` + return run('@tailwind utilities', config, tailwind).then((result) => { + expect(result.css).toMatchFormattedCss(css` .invisible { visibility: hidden; } diff --git a/tests/jit/relative-purge-paths.test.html b/tests/relative-purge-paths.test.html similarity index 100% rename from tests/jit/relative-purge-paths.test.html rename to tests/relative-purge-paths.test.html diff --git a/tests/relative-purge-paths.test.js b/tests/relative-purge-paths.test.js new file mode 100644 index 000000000..0e7e5feed --- /dev/null +++ b/tests/relative-purge-paths.test.js @@ -0,0 +1,22 @@ +import { run, css } from './util/run' + +test('relative purge paths', () => { + let config = { + content: ['./tests/relative-purge-paths.test.html'], + corePlugins: { preflight: false }, + } + + let input = css` + @tailwind base; + @tailwind components; + @tailwind utilities; + ` + + return run(input, config).then((result) => { + expect(result.css).toIncludeCss(css` + .font-bold { + font-weight: 700; + } + `) + }) +}) diff --git a/tests/jit/resolve-defaults-at-rules.test.js b/tests/resolve-defaults-at-rules.test.js similarity index 87% rename from tests/jit/resolve-defaults-at-rules.test.js rename to tests/resolve-defaults-at-rules.test.js index e4c9e197f..7d87d9297 100644 --- a/tests/jit/resolve-defaults-at-rules.test.js +++ b/tests/resolve-defaults-at-rules.test.js @@ -1,28 +1,8 @@ -import postcss from 'postcss' -import path from 'path' -import tailwind from '../../src' - -function run(input, config = {}) { - const { currentTestName } = expect.getState() - - return postcss(tailwind(config)).process(input, { - from: `${path.resolve(__filename)}?test=${currentTestName}`, - }) -} - -function css(templates) { - return templates.join('') -} +import { run, html, css } from './util/run' test('basic utilities', async () => { let config = { - content: [ - { - raw: '
', - }, - ], - theme: {}, - plugins: [], + content: [{ raw: html`
` }], corePlugins: ['transform', 'scale', 'rotate', 'skew'], } @@ -68,12 +48,8 @@ test('basic utilities', async () => { test('with pseudo-class variants', async () => { let config = { content: [ - { - raw: '
', - }, + { raw: html`
` }, ], - theme: {}, - plugins: [], corePlugins: ['transform', 'scale', 'rotate', 'skew'], } @@ -118,13 +94,7 @@ test('with pseudo-class variants', async () => { test('with pseudo-element variants', async () => { let config = { - content: [ - { - raw: '
', - }, - ], - theme: {}, - plugins: [], + content: [{ raw: html`
` }], corePlugins: ['transform', 'scale', 'rotate', 'skew'], } @@ -167,13 +137,7 @@ test('with pseudo-element variants', async () => { test('with multi-class variants', async () => { let config = { - content: [ - { - raw: '
', - }, - ], - theme: {}, - plugins: [], + content: [{ raw: html`
` }], corePlugins: ['transform', 'scale', 'rotate', 'skew'], } @@ -215,12 +179,8 @@ test('with multi-class variants', async () => { test('with multi-class pseudo-element variants', async () => { let config = { content: [ - { - raw: '
', - }, + { raw: html`
` }, ], - theme: {}, - plugins: [], corePlugins: ['transform', 'scale', 'rotate', 'skew'], } @@ -265,11 +225,11 @@ test('with multi-class pseudo-element and pseudo-class variants', async () => { let config = { content: [ { - raw: '
', + raw: html`
`, }, ], - theme: {}, - plugins: [], corePlugins: ['transform', 'scale', 'rotate', 'skew'], } @@ -312,13 +272,7 @@ test('with multi-class pseudo-element and pseudo-class variants', async () => { test('with apply', async () => { let config = { - content: [ - { - raw: '
', - }, - ], - theme: {}, - plugins: [], + content: [{ raw: html`
` }], corePlugins: ['transform', 'scale', 'rotate', 'skew'], } @@ -439,13 +393,7 @@ test('with apply', async () => { test('with borders', async () => { let config = { - content: [ - { - raw: '
', - }, - ], - theme: {}, - plugins: [], + content: [{ raw: html`
` }], corePlugins: ['borderWidth', 'borderColor', 'borderOpacity'], } @@ -482,13 +430,7 @@ test('with borders', async () => { test('with shadows', async () => { let config = { - content: [ - { - raw: '
', - }, - ], - theme: {}, - plugins: [], + content: [{ raw: html`
` }], corePlugins: ['boxShadow', 'ringColor', 'ringWidth'], } @@ -543,13 +485,7 @@ test('with shadows', async () => { test('when no utilities that need the defaults are used', async () => { let config = { - content: [ - { - raw: '
', - }, - ], - theme: {}, - plugins: [], + content: [{ raw: html`
` }], corePlugins: ['transform', 'scale', 'rotate', 'skew'], } @@ -568,13 +504,7 @@ test('when no utilities that need the defaults are used', async () => { test('when a utility uses defaults but they do not exist', async () => { let config = { - content: [ - { - raw: '
', - }, - ], - theme: {}, - plugins: [], + content: [{ raw: html`
` }], corePlugins: ['rotate'], } @@ -597,13 +527,7 @@ test('when a utility uses defaults but they do not exist', async () => { test('selectors are reduced to the lowest possible specificity', async () => { let config = { - content: [ - { - raw: '
', - }, - ], - theme: {}, - plugins: [], + content: [{ raw: html`
` }], corePlugins: [], } diff --git a/tests/jit/responsive-and-variants-atrules.test.css b/tests/responsive-and-variants-atrules.test.css similarity index 100% rename from tests/jit/responsive-and-variants-atrules.test.css rename to tests/responsive-and-variants-atrules.test.css diff --git a/tests/jit/responsive-and-variants-atrules.test.html b/tests/responsive-and-variants-atrules.test.html similarity index 100% rename from tests/jit/responsive-and-variants-atrules.test.html rename to tests/responsive-and-variants-atrules.test.html diff --git a/tests/jit/responsive-and-variants-atrules.test.js b/tests/responsive-and-variants-atrules.test.js similarity index 83% rename from tests/jit/responsive-and-variants-atrules.test.js rename to tests/responsive-and-variants-atrules.test.js index 59e88de7f..4bebc73fa 100644 --- a/tests/jit/responsive-and-variants-atrules.test.js +++ b/tests/responsive-and-variants-atrules.test.js @@ -1,23 +1,15 @@ -import postcss from 'postcss' import fs from 'fs' import path from 'path' -import tailwind from '../../src' -function run(input, config = {}) { - return postcss(tailwind(config)).process(input, { - from: path.resolve(__filename), - }) -} +import { run, css } from './util/run' test('responsive and variants atrules', () => { let config = { content: [path.resolve(__dirname, './responsive-and-variants-atrules.test.html')], corePlugins: { preflight: false }, - theme: {}, - plugins: [], } - let css = ` + let input = css` @tailwind components; @tailwind utilities; @@ -80,7 +72,7 @@ test('responsive and variants atrules', () => { } ` - return run(css, config).then((result) => { + return run(input, config).then((result) => { let expectedPath = path.resolve(__dirname, './responsive-and-variants-atrules.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') diff --git a/tests/jit/svelte-syntax.test.css b/tests/svelte-syntax.test.css similarity index 100% rename from tests/jit/svelte-syntax.test.css rename to tests/svelte-syntax.test.css diff --git a/tests/jit/svelte-syntax.test.js b/tests/svelte-syntax.test.js similarity index 65% rename from tests/jit/svelte-syntax.test.js rename to tests/svelte-syntax.test.js index 83f303cec..38bf51f69 100644 --- a/tests/jit/svelte-syntax.test.js +++ b/tests/svelte-syntax.test.js @@ -1,13 +1,7 @@ -import postcss from 'postcss' import fs from 'fs' import path from 'path' -import tailwind from '../../src' -function run(input, config = {}) { - return postcss(tailwind(config)).process(input, { - from: path.resolve(__filename), - }) -} +import { run, css } from './util/run' test('basic usage', () => { let config = { @@ -17,12 +11,12 @@ test('basic usage', () => { plugins: [], } - let css = ` + let input = css` @tailwind components; @tailwind utilities; ` - return run(css, config).then((result) => { + return run(input, config).then((result) => { let expectedPath = path.resolve(__dirname, './svelte-syntax.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') diff --git a/tests/jit/svelte-syntax.test.svelte b/tests/svelte-syntax.test.svelte similarity index 100% rename from tests/jit/svelte-syntax.test.svelte rename to tests/svelte-syntax.test.svelte diff --git a/tests/jit/tailwind-screens.test.js b/tests/tailwind-screens.test.js similarity index 55% rename from tests/jit/tailwind-screens.test.js rename to tests/tailwind-screens.test.js index 471b3ac28..b52edcad7 100644 --- a/tests/jit/tailwind-screens.test.js +++ b/tests/tailwind-screens.test.js @@ -1,27 +1,11 @@ -import postcss from 'postcss' -import path from 'path' -import tailwind from '../../src' - -function run(input, config = {}) { - const { currentTestName } = expect.getState() - - return postcss(tailwind(config)).process(input, { - from: `${path.resolve(__filename)}?test=${currentTestName}`, - }) -} +import { run, html, css } from './util/run' test('class variants are inserted at `@tailwind variants`', async () => { let config = { - content: [ - { - raw: `font-bold hover:font-bold md:font-bold`, - }, - ], - theme: {}, - plugins: [], + content: [{ raw: html`
` }], } - let css = ` + let input = css` @tailwind utilities; @tailwind variants; .foo { @@ -29,8 +13,8 @@ test('class variants are inserted at `@tailwind variants`', async () => { } ` - return run(css, config).then((result) => { - expect(result.css).toMatchFormattedCss(` + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` .font-bold { font-weight: 700; } @@ -51,16 +35,10 @@ test('class variants are inserted at `@tailwind variants`', async () => { test('`@tailwind screens` works as an alias for `@tailwind variants`', async () => { let config = { - content: [ - { - raw: `font-bold hover:font-bold md:font-bold`, - }, - ], - theme: {}, - plugins: [], + content: [{ raw: html`
` }], } - let css = ` + let input = css` @tailwind utilities; @tailwind screens; .foo { @@ -68,8 +46,8 @@ test('`@tailwind screens` works as an alias for `@tailwind variants`', async () } ` - return run(css, config).then((result) => { - expect(result.css).toMatchFormattedCss(` + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` .font-bold { font-weight: 700; } diff --git a/tests/util/invokePlugin.js b/tests/util/invokePlugin.js index 64af73757..c58d1f07d 100644 --- a/tests/util/invokePlugin.js +++ b/tests/util/invokePlugin.js @@ -1,5 +1,5 @@ import _ from 'lodash' -import escapeClassName from '../../src/util/escapeClassName' +import escapeClassName from '../src/util/escapeClassName' export default function (plugin, config) { const addedUtilities = [] diff --git a/tests/util/run.js b/tests/util/run.js new file mode 100644 index 000000000..71c7fc4fe --- /dev/null +++ b/tests/util/run.js @@ -0,0 +1,19 @@ +import path from 'path' +import postcss from 'postcss' +import tailwind from '../../src' + +export function run(input, config, plugin = tailwind) { + let { currentTestName } = expect.getState() + + return postcss(plugin(config)).process(input, { + from: `${path.resolve(__filename)}?test=${currentTestName}`, + }) +} + +function syntax(templates) { + return templates.join('') +} + +export let css = syntax +export let html = syntax +export let javascript = syntax diff --git a/tests/jit/variants.test.css b/tests/variants.test.css similarity index 100% rename from tests/jit/variants.test.css rename to tests/variants.test.css diff --git a/tests/jit/variants.test.html b/tests/variants.test.html similarity index 100% rename from tests/jit/variants.test.html rename to tests/variants.test.html diff --git a/tests/jit/variants.test.js b/tests/variants.test.js similarity index 78% rename from tests/jit/variants.test.js rename to tests/variants.test.js index 7272eafef..d6e8cea1e 100644 --- a/tests/jit/variants.test.js +++ b/tests/variants.test.js @@ -1,25 +1,13 @@ -import postcss from 'postcss' import fs from 'fs' import path from 'path' -import tailwind from '../../src' -function run(input, config = {}) { - return postcss(tailwind(config)).process(input, { - from: path.resolve(__filename), - }) -} - -function css(templates) { - return templates.join('') -} +import { run, css } from './util/run' test('variants', () => { let config = { darkMode: 'class', content: [path.resolve(__dirname, './variants.test.html')], corePlugins: { preflight: false }, - theme: {}, - plugins: [], } let input = css` @@ -40,8 +28,6 @@ test('stacked peer variants', async () => { let config = { content: [{ raw: 'peer-disabled:peer-focus:peer-hover:border-blue-500' }], corePlugins: { preflight: false }, - theme: {}, - plugins: [], } let input = css`