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

CSS optimization workflow parity during development (inlining @import statements) #1257

Closed
thescientist13 opened this issue Jul 17, 2024 · 0 comments · Fixed by #1258 or #1262
Closed
Assignees
Labels
alpha.5 CLI documentation Greenwood specific docs feature New feature or request v0.30.0
Milestone

Comments

@thescientist13
Copy link
Member

thescientist13 commented Jul 17, 2024

Summary

CSS supports referencing other CSS files using @import statements

/* theme.css */
@import "../../node_modules/prism-themes/themes/prism-nord.css";

During production builds, Greenwood will inline these statements as part of the CSS optimization phase, but why not also do this during development? Well...

Details

The principal use case here is that @import is not supported in Shadow DOM, so if you do, you will get an error like this in the browser
Screenshot 2024-07-16 at 9 13 29 PM

and thus unresolved @import paths
Screenshot 2024-07-12 at 4 07 45 PM

You can of course use our PostCSS plugin + postcss-import and this will happen in development and production, but as stated, this already something Greenwood does during production so why not at least "backport" some of this behavior during development, if at minimum to provide a consistent development vs production experience.


Misc observations coming out of ProjectEvergreen/www.greenwoodjs.dev#74

  1. if we optimize when serving dev, then do we need shouldOptimize? - seems like no
  2. should we make it optional since it is not standard behavior?
    • we were doing it for production... - make it optional and / or ignore certain operations in dev mode
  3. Should we avoid any excess operations? (though really, once you turn it into an AST, the heavy lifting is really already there), like
    • minification - dev tools can format I think?
    • hashing - moderately expensive, but not really needed either way (use fs etc)
  4. need to handle inline optimization bundle mapping edge case (see chore/upgrade greenwood v0.30.0 AnalogStudiosRI/www.analogstudios.net#98)
  5. Seems staticServer is using shouldServe lifecycle, which at least explains unexpected prebundling, which we means we don't actually decouple plugins from server hosting... (relates a a need / idea around standalone server, which I should also track)
    • yeah npx http-server ./public breaks
    • npx http-server loads all the content just fine, nowstandard resource plugins needed. So do we even need resource plugins for staticStatic
@thescientist13 thescientist13 added enhancement Improve something existing (e.g. no docs, new APIs, etc) documentation Greenwood specific docs CLI alpha.5 v0.30.0 labels Jul 17, 2024
@thescientist13 thescientist13 added this to the 1.0 milestone Jul 17, 2024
@thescientist13 thescientist13 self-assigned this Jul 17, 2024
@thescientist13 thescientist13 added feature New feature or request and removed enhancement Improve something existing (e.g. no docs, new APIs, etc) labels Jul 17, 2024
@thescientist13 thescientist13 linked a pull request Jul 17, 2024 that will close this issue
15 tasks
@thescientist13 thescientist13 mentioned this issue Aug 3, 2024
38 tasks
@thescientist13 thescientist13 linked a pull request Aug 3, 2024 that will close this issue
1 task
@thescientist13 thescientist13 linked a pull request Sep 14, 2024 that will close this issue
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment