CSS is not injected into <head></head> when using TypeScript

yasuhito commented 2 years ago

When I run web-test-runner with the two patterns --files foo.js and --files bar.ts

CSS is injected into <head></head> when the test file is .js
but not when the test file is .ts

% npx web-test-runner --files test/mytest.js // works
% npx web-test-runner --files test/mytest.ts // fails to inject CSS

The web-test-runner configuration file is as follows. I use rollup-plugin-postcss for CSS injection and @web/dev-server-esbuild for .ts compilation.

import {fromRollup} from '@web/dev-server-rollup'
import rollupPostcss from 'rollup-plugin-postcss'
import {esbuildPlugin} from '@web/dev-server-esbuild'

const postcss = fromRollup(rollupPostcss)

export default {
  nodeResolve: true,
  rootDir: '../..',

  mimeTypes: {
    '**/*.css': 'js'
  },

  plugins: [
    postcss({include: ['dist/foo.css']}),

    MSBuild plugin({ts: true})
  ]
}

If you have a solution, I would appreciate it!

koddsson commented 1 year ago

Hey @yasuhito; I'm having trouble reproducing this. Do you have a small reproduction somewhere that I can check out and debug?

Westbrook commented 1 year ago

I'm not sure what this plugin is MSBuild plugin({ts: true}), but I'd venture to guess that running it after postCSS means that postCSS doesn't know what to do with the TS files that would otherwise be JS files if it were run first?

modernweb-dev / web

CSS is not injected into <head></head> when using TypeScript #2045