YAML Directives

In most cases, Lightna's default YAML merging across modules is enough for extensions. When more control is needed, directives step in.

YAML directives are universal and can be used to modify the main configuration, layout, Tailwind, and Webpack configs. They are applied to the final data after a deep merge and are placed within the same files as the configurations, such as config/*.yaml, layout/*.yaml, tailwind.yaml, and webpack.yaml.
Layouts, in turn, have their own specifics, which are described further down on this page.

Delete an element by key
Delete an element from the layout using the delete directive with the key keyword:

directive:
  - delete key entry.common.import.unnecessary-css

Delete an element by value
Delete an element attribute from the layout using the delete directive with the value keyword:

directive:
  - delete value entry.common.import module-name/unnecessary.css

Change element position to last or first within its parent
Change an element's position in the layout using the position directive with the last or first keywords:

directive:
  - position .body.main.content.title first
  - position .body.main.content.carousel last

Change element position to before or after another element
Change an element's position in the layout using the position directive with the before or after keywords:

directive:
  - position .body.main.content.title before description
  - position .body.main.content.carousel after description

Move an element from one parent to another
Move elements to another parent using the move directive with the to keyword:

directive:
  - move .body.main.content.subscription-form to .body.main.footer.subscription-form

Replace a scalar value
Replace a scalar value using the replace directive with the value, to, and in keywords:

directive:
  - replace value module/old.css to my-module/new.css in entry.common.import

Layout specifics
In a layout, each block has a . node that holds its children. Using a dot (.) in a directive moves deeper into the structure, skipping direct attributes and accessing nested elements. For example, root.parent.child translates to root -> . -> parent -> . -> child. To reference a direct attribute of a block, use a slash: root.parent/attributes/class.

Delete attribute value from layout block

directive:
  - delete value .body.main/attributes/class page-container

Planned

• Smart selectors, such as id=subscription-form instead of .body.main.content.subscription-form.
• More intuitive syntax for delete value - delete value <value> in <path>