When I define new component, I need to specify how much this component must retire from other components (by other words, define margin-top; mixin WhenItJustAfter do it), and how much other components must retire from new component (mixin RulesForTargetThatGoingJustAfterIt do it):
WhenItJustAfter(targetElementSelector)
/{targetElementSelector} + {selector()}
{block}
RulesForTargetThatGoingJustAfterIt(targetElementSelector)
/{selector()} + {targetElementSelector}
{block}
provideBlockquoteComponent(
CSS_Namespace = "Blockquote",
positionalRelationshipWithOtherComponents = null
)
.Blockquote
// ...
if positionalRelationshipWithOtherComponents
for component in positionalRelationshipWithOtherComponents
+WhenItJustAfter("." + component.CSS_Class)
margin-top: component.whenJustBeforeIt
+RulesForTargetThatGoingJustAfterIt("." + component.CSS_Class)
margin-top: component.whenItJustAfter
Now we can define positional relationship between components as (sorry for long line, I did not explore yet how elegantly to break it in Stylus):
provideBlockquoteComponent(
positionalRelationshipWithOtherComponents: ({ CSS_Class: "AlertBox", whenJustBeforeIt: 6px, whenItJustAfter: 12px } { CSS_Class: "Image", whenJustBeforeIt: 12px, whenItJustAfter: 22px })
)
It will work for arrays of two and more elements; debug output will be:
inspect: {"CSS_Class":"(\"AlertBox\")","whenJustBeforeIt":"(12px)","whenItJustAfter":"(22px)"}
inspect: {"CSS_Class":"(\"Image\")","whenJustBeforeIt":"(12px)","whenItJustAfter":"(22px)"}
But what if positionalRelationshipWithOtherComponents will contain just one element?
provideBlockquoteComponent(
positionalRelationshipWithOtherComponents: ({ CSS_Class: "AlertBox", whenJustBeforeIt: 6px, whenItJustAfter: 12px })
)
We get:
inspect: 'CSS_Class'
inspect: 'whenJustBeforeIt'
inspect: 'whenItJustAfter'
Thereby positionalRelationshipWithOtherComponents is not array for Stylus anymore; Stylus iterated the properties keys instead of array elements.
I did not found the array literal for Stylus. If it exists, please teach me this literal, otherwise please suggest the workaround.