adobe / adobe/htl-spec

Support CSS files for style tags and attributes

Open
#89 10 comments 0 reactions 0 assignees View on GitHub
Dominant language
No language data
Stars
288
Forks
142
PR merge metrics
No merged PRs in 30d

Description

original message in https://lists.apache.org/thread.html/rbf853d99ccdb7e4259231abfcfc11e9c4469ced6095e859027ba4ed2%40%3Cdev.sling.apache.org%3E

certain components require that we overcome beautiful concept of separation
of concern between CSS & HTML as variability of the potential styling is
too high.
This makes us developer forced to add style tag or attribute, together with
inner htl scripting logic, that has been designed to template HTML, but is
a bit too loud for CSS rules.
My proposal is that we extend HTL only for that purpose to parse CSS files
that could be included in style tag or attributes, with similar loop & if
logic, maybe in a different syntax to keep the CSS valid, so to have
something like [0]. Please consider proposed syntax as symbolic, we can
discuss that later if there is an agreement on the proposal itself.
We could also have existing css compilers like less or sass but that might
be overkill and this would lead to lot of frustration as we wouldn't
implement everything.

result would be inline css in style tag / attribute (so only HTML, cf. https://github.com/adobe/htl-spec/issues/89#issuecomment-689012991)

```
[0]
OLD (not counting the CSS in the models):

<sly data-sly-repeat.item="${model.definitions}">
${'#{0}' @ format=model.id, context='styleString'} > .items {
<sly data-sly-test.output="${item.show}">
${definition.width}
${definition.minHeight}
${definition.order}
</sly>
}
<sly>

NEW:

and
style.css:
# sly-repeat.item="${model.definitions}"
#'$model-id' > .items {
# sly-test.output="${item.show}
width: $item-width;
min-height: $item-minHeight;
order: $item-order
# /sly
}
# /sly```

Contributor guide

Open the contributing guide

Research direction

Start with the linked mailing-list thread and the issue's OLD/NEW examples, especially style.css and the proposed data-sly-include style tag. Define the syntax and its interaction with loops, conditionals, and style attributes before implementation; done means the specification clearly describes inline CSS support.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.