Importing into a .css.ts file breaks style (SWC)

[JesseHGerard]

Has anyone run into this issue?

Vanilla extract works well as long as I don't import anything besides @vanilla-extract/css.

If I import and use anything from a module, the style is not included in .css bundle. I can tell the style code is running and the imported variable can be read because I can log it in the dev server terminal.

// foo.ts
export const foo = 'bar';

// workingStyle.style.ts
import { style } from '@vanilla-extract/css';

export const workingStyle = style({backgroundColor: 'pink'});

// notWorkingStyle.style.ts
import { style } from '@vanilla-extract/css';
import { foo } from './foo.ts';

console.log(foo);
// successfully logs `bar` in webpack dev server terminal

export const notWorkingStyle = style({backgroundColor: 'pink'});
// style is not included in css bundle (even though it does not directly use the imported variable)

import { workingStyle } from './workingStyle.style.ts';

const Component = () => (
  <>
    <div className={workingStyle}>This displays style</div>
  </>
)

import { notWorkingStyle } from './notWorkingStyle.style.ts';

const Component = () => (
  <>
    <div className={notWorkingStyle}>This does NOT display style</div>
  </>
)

update: I've also tried it with both SWC and ESBuild loaders, they both break in the same way
I assume it has to do with using SWC with webpack, instead of babel.
Here's my config.

import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import { join, resolve } from 'path';
import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';
import type { Configuration } from 'webpack';

export const baseConfig: Configuration = {
  entry: './src/index.tsx',
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  },
  output: {
    filename: 'main.js',
    chunkFilename: '[name].chunk.[contenthash].js',
    path: resolve(__dirname, '../..', 'dist')
  },
  plugins: [
    /* CSS Preprocessing */
    new VanillaExtractPlugin({
      /* Cannot use default `.css.` extension because it conflicts with something */
      test: /.*\.style\.ts/gm
    }),
    /* bundle css in separate file (not js bundle) */
    new MiniCssExtractPlugin({
      chunkFilename: '[name].chunk.[contenthash].css'
    })
  ],
  module: {
    rules: [
      {
        test: /\.(tsx?$/,
        exclude: /(node_modules)/,
        use: {
          /* 
          This project does not use Babel compiler or Typescript compiler to create code artifacts. 
          */
          loader: 'swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                jsx: true
              } as any,
              target: 'es2020'
            }
          }
        }
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  }
};

[cseas]

Can you elaborate on the use-case on why this is needed? I'm not able to reproduce this.

I found this Discussion just trying to confirm whether importing values from another TypeScript file would work in Vanilla Extract. The docs don't have any examples listed for it.

My use-case was that my existing setup had tokens defined in TypeScript files. And I wanted to use the same tokens in Vanilla Extract files. Seems to work fine.

Minimal Example:

// Theme.ts
export const Theme = {
  font: `'Inter var', -apple-system, BlinkMacSystemFont`,
}

// Typography.css.ts
import { style } from "@vanilla-extract/css";
import { Theme } from "../Theme";

export const base = style({
  fontFamily: Theme.font.sansSerif,
})

// Typography.tsx
import { base } from "./Typography.css";

export function Typography({ children }) {
  return <p className={base}>{children}</p>
}

The generated file after build contains the correct styles.

.zbkr780 {
  font-family: 'Inter var', -apple-system, BlinkMacSystemFont;
}

And the correct class name is applied to the component too.
I've verified this with both Rollup and Webpack.

For reference, here are my respective configs for Rollup and Webpack.