Problem with multiple stylesheets

Flow
1

I have a custom main-layout.css which I have placed in the same location as the default styles.css
In my Application class, I have

@SpringBootApplication
@StyleSheet(Lumo.STYLESHEET) // Use Aura.STYLESHEET to use Aura instead
@StyleSheet(Lumo.UTILITY_STYLESHEET) // For LumoUtility
@StyleSheet("styles.css")
@StyleSheet("main-layout.css")

When I hit http://localhost:8080

On Safari, I get
[Error] Failed to load resource: the server responded with a status of 403 () (main-layout.css, line 0)

On Chrome, I get

Refused to apply style from 'http://localhost:8080/main-layout.css' because its MIME type ('') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
[LumoInjector] Browser denied to access property "cssRules" for some CSS stylesheets, so they were skipped.
issueWarning$1 @ indexhtml-CLPNLmKq.js:9782

Notice there is no warning about styles.css.
(To confirm it is being loaded properly, I set the page background color in the styles.css and it works as expected)

So how come styles.css is loaded but main-layout.css is not, even though they are under the same directory?

Update:
Further trials have revealed that anything but styles.css does not work
I tried several combinations and all of them failed

my_styles.css
myStyles.css
my-styles.css
main-layout.css
mainLayout.css
main_layout.css

I also tried importing the other inside styles.css via @import. That too failed

2

Vaadin’s default Spring Security settings allow the default stylesheet files but anything custom must be separately allowed by the application.

3

I already had "/public/**", in my SecurityConfiguration, which I thought would be enough.
Explicitly adding "/**.css" fixed the issue.
Thanks Leif!

4

Those rules are based on the request URL rather than the file location. /public/** would help only for something like @Spreadsheet("public/main-layout.css").