search

HorusGoul / vite-plugin-stylex

Vite Plugin for StyleX
MIT License
111 stars 11 forks source link

Doesn't support nested html files #28

Open movahhedi opened 7 months ago

movahhedi commented 7 months ago

Directory Tree

client
|   package.json
|   tsconfig.json
|   vite.config.ts
|   yarn.lock
|
+---dist
|   |   index.html
|   |
|   +---admin
|   |       index.html
|   |
|   \---assets
|           admin-ff98cb8b.js
|           favicon-e3765896.png
|           index-ba8285d4.css
|           stylex.114b01a4.css
|
\---src
    |   index.html
    |
    \---admin
        |   index.html
        |
        +---images
        +---scripts
        +---styles

src/vite.config.ts

import { defineConfig } from "vite";
import StyleX from "vite-plugin-stylex";

export default defineConfig({
    plugins: [StyleX()],
    root: "src",
    base: "",
    build: {
        minify: "terser",
        outDir: "../dist",
        rollupOptions: {
            input: {
                main: "src/index.html",
                admin: "src/admin/index.html",
            },
        },
    },
    css: {
        devSourcemap: true,
        modules: {
            scopeBehaviour: "local",
            localsConvention: "camelCase",
        },
    },
});

dist/admin/index.html

<!DOCTYPE html>
<html id="root">

<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

  <script type="module" crossorigin src="../assets/admin-ff98cb8b.js"></script>
  <link rel="stylesheet" href="../assets/index-ba8285d4.css">
  <link rel="stylesheet" href="assets/stylex.114b01a4.css">
</head>

<body></body>
</html>

Notice the difference between importing ../assets/index-ba8285d4.css and assets/stylex.114b01a4.css. the plugin doesn't support scripts in nested html files using StyleX.