import files in .css.ts files

[0xDing]

In monorepo, there may be a requirement to import an unbundled packages in .css.ts file. And, if the imported package contains files that jsx, tsx or other vanilla-extract's esbuild cannot handle file, an Internal server error: Unexpected token '<' error occurs. Here are some solutions to this issue for reference:

/**
 * ESBuild plugin to ignore non-style imports in vanilla-extract's .css.ts files
 */
const ignoreNonStyleImportsPlugin = {
  name: 'ignore-non-style-imports',
  setup(build) {
    build.onLoad({ filter: /\.(tsx|jsx|mp4)/ }, async (_args) => ({
      contents: '{}',
      loader: 'json'
    }))
  }
}

// vite.config.js
...
vanillaExtractPlugin({
      identifiers: 'debug',
      esbuildOptions: {
        plugins: [ignoreNonStyleImportsPlugin]
      }
    })
...

Related Issue:
#665