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.

Sign up for GitHub

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

Jump to bottom

Webpack plugin for extract #219

Open
MindaugasVarkalys opened this issue Jan 16, 2019 · 4 comments
Open

Webpack plugin for extract #219

MindaugasVarkalys opened this issue Jan 16, 2019 · 4 comments

Comments

@MindaugasVarkalys
Copy link

Is there any plugin for Webpack to extract static CSS?

The current solution to extract CSS using Node script is very inconvenient because it cannot be added to Webpack build.
@devmattrick
Copy link

I was looking into this a bit to possibly make my own plugin, but unfortunately it seems like nano-css isn't really statically analyzable, which makes it difficult to put together into a webpack plugin.

Looking at the example, the nano-css/addon/extract addon relies on the code to actually execute for the addon to generate the CSS. I don't think there's really a way for this to work nicely inside a webpack plugin to my knowledge.

I don't have too much experience with webpack plugins, so perhaps there's another, better way to go about this?

@streamich
Copy link
Owner

streamich commented Mar 20, 2019 •
edited
Loading

A "simple" way of achieving it would be:

  1. Put all nano-css styling in separate files, with *.css.js extension.
  2. Write a script or a Webpack plugin that executes all *.css.js files.
  3. Once executed, you will have raw CSS in nano.raw property.

As a side not, you may not need to "extract" CSS into a separate *.css file. If you do static file generation or server side rendering you may want to consider inlining the CSS by simply:

const html = `
  <html>
    ...
    <style>${nano-raw}</style>
    ...
  </html>
`;

@TheBosZ
Copy link
Contributor

TheBosZ commented Apr 5, 2019

It's quite possible to make one. I made one for Rollup: https://bitbucket.org/TheBosZ/rollup-plugin-nano-css/

@TheBosZ
Copy link
Contributor

TheBosZ commented May 9, 2019

I've created a loader that does the same thing as my Rollup plugin: https://www.npmjs.com/package/nano-css-loader

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@TheBosZ @devmattrick @MindaugasVarkalys @streamich