adobe / adobe/aem-core-wcm-components
Incorrect font paths for AMP inline CSS
- Dominant language
- Java
- Stars
- 796
- Forks
- 776
- Avg merge
- 3d 22h
- Merged PRs (30d)
- 8
Description
## Bug Report
**Current Behavior**
Hello,
On AMP pages we need to inline css to match AMP requirements. We do that using
```
${clientlibs.cssInline @ context="unsafe"}
```
With this approach we have an issue with fonts. In our css we have entries with fonts like:
```
@font-face {
font-display: fallback;
font-family: 'Sun';
font-style: normal;
font-weight: 700;
src: url('/etc.clientlibs/project/clientlibs/generated/clientlib-site/resources/fonts/project/Sun-Bold.woff2') format('woff2')
}
```
that are transformed into a client library entry like:
```
@font-face {
font-display: fallback;
font-family: Sun;
font-style: normal;
font-weight: 700;
src: url(../../../../etc.clientlibs/project/clientlibs/generated/clientlib-site/resources/fonts/project/Sun-Bold.woff2) format("woff2"),
}
```
This relative path with `../../../../` works fine when client lib is included in regular way as a link
``
but once it is added inline the link is relative to the page path, for example
- page: http://localhost:4502/content/project/home/page.html -> fonts are included correctly
- page: http://localhost:4502/content/project/home/page/child.html -> fonts are requested with wrong path:
**/content**/etc.clientlibs/project/clientlibs/generated/clientlib-site/resources/fonts/project/Sun-Bold.woff2
- page: http://localhost:4502/content/project/home/page/child/child2.html -> fonts are requested with wrong path:
**/content/project**/etc.clientlibs/project/clientlibs/generated/clientlib-site/resources/fonts/project/Sun-Bold.woff2
I am not sure whether it's a bug or maybe there is another way to include static resources for clientlibs to make it work with inline css. Could you please advise? Thanks for your help :)
**Expected behavior/code**
Inline css works correctly for all static resources on any page.
**Environment**
- AEM version and patch level: 6.5.6.0
- Core Components version 2.11.1
- JRE version 11.0.9
Contributor guide
Research direction
Start by reproducing the AMP inline CSS snippet using clientlibs.cssInline on pages at increasing nesting depths, then inspect how the generated client library rewrites font URLs. Done means inline CSS resolves the font resource correctly on every page path, while regular linked client libraries remain unaffected.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100