test: transform vanilla-extract for jest (#6425)

* fix: transform vanilla extract for jest

* lint: vanilla transform

* build: deduplicate

* test: improve transformIgnorePatterns

* fix: broken snapshot

* nits

* Update craco.config.cjs

* build: lockfile

* build: lockfile

* Update vanilla.transform.cjs

craco.config.cjs

@@ -55,6 +55,10 @@ module.exports = {
   jest: {
     configure(jestConfig) {
       return Object.assign(jestConfig, {
+        transform: {
+          '\\.css\\.ts$': './vanilla.transform.cjs',
+          ...jestConfig.transform,
+        },
         cacheDirectory: 'node_modules/.cache/jest',
         transformIgnorePatterns: ['@uniswap/conedison/format', '@uniswap/conedison/provider'],
         moduleNameMapper: {

package.json

@@ -100,6 +100,7 @@
     "@types/wcag-contrast": "^3.0.0",
     "@uniswap/eslint-config": "^1.1.1",
     "@vanilla-extract/babel-plugin": "^1.1.7",
+    "@vanilla-extract/jest-transform": "^1.1.1",
     "@vanilla-extract/webpack-plugin": "^2.1.11",
     "babel-plugin-istanbul": "^6.1.1",
     "cypress": "10.3.1",

vanilla.transform.cjs

+/* eslint-env node */
+/**
+ * @file Re-exports the vanilla-extract jest transform, so that jest can properly transform .css.ts files.
+ * `@vanilla-extract/jest-transform` incorrectly maps its default export, so that `import *` does not work; and expects
+ * the wrong shape for options, so it must be re-exported to be correctly used as a jest transform.
+ */
+
+const { default: transform } = require('@vanilla-extract/jest-transform')
+module.exports = {
+  process: (source, filePath, options) =>
+    transform.process(source, filePath, { config: options, supportsStaticESM: false }),
+}