Compiled CSS is injected too late

[AIC-BV]

The Tailwind UI CSS is injected in the HTML after all our own assets are injected, making it more difficult to override css
I think this is since the latest version?

Event::listen('backend.page.beforeDisplay', function($controller, $action, $params) {
    $controller->addCss('/plugins/aic/extendwinterpages/assets/css/skin-reset.css', 'AIC.v25');
});

[LukeTowers]

This is because Vite assets are injected after CSS & JS assets. For now if you were to add your assets as a vite asset instead then it should work again, but longer term I'd like the priority system to be able to mix and match the different types.

https://wintercms.com/docs/v1.2/docs/console/asset-compilation-vite

[AIC-BV]

How do I convert this to Vite?
No matter what I fill in as second parameter I keep getting an error like "Unable to resolve package: x"
-> "Unable to resolve package: aic.extendwinterpages".

Event::listen('backend.page.beforeDisplay', function($controller, $action, $params) {
    $controller->addVite('/plugins/aic/extendwinterpages/assets/css/skin-reset.css', 'Aic.ExtendWinterPages');
});

Event::listen('backend.page.beforeDisplay', function($controller, $action, $params) {
    $controller->addVite('assets/css/skin-reset.css', 'AIC.v26');
});

Leaving the second parameter empty
-> Unable to determine vite package from namespace: Backend\Controllers\Index

Also how will this work with caching? WIth the previous method I could just increase the 'v' number by one

[LukeTowers]

@AIC-BV you need to use the vite:create command and tweak the configuration as necessary. See https://wintercms.com/docs/v1.2/docs/console/asset-compilation-vite#automatic-vite-configuration and refer to how this plugin is setup and using vite. Let me know if you have any questions!

[AIC-BV]

@LukeTowers Seems to work in general!
Having an error on compiling, but my CSS is compiled even though there is an error and it works!

Vite installing Winter.TailwindUI overrides the other tailwind files; but also it shouldnt be recompiled when I request aic.extendwinterpages?

I did the following commands:

php artisan vite:create aic.extendwinterpages --tailwind

php artisan vite:install aic.extendwinterpages

php artisan vite:list // (I can now see that aic.extendwinterpages is added to the list)

php artisan vite:compile aic.extendwinterpages

Moved my CSS to the new location generated by Vite
And finally added this

Event::listen('backend.page.beforeDisplay', function($controller, $action, $params) {
    $controller->addVite('assets/src/css/aic-extendwinterpages.css', 'aic.extendwinterpages');
});

[LukeTowers]

What does your project's package.json look like?

[AIC-BV]

In my plugin

{
    "name": "aic-extendwinterpages",
    "devDependencies": {
        "tailwindcss": "^3.4.0",
        "@tailwindcss/forms": "^0.5.3",
        "@tailwindcss/typography": "^0.5.2"
    }
}

In my root

"workspaces": {
      "packages": [
          "plugins/aic/extendwinterpages",
          "plugins/winter/tailwindui"
      ]
  }

[LukeTowers]

@AIC-BV do you still get that error message even with Winter.TailwindUI being in your workspaces property?

[AIC-BV]

No if Winter.TailwindUI is in the workspaces property the error doesn't appear but Winter.TailwindUI gets recompiled when doing php artisan vite:compile aic.extendwinterpages

Its only in there because the error message told me to install it for Winter.TailwindUI.
When I remove it, the error reappears for php artisan vite:compile aic.extendwinterpages

I assume php artisan vite:compile aic.extendwinterpages recompiles every Vite asset and not only the one you request which is the problem. I shouldn't have had to Vite install Winter.TailwindUI as long as I don't want to recompile it?

[LukeTowers]

@AIC-BV when you remove it and then run vite:install again, it should detect it again and ask you if you would like to add it. You can answer no (n) to that prompt and it will instead add it to the list of ignoredPackages so that it knows that it exists and that you have chosen to ignore it.

I've updated the message displayed in wintercms/winter@fb2e6e3 to hopefully improve the clarity of what is happening.

[LukeTowers]

@AIC-BV to compile a specific package you need to pass the -p option: https://wintercms.com/docs/v1.2/docs/console/asset-compilation-vite#compile-a-vite-packages. Only vite:watch supports the package name being passed as an argument.

@jaxwilko any thoughts on making a tweak to the *:compile commands to support additional arguments being interpreted as -p option values?

[AIC-BV]

@AIC-BV to compile a specific package you need to pass the -p option

php artisan vite:compile -p aic.extendwinterpages
Works as expected! I forgot to use the -p as you said