tailwindcss/tests/custom-extractors.test.js
Robin Malfait d94541cbf3
Handle old to new config when normalizing the config (#5658)
* immediately take the `safelist` values into account

Currently we had to manually add them in the `setupTrackingContext`,
`setupWatchingContext` and the `cli`.

This was a bit cumbersome, because the `safelist` function (to resolve
regex patterns) was implemented on the context. This means that we had
to do something like this:

```js
let changedContent = []
let context = createContext(config, changedContent)
for (let content of context.safelist()) {
  changedContent.push(content)
}
```

This just feels wrong in general, so now it is handled internally for
you which means that we can't mess it up anymore in those 3 spots.

* drop the dot from the extension

Our transformers and extractors are implemented for `html` for example.
However the `path.extname()` returns `.html`.

This isn't an issue by default, but it could be for with custom
extractors / transformers.

* normalize the configuration

* make shared cache local per extractor

* ensure we always have an `extension`

Defaults to `html`

* splitup custom-extractors test

* update old config structure to new structure

* ensure we validate the "old" structure, and warn if invalid

* add tests with "old" config, to ensure it keeps working

* add missing `content` object

* inline unnecessary function abstraction
2021-10-01 12:56:54 +02:00

95 lines
2.2 KiB
JavaScript

import fs from 'fs'
import path from 'path'
import { run } from './util/run'
function customExtractor(content) {
let matches = content.match(/class="([^"]+)"/)
return matches ? matches[1].split(/\s+/) : []
}
let expectedPath = path.resolve(__dirname, './custom-extractors.test.css')
let expected = fs.readFileSync(expectedPath, 'utf8')
describe('modern', () => {
test('extract.DEFAULT', () => {
let config = {
content: {
files: [path.resolve(__dirname, './custom-extractors.test.html')],
extract: {
DEFAULT: customExtractor,
},
},
}
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(expected)
})
})
test('extract.{extension}', () => {
let config = {
content: {
files: [path.resolve(__dirname, './custom-extractors.test.html')],
extract: {
html: customExtractor,
},
},
}
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(expected)
})
})
test('extract function', () => {
let config = {
content: {
files: [path.resolve(__dirname, './custom-extractors.test.html')],
extract: customExtractor,
},
}
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(expected)
})
})
})
describe('legacy', () => {
test('defaultExtractor', () => {
let config = {
content: {
files: [path.resolve(__dirname, './custom-extractors.test.html')],
options: {
defaultExtractor: customExtractor,
},
},
}
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(expected)
})
})
test('extractors array', () => {
let config = {
content: {
files: [path.resolve(__dirname, './custom-extractors.test.html')],
options: {
extractors: [
{
extractor: customExtractor,
extensions: ['html'],
},
],
},
},
}
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(expected)
})
})
})