Add Angular Support

[benjaminforras]

Can someone show me an example when this plugin is being used with Angular & Webpack?

[harlan-zw]

Hey @TryHardDood

I have tried it with angular but it has an interesting webpack setup which I haven't been able to figure out.

This is as far as I got https://github.com/windicss/windicss-webpack-plugin/blob/feat/angular-example/example/angular/webpack.config.js. It seems like it doesn't pull in the virtual windi file, so will only transform @apply's in css atm.

If you have any experience with it would love a hand.

[jsanta]

Hi.
As far as I've seen the problem is not on how Angular makes its compilation, but on how Webpack is getting the styles.
I've made the following tests:

1. created an Angular project
2. installed windi-webpack plugin
3. added import 'windi.css'; to the main.ts file
4. installed @angular-builders/custom-webpack
5. created a webpack-windi.config.js file using the example
6. changed the angular,json file so the architect.build.builder section looks like:

"architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "outputs": ["{options.outputPath}"],
          "options": {
            "customWebpackConfig": {
              "path": "./webpack-windi.config.js",
              "mergeRules": {
                "externals": "replace"
              }
            },

and the serve.builder section like:

"serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",

7. run the angular project using ng serve
8. inspected the main.js bundle file <- here, there's a definition for all windi styles

So after this I tried to see what was inside this virtual file. For that I used the val-loader webpack plugin, and got the complete windi styles (without cleaning all unused styles).

I'm stuck trying to generate the CSS style file from this virtual file.
Hope my findings help at least a bit, we are willing to drop Tailwind in favor of faster build times.