chore: Style api docs-forward tools - #247
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #247 +/- ##
=======================================
Coverage 98.09% 98.10%
=======================================
Files 56 56
Lines 1787 1793 +6
Branches 517 497 -20
=======================================
+ Hits 1753 1759 +6
Misses 34 34 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
| slots.push({ name, tokens: tokens.split(/[\s,]+/).filter(Boolean) }); | ||
| } else { | ||
| throw new Error(`Found multiple style-api.docs(...) annotations with the same name: "${name}"`); | ||
| slots.push({ name, forwardsTo: { component, slot } }); |
There was a problem hiding this comment.
Do you think it's possible to check the values at this stage? At least that the component exists, and possibly that the slot is declared in the component's styles (this part might introduce a circular dependency risk)?
There was a problem hiding this comment.
I would not do this in this util, as its purpose is simply to parse the data from CSS. However, this is a nice suggestion for the components part - which uses the tool to read metadata from all components, and can therefore ensure the validity. We can even check that the slots correspond to the components classNames structure. I will definitely add these validations!
| // both forms. | ||
|
|
||
| const MARKER = /awsui:style-api-slot\s+name=([\w-]+)\s+tokens=([^*]*)\*\//g; | ||
| const MARKER = /awsui:style-api-slot\s+name=([\w-]+)\s+(?:tokens=([^*]*)|component=([\w-]+)\s+slot=([\w-]+)\s*)\*\//g; |
There was a problem hiding this comment.
Not a review comment, just a thought — using regular expressions for parsing this means that if we pass an invalid string (e.g. `"column layout" with a space), it's just going to be silently ignored rather than throw an error, which might lead to confusion and frustration.
Maybe it's worth having a more liberal regex (something like MIXIN_REGEX = /awsui:style-api-slot.*/)? So if MIXIN_REGEX matches and MARKER doesn't match, something went wrong.
There was a problem hiding this comment.
Good point - I will experiment with this 👍
2 participants
A follow-up for #233 (see how it is applied: https://github.com/cloudscape-design/components/pull/4901/changes#diff-d9121ef7ddab55ffde139a30ce4f5e7f2961d8450cc6b4488649863cc135eccb).
While
style-api.docs(...)annotates component's own tokens, thestyle-api.docs-forward(...)annotates ones that point to components used via internal composition. For example, in the Alert there are two slots:root- alert's body, declaring style tokens such as color, background-color, and more;dismissButton- alert's dismiss button, which uses Button internally. The correspondingclassNames.dismissButtonis passed down as Button'sclassNames.button.By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.