mirror of
https://github.com/gohugoio/hugo.git
synced 2024-11-07 20:30:36 -05:00
resources: Add basic @import support to resources.PostCSS
This commit also makes the HUGO_ENVIRONMENT environment variable available to Node. Fixes #6957 Fixes #6961
This commit is contained in:
parent
05a74eaec0
commit
b66d38c419
5 changed files with 313 additions and 1 deletions
|
@ -39,6 +39,12 @@ config [string]
|
|||
noMap [bool]
|
||||
: Default is `true`. Disable the default inline sourcemaps
|
||||
|
||||
inlineImports [bool] {{< new-in "0.66.0" >}}
|
||||
: Default is `false`. Enable inlining of @import statements. It does so recursively, but will only import a file once.
|
||||
URL imports (e.g. `@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');`) and imports with media queries will be ignored.
|
||||
Note that this import routine does not care about the CSS spec, so you can have @import anywhere in the file.
|
||||
Hugo will look for imports relative to the module mount and will respect theme overrides.
|
||||
|
||||
_If no configuration file is used:_
|
||||
|
||||
use [string]
|
||||
|
@ -56,3 +62,20 @@ syntax [string]
|
|||
```go-html-template
|
||||
{{ $style := resources.Get "css/main.css" | resources.PostCSS (dict "config" "customPostCSS.js" "noMap" true) }}
|
||||
```
|
||||
|
||||
## Check Hugo Environment from postcss.config.js
|
||||
|
||||
{{< new-in "0.66.0" >}}
|
||||
|
||||
The current Hugo environment name (set by `--environment` or in config or OS environment) is available in the Node context, which allows constructs like this:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
plugins: [
|
||||
require('autoprefixer'),
|
||||
...process.env.HUGO_ENVIRONMENT === 'production'
|
||||
? [purgecss]
|
||||
: []
|
||||
]
|
||||
}
|
||||
```
|
|
@ -16,7 +16,10 @@ package hugolib
|
|||
import (
|
||||
"io"
|
||||
"os"
|
||||
"os/exec"
|
||||
"path/filepath"
|
||||
"runtime"
|
||||
"strings"
|
||||
"testing"
|
||||
|
||||
"github.com/gohugoio/hugo/htesting"
|
||||
|
@ -694,3 +697,122 @@ Hello2: Bonjour
|
|||
`)
|
||||
|
||||
}
|
||||
|
||||
func TestResourceChainPostCSS(t *testing.T) {
|
||||
if !isCI() {
|
||||
t.Skip("skip (relative) long running modules test when running locally")
|
||||
}
|
||||
|
||||
if runtime.GOOS == "windows" {
|
||||
// TODO(bep)
|
||||
t.Skip("skip npm test on Windows")
|
||||
}
|
||||
|
||||
wd, _ := os.Getwd()
|
||||
defer func() {
|
||||
os.Chdir(wd)
|
||||
}()
|
||||
|
||||
c := qt.New(t)
|
||||
|
||||
packageJSON := `{
|
||||
"scripts": {},
|
||||
"dependencies": {
|
||||
"tailwindcss": "^1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"postcss-cli": "^7.1.0"
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
postcssConfig := `
|
||||
console.error("Hugo Environment:", process.env.HUGO_ENVIRONMENT );
|
||||
|
||||
module.exports = {
|
||||
plugins: [
|
||||
require('tailwindcss')
|
||||
]
|
||||
}
|
||||
`
|
||||
|
||||
tailwindCss := `
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@import "components/all.css";
|
||||
|
||||
h1 {
|
||||
@apply text-2xl font-bold;
|
||||
}
|
||||
|
||||
`
|
||||
|
||||
workDir, clean, err := htesting.CreateTempDir(hugofs.Os, "hugo-test-postcss")
|
||||
c.Assert(err, qt.IsNil)
|
||||
defer clean()
|
||||
|
||||
v := viper.New()
|
||||
v.Set("workingDir", workDir)
|
||||
v.Set("disableKinds", []string{"taxonomyTerm", "taxonomy", "page"})
|
||||
b := newTestSitesBuilder(t).WithLogger(loggers.NewWarningLogger())
|
||||
// Need to use OS fs for this.
|
||||
b.Fs = hugofs.NewDefault(v)
|
||||
b.WithWorkingDir(workDir)
|
||||
b.WithViper(v)
|
||||
|
||||
cssDir := filepath.Join(workDir, "assets", "css", "components")
|
||||
b.Assert(os.MkdirAll(cssDir, 0777), qt.IsNil)
|
||||
|
||||
b.WithContent("p1.md", "")
|
||||
b.WithTemplates("index.html", `
|
||||
{{ $options := dict "inlineImports" true }}
|
||||
{{ $styles := resources.Get "css/styles.css" | resources.PostCSS $options }}
|
||||
Styles RelPermalink: {{ $styles.RelPermalink }}
|
||||
{{ $cssContent := $styles.Content }}
|
||||
Styles Content: Len: {{ len $styles.Content }}|
|
||||
|
||||
`)
|
||||
b.WithSourceFile("assets/css/styles.css", tailwindCss)
|
||||
b.WithSourceFile("assets/css/components/all.css", `
|
||||
@import "a.css";
|
||||
@import "b.css";
|
||||
`, "assets/css/components/a.css", `
|
||||
class-in-a {
|
||||
color: blue;
|
||||
}
|
||||
`, "assets/css/components/b.css", `
|
||||
@import "a.css";
|
||||
|
||||
class-in-b {
|
||||
color: blue;
|
||||
}
|
||||
`)
|
||||
|
||||
b.WithSourceFile("package.json", packageJSON)
|
||||
b.WithSourceFile("postcss.config.js", postcssConfig)
|
||||
|
||||
b.Assert(os.Chdir(workDir), qt.IsNil)
|
||||
_, err = exec.Command("npm", "install").CombinedOutput()
|
||||
b.Assert(err, qt.IsNil)
|
||||
|
||||
out, _ := captureStderr(func() error {
|
||||
b.Build(BuildCfg{})
|
||||
return nil
|
||||
})
|
||||
|
||||
// Make sure Node sees this.
|
||||
b.Assert(out, qt.Contains, "Hugo Environment: production")
|
||||
|
||||
b.AssertFileContent("public/index.html", `
|
||||
Styles RelPermalink: /css/styles.css
|
||||
Styles Content: Len: 770878|
|
||||
`)
|
||||
|
||||
content := b.FileContent("public/css/styles.css")
|
||||
|
||||
b.Assert(strings.Contains(content, "class-in-a"), qt.Equals, true)
|
||||
b.Assert(strings.Contains(content, "class-in-b"), qt.Equals, true)
|
||||
|
||||
}
|
||||
|
|
|
@ -1039,3 +1039,18 @@ func skipSymlink(t *testing.T) {
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
func captureStderr(f func() error) (string, error) {
|
||||
old := os.Stderr
|
||||
r, w, _ := os.Pipe()
|
||||
os.Stderr = w
|
||||
|
||||
err := f()
|
||||
|
||||
w.Close()
|
||||
os.Stderr = old
|
||||
|
||||
var buf bytes.Buffer
|
||||
io.Copy(&buf, r)
|
||||
return buf.String(), err
|
||||
}
|
||||
|
|
|
@ -14,8 +14,18 @@
|
|||
package postcss
|
||||
|
||||
import (
|
||||
"crypto/sha256"
|
||||
"encoding/hex"
|
||||
"io"
|
||||
"io/ioutil"
|
||||
"path"
|
||||
"path/filepath"
|
||||
"regexp"
|
||||
"strings"
|
||||
|
||||
"github.com/gohugoio/hugo/config"
|
||||
|
||||
"github.com/spf13/afero"
|
||||
|
||||
"github.com/gohugoio/hugo/resources/internal"
|
||||
"github.com/spf13/cast"
|
||||
|
@ -33,6 +43,8 @@ import (
|
|||
"github.com/gohugoio/hugo/resources/resource"
|
||||
)
|
||||
|
||||
const importIdentifier = "@import"
|
||||
|
||||
// Some of the options from https://github.com/postcss/postcss-cli
|
||||
type Options struct {
|
||||
|
||||
|
@ -41,6 +53,14 @@ type Options struct {
|
|||
|
||||
NoMap bool // Disable the default inline sourcemaps
|
||||
|
||||
// Enable inlining of @import statements.
|
||||
// Does so recursively, but currently once only per file;
|
||||
// that is, it's not possible to import the same file in
|
||||
// different scopes (root, media query...)
|
||||
// Note that this import routine does not care about the CSS spec,
|
||||
// so you can have @import anywhere in the file.
|
||||
InlineImports bool
|
||||
|
||||
// Options for when not using a config file
|
||||
Use string // List of postcss plugins to use
|
||||
Parser string // Custom postcss parser
|
||||
|
@ -168,15 +188,28 @@ func (t *postcssTransformation) Transform(ctx *resources.ResourceTransformationC
|
|||
|
||||
cmd.Stdout = ctx.To
|
||||
cmd.Stderr = os.Stderr
|
||||
// TODO(bep) somehow generalize this to other external helpers that may need this.
|
||||
env := os.Environ()
|
||||
config.SetEnvVars(&env, "HUGO_ENVIRONMENT", t.rs.Cfg.GetString("environment"))
|
||||
cmd.Env = env
|
||||
|
||||
stdin, err := cmd.StdinPipe()
|
||||
if err != nil {
|
||||
return err
|
||||
}
|
||||
|
||||
src := ctx.From
|
||||
if t.options.InlineImports {
|
||||
var err error
|
||||
src, err = t.inlineImports(ctx)
|
||||
if err != nil {
|
||||
return err
|
||||
}
|
||||
}
|
||||
|
||||
go func() {
|
||||
defer stdin.Close()
|
||||
io.Copy(stdin, ctx.From)
|
||||
io.Copy(stdin, src)
|
||||
}()
|
||||
|
||||
err = cmd.Run()
|
||||
|
@ -187,7 +220,108 @@ func (t *postcssTransformation) Transform(ctx *resources.ResourceTransformationC
|
|||
return nil
|
||||
}
|
||||
|
||||
func (t *postcssTransformation) inlineImports(ctx *resources.ResourceTransformationCtx) (io.Reader, error) {
|
||||
|
||||
const importIdentifier = "@import"
|
||||
|
||||
// Set of content hashes.
|
||||
contentSeen := make(map[string]bool)
|
||||
|
||||
content, err := ioutil.ReadAll(ctx.From)
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
|
||||
contents := string(content)
|
||||
|
||||
newContent, err := t.importRecursive(contentSeen, contents, ctx.InPath)
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
|
||||
return strings.NewReader(newContent), nil
|
||||
|
||||
}
|
||||
|
||||
func (t *postcssTransformation) importRecursive(
|
||||
contentSeen map[string]bool,
|
||||
content string,
|
||||
inPath string) (string, error) {
|
||||
|
||||
basePath := path.Dir(inPath)
|
||||
|
||||
var replacements []string
|
||||
lines := strings.Split(content, "\n")
|
||||
|
||||
for _, line := range lines {
|
||||
line = strings.TrimSpace(line)
|
||||
if shouldImport(line) {
|
||||
path := strings.Trim(strings.TrimPrefix(line, importIdentifier), " \"';")
|
||||
filename := filepath.Join(basePath, path)
|
||||
importContent, hash := t.contentHash(filename)
|
||||
if importContent == nil {
|
||||
t.rs.Logger.WARN.Printf("postcss: Failed to resolve CSS @import in %q for path %q", inPath, filename)
|
||||
continue
|
||||
}
|
||||
|
||||
if contentSeen[hash] {
|
||||
// Just replace the line with an empty string.
|
||||
replacements = append(replacements, []string{line, ""}...)
|
||||
continue
|
||||
}
|
||||
|
||||
contentSeen[hash] = true
|
||||
|
||||
// Handle recursive imports.
|
||||
nested, err := t.importRecursive(contentSeen, string(importContent), filepath.ToSlash(filename))
|
||||
if err != nil {
|
||||
return "", err
|
||||
}
|
||||
importContent = []byte(nested)
|
||||
|
||||
replacements = append(replacements, []string{line, string(importContent)}...)
|
||||
}
|
||||
}
|
||||
|
||||
if len(replacements) > 0 {
|
||||
repl := strings.NewReplacer(replacements...)
|
||||
content = repl.Replace(content)
|
||||
}
|
||||
|
||||
return content, nil
|
||||
}
|
||||
|
||||
func (t *postcssTransformation) contentHash(filename string) ([]byte, string) {
|
||||
b, err := afero.ReadFile(t.rs.Assets.Fs, filename)
|
||||
if err != nil {
|
||||
return nil, ""
|
||||
}
|
||||
h := sha256.New()
|
||||
h.Write(b)
|
||||
return b, hex.EncodeToString(h.Sum(nil))
|
||||
}
|
||||
|
||||
// Process transforms the given Resource with the PostCSS processor.
|
||||
func (c *Client) Process(res resources.ResourceTransformer, options Options) (resource.Resource, error) {
|
||||
return res.Transform(&postcssTransformation{rs: c.rs, options: options})
|
||||
}
|
||||
|
||||
var shouldImportRe = regexp.MustCompile(`^@import ["'].*["'];?\s*(/\*.*\*/)?$`)
|
||||
|
||||
// See https://www.w3schools.com/cssref/pr_import_rule.asp
|
||||
// We currently only support simple file imports, no urls, no media queries.
|
||||
// So this is OK:
|
||||
// @import "navigation.css";
|
||||
// This is not:
|
||||
// @import url("navigation.css");
|
||||
// @import "mobstyle.css" screen and (max-width: 768px);
|
||||
func shouldImport(s string) bool {
|
||||
if !strings.HasPrefix(s, importIdentifier) {
|
||||
return false
|
||||
}
|
||||
if strings.Contains(s, "url(") {
|
||||
return false
|
||||
}
|
||||
|
||||
return shouldImportRe.MatchString(s)
|
||||
}
|
||||
|
|
|
@ -37,3 +37,21 @@ func TestDecodeOptions(t *testing.T) {
|
|||
c.Assert(opts2.NoMap, qt.Equals, true)
|
||||
|
||||
}
|
||||
|
||||
func TestShouldImport(t *testing.T) {
|
||||
c := qt.New(t)
|
||||
|
||||
for _, test := range []struct {
|
||||
input string
|
||||
expect bool
|
||||
}{
|
||||
{input: `@import "navigation.css";`, expect: true},
|
||||
{input: `@import "navigation.css"; /* Using a string */`, expect: true},
|
||||
{input: `@import "navigation.css"`, expect: true},
|
||||
{input: `@import 'navigation.css';`, expect: true},
|
||||
{input: `@import url("navigation.css");`, expect: false},
|
||||
{input: `@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,800,800i&display=swap');`, expect: false},
|
||||
} {
|
||||
c.Assert(shouldImport(test.input), qt.Equals, test.expect)
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue