[Feature] Extract a static and complete CSS file? #264
Comments
|
Hi @BabakMN! I'm not exactly sure what you're asking, but it sounds fairly easy to accomplish with the features we provide today. Aphrodite doesn't depend on anything in React, so you should be able to do this separately from however you are rendering the HTML. For instance, if you were rendering with React, you might do... // generate html and styles
const {html, css} = StyleSheetServer.renderStatic(() => ReactDOMServer.renderToStaticMarkup(<App />));
// inject `css.content` into a file
const cssFile = ...;
// render using that file
return `
<html>
<head>
<link href="${cssFile}" rel="stylesheet">
</head>
<body>
${html}
</body>
</html>
`;If you're going to do further rendering on the client page, you'd want to call Does that answer your question? |
|
Basically I want a way to avoid having to inject the CSS on a render-by-render basis inside the HTML page. But rather extract a static CSS file that includes everything so that it can be referenced using a link tag and served from a CDN with long-term caching, also reducing the HTML page size. My understanding is that currently it is not possible to achieve this because what aphrodite sees and generates depends on what React renders so the generated CSS is not exhaustive and complete, but rather it is dependent on that particular render. So for example if there's an element that is initially hidden and then comes into view after pressing a button the class names on that element will be left out because it was not present in the render that produced the CSS. Or for example if the CSS file was produced for rendering That's why I said I think it's probably impossible. Because it seems that you would need some magical way of exhaustively rendering everything so that the CSS file that you produce includes everything that may be needed during the page lifetime including things like hidden elements that may dynamically come into view. However if it is possible it would be very nice. |
|
@BabakMN yep, that's not going to be possible with Aphrodite. It was kind of, in fact, an anti-goal of the project. Our goal was to serve only the minimum CSS needed to render the initial page, not the CSS needed to display every possible state of the application like you suggest. If you wish to extract the CSS externally, then you might consider a project such as CSS modules: https://github.com/css-modules/css-modules. For some situations, it may be the more efficient thing for your website to do. (I would close this as "wontfix", but it seems I'm not longer an admin of this repo 😮 ) |
|
(And @jlfwong I just added you back as a contributor. Not sure what happened. ¯_(ツ)_/¯) |
|
Thanks everyone. |
Would it be possible to allow for the extraction of a static CSS file instead of injecting the rendered CSS into the HTML document?
For some projects I prefer to have a static CSS file that can be served via CDN with long-term caching.
I suspect that it is technically impossible (due to aphrodite relying on a react render) but I thought it doesn't hurt to open an issue for discussion.
The text was updated successfully, but these errors were encountered: