CODEWITHSUNDEEP
csswebpackaeminline-stylesclient-library
Peter Arthur
Peter Arthur

Reputation: 38

AEM 6.5: Is there an HTL way to output Webpack-generated CSS within <style> tags from an AEM clientlib category?

Goal: I have a specific clientlib ready with "critical CSS" that I would like to add to a page template in <style> tags, per Google's performance recommendations on a high-traffic e-Commerce site.

Problem: We all know how to add a file reference in HTL:

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientlib.css @ categories='template.noncritical'}"/>

but how would I output plain generated CSS styles on the page via HTL? Is there some other HTL property I could use? I want this:

<style>
  /* contents of AEM clientlib CSS here */
</style>

Tried: I have Googled, searched StackOverflow, and looked in the AEM docs about clientlibs, but haven't found anything about inlining styles, except to

I am looking for something AEM-native that can be turned "on" or "off" in HTL. Thanks for reading and offering any solutions you may have.

Upvotes: 0

Views: 808

Answers (2)

Jocolocogoco
Jocolocogoco

Reputation: 11

You can use the Core Components functionality https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/including-clientlibs.html?lang=en#inlining

<style type="text/css"
    data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
    ${clientlibs.cssInline @ context="unsafe"}
</style>

Upvotes: 1

user17973753
user17973753

Reputation: 11

You can try https://github.com/dmantsevich/aem-critical-css

It will generate CSS files and "integrate" with AEM. You can use it for extract small component CSS. Some features:

  1. CSS will be loaded only, if component presents on the page
  2. Supports 2 injection types: <style /> and <link />
  3. Supports less, css, scss.
  4. CSS will be injected only once

Example:

MyComponentTemplate.html

<sly data-sly-use.aemCriticalCSS="${'./_aem-critical-css.js'}"
@aem-critical-css="my-component/my-component.scss">${aemCriticalCSS.inject @ context="unsafe"}</sly>

Where my-component/my-component.scss is a path to css (related to ui.frontend/src/ folder). We used it on several projects and it helps to improve rendering performance. (path can be configured)

Upvotes: 1

Related Questions