f49b054b7d
* run PostCSS relative to test file The PostCSS `from` was always set to the `tests/util/run` file with the current test name as a query param to make it unique. However, that results in issues with relative file paths because they are now relative to this file instead of the actual test file. Luckily, `expect.getState()` exposes the `testPath` value that points to the current test file itself. * add built in `@import` processing + additional features such that you can use `@tailwind` and `@config` directives before the `@import` at rule which isn't normally allowed. However "@tailwind" in a way is an `@import` and `@config` in a way is a `@charset` which can be used before the `@import` at rule. * drop partial normalizeTailwindDirectives when in the Oxide engine This will now be handled by Tailwind from a higher level, so the core doesn't have to worry about normalizing this anymore since it will always be normalized right now. * add `handleImportAtRules` to CLI * update changelog * scope `import processing` to the oxide engine * update Changelog * use direct comparison We don't need the `startsWith` check anymore because the contents of the comment will be the actual value we expect.
79 lines
1.8 KiB
JavaScript
79 lines
1.8 KiB
JavaScript
import { html, css, run, crosscheck } from './util/run'
|
|
|
|
crosscheck(({ oxide, stable }) => {
|
|
stable.test.todo('Import processing is an oxide engine feature')
|
|
oxide.describe('import processing', () => {
|
|
it('should be possible to import another css file', async () => {
|
|
let config = {
|
|
darkMode: 'class',
|
|
content: [
|
|
{
|
|
raw: html`<div class="underline" />`,
|
|
},
|
|
],
|
|
corePlugins: { preflight: false },
|
|
}
|
|
|
|
let input = css`
|
|
@import './import-processing-a.css';
|
|
`
|
|
|
|
let result = await run(input, config)
|
|
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.underline {
|
|
text-decoration-line: underline;
|
|
}
|
|
`)
|
|
})
|
|
|
|
it('should be possible to import another css file after @tailwind directive', async () => {
|
|
let config = {
|
|
darkMode: 'class',
|
|
content: [
|
|
{
|
|
raw: html`<div class="foo underline" />`,
|
|
},
|
|
],
|
|
corePlugins: { preflight: false },
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind utilities;
|
|
|
|
@import './import-processing-b.css';
|
|
`
|
|
|
|
let result = await run(input, config)
|
|
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.underline {
|
|
text-decoration-line: underline;
|
|
}
|
|
|
|
.foo {
|
|
color: red;
|
|
}
|
|
`)
|
|
})
|
|
|
|
it('should be possible to add @config before @import statements', async () => {
|
|
let input = css`
|
|
@config "./import-processing-c.js";
|
|
@import './import-processing-c.css';
|
|
`
|
|
|
|
let result = await run(input)
|
|
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.underline {
|
|
text-decoration-line: underline;
|
|
}
|
|
|
|
.foo {
|
|
color: red;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
})
|