Tailwind CSS CLI does not resolve @import paths #13738
Description
I ran across this while verifying our Tailwind CSS documentation.
In #13720 we added the "disableInlineImports" option:
- When
false, Hugo should resolve@importpaths (this works great) - When
true, the Tailwind CSS client should resolve the@importpaths (this fails)
I understand that the Tailwind CSS client will not be able to resolve mounted files, and the second part of the test below takes that into account. Also note that I manually tested the Tailwind CSS client and got the expected results:
npx tailwindcss -i assets/css/main.css
func TestFoo(t *testing.T) {
t.Parallel()
files := `
-- hugo.toml --
disableKinds = ['page','rss','section','sitemap','taxonomy','term']
theme = 'my-theme'
[[module.mounts]]
source = 'assets'
target = 'assets'
[[module.mounts]]
source = 'other'
target = 'assets/css'
-- assets/css/main.css --
@import "tailwindcss";
@import "./colors/red.css";
@import "./colors/blue.css";
@import "./colors/purple.css";
-- assets/css/colors/red.css --
@import "./green.css";
.red {color: red;}
-- assets/css/colors/green.css --
.green {color: green;}
-- themes/my-theme/assets/css/colors/blue.css --
.blue {color: blue;}
-- other/colors/purple.css --
.purple {color: purple;}
-- layouts/home.html --
{{ with (templates.Defer (dict "key" "global")) }}
{{ with resources.Get "css/main.css" }}
{{ $opts := dict "disableInlineImports" false }}
{{ with . | css.TailwindCSS $opts }}
<link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}
{{ end }}
{{ end }}
-- package.json --
{
"devDependencies": {
"@tailwindcss/cli": "^4.1.7",
"tailwindcss": "^4.1.7"
}
}
`
// disableInlineImports: false
b := hugolib.NewIntegrationTestBuilder(
hugolib.IntegrationTestConfig{
T: t,
TxtarString: files,
NeedsOsFS: true,
NeedsNpmInstall: true,
LogLevel: logg.LevelInfo,
}).Build()
b.AssertFileContent("public/css/main.css", "color: red;")
b.AssertFileContent("public/css/main.css", "color: green;")
b.AssertFileContent("public/css/main.css", "color: blue;")
b.AssertFileContent("public/css/main.css", "color: purple;")
// disableInlineImports: true
files = strings.ReplaceAll(files, `"disableInlineImports" false`, `"disableInlineImports" true`)
files = strings.ReplaceAll(files, `@import "./colors/blue.css";`, ``)
files = strings.ReplaceAll(files, `@import "./colors/purple.css";`, ``)
b = hugolib.NewIntegrationTestBuilder(
hugolib.IntegrationTestConfig{
T: t,
TxtarString: files,
NeedsOsFS: true,
NeedsNpmInstall: true,
LogLevel: logg.LevelInfo,
}).Build()
b.AssertFileContent("public/css/main.css", "color: red;") // fails
b.AssertFileContent("public/css/main.css", "color: green;") // fails
b.AssertFileContent("public/css/main.css", "! color: blue;")
b.AssertFileContent("public/css/main.css", "! color: purple;")
}