Skip to content

Styles

Jump to bottom
Regis Philibert edited this page Oct 31, 2022 · 8 revisions

HUGE/Styles handles the project's styles.

TL;DR:

HUGE CONFIG!

# _huge/config/styles.yaml
styles:

- name: main
  path: css/main.scss
  use:
   - tailwind

- name: carousel
  path: css/carousel.css
  internal: true
  fingerprint: never
  minify: production

- path: css/libs/animations.css
  integrity: true

Hugo template

<head>
<!-- main -->
{{ partial "huge/styles/tags "main" }}
{{ if .IsHome }}
  <!-- animations, carousel -->
  {{ partial "huge/styles/tags (slice "css/animations.css" "carousel") }}
{{ end }}
</head>

HTML

<head>
  <!-- main -->
  <link href="/css/main.min.52118[...]0fb9ff.css" rel="stylesheet">

  <!-- animations, carousel -->
  <link href="/css/libs/animations.min.a20e5[...]bad83.css" integrity="sha256-UhGG+XrGRq6dDFgVf3bcI55FFBzluBxw4+cngWcPuf8=" rel="stylesheet">
  <style>.carousel{position:relative}.carousel.pointer-event{touch-action:pan-y}.carousel-inner{position:relative;width:100%;overflow:hidden}.etc{content:"etc"}</style>
</head>

The Styles API.

Each style can either be declared in the styles key of _huge/config/styles.{yaml|json|toml} or be directly invoked in the template by passing its data to the huge/styles/tags partial.

Each style declaration, made through the configuration file or passed to the partial itself takes a number of parameters, only one being mandatory: the path. Here is the list of available keys:

  • path*: The path relative to the assets directory of the given file.
  • name: A user defined string which serves as an alias when calling the style tags from the templates.
  • internal: A boolean, if set to true the style will be considered 'internal' and printed inside a <style> tag rather than requested through a <link> tag. Defaults to false
  • fingerprint: A string or a slice either containing or pointing to the environment (as defined in huge/env/Get) or the string always or never. Defaults to production. See huge/env/When
  • minify: Same as the above for the minifying operation.
  • integrity: A boolean. If set to true and the style is not internal this will automatically enable fingerprint and will add the integrity attribute with hash to the printed tag. Defaults to false.
  • output_path: A string in the form of a file path to customize the output path of the generated asset. Extension must match the expected. (Ex: output_path: /main.css for path: /sass/internal.scss). IMPORTANT: Minimum Hugo Version: 0.100.0
  • use: A list of transformations to perform on the style. Available transformations are:
    • postcss: Run PostCSS on the style
    • postprocess: Delay the processing to the end of the build. For now it's mainly used for effectively purging CSS based on classes generated during the build.
    • tailwind: This transformation is a bit special as it will load its own. It adds to the file content the necessary Tailwind declarations, run PostCSS and run PostProcess. (Mention guide on using Tailwind with HUGE)

What about tocss, which turns a sass/scss file into css? If the user is using Hugo Extended, HUGE will apply the tocss transformation based on the media type (sass or scss).

Functions

huge/styles/tags

The "huge/styles/tags" partial is used to print the tags of some of the declared styles in the templates.

Parameters

The partial parameters can be a lone entry pointing to a style or a slice of entries. For a slice HUGE will produce the tags for every style in the given order.

Either as a lone entry or within a slice, each style must either be:

A string HUGE will find any declared style whose name matches the given string and produce their tags.

A map HUGE will use the settings passed through the given map to attempt at producing tags for the style. If a declared style is found matching the value of name key. It will read the declared style settings, overwrites them with the given map and produce the tags.

Examples

{{ partial "huge/styles/tags" "main" }}

Above HUGE will find a declared style whose name is main and produce its tag.

{{ partial "huge/styles/tags" (slice "main" "carousel") }}

Above HUGE will find a declared style whose name is main and produce its tag. It will then find a declared style whose name is carousel and produce its tag.

{{ partial "huge/styles/tags" (slice
  "main"
  "carousel"
  (dict
    "name" "homepage"
    "path" "css/homepage.scss"
  )
)}}

Above HUGE will find a declared style whose name is main and produce its tag. It will then find a declared style whose name is carousel and produce its tag. It will then proceed to produce the tag of the style which has been declared right in the template. If HUGE finds a declared style from the config whose name matches homepage it will its settings as a base.

This is a HUGE WIP right now! Stay tune for more info as we push it to Alpha!

Clone this wiki locally