hybrid mode (inject + extract)

[Grafikart]

Is it possible to extract CSS from the main entrypoint but inject CSS for async imports ? Some kind of hybrid mode ;)

import './app.scss' // this CSS will be extracted
await import('./app2.js'); // all css loaded by app2.js will be injected

This could be hooked when using the onExtract when we return false for instance (or maybe we could return "inject") Another solution would be to transform mode option to accept a callback that would tell wich mode to use depending of the file.

[Anidetrix]

Hi @Grafikart, thank you for your suggestions!

Is it possible to extract CSS from the main entrypoint but inject CSS for async import

Not with the single plugin instance, but you can achieve something similar using multiple instances of the plugin and include/exclude options, similar to what is shown here.

This could be hooked when using the onExtract when we return false for instance (or maybe we could return "inject")

Not possible, since by the time onExtract is called all the inject-related stuff is already done.

Another solution would be to transform mode option to accept a callback that would tell wich mode to use depending of the file.

That seems like a better solution, since this plugin already has similar thing for modules (autoModules).

All and all, I need to think about the exact way to implement this, but this definitely seems like it can be useful.

[chmelevskij]

Wondering if this would be possible to do with looking into dynamicImports section of chunks?

[Anidetrix]

@chmelevskij I don't think so, since chunk information is available after transformation step, by which point, as I said before, all the inject-related stuff is already done.

[karenberry13]

I'm curious if you had a chance to think through this, but should the following work since I'm importing two instances of the plugin? When I build it doesn't extract to that css file. Am I missing something? Thanks in advance!

import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import babel from "@rollup/plugin-babel";
import typescript from "rollup-plugin-typescript2";
import styles from "rollup-plugin-styles";
import stylesExtract from "rollup-plugin-styles";
import svgr from "@svgr/rollup";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import pkg from "./package.json";

const isDev = process.env.NODE_ENV === "development";
const extensions = [".js", ".jsx", ".ts", ".tsx"];
const globals = {
  "@tokens": "tokens",
  "@tokens/keys": "keys",
  "react-dom": "ReactDOM",
  react: "React",
};

export default {
  input: "src/index.ts",
  output: [
    {
      file: pkg.main,
      format: "umd",
      name: pkg.name,
      sourcemap: isDev,
      globals,
    },
    {
      file: pkg.module,
      format: "es",
      sourcemap: isDev,
      globals,
    },
  ],
  plugins: [
    peerDepsExternal(),
    resolve({ extensions }),
    commonjs(),
    typescript({
      useTsconfigDeclarationDir: true,
    }),
    styles({
      minimize: !isDev,
      sourceMap: isDev,
      modules: {
        generateScopedName: "[local]_[hash:8]",
      },
    }),
    stylesExtract({
      mode: ["extract", "dist/styles.css"],
      modules: {
        generateScopedName: "[local]",
      },
    }),
    svgr({ titleProp: true }),
    babel({
      babelHelpers: "bundled",
      extensions,
      presets: ["@babel/preset-env", "@babel/preset-react"],
      exclude: "node_modules/**",
    }),
  ],
};