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

fix: extract css in same order as imports #295

Merged
merged 3 commits into from
Aug 24, 2020

Conversation

wardpeet
Copy link
Collaborator

@wardpeet wardpeet commented Jul 18, 2020

Description

When upgrading rollup to v2 and using @rollup/plugin-node-resolve. My stylesheet wasn't deterministic and tests failed randomly. ModuleIds kept by Rollup are stored by resolve order, not import order. So, it depends on the time it takes to resolve a file.

I added a test where I resolving is done late but the css file still has the correct order.

Fixes #96

I've also made an issue in the rollup repository:
rollup/rollup#3682

@wardpeet wardpeet marked this pull request as draft July 18, 2020 22:29
@codecov
Copy link

codecov bot commented Jul 18, 2020

Codecov Report

Merging #295 into master will increase coverage by 0.18%.
The diff coverage is 100.00%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #295      +/-   ##
==========================================
+ Coverage   92.50%   92.68%   +0.18%     
==========================================
  Files          10       10              
  Lines         320      328       +8     
  Branches      113      115       +2     
==========================================
+ Hits          296      304       +8     
  Misses         23       23              
  Partials        1        1              
Impacted Files Coverage Δ
src/index.js 99.05% <100.00%> (+0.07%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c38f356...bc94ff7. Read the comment docs.

@wardpeet wardpeet marked this pull request as ready for review July 18, 2020 22:41
src/index.js Show resolved Hide resolved
Copy link
Owner

@egoist egoist left a comment

Choose a reason for hiding this comment

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

LGTM, let me know if it's ready to be merged.

@wardpeet
Copy link
Collaborator Author

wardpeet commented Aug 2, 2020

@egoist I based this PR on #299. If that one is okay, we could merge this one in after the rebase. If not i'll remove the prettier commit.

@BPScott
Copy link

BPScott commented Aug 3, 2020

Heck yeah I love that the bundle modules stuff seems to work! Fantastic work @wardpeet!

Having two ways of doing this does feel like a maintenance burden though, and might make other features like multiple entry support tougher to implement.

@egoist how would you feel if this only implemented the bundle.modules/ no-treeshake approach - and thus would require rollup >=2.21.0? I'd class that as a breaking change and would require a major version bump but I think it might be worth it for the sake of code simplicity and ease of maintenance.

If that were to happen I think multiple entry support would be pretty easy - it'd be a case of changing this from doing a flatMap over the modules of all bundles to collecting the modules on a per bundle basis. I think something like this (written but not ran):

Object.entries(bundle).forEach(([bundleName, bundle]) => {
  // A list of all modules in this entrypoint  
  const moduleIds = bundle.modules.filter((id) => loaders.isSupported(id));
 
  // Do the stuff that emits out a css file for a given entrypoint
  // Concatenate the found modules, build a sourcemap and run emitFile()
})

Which feels a bit more straight forward compared to the logic for multiple entries that have been attempted in #289 and prior PRs

src/index.js Outdated Show resolved Hide resolved
@BPScott
Copy link

BPScott commented Aug 6, 2020

Heya @wardpeet, me again. I spotted some awkwardness in the snapshots and as I had an idea what was up I figured I'd make a PR to your PR to demo the fix rather than try and explain it in comments: wardpeet#1

@wardpeet
Copy link
Collaborator Author

wardpeet commented Aug 7, 2020

@BPScott I do agree that the changes you made remove lots of the $undefined variables that are generated in the newer rollup version. Your changes are technically a breaking change and it would mean it's harder to get reviewed/merged. Terser will remove any of these undefined variables anyway, so there is no perf impact except a more verbose output when not using terser.

If I move back to my first implementation, this would be solved as well. We could land your changes after this one and see if we can bump it as a major version. For now, I want myself unblocked. 😄

@BPScott
Copy link

BPScott commented Aug 9, 2020

If I move back to my first implementation, this would be solved as well. We could land your changes after this one and see if we can bump it as a major version. For now, I want myself unblocked. 😄

Yep, agree that I'm kinda derailing this PR and getting this behaviour working is top priority :) I'm very happy to say this is good to ship and I'll poke at improvements with potential for breaking changes in a follow-up PR :shipit:

Thanks again for your fantastic work to get this working!

@wardpeet
Copy link
Collaborator Author

I've run tests on my mac but I couldn't reproduce the failure. Unsure what's happening here. I'll cleanup the PR and hopefully, this can get merged soon after.

@wardpeet
Copy link
Collaborator Author

I converted everything to the first version without any rollup changes needed. This should be good to go.

@wardpeet
Copy link
Collaborator Author

@egoist any chance we could merge this in? :) Happy to adjust the PR with feedback

@wardpeet wardpeet merged commit 2946eae into egoist:master Aug 24, 2020
@wardpeet wardpeet deleted the fix/ordering branch August 24, 2020 06:08
@github-actions
Copy link

🎉 This PR is included in version 3.1.6 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

CSS should be extracted in the order they've been imported
4 participants