Support CSS Modules through jestPreviewConfigure, externalCss option

[nvh95]

Is your feature request related to a problem? Please describe.
#40 supports CSS Modules through Code transformation. However, if users have some CSS Modules files and want to configure them through jestPreviewConfigure, it is not possible.

Describe the solution you'd like
Support CSS Modules though jestPreviewConfigure, externalCss option

Describe how should jest-preview implements this feature
Apply logic to transform CSS Modules from processCSSModules (

jest-preview/src/transform.ts

Lines 89 to 120 in 4761899

	function processCSSModules(src: string, filename: string): string {
	return `const postcss = require('postcss');
	const PostcssModulesPlugin = require('postcss-modules');
	const cssSrc = ${JSON.stringify(src)};
	class Token {
	set(json) {
	Object.keys(json).forEach((key) => {
	this[key] = json[key];
	});
	}
	}
	const exportedTokens = new Token();
	postcss(
	PostcssModulesPlugin({
	getJSON: (cssFileName, json, outputFileName) => {
	exportedTokens.set(json);
	},
	}),
	)
	.process(cssSrc, { from: ${JSON.stringify(filename)} })
	.then((result) => {
	const style = document.createElement('style');
	style.type = 'text/css';
	style.appendChild(document.createTextNode(result.css));
	document.body.appendChild(style);
	});
	module.exports = exportedTokens;`;
	}

) to jestPreviewConfigure.

Since the logic to transform code and process externalCss are similar (Sass, CSS Modules). Can we extract to reuse the logic? (Likely Sass can, not sure if it's possible with CSS Modules)

[nvh95]

Sass support already did this via #52

jest-preview/src/configure.ts

Lines 32 to 52 in baab8a5

	if (cssFile.endsWith('.scss') || cssFile.endsWith('.sass')) {
	const cssDestinationFile = destinationFile.replace(
	/\.(scss|sass)$/,
	'.css',
	);
	// Transform sass to css and save to cache folder
	// We use exec instead of sass.compile because running sass.compile in jsdom environment cause unexpected behavior
	// What we encountered is that filename is automatically added `http://localhost` as the prefix
	// Example: style.scss => http://localhost/style.scss
	// As a result, sass.compile cannot find the file
	exec(
	`./node_modules/.bin/sass ${cssFile} ${cssDestinationFile} --no-source-map`,
	(err: any) => {
	if (err) {
	console.log(err);
	}
	},
	);
	return;
	}

[nvh95]

We can close this once #124 is closed

[nvh95]

We can import CSS Modules directly

// src/setupTest.js
import './global.module.css';

Reference: #132