feat: CSS Modules support #4852

markdalgleish · 2022-12-13T05:59:54Z

Closes: #4632

Docs
Tests

Note that docs will definitely some need more holistic changes once we've removed the feature flag and added more bundling features, but this is PR contains a minimal set of updates to document this change.

I ultimately went with postcss-modules as it's the most commonly used implementation in the wild and we're aiming to support people migrating from other tools. We may use other implementations alongside this in the future if it helps with performance and we can detect that unsupported features aren't being used.

Testing Strategy

I've added a Playwright test suite that checks each CSS Modules feature individually since they have different levels of support with different implementations. I've ensured that all tests are decoupled from the generated class name format since it can differ between CSS Modules implementations.

I've also added some tests to catch potential issues in the future (duplicated hashes, duplicated rules) if we want to migrate to another implementation or change our CSS minification strategy.

Since there was already a deterministic build output test, I've added some CSS Modules files to the fixture to ensure hashes are stable.

Kudos

Big shout out to @chaance for his prior work on #2489 which really helped in this implementation.

lili21 · 2022-12-21T02:35:14Z

is that mean all module stylesheet will be bundle into one css file?

lili21 · 2022-12-21T02:38:09Z

is that mean all module stylesheet will be bundle into one css file?

I noticed that the RFC already mentioned it. Ignore me.

chaance

Looks great! Just a few minor suggestions and questions. Really stoked about the approach so far 👍

docs/guides/migrating-react-router-app.md

chaance · 2022-12-21T07:24:06Z

docs/guides/styling.md

+
+<docs-warning>This feature is unstable and currently only available behind a feature flag. We're confident in the use cases it solves but the API and implementation may change in the future.</docs-warning>
+
+<docs-warning>Since all CSS Modules styles end up in a single CSS file at the end of the build, we recommend that you only use this styling approach for smaller applications, or sparingly within larger applications. If you're concerned about bundle size, you should probably look at [Tailwind](#tailwind-css) or [Regular Stylesheets](#regular-stylesheets) instead.


I'm actually not sure that we need this warning. I think a single module bundle is probably fine for decently large apps since it's easy to cache, and CSS files are rarely a bottleneck before some pretty serious scale. I think we can talk about the tradeoffs without making it look scary.

It does sound a little scary if someone were evaluating remix and saw this
Not discounting that the warning isn't true. Maybe there are strategies for reducing the bundle size like minifying the CSS.

just noticed out production CSS output isn't compressed in our app 😅
Remix doesn't minify CSS by default?
Not a big deal for our internal tool or web UI, but can be for public facing UIs were download speed matters

Remix doesn't minify CSS by default?

No, Remix doesn't process CSS by default at all (aside than hashing the filename for effective versioning/caching). This is explained in the same doc.

That said, CSS Modules is opening the door a bit on this bigger question. We should absolutely be able to minify the production build of your CSS Modules bundle IMO.

I think a single module bundle is probably fine for decently large apps since it's easy to cache

But change any style will break the cache.

But change any style will break the cache.

As it should! I'm not saying there are no potential perf tradeoffs here, just that we shouldn't overstate them because:

CSS files are rarely a bottleneck before some pretty serious scale

We should absolutely be able to minify the production build of your CSS Modules bundle IMO.

The generated CSS is already being minified since it's being bundled by esbuild honouring the same minification settings as the JS output.

docs/guides/styling.md

packages/remix-dev/compiler/compileBrowser.ts

packages/remix-css-bundle/README.md

Co-authored-by: Chance Strickland <hi@chance.dev>

xalechez · 2023-01-03T11:47:09Z

Hey Mark! Great stuff here, glad to see CSS modules finally coming to Remix. My question here is about third-party libraries support. We import a component library that uses CSS modules via require syntax as it's transpiled to CJS. Is this also supported with your solution? In the past we had this issue with several esbuild CSS modules plugins and it was a big blocker for us with Remix

markdalgleish · 2023-01-03T21:56:37Z

@xalechez Is the component library open source? I know you'd at least need to add the package to the serverDependenciesToBundle array, but other than that I'm not sure what the issue would be.

github-actions · 2023-01-04T07:06:58Z

🤖 Hello there,

We just published version v0.0.0-nightly-2c398e4-20230104 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

markdalgleish added 30 commits November 24, 2022 11:25

add initial CSS Modules integration

8b9d1b8

only write CSS bundle and source map to disk

4cc9f8e

Only emit CSS from the CSS bundle build

5a55f96

Merge branch 'dev' into markdalgleish/css-modules

72de4a3

bump css-bundle version

fc57bae

clean up CSS build output logic

5d96e1c

dispose CSS compiler in browser compiler

48aaaf3

remove emitCss option, clean up server output

9f40c89

make CSS Modules object type readonly

83eb997

add initial CSS Modules integration test

0dcd2dc

refactor local fork of CSS Modules plugin

33b09aa

bundle CSS to support composes property

1352cc5

put CSS Modules behind v2_cssBundle future flag

ec7e32a

Merge branch 'dev' into markdalgleish/css-modules

6381250

update css-bundle versions

b4e2168

rename v2_cssBundle flag to unstable_cssBundle

1599d3a

