CSS Bundling Options

[TheBigSasha]

Right now, we do not split css per module, because NextJS doesn't like to have style imports in components and the names of each stylesheet are not developer friendly.

Ideally, we'd like to simply import components only, and have them import their associated minified stylesheet build from every module stylesheet they import.

This works with the following in vue.config.ts

      libInjectCss({
        entry: {
          index: 'src/lib/index.ts', // Don't forget the main entry!
          ...scanEntries(['src/lib']),
        },
        rollupOptions: {
          output: {
            assetFileNames: 'assets/[hash][extname]',
          },
        },
      }),

However, this injects imports such as import '../../../assets/4gser621.css' in the components. This is great, but for NextJS it isn't good because stylesheet imports in components are unsupported.

If we continue with css splitting, we can indeed remove this and manually import these stylesheets in nextjs, but it would not be human friendly to import a separate stylesheet for each component, even with readable names.

Ideally, we'd build js files maintaining module imports, linking to minified import a from '[hash].module.css' files. This would work great in nextjs, but not work on targets not supporting css modules (who cares about them though).