mirror of
https://github.com/gohugoio/hugo.git
synced 2024-07-07 17:46:05 +00:00
dea71670c0
Before this commit, you would have to use page bundles to do image processing etc. in Hugo.
This commit adds
* A new `/assets` top-level project or theme dir (configurable via `assetDir`)
* A new template func, `resources.Get` which can be used to "get a resource" that can be further processed.
This means that you can now do this in your templates (or shortcodes):
```bash
{{ $sunset := (resources.Get "images/sunset.jpg").Fill "300x200" }}
```
This also adds a new `extended` build tag that enables powerful SCSS/SASS support with source maps. To compile this from source, you will also need a C compiler installed:
```
HUGO_BUILD_TAGS=extended mage install
```
Note that you can use output of the SCSS processing later in a non-SCSSS-enabled Hugo.
The `SCSS` processor is a _Resource transformation step_ and it can be chained with the many others in a pipeline:
```bash
{{ $css := resources.Get "styles.scss" | resources.ToCSS | resources.PostCSS | resources.Minify | resources.Fingerprint }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Digest }}" media="screen">
```
The transformation funcs above have aliases, so it can be shortened to:
```bash
{{ $css := resources.Get "styles.scss" | toCSS | postCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Digest }}" media="screen">
```
A quick tip would be to avoid the fingerprinting part, and possibly also the not-superfast `postCSS` when you're doing development, as it allows Hugo to be smarter about the rebuilding.
Documentation will follow, but have a look at the demo repo in https://github.com/bep/hugo-sass-test
New functions to create `Resource` objects:
* `resources.Get` (see above)
* `resources.FromString`: Create a Resource from a string.
New `Resource` transformation funcs:
* `resources.ToCSS`: Compile `SCSS` or `SASS` into `CSS`.
* `resources.PostCSS`: Process your CSS with PostCSS. Config file support (project or theme or passed as an option).
* `resources.Minify`: Currently supports `css`, `js`, `json`, `html`, `svg`, `xml`.
* `resources.Fingerprint`: Creates a fingerprinted version of the given Resource with Subresource Integrity..
* `resources.Concat`: Concatenates a list of Resource objects. Think of this as a poor man's bundler.
* `resources.ExecuteAsTemplate`: Parses and executes the given Resource and data context (e.g. .Site) as a Go template.
Fixes #4381
Fixes #4903
Fixes #4858
112 lines
3.2 KiB
Go
112 lines
3.2 KiB
Go
// Copyright 2018 The Hugo Authors. All rights reserved.
|
|
//
|
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
// you may not use this file except in compliance with the License.
|
|
// You may obtain a copy of the License at
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
|
|
// +build extended
|
|
|
|
package scss
|
|
|
|
import (
|
|
"fmt"
|
|
"io"
|
|
"path"
|
|
"strings"
|
|
|
|
"github.com/bep/go-tocss/scss"
|
|
"github.com/bep/go-tocss/scss/libsass"
|
|
"github.com/bep/go-tocss/tocss"
|
|
"github.com/gohugoio/hugo/helpers"
|
|
"github.com/gohugoio/hugo/media"
|
|
"github.com/gohugoio/hugo/resource"
|
|
)
|
|
|
|
// Used in tests. This feature requires Hugo to be built with the extended tag.
|
|
func Supports() bool {
|
|
return true
|
|
}
|
|
|
|
func (t *toCSSTransformation) Transform(ctx *resource.ResourceTransformationCtx) error {
|
|
ctx.OutMediaType = media.CSSType
|
|
|
|
var outName string
|
|
if t.options.from.TargetPath != "" {
|
|
ctx.OutPath = t.options.from.TargetPath
|
|
} else {
|
|
ctx.ReplaceOutPathExtension(".css")
|
|
}
|
|
|
|
outName = path.Base(ctx.OutPath)
|
|
|
|
options := t.options
|
|
|
|
// We may allow the end user to add IncludePaths later, if we find a use
|
|
// case for that.
|
|
options.to.IncludePaths = t.c.sfs.RealDirs(path.Dir(ctx.SourcePath))
|
|
|
|
if ctx.InMediaType.SubType == media.SASSType.SubType {
|
|
options.to.SassSyntax = true
|
|
}
|
|
|
|
if options.from.EnableSourceMap {
|
|
|
|
options.to.SourceMapFilename = outName + ".map"
|
|
options.to.SourceMapRoot = t.c.rs.WorkingDir
|
|
|
|
// Setting this to the relative input filename will get the source map
|
|
// more correct for the main entry path (main.scss typically), but
|
|
// it will mess up the import mappings. As a workaround, we do a replacement
|
|
// in the source map itself (see below).
|
|
//options.InputPath = inputPath
|
|
options.to.OutputPath = outName
|
|
options.to.SourceMapContents = true
|
|
options.to.OmitSourceMapURL = false
|
|
options.to.EnableEmbeddedSourceMap = false
|
|
}
|
|
|
|
res, err := t.c.toCSS(options.to, ctx.To, ctx.From)
|
|
if err != nil {
|
|
return err
|
|
}
|
|
|
|
if options.from.EnableSourceMap && res.SourceMapContent != "" {
|
|
sourcePath := t.c.sfs.RealFilename(ctx.SourcePath)
|
|
|
|
if strings.HasPrefix(sourcePath, t.c.rs.WorkingDir) {
|
|
sourcePath = strings.TrimPrefix(sourcePath, t.c.rs.WorkingDir+helpers.FilePathSeparator)
|
|
}
|
|
|
|
// This is a workaround for what looks like a bug in Libsass. But
|
|
// getting this resolution correct in tools like Chrome Workspaces
|
|
// is important enough to go this extra mile.
|
|
mapContent := strings.Replace(res.SourceMapContent, `stdin",`, fmt.Sprintf("%s\",", sourcePath), 1)
|
|
|
|
return ctx.PublishSourceMap(mapContent)
|
|
}
|
|
return nil
|
|
}
|
|
|
|
func (c *Client) toCSS(options scss.Options, dst io.Writer, src io.Reader) (tocss.Result, error) {
|
|
var res tocss.Result
|
|
|
|
transpiler, err := libsass.New(options)
|
|
if err != nil {
|
|
return res, err
|
|
}
|
|
|
|
res, err = transpiler.Execute(dst, src)
|
|
if err != nil {
|
|
return res, fmt.Errorf("SCSS processing failed: %s", err)
|
|
}
|
|
|
|
return res, nil
|
|
}
|