123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150 |
- import postcss from 'postcss'
- import { runWithSourceMaps as run, html, css, map } from './util/run'
- import { parseSourceMaps } from './util/source-maps'
- it('apply generates source maps', async () => {
- let config = {
- content: [
- {
- raw: html`
- <div class="with-declaration"></div>
- <div class="with-comment"></div>
- <div class="just-apply"></div>
- `,
- },
- ],
- corePlugins: { preflight: false },
- }
- let input = css`
- .with-declaration {
- background-color: red;
- @apply h-4 w-4 bg-green-500;
- }
- .with-comment {
- /* sourcemap will work here too */
- @apply h-4 w-4 bg-red-500;
- }
- .just-apply {
- @apply h-4 w-4 bg-black;
- }
- `
- let result = await run(input, config)
- let { sources, annotations } = parseSourceMaps(result)
- // All CSS generated by Tailwind CSS should be annotated with source maps
- // And always be able to point to the original source file
- expect(sources).not.toContain('<no source>')
- expect(sources.length).toBe(1)
- expect(annotations).toMatchSnapshot()
- })
- it('preflight + base have source maps', async () => {
- let config = {
- content: [],
- }
- let input = css`
- @tailwind base;
- `
- let result = await run(input, config)
- let { sources, annotations } = parseSourceMaps(result)
- // All CSS generated by Tailwind CSS should be annotated with source maps
- // And always be able to point to the original source file
- expect(sources).not.toContain('<no source>')
- expect(sources.length).toBe(1)
- expect(annotations).toMatchSnapshot()
- })
- it('utilities have source maps', async () => {
- let config = {
- content: [{ raw: `text-red-500` }],
- }
- let input = css`
- @tailwind utilities;
- `
- let result = await run(input, config)
- let { sources, annotations } = parseSourceMaps(result)
- // All CSS generated by Tailwind CSS should be annotated with source maps
- // And always be able to point to the original source file
- expect(sources).not.toContain('<no source>')
- expect(sources.length).toBe(1)
- expect(annotations).toStrictEqual(['2:4 -> 1:0', '2:4-23 -> 2:4-24', '2:4 -> 3:4', '2:23 -> 4:0'])
- })
- it('components have source maps', async () => {
- let config = {
- content: [{ raw: `container` }],
- }
- let input = css`
- @tailwind components;
- `
- let result = await run(input, config)
- let { sources, annotations } = parseSourceMaps(result)
- // All CSS generated by Tailwind CSS should be annotated with source maps
- // And always be able to point to the original source file
- expect(sources).not.toContain('<no source>')
- expect(sources.length).toBe(1)
- expect(annotations).toMatchSnapshot()
- })
- it('source maps for layer rules are not rewritten to point to @tailwind directives', async () => {
- let config = {
- content: [{ raw: `font-normal foo hover:foo` }],
- }
- let utilitiesFile = postcss.parse(
- css`
- @tailwind utilities;
- `,
- { from: 'components.css', map: { prev: map } }
- )
- let mainCssFile = postcss.parse(
- css`
- @layer utilities {
- .foo {
- background-color: red;
- }
- }
- `,
- { from: 'input.css', map: { prev: map } }
- )
- // Just pretend that there's an @import in `mainCssFile` that imports the nodes from `utilitiesFile`
- let input = postcss.root({
- nodes: [...utilitiesFile.nodes, ...mainCssFile.nodes],
- source: mainCssFile.source,
- })
- let result = await run(input, config)
- let { sources, annotations } = parseSourceMaps(result)
- // All CSS generated by Tailwind CSS should be annotated with source maps
- // And always be able to point to the original source file
- expect(sources).not.toContain('<no source>')
- // And we should see that the source map for the layer rule is not rewritten
- // to point to the @tailwind directive but instead points to the original
- expect(sources.length).toBe(2)
- expect(sources).toEqual(['components.css', 'input.css'])
- expect(annotations).toMatchSnapshot()
- })
|