title: Creating long lists of css data attribute selectors
body: <p>I'm having a lot of trouble creating a long list of css3 selectors from a list of names using Stylus. No matter how I try to format this block:</p>
  
  <pre><code>@-moz-document domain("example.com") {
    friends = name name1 name2 name3
  
    for user in friends
        div[data-user={user}] &gt; .chat-line__message--badges
            padding-left: 20px
            background-repeat no-repeat
            background-position-x 0px
            background-size 14px
  
    for user in friends
        div[data-user={user}]
            background-color rgba(0, 0, 255, .2)!important
  }
  </code></pre>
  
  <p>The parser always throws the following error at me:</p>
  
  <pre><code>ParseError: stylus:322:2 
  318| 
  319| for user in friends 
  320| div[data-user={user}] 
  321| background-color rgba(0, 0, 255, .2)!important 
  322| } ---------^ unexpected "}"
  </code></pre>
  
  <p>It says unexpected "}", but that "}" is used to close the @-moz-document portion, and when I delete the "}", it returns another error about reaching EoS.</p>
  
  <hr>
  
  <p>If there's an easier way to create a long list of selectors like the following, I'm willing to learn.</p>
  
  <pre><code>div[data-user=user1],
  div[data-user=user2],
  div[data-user=user3],
  ...
  div[data-user=userN]{
    background-color: blue;
  }
  </code></pre>