Support PostCSS

[nvh95]

Is your feature request related to a problem? Please describe.

Now, jest-preview is currently supporting TailwindCSS (#100). It does use postcss but only for tailwindcss

jest-preview/src/transform.ts

Lines 251 to 261 in b0b598d

	const postcss = require("postcss");
	const cssSrc = ${JSON.stringify(src)};
	postcss([require("tailwindcss")(), require("autoprefixer")()])
	.process(cssSrc, { from: ${JSON.stringify(filename)} })
	.then((result) => {
	const style = document.createElement("style");
	style.type = "text/css";
	style.appendChild(document.createTextNode(result.css.replace(/\\\\/g, '')));
	document.head.appendChild(style);
	});
	`,

By supporting PostCSS natively, it can solve a number of issues

• Tailwind CSS doesn't get compiled in @import'ed files #230
• Possible @media doesn't seem to compile with css / scss modules + more #235 (need reproduction from issue author)
• Most importantly, a project with PostCSS a can run seamlessly with jest-preview

Describe the solution you'd like

Current logic

• If a file has TailwindCSS syntax => process it with PostCSS (with tailwindcss plugins).

Desured logic

• Detect if a project uses PostCSS => process with PostCSS and corresponding configuration.

Describe how should jest-preview implements this feature

1. To detect if a project uses PostCSS, we can use postcss-load-config

• Note that postcss-load-config does not run in browser context: 🧪 Support Tailwindcss #127 (comment)
• postcss-load-config default run in async mode. However, it has to run in SYNC mode (in Jest Code Transformation), we have 2 options:
  • (Prefered) Use .sync: postcssrc.sync (Example of how to return styles as variable/value rather than write to file? postcss/postcss-load-config#194 (comment))
  • Spawn a node process to make an async task becomes SYNC: https://twitter.com/kentcdodds/status/1043194634338324480

2. Process CSS file with above config

The pseudocode will look like this:

// src/transform.ts
export function processCss(src: string, filename: string) {
  // Pre-process file with Sass/ Less/ Stylus
  ...
  // Check if project use PostCSS
  const { plugins, options } = postcssrc.sync(ctx)
  const { css } = postcss(plugins).process(src, options)
  injectToHead(css)

  // Else, likely raw CSS, just inject to head directly
  injectToHead(src)
}

Describe alternatives you've considered

None

Additional context

Will provide if there any in the future

[nvh95]

Implemented in #241