remove CSS Module entry point cache

88a0761

inline setup and buildCssModulesJs functions

f31cd7a

remove build context, clean up path resolution

600897a

use esbuild's resolver in lightningcss

657ef3e

refactor CSS Modules plugin

55653e7

upgrade lightningcss

08a6f66

use relative path for filename

d6d4d70

add workaround for CSS Modules hash clashes

ccf946f

simplify esbuild plugin, add PluginData type

e63338d

namespace compiled CSS suffix

ea3e3bd

use complete path for virtual CSS file name

be03658

split CSS Modules test cases, add more, clean up

e2c2d1a

Merge branch 'dev' into markdalgleish/css-modules

abdd5d3

bump css-bundle versions

1dc7da5

don't output CSS Modules in server/app build

aece1ee

chaance requested changes Dec 21, 2022

View reviewed changes

markdalgleish and others added 11 commits December 22, 2022 09:10

Update docs/guides/migrating-react-router-app.md

fd6d3ed

Co-authored-by: Chance Strickland <hi@chance.dev>

Update docs/guides/styling.md

6a30fb5

Co-authored-by: Chance Strickland <hi@chance.dev>

Update docs/guides/styling.md

cc96521

Co-authored-by: Chance Strickland <hi@chance.dev>

Update docs/guides/styling.md

5cb0efb

Co-authored-by: Chance Strickland <hi@chance.dev>

Update packages/remix-dev/compiler/compileBrowser.ts

cc5dc69

Co-authored-by: Chance Strickland <hi@chance.dev>

Update packages/remix-dev/compiler/compileBrowser.ts

3ebae45

Co-authored-by: Chance Strickland <hi@chance.dev>

Update docs/guides/styling.md

f0c7b82

Co-authored-by: Chance Strickland <hi@chance.dev>

dedupe CSS in dev

0da587d

remove explicit single CSS file warning from docs

c7357fa

remove redundant optional chaining

146ae5d

Merge branch 'dev' into markdalgleish/css-modules

ea9f2dc

markdalgleish mentioned this pull request Jan 3, 2023

🗺️ CSS side effect imports #4817

Closed

2 tasks

Merge branch 'dev' into markdalgleish/css-modules

e42dd07

chaance approved these changes Jan 3, 2023

View reviewed changes

markdalgleish merged commit 3d58b0a into dev Jan 4, 2023

markdalgleish deleted the markdalgleish/css-modules branch January 4, 2023 00:10

github-actions bot added the awaiting release This issue has been fixed and will be released soon label Jan 4, 2023

This was referenced Jan 13, 2023

chore: Update version for release (pre) #5097

Merged

chore: Update version for release #5135

Merged

MichaelDeBoey added package:server-runtime renderer:react package:testing labels Jan 25, 2023

Andarist mentioned this pull request Jun 1, 2023

Build release bundle with Preconstruct bvaughn/use-context-menu#6

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: CSS Modules support #4852

feat: CSS Modules support #4852

markdalgleish commented Dec 13, 2022 •

edited

Loading

lili21 commented Dec 21, 2022

lili21 commented Dec 21, 2022 •

edited

Loading

chaance left a comment

chaance Dec 21, 2022

cliffordfajardo Dec 21, 2022 •

edited

Loading

chaance Dec 21, 2022

lili21 Dec 22, 2022

chaance Dec 22, 2022

markdalgleish Jan 2, 2023 •

edited

Loading

xalechez commented Jan 3, 2023

markdalgleish commented Jan 3, 2023

github-actions bot commented Jan 4, 2023


		<docs-warning>This feature is unstable and currently only available behind a feature flag. We're confident in the use cases it solves but the API and implementation may change in the future.</docs-warning>

		<docs-warning>Since all CSS Modules styles end up in a single CSS file at the end of the build, we recommend that you only use this styling approach for smaller applications, or sparingly within larger applications. If you're concerned about bundle size, you should probably look at [Tailwind](#tailwind-css) or [Regular Stylesheets](#regular-stylesheets) instead.

feat: CSS Modules support #4852

feat: CSS Modules support #4852

Conversation

markdalgleish commented Dec 13, 2022 • edited Loading

Testing Strategy

Kudos

lili21 commented Dec 21, 2022

lili21 commented Dec 21, 2022 • edited Loading

chaance left a comment

Choose a reason for hiding this comment

chaance Dec 21, 2022

Choose a reason for hiding this comment

cliffordfajardo Dec 21, 2022 • edited Loading

Choose a reason for hiding this comment

chaance Dec 21, 2022

Choose a reason for hiding this comment

lili21 Dec 22, 2022

Choose a reason for hiding this comment

chaance Dec 22, 2022

Choose a reason for hiding this comment

markdalgleish Jan 2, 2023 • edited Loading

Choose a reason for hiding this comment

xalechez commented Jan 3, 2023

markdalgleish commented Jan 3, 2023

github-actions bot commented Jan 4, 2023

markdalgleish commented Dec 13, 2022 •

edited

Loading

lili21 commented Dec 21, 2022 •

edited

Loading

cliffordfajardo Dec 21, 2022 •

edited

Loading

markdalgleish Jan 2, 2023 •

edited

Loading