how to disable css inlining?

[woldtwerk]

https://vitejs.dev/guide/features.html
Importing .css files will inject its content to the page via a <style> tag with HMR support. You can also retrieve the processed CSS as a string as the module's default export.

how do I disable this behaviour? This feature is bad when developing web components.
The styles get inserted into the custom Element, but also inlined in the head.

import styles from './my-element.scss'
@customElement('my-element')
export class UeScrollTop extends LitElement {
  static styles = unsafeCSS(styles)
   ...
}

[woldtwerk]

It's not a proper solution, but I came up with a custom plugin. It overwrites the the ssr parameter of the vite:css-post transform function.
It only applies to stylesheets in /src/components because that's where my web component stylesheets live. HMR was also not working for imported stylesheets. Since wc need a ful reload anyways I just trigger a full reload every time a imported stylesheet changes.

import { defineConfig } from 'vite'
/** Check if asset is a stylesheet in component dir. */
const cssLangs = `\src\/components\/.*\.(css|less|sass|scss|styl|stylus|pcss|postcss)($|\\?)`
const cssLangRE = new RegExp(cssLangs)

const disableInjectCssToHead = () => {
  let config
  return {
    name: 'return-partial',
    configResolved(resolvedConfig) {
      config = resolvedConfig
      config.plugins.forEach(plugin => { 
        if (plugin.name === 'vite:css-post') {
          const originalTransform = plugin.transform
          plugin.transform =  async function(css, id) {
            return originalTransform(css, id, cssLangRE.test(id))
          }
        }
      })
    },
    handleHotUpdate({ file, server }) {
      if (cssLangRE.test(file)) {
        server.ws.send({
          type: 'full-reload',
          event: 'wc-reload',
          data: {}
        })
      }
    },
  }
}

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    manifest: true,
    rollupOptions: {
      input: [
        'src/index.ts',
        'src/styles/index.scss'
      ],
      external: /^lit-element/,
    },
  },
  plugins: [
    disableInjectCssToHead(),
  ]
})

[zba]

searched in recently you probably need

import styles from './my-element.module.scss'

or

import styles from './my-element.scss**?inline**'