Support CSS files for style tags and attributes
- 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
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