`dev` script renames css into html files

[PrettyCoffee]

When running npm run dev, the css files will be renamed as html files in the dist folder. With npm run build there is no problem, all files are compiled correctly.

e.g.: src/styles.css -> dist/styles.html

When renaming the dist/styles.html to dist/styles.css, everything works as expected.

manifest.json:

{
  "{{chrome}}.manifest_version": 3,
  "{{firefox}}.manifest_version": 2,
  "name": "My extension",
  "version": "0.0.0",
  "description": "My extension",
  "icons": {
    "16": "assets/icon-16.png",
    "32": "assets/icon-32.png",
    "48": "assets/icon-48.png",
    "128": "assets/icon-128.png"
  },
  "chrome_url_overrides": {
    "newtab": "index.html"
  },
  "permissions": ["tabs"]
}

vite.config.ts:

import path from "path";
import { defineConfig } from "vite";
import browserExtension from "vite-plugin-web-extension";

function root(...paths: string[]): string {
  return path.resolve(__dirname, ...paths);
}

export default defineConfig({
  root: "src",
  build: {
    outDir: root("dist"),
    emptyOutDir: true,
  },
  plugins: [
    browserExtension({
      manifest: root("src/manifest.json"),
      assets: "assets",
      additionalInputs: [
        "index.html",
        "styles.css",
        "variables.css",
        "scripts.js",
      ],
      watchFilePaths: [root("src/manifest.json")],
      verbose: false,
      browser: process.env.TARGET || "firefox",
    }),
  ],
});

My files:

src/
  assets/
    logo16.png
    ...
  index.html
  manifest.json
  script.js
  styles.css
  variables.css
package.json
tsconfig.json
vite.config.ts

Hopefully this is enough info, if you need a demo, let me know :)

Loving the plugin so far btw, thank you for creating this! 🔥

[PrettyCoffee]

Forgot to share my package.json:

{
  "name": "my-extension",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "tsc && vite dev",
    "dev:chrome": "tsc && TARGET=chrome vite dev",
    "build": "tsc && vite build",
    "build:chrome": "tsc && TARGET=chrome vite build",
    "validate": "web-ext lint -s dist"
  },
  "devDependencies": {
    "dotenv": "^16.0.2",
    "typescript": "^4.4.4",
    "vite": "^2.7.9",
    "vite-plugin-web-extension": "^1.4.4"
  }
}

[aklinker1]

Thanks for the info, I'll try and get to this sometime this week!

[jurijsk]

Hit the same issue. Ended up importing scss to index.ts and then using generated: syntax in manifest.json

[aklinker1]

No longer an issue in v3