Skip to content

Commit

Permalink
Try resolving config.default before config to ensure the config f…
Browse files Browse the repository at this point in the history 
…ile is resolved correctly (#10898)

* try to use `config.default` before using `config`

* update changelog

* add quick `SHOW_OUTPUT` toggle for integration tests

Setting this to `true` shows the output of the executed commands.

* add integration tests for `tailwind.config.ts` and `tailwind.config.js` with ESM syntax
  • Loading branch information
@RobinMalfait
RobinMalfait committed Mar 29, 2023
1 parent d9fa2c1 commit a9149e4
Show file tree
Hide file tree
Showing 9 changed files with 719 additions and 18 deletions.
4 changes: 3 additions & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

## [Unreleased]

- Nothing yet!
### Fixed

- Try resolving `config.default` before `config` to ensure the config file is resolved correctly ([#10898](https://github.com/tailwindlabs/tailwindcss/pull/10898))

## [3.3.0] - 2023-03-27

Expand Down
8 changes: 8 additions & 0 deletions integrations/execute.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ let path = require('path')
let { spawn } = require('child_process')
let resolveToolRoot = require('./resolve-tool-root')

let SHOW_OUTPUT = false

let runningProcessess = []

afterEach(() => {
Expand Down Expand Up @@ -92,13 +94,19 @@ module.exports = function $(command, options = {}) {
let combined = ''

child.stdout.on('data', (data) => {
if (SHOW_OUTPUT) {
console.log(data.toString())
}
stdoutMessages.push(data.toString())
notifyNextStdoutActor()
stdout += data
combined += data
})

child.stderr.on('data', (data) => {
if (SHOW_OUTPUT) {
console.error(data.toString())
}
stderrMessages.push(data.toString())
notifyNextStderrActor()
stderr += data
Expand Down
133 changes: 130 additions & 3 deletions integrations/parcel/tests/integration.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@ let { css, html, javascript } = require('../../syntax')
let { env } = require('../../../lib/lib/sharedState')

let {
readOutputFile,
appendToInputFile,
writeInputFile,
waitForOutputFileCreation,
readOutputFile,
removeFile,
waitForOutputFileChange,
waitForOutputFileCreation,
writeInputFile,
} = require('../../io')({ output: 'dist', input: 'src' })

describe('static build', () => {
Expand All @@ -32,6 +33,132 @@ describe('static build', () => {
`
)
})

it('can use a tailwind.config.js configuration file with ESM syntax', async () => {
await removeFile('tailwind.config.js')
await writeInputFile(
'index.html',
html`
<link rel="stylesheet" href="./index.css" />
<div class="bg-primary"></div>
`
)
await writeInputFile(
'index.css',
css`
@tailwind base;
@tailwind components;
@tailwind utilities;
`
)
await writeInputFile(
'../tailwind.config.js',
javascript`
export default {
content: ['./src/index.html'],
theme: {
extend: {
colors: {
primary: 'black',
},
},
},
corePlugins: {
preflight: false,
},
}
`
)

await $('parcel build ./src/index.html --no-cache', {
env: { NODE_ENV: 'production' },
})

if (!env.OXIDE) {
expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(
css`
.bg-primary {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
`
)
}

if (env.OXIDE) {
expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(
css`
.bg-primary {
background-color: black;
}
`
)
}
})

it('can use a tailwind.config.ts configuration file', async () => {
await removeFile('tailwind.config.js')
await writeInputFile(
'index.html',
html`
<link rel="stylesheet" href="./index.css" />
<div class="bg-primary"></div>
`
)
await writeInputFile(
'index.css',
css`
@tailwind base;
@tailwind components;
@tailwind utilities;
`
)
await writeInputFile(
'../tailwind.config.ts',
javascript`
import type { Config } from 'tailwindcss'
export default {
content: ['./src/index.html'],
theme: {
extend: {
colors: {
primary: 'black',
},
},
},
corePlugins: {
preflight: false,
},
} satisfies Config
`
)

await $('parcel build ./src/index.html --no-cache', {
env: { NODE_ENV: 'production' },
})

if (!env.OXIDE) {
expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(
css`
.bg-primary {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
`
)
}

if (env.OXIDE) {
expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(
css`
.bg-primary {
background-color: black;
}
`
)
}
})
})

describe('watcher', () => {
Expand Down
116 changes: 115 additions & 1 deletion integrations/rollup/tests/integration.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ let $ = require('../../execute')
let { css, html, javascript } = require('../../syntax')
let { env } = require('../../../lib/lib/sharedState')

let { readOutputFile, appendToInputFile, writeInputFile } = require('../../io')({
let { readOutputFile, appendToInputFile, writeInputFile, removeFile } = require('../../io')({
output: 'dist',
input: 'src',
})
Expand All @@ -27,6 +27,120 @@ describe('static build', () => {
`
)
})

it('can use a tailwind.config.js configuration file with ESM syntax', async () => {
await removeFile('tailwind.config.js')
await writeInputFile('index.html', html`<div class="bg-primary"></div>`)
await writeInputFile(
'index.css',
css`
@tailwind base;
@tailwind components;
@tailwind utilities;
`
)
await writeInputFile(
'../tailwind.config.js',
javascript`
export default {
content: ['./src/index.html'],
theme: {
extend: {
colors: {
primary: 'black',
},
},
},
corePlugins: {
preflight: false,
},
}
`
)

await $('rollup -c', {
env: { NODE_ENV: 'production' },
})

if (!env.OXIDE) {
expect(await readOutputFile('index.css')).toIncludeCss(
css`
.bg-primary {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
`
)
}

if (env.OXIDE) {
expect(await readOutputFile('index.css')).toIncludeCss(
css`
.bg-primary {
background-color: black;
}
`
)
}
})

it('can use a tailwind.config.ts configuration file', async () => {
await removeFile('tailwind.config.js')
await writeInputFile('index.html', html`<div class="bg-primary"></div>`)
await writeInputFile(
'index.css',
css`
@tailwind base;
@tailwind components;
@tailwind utilities;
`
)
await writeInputFile(
'../tailwind.config.ts',
javascript`
import type { Config } from 'tailwindcss'
export default {
content: ['./src/index.html'],
theme: {
extend: {
colors: {
primary: 'black',
},
},
},
corePlugins: {
preflight: false,
},
} satisfies Config
`
)

await $('rollup -c', {
env: { NODE_ENV: 'production' },
})

if (!env.OXIDE) {
expect(await readOutputFile('index.css')).toIncludeCss(
css`
.bg-primary {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
`
)
}

if (env.OXIDE) {
expect(await readOutputFile('index.css')).toIncludeCss(
css`
.bg-primary {
background-color: black;
}
`
)
}
})
})

describe('watcher', () => {
Expand Down
Loading

0 comments on commit a9149e4

Please sign in to comment.