search

davidguttman / cssify

Simple middleware for Browserify to add css styles to the browser.
122 stars 19 forks source link

match default development scopeName as in `css-modules-require-hook` #45

Closed ahdinosaur closed 8 years ago

ahdinosaur commented 8 years ago

css-modules-require-hook defaults in development to using this scopeName.

pull request fixes render mismatch when doing "universal" / "isomorphic" React app.

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) ents_landing_index___container" data-rea
 (server) ents_landing_index__container" data-reac
faergeek commented 8 years ago

Would you like to also provide some docs for such usage in readme? It would be really helpful.

ahdinosaur commented 8 years ago

my usage is still in progress, not sure how to explain it other than to use css-modules-require-hook in node, use cssify with options { "modules": true } in browserify, and then require your css modules and use them as className in your react components.

btw, @faergeek did you ever make any progress on writing to disk? that'd be helpful to get proper server-side rendering.

faergeek commented 8 years ago

Not yet, I tried to use factor-bundle, but have no success with that, it seems like that should be built into cssify, what do you think?

ahdinosaur commented 8 years ago

maybe, but like you said before i wonder if it can be done as a separate module.

here's a crazy idea: a browserify plugin that runs the generated bundle on a temporary jsdom, then extracts the total contents of any stylesheets that were created into a file (stream), hmm but also needs to somehow remove the code that added the stylesheets from the bundle. i think it'd be much easier if cssify used insert-css (as sheetify does) so our plugin could search for calls to insert-css, extract stylesheet contents from that function call, then remove the function call from the bundle. hmm.

faergeek commented 8 years ago

We can't use insert-css because we're supporting hot module replacement (using browserify-hmr) and AFAIK insert-css does not support it. Anyway we have similar method for injection, but I don't think that it's the right way.

ahdinosaur commented 8 years ago

sweet the hot module replacement is great. is it possible extract browser.js into a separate module so process-css.js references it? i'd be happy to use it in sheetify as well, then we have something common to target for a global transform to extract stylesheets from a bundle.