CSS and @import

[bwintx]

If one is using vanilla CSS with @import, what is the recommended way to handle that with Hugo — and without PostCSS, if that’s possible?

After seeing this week’s WebKit announcement about CSS nesting for selected browsers, I’m thinking ahead about how to convert a Sass multi-file workflow to totally vanilla CSS. My early experimentation has yielded no good results. I’ve had no success putting the files in assets/ and using resources.Get *either with or without toCSS) so Hugo Pipes would change the site when any of the related CSS changes). I assume I’m missing a step somewhere.

Or does Hugo simply not support processing vanilla CSS that way?

(And I apologize for not having a repo to view; am experimenting within my main repo without committing anything yet.)

[jmooring]

To clarify, what do you expect @import to do?

[bwintx]

For example, given this…

.
|__ assets
    |___futurecss
        critical.css
        |__partials
           |___partial1.css
           |___partial2.css

… with assets/futurecss/critical.css something like this:

@charset "utf-8";
@import "partials/partial1.css";
@import "partials/partial2.css";

…and a statement like this in either head.html or a partial within it:

{{- $css := "" -}}
	{{- $css = resources.Get "futurecss/critical.css" -}}
	{{- with $css }}
		<style>{{ .Content | safeCSS }}</style>
	{{- end }}

… I’d want to get inline style imported from those CSS partials. Have tried it with various path options, including:

partials/partial1.css
/partials/partial1.css
futurecss/partials/partial1.css
/futurecss/partials/partial1.css
assets/futurecss/partials/partial1.css
/assets/futurecss/partials/partial1.css

…and none seems to work. The only thing which has worked is actually putting those partials’ content in critical.css. Certainly, one can do that, but I like keeping those items separate if possible.

Sorry if that’s not any clearer. I probably just need to put up a test repo.

[jmooring]

Assuming that I understand your objective…

@import in a CSS file reference the other files, it does not import them in the same way that Sass does during transpilation.

So I think you would need to:

1) Name your CSS files so that when sorted they are concatenated in the correct order:

01_main.css
02_reset.css
03_vars.css
04_layout.css

2) Use resources.Match "*.css" to get all of them.

3) Sort them (resources.Match may already do that… I don’t remember).

4) Concatenate them with resources.Concat.

[bwintx]

OK. That makes sense, because right now all the importation does is come back with, again using my example,

<style>@charset "utf-8";
@import "partials/partial1.css";
@import "partials/partial2.css";
</style>

…instead of actually importing them. So I guess concatenation is the way to go. Thank you as always, @jmooring!

[jmooring]

Bonus: with one bundled resource you can autoprefix, purge, and minify.

[chrillek]

@import is a CSS directive, not a Hugo one. It’s the browser who does the import, or rather loading. Which requires attention to directories and paths when using Hugo so that it puts the file where the browser is looking for them.

[bwintx]

Yes, I realize that now. I guess the kind of @import I wanted to do would, indeed, require PostCSS.

[bep]

@chrillek

@import is a CSS directive, not a Hugo one. It’s the browser who does the import,

We do have the inlineImports option in the PostCSS filter which I find works great when used with TailwindCSS. I guess that also makes it a Hugo thing. Also, SCSS has another way of handling imports, which I guess is also a “Hugo thing”.

Thinking about it, we should consider pulling the code for the inline imports out into its own filter. I guess that would be generally useful.