How to Retrieve the Dependency Relationship Between CSS and JS Files During Compilation？

[BUPTlhuanyu]

In various combinations of cssCodeSplit and preserveModules, I want to determine which CSS outputs are required by each JS entry.

[hi-ogawa]

Can you try build.manifest: true and see if dist/.vite/manifest.json works for you? You can find a guide in https://vite.dev/guide/backend-integration.html#backend-integration

[BUPTlhuanyu]

my config:

            rollupOptions: {
                input: {
                    index1: path.resolve(__dirname, 'src/index1'),
                    // index2: path.resolve(__dirname, 'src/index2'),
                    // index3: path.resolve(__dirname, 'src/index3'),
                },
                output: {
                    // manualChunks: {
                    //     styles: ['src/pages/homepage/common.less'],
                    // },
                    preserveModules: true,
                    preserveModulesRoot: 'src',
                },
                preserveEntrySignatures: 'strict',
            },

The manifest file does not show that the entry references style.css.

{
  "__talos_pro_internal_virtual_entry": {
    "file": "__talos_entry__.js",
    "name": "___talos_pro_internal_virtual_entry",
    "src": "__talos_pro_internal_virtual_entry",
    "isEntry": true
  },
  "src/assets/icon/coupon-cover.png": {
    "file": "assets/icon/coupon-cover.png.js",
    "name": "assets/icon/coupon-cover.png",
    "src": "src/assets/icon/coupon-cover.png",
    "assets": [
      "coupon-cover.png"
    ]
  },
  "src/index1.ts": {
    "file": "index1.js",
    "name": "index1",
    "src": "src/index1.ts",
    "isEntry": true,
    "imports": [
      "src/pages/homepage/index-test.ts"
    ]
  },
  "src/pages/homepage/index-test.ts": {
    "file": "pages/homepage/index-test.js",
    "name": "pages/homepage/index-test",
    "src": "src/pages/homepage/index-test.ts",
    "imports": [
      "src/pages/homepage/test.module.less",
      "src/assets/icon/coupon-cover.png"
    ]
  },
  "src/pages/homepage/test.module.less": {
    "file": "pages/homepage/test.module.less.js",
    "name": "pages/homepage/test.module.less",
    "src": "src/pages/homepage/test.module.less"
  },
  "style.css": {
    "file": "style.css",
    "src": "style.css"
  }
}

[hi-ogawa]

I want to determine which CSS outputs are required by each JS entry.

Which relation of js file -> css file is expected in your example code? It would be nice if you can provide a reproduction too.

[BUPTlhuanyu]

The generated manifest contains the corresponding dependency information. Now, I want to process this manifest to create my own manifest, delete the original one, but the manifest data is only available during the writeBundle phase. It cannot be emitted using emitFile, nor can the original manifest be deleted.