Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: output insertStyle as part of rollup bundle #163

Merged
merged 4 commits into from
Oct 30, 2024

Conversation

marcalexiei
Copy link
Collaborator

@marcalexiei marcalexiei commented Sep 25, 2024



This PR aims to replace referencing insertStyle file using the path to the dist folder with rollup build hooks.
They can generate a separate chunk that is processed as any other js files in the rollup lifecycle.
If preserveModules option is used the separated chunk with be created directly inside a _virtual folder rather than inside a node_modules/... folder

The results is something like this:

rollup config
import { defineConfig } from "rollup";
import sass from "rollup-plugin-sass";

export default defineConfig({
  input: "src/index.js",
  output: {
    dir: "dist",
    preserveModules: true,
  },
  plugins: [sass({ insert: true })],
});
dist/_virtual/____insertStyle.js
dist/index.js
dist/actual_a.scss.js
dist/actual_b.scss.js
I added a screenshot to better show the result: Screenshot 2024-09-25 at 17 42 21

Implementation

Using load and resolveId build hooks we can map a special moduleID and when it is loaded we directly return the code of insertStyle function adding a virtual module.

Another benefit of this approach is that the insertStyle function is now imported directly in the source code.
This means that the separate build task to have insertStyle generated with ESM can be removed.


Warning

I noticed these issue after finishing #162 so this branch is based on the one of that PR.
That PR adds prettier as a formatter so after merging it the diff here should affect less files.
Relevant diff can be seen in the feat: output insertStyle as part of rollup bundle commit

@marcalexiei marcalexiei changed the title Emit file feat: output insertStyle as part of rollup bundle Sep 25, 2024
@marcalexiei marcalexiei marked this pull request as draft September 25, 2024 17:20
@marcalexiei

This comment was marked as resolved.

@marcalexiei

This comment was marked as resolved.

Copy link
Owner

@elycruz elycruz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left some comments.

src/index.ts Outdated Show resolved Hide resolved
src/index.ts Show resolved Hide resolved
test/snapshots/test/index.test.ts.md Show resolved Hide resolved
@elycruz elycruz self-assigned this Oct 17, 2024
@marcalexiei marcalexiei marked this pull request as ready for review October 17, 2024 13:12
Copy link
Owner

@elycruz elycruz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left comments:

src/index.ts Outdated Show resolved Hide resolved
Copy link
Collaborator Author

@marcalexiei marcalexiei left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Restored explicit types on generateBundle using correct types from rollup.
Also moved destructing of plugin state and plugin options at the beginning of the function to reduce the improve readability of the first if

@marcalexiei marcalexiei requested a review from elycruz October 18, 2024 12:20
@elycruz elycruz merged commit 044baa0 into elycruz:main Oct 30, 2024
4 checks passed
@marcalexiei marcalexiei deleted the emit-file branch October 31, 2024 05:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

insertStyle function gets missed when npm pack or yarn pack made on final build files
2 participants