diff options
Diffstat (limited to 'docs/content/en/functions/css')
| -rw-r--r-- | docs/content/en/functions/css/PostCSS.md | 58 | ||||
| -rw-r--r-- | docs/content/en/functions/css/Sass.md | 32 | ||||
| -rw-r--r-- | docs/content/en/functions/css/TailwindCSS.md | 50 | ||||
| -rw-r--r-- | docs/content/en/functions/css/_index.md | 7 |
4 files changed, 68 insertions, 79 deletions
diff --git a/docs/content/en/functions/css/PostCSS.md b/docs/content/en/functions/css/PostCSS.md index 1a1a792ec..9cc698248 100644 --- a/docs/content/en/functions/css/PostCSS.md +++ b/docs/content/en/functions/css/PostCSS.md @@ -3,14 +3,11 @@ title: css.PostCSS description: Processes the given resource with PostCSS using any PostCSS plugin. categories: [] keywords: [] -action: - aliases: [postCSS] - related: - - functions/css/Sass - - functions/css/TailwindCSS - returnType: resource.Resource - signatures: ['css.PostCSS [OPTIONS] RESOURCE'] -toc: true +params: + functions_and_methods: + aliases: [postCSS] + returnType: resource.Resource + signatures: ['css.PostCSS [OPTIONS] RESOURCE'] --- {{< new-in 0.128.0 />}} @@ -25,40 +22,40 @@ toc: true Follow the steps below to transform CSS using any of the available [PostCSS plugins]. -[postcss plugins]: https://postcss.org/docs/postcss-plugins +### Step 1 -Step 1 -: Install [Node.js]. +Install [Node.js]. -[node.js]: https://nodejs.org/en/download +### Step 2 -Step 2 -: Install the required Node.js packages in the root of your project. For example, to add vendor prefixes to your CSS rules: +Install the required Node.js packages in the root of your project. For example, to add vendor prefixes to your CSS rules: ```sh npm i -D postcss postcss-cli autoprefixer ``` -Step 3 -: Create a PostCSS configuration file in the root of your project. +### Step 3 -{{< code file=postcss.config.js >}} +Create a PostCSS configuration file in the root of your project. + +```js {file="postcss.config.js"} module.exports = { plugins: [ require('autoprefixer') ] }; -{{< /code >}} +``` + +> [!note] +> If you are a Windows user, and the path to your project contains a space, you must place the PostCSS configuration within the package.json file. See [this example] and issue [#7333]. -{{% note %}} -{{% include "functions/resources/_common/postcss-windows-warning.md" %}} -{{% /note %}} +### Step 4 -Step 4 -: Place your CSS file within the `assets/css` directory. +Place your CSS file within the `assets/css` directory. -Step 5 -: Process the resource with PostCSS: +### Step 5 + +Process the resource with PostCSS: ```go-html-template {{ with resources.Get "css/main.css" | postCSS }} @@ -74,13 +71,13 @@ config : (`string`) The directory that contains the PostCSS configuration file. Default is the root of the project directory. noMap -: (`bool`) Default is `false`. If `true`, disables inline sourcemaps. +: (`bool`) Whether to disable inline source maps. Default is `false`. inlineImports -: (`bool`) 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. +: (`bool`) Whether to 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. Default is `false`. skipInlineImportsNotFound -: (`bool`) Default is `false`. Before Hugo 0.99.0 when `inlineImports` was enabled and we failed to resolve an import, we logged it as a warning. We now fail the build. If you have regular CSS imports in your CSS that you want to preserve, you can either use imports with URL or media queries (Hugo does not try to resolve those) or set `skipInlineImportsNotFound` to true. +: (`bool`) Whether to allow the build process to continue despite unresolved import statements, preserving the original import declarations. If you have regular CSS imports in your CSS that you want to preserve, you can either use imports with URL or media queries (Hugo does not try to resolve those) or set this option to `true`. Default is `false`." ```go-html-template {{ $opts := dict "config" "config-directory" "noMap" true }} @@ -124,3 +121,8 @@ module.exports = { ] } ``` + +[#7333]: https://github.com/gohugoio/hugo/issues/7333 +[Node.js]: https://nodejs.org/en +[PostCSS plugins]: https://postcss.org/docs/postcss-plugins +[this example]: https://github.com/postcss/postcss-load-config#packagejson diff --git a/docs/content/en/functions/css/Sass.md b/docs/content/en/functions/css/Sass.md index 73f7af1ea..1d5487130 100644 --- a/docs/content/en/functions/css/Sass.md +++ b/docs/content/en/functions/css/Sass.md @@ -3,16 +3,11 @@ title: css.Sass description: Transpiles Sass to CSS. categories: [] keywords: [] -action: - aliases: [toCSS] - related: - - functions/resources/Fingerprint - - functions/resources/Minify - - functions/css/PostCSS - - functions/resources/PostProcess - returnType: resource.Resource - signatures: ['css.Sass [OPTIONS] RESOURCE'] -toc: true +params: + functions_and_methods: + aliases: [toCSS] + returnType: resource.Resource + signatures: ['css.Sass [OPTIONS] RESOURCE'] --- {{< new-in 0.128.0 />}} @@ -70,10 +65,10 @@ precision : (`int`) Precision of floating point math. Not applicable to Dart Sass. enableSourceMap -: (`bool`) If `true`, generates a source map. +: (`bool`) Whether to generate a source map. Default is `false`. sourceMapIncludeSources -: (`bool`) If `true`, embeds sources in the generated source map. Not applicable to LibSass. +: (`bool`) Whether to embed sources in the generated source map. Not applicable to LibSass. Default is `false`. includePaths : (`slice`) A slice of paths, relative to the project root, that the transpiler will use when resolving `@use` and `@import` statements. @@ -128,7 +123,7 @@ Run `hugo env` to list the active transpilers. ### Installing in a production environment -For [CI/CD] deployments (e.g., GitHub Pages, GitLab Pages, Netlify, etc.) you must edit the workflow to install Dart Sass before Hugo builds the site[^2]. Some providers allow you to use one of the package managers above, or you can download and extract one of the prebuilt binaries. +For [CI/CD](g) deployments (e.g., GitHub Pages, GitLab Pages, Netlify, etc.) you must edit the workflow to install Dart Sass before Hugo builds the site[^2]. Some providers allow you to use one of the package managers above, or you can download and extract one of the prebuilt binaries. [^2]: You do not have to do this if (a) you have not modified the assets cache location, and (b) you have not set `useResourceCacheWhen` to `never` in your [site configuration], and (c) you add and commit your `resources` directory to your repository. @@ -149,8 +144,8 @@ To install Dart Sass for your builds on GitLab Pages, the `.gitlab-ci.yml` file ```yaml variables: - HUGO_VERSION: 0.141.0 - DART_SASS_VERSION: 1.83.4 + HUGO_VERSION: 0.144.2 + DART_SASS_VERSION: 1.85.0 GIT_DEPTH: 0 GIT_STRATEGY: clone GIT_SUBMODULE_STRATEGY: recursive @@ -183,8 +178,8 @@ To install Dart Sass for your builds on Netlify, the `netlify.toml` file should ```toml [build.environment] -HUGO_VERSION = "0.141.0" -DART_SASS_VERSION = "1.83.4" +HUGO_VERSION = "0.144.2" +DART_SASS_VERSION = "1.85.0" NODE_VERSION = "22" TZ = "America/Los_Angeles" @@ -229,12 +224,11 @@ If you build Hugo from source and run `mage test -v`, the test will fail if you [brew.sh]: https://brew.sh/ [chocolatey.org]: https://community.chocolatey.org/packages/sass -[ci/cd]: https://en.wikipedia.org/wiki/CI/CD [dart sass]: https://sass-lang.com/dart-sass [libsass]: https://sass-lang.com/libsass [prebuilt binaries]: https://github.com/sass/dart-sass/releases/latest [scoop.sh]: https://scoop.sh/#/apps?q=sass -[site configuration]: /getting-started/configuration/#configure-build +[site configuration]: /configuration/build/ [snap package]: /installation/linux/#snap [snapcraft.io]: https://snapcraft.io/dart-sass [starter workflow]: https://github.com/actions/starter-workflows/blob/main/pages/hugo.yml diff --git a/docs/content/en/functions/css/TailwindCSS.md b/docs/content/en/functions/css/TailwindCSS.md index 44c549196..6add7373a 100644 --- a/docs/content/en/functions/css/TailwindCSS.md +++ b/docs/content/en/functions/css/TailwindCSS.md @@ -3,28 +3,27 @@ title: css.TailwindCSS description: Processes the given resource with the Tailwind CSS CLI. categories: [] keywords: [] -action: - aliases: [] - related: - - functions/resources/Fingerprint - - functions/resources/Minify - - functions/css/PostCSS - returnType: resource.Resource - signatures: ['css.TailwindCSS [OPTIONS] RESOURCE'] -toc: true +params: + functions_and_methods: + aliases: [] + returnType: resource.Resource + signatures: ['css.TailwindCSS [OPTIONS] RESOURCE'] --- {{< new-in 0.128.0 />}} -Use the `css.TailwindCSS` function to process your Tailwind CSS files. This function uses the Tailwind CSS CLI to: +Use the `css.TailwindCSS` function to process your Tailwind CSS files. This function uses the Tailwind CSS CLI to: 1. Scan your templates for Tailwind CSS utility class usage. 1. Compile those utility classes into standard CSS. 1. Generate an optimized CSS output file. +> [!caution] +> Tailwind CSS v4.0 and later requires a relatively [modern browser](https://tailwindcss.com/docs/compatibility#browser-support) to render correctly. + ## Setup -###### Step 1 +### Step 1 Install the Tailwind CSS CLI v4.0 or later: @@ -36,7 +35,7 @@ The TailwindCSS CLI is also available as a [standalone executable] if you want t [standalone executable]: https://github.com/tailwindlabs/tailwindcss/releases/latest -###### Step 2 +### Step 2 Add this to your site configuration: @@ -58,23 +57,22 @@ source = "(postcss|tailwind)\\.config\\.js" target = "css" {{< /code-toggle >}} - -###### Step 3 +### Step 3 Create a CSS entry file: -{{< code file=assets/css/main.css copy=true >}} +```css {file="assets/css/main.css" copy=true} @import "tailwindcss"; @source "hugo_stats.json"; -{{< /code >}} +``` Tailwind CSS respects `.gitignore` files. This means that if `hugo_stats.json` is listed in your `.gitignore` file, Tailwind CSS will ignore it. To make `hugo_stats.json` available to Tailwind CSS you must explicitly source it as shown in the example above. -###### Step 4 +### Step 4 Create a partial template to process the CSS with the Tailwind CSS CLI: -{{< code file=layouts/partials/css.html copy=true >}} +```go-html-template {file="layouts/partials/css.html" copy=true} {{ with (templates.Defer (dict "key" "global")) }} {{ with resources.Get "css/main.css" }} {{ $opts := dict @@ -92,21 +90,21 @@ Create a partial template to process the CSS with the Tailwind CSS CLI: {{ end }} {{ end }} {{ end }} -{{< /code >}} +``` -###### Step 5 +### Step 5 Call the partial template from your base template: -{{< code file=layouts/default/baseof.html >}} +```go-html-template {file="layouts/_default/baseof.html"} <head> ... {{ partialCached "css.html" . }} ... <head> -{{< /code >}} +``` -###### Step 6 +### Step 6 Optionally create a `tailwind.config.js` file in the root of your project as shown below. This is necessary if you use the [Tailwind CSS IntelliSense extension] for Visual Studio Code. @@ -114,7 +112,7 @@ extension] for Visual Studio Code. [Tailwind CSS IntelliSense extension]: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss -{{< code file=tailwind.config.js copy=true >}} +```js {file="tailwind.config.js" copy=true} /* This file is present to satisfy a requirement of the Tailwind CSS IntelliSense extension for Visual Studio Code. @@ -123,7 +121,7 @@ https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss The rest of this file is intentionally empty. */ -{{< /code >}} +``` ## Options @@ -137,4 +135,4 @@ inlineImports : (`bool`) Whether to enable inlining of `@import` statements. Inlining is performed recursively, but currently once only per file. It is not possible to import the same file in different scopes (root, media query, etc.). Note that this import routine does not care about the CSS specification, so you can have `@import` statements anywhere in the file. Default is `false`. skipInlineImportsNotFound -: (`bool`) When `inlineImports` is enabled, we fail the build if an import cannot be resolved. Enable this option to allow the build to continue and leave the import statement in place. Note that the inline importer does not process URL location or imports with media queries, so those will be left as-is even without enabling this option. Default is `false`. +: (`bool`) Whether to allow the build process to continue despite unresolved import statements, preserving the original import declarations. It is important to note that the inline importer does not process URL-based imports or those with media queries, and these will remain unaltered even when this option is disabled. Default is `false`. diff --git a/docs/content/en/functions/css/_index.md b/docs/content/en/functions/css/_index.md index a83a23819..9faabbbe9 100644 --- a/docs/content/en/functions/css/_index.md +++ b/docs/content/en/functions/css/_index.md @@ -1,12 +1,7 @@ --- title: CSS functions linkTitle: css -description: Template functions to work with CSS and Sass files. +description: Use these functions to work with CSS and Sass files. categories: [] keywords: [] -menu: - docs: - parent: functions --- - -Use these functions to work with CSS and Sass files. |