Array of one element in Stylus

Viewed 94

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.

0 Answers
Related