Adding styles to a plugin?
We can include a stylehsheet and that works fine, but how are you building in native filamentphp classes into the plugin? Would you not build them in an expect the standard app build to load in the css and only use the .css for custom classes?
6 Replies
if just classes your users will create a theme and add your package paths to the tailwind config
for custom css tell them to import your css file to the theme
The recommended approach is to make them include your views and css files into a custom theme on their end.
If you prefer not to do that you can build your whole plugin file against filament itself and use something like https://www.npmjs.com/package/@awcodes/filament-plugin-purge to dedupe any styles already included. But this approach will have caveats with colors and specificity with the order in which filament loads its core stylesheet and plugin stylesheets.
npm
@awcodes/filament-plugin-purge
A purge tool to keep your Filament plugin from bloating / duplicating Filament's default styles.. Latest version: 1.1.2, last published: 5 months ago. Start using @awcodes/filament-plugin-purge in your project by running
npm i @awcodes/filament-plugin-purge. There are no other projects in the npm registry using @awcodes/filament-plugin-purge.So if you look at the repo here:
https://github.com/tonypartridge/filament-approvals/
we have it configured to parse
'./app/Filament//*.php',
'./resources/views/filament//.blade.php',
'./vendor/filament/**/.blade.php',
I changed this to:
'./src//*.php',
'./resources/views//.blade.php',
'./vendor/filament/**/.blade.php',
But when building we still don't seem to include any of the styles into the build style sheet? For example:
https://github.com/tonypartridge/filament-approvals/blob/3.x/resources/views/tables/columns/approval-status-column-action-view.blade.php
none of the additional styles are being included.
GitHub
GitHub - tonypartridge/filament-approvals
Contribute to tonypartridge/filament-approvals development by creating an account on GitHub.
GitHub
filament-approvals/resources/views/tables/columns/approval-status-c...
Contribute to tonypartridge/filament-approvals development by creating an account on GitHub.
Since your running purge during the build it’s stripping out any classes that are already included in filament. So it’s possible that all the classes in your views are already in filament’s stylesheet.
Supposedly... But if that was the case the CSS styles would be applied but alas it is not. Will try to debug further