Anidetrix / rollup-plugin-styles

🎨 Universal Rollup plugin for styles: PostCSS, Sass, Less, Stylus and more.
https://anidetrix.github.io/rollup-plugin-styles
MIT License
242 stars 43 forks source link

Help to find which JS file included which CSS file #203

Open nyroDev opened 2 years ago

nyroDev commented 2 years ago

I'm using the extract mode in order to create separated CSS file.

Let's say my rollup config list 2 files as inputs:

   input: [
        'assets/js/test1.js',
        'assets/js/test2.js'
    ],

test1.js imports test1.css test2.js imports test2.css

I have the need to create a json file on the generateBundle callback which list all JS entries and their corresponding JS and CSS files.
It's used by my backend in order to create the corresponding script and link tags.

The JSON file needed should looks like:

{
  "entrypoints": {
    "test1": {
      "js": [
        "/lab/testJs/build_dev/test1-601b87d9.js"
      ],
      "css": [
        "/lab/testJs/build_dev/assets/test1-456a6f73.css"
      ]
    },
    "test2": {
      "js": [
        "/lab/testJs/build_dev/test2-acf10e55.js"
      ],
      "css": [
        "/lab/testJs/build_dev/assets/test2-fb3ec4ea.css"
      ]
    }
  }
}

Here is how looks like my generateBundle hook for now:


async generateBundle(options, bundle, isWrite) {
    if (!isWrite) {
        return;
    }
    // Read manifest.json just wrote by rollup-plugin-output-manifest
    const entrypoints = {
        'entrypoints': {}
    };
    const manifest = {};

    for (const [file, chunk] of Object.entries(bundle)) {
        if (chunk.isEntry) {
            const publicPath = config.publicPath + chunk.fileName;

            // Add it into manifest
            manifest[config.basePath + chunk.name + '.js'] = publicPath;

            // Add it as a standalong entrypoints
            entrypoints['entrypoints'][chunk.name] = {
                'js': [publicPath]
            };

            // Add it with all it's import in entrypoints, used for mobile
            const imports = [
                publicPath
            ];
            chunk.imports.forEach(imp => {
                imports.push(config.publicPath + imp);
            });

            entrypoints['entrypoints'][chunk.name + '_all'] = {
                'js': imports
            };
        }
    }

    this.emitFile({
        type: 'asset',
        fileName: 'entrypoints.json',
        source: JSON.stringify(entrypoints, false, 2)
    });
}

As you can see Im' relying on the imports array for JS file.

I tested many things using regular hooks, or editing the plugin to add more info.
I even tested to emit a new JSON file from the plugin that will contain info about what I need to and parse it in generatedBundle, but I cannot find a proper way to do that.

I'm struggling to find out a way to do everything I need.

I could take time to make a MR if somebody indicates me the proper ay to do what I need: A way to know in generateBundle the JS file that included a CSS file