Styles imported as strings, not modules

[msakrejda]

Hello! I'm in the process of attempting a port from webpack to vite, and I have the core functionality in my app working, but styling is broken. We're using PostCSS modules, and components reference styles like this:

import styles from "./style.css";

function MyComponent () {
  return (
    <div className={styles.myStyle}>
      ...
    </div>
  )
}

in debugging the issue, I found that with Vite, in dev, the styles object is just a string instead of the module object, so the components set className to non-existent properties on String instances, which just evaluate to undefined, stripping all styling. (And yes, the style files do not have the standard .module.scss extension--I think I'm working around that in the config but maybe I'm getting that wrong?).

My current vite config is this:

import { defineConfig } from 'vite'

import { resolve } from 'path'

import inject from '@rollup/plugin-inject';
import graphql from '@rollup/plugin-graphql';
import RubyPlugin from 'vite-plugin-ruby'
import mdx from 'vite-plugin-mdx'

function fullPath(dir: string): string {
  return resolve(__dirname, dir);
}

export default defineConfig({
  resolve: {
    alias: {
      /* some legacy aliases to remove later */
      'components': fullPath('app/javascript/components'),
      'types': fullPath('app/javascript/types'),
      'util': fullPath('app/javascript/util'),

      'styles': fullPath('app/javascript/styles'),
      'global': fullPath('app/javascript/styles/global'),
    },
  },
  css: {
    modules: {
      globalModulePaths: [ /app\/javascript\/.+\.css/, /docs\/.*\.module\.scss/ ],
    },
    preprocessorOptions: {
      scss: {
        includePaths: [fullPath('styles')]
      }
    }
  },
  plugins: [
    RubyPlugin(),
    inject({
      $: 'jquery',
      jQuery: 'jquery',
      exclude: [ '**/*.graphql', '**/*.mdx' ]
    }),
    graphql(),
    mdx(),
  ],
})

Any suggestions?

[ElMassimo]

Hi! Please refer to the Vite.js Discord channel which is a great place to ask questions like this 😃

I would encourage you to use the .module.css extension as covered in the Vite.js docs, which is the officially supported way to import CSS modules.

[msakrejda]

I tried the Discord channel, but no luck. There seem to be a lot of questions but few answers (not complaining, just FYI). I do realize this is more a core Vite issue now and not really vite_ruby, so I'll follow up there if I run into other problems.

I'd love to migrate the project to .module.scss but I first want to see if we can get Vite working--as far as I can tell that should be possible even with this non-standard naming. I did review the CSS section of the Vite docs and found the behavior I'm seeing (file is imported as text) is expected for standard CSS. So I renamed the styles file for one component and that seemed to do the trick--looks like the issue may be my CSS config. I'll either rename the remaining files or debug the config. Thanks for your help!

[msakrejda]

Just to follow up in case anyone is having similar issues: I ended up renaming everything to .module.scss--there may be a way to configure Vite to avoid that, but I figured a build system switch is as good a time as any to pay off that quirky configuration debt.