clean up duplicate selectors in hierarchy

Author: Brian Lonsdorf

lib/__fixtures__/ui/components/data-tables/advanced/_index.scss

@@ -105,7 +105,7 @@
  * Icon inside sortable th
  *
  * @selector .slds-is-sortable__icon
- * @restrict .slds-is-sortable .slds-icon
+ * @restrict .slds-table--fixed-layout th.slds-is-sortable
  */
 .slds-is-sortable__icon {
   @include square($square-icon-small-content);

lib/__tests__/index.js

@@ -4,6 +4,8 @@
 const fs = require('fs')
 const glob = require('glob')
 const path = require('path')
+const { List } = require('immutable')
+const { toTree } = require('../tree')
 
 const parser = require('../../')
 
@@ -14,7 +16,7 @@ const scss = glob
   )
   .join('\n')
 
-const { components, component, utilities, utility } = parser(scss)
+const { components, component, utilities, utility, findVariant } = parser(scss)
 
 describe('parser', () => {
   describe('components', () => {
@@ -46,6 +48,14 @@ describe('parser', () => {
         const restrictee = table.get('restrictees').first()
         expect(restrictee.getIn(['annotations', 'selector'])).toEqual('.slds-table')
       })
+      it('does not place overly verbose restricts on outter mentioned elements', () => {
+      // slds-is-sortable__icon restrict looks like
+     // @restrict .slds-table--fixed-layout th.slds-is-sortable .slds-icon
+        const t = toTree(table).reduce((acc, x) =>
+          acc.push(x.getIn(['annotations', 'selector'])) , List())
+        const result = t.filter(x => x === '.slds-is-sortable__icon')
+        expect(result.count()).toEqual(1)
+      })
     })
     describe('button', () => {
       let button

lib/comment.js

@@ -70,7 +70,7 @@ module.exports = repo => {
 
   // findModifier :: Component -> String -> Either Null Variant
   const findVariant = (component, id) =>
-    find(component.get('variants'), x => x.getIn(['annotations', 'name']) === id)
+    find(repo.variants(toTree(component).toList(List())), x => x.get('id') === id)
 
   return { components, utilities, utility, component, findModifier, findVariant }
 }

lib/repository.js

@@ -44,8 +44,14 @@ module.exports = comments => {
     , List.of(List(), List())).toArray()
 
   // getRestrictKeys :: String -> [Selector]
+  const getRestrictKeys_ = restrict =>
+    restrict.match(/(\.[a-zA-Z0-9_-]+)/g)
+
   const getRestrictKeys = restrict =>
-    restrict.match(/(\.?[a-zA-Z0-9_-]+)/g)
+    List(restrict.split(','))
+    .map(x => x.trim())
+    .map(x => List(x.match(/(\.[a-zA-Z0-9_-]+)/g)))
+    .map(xs => xs.first())
 
   // makeIndex :: ((Map Restrict (Set Comment)), Comment) -> Map Restrict (Set Comment)
   const makeIndex = (index, comment) =>
@@ -100,7 +106,7 @@ module.exports = comments => {
   const initialize = () => {
     const normalized = comments.filter(x => !topLevel(x)).map(normalize)
 
-    const [fancy_, plain] = partition(normalized, c => /[*|+|~|[\]]/.test(c.getIn(['annotations', 'restrict'])))
+    const [fancy_, plain] = partition(normalized, c => /[*|+|~|[\]|:]/.test(c.getIn(['annotations', 'restrict'])))
 
     const [utils, fancy] = partition(fancy_, comment =>
         comment
@@ -118,6 +124,7 @@ module.exports = comments => {
     components,
     utilities,
     modifiers,
+    variants,
     findModifier,
     findComponent,
     findUtility,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce-ux/design-system-parser",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Parse CSS comments into a data structure",
   "main": "./.dist/index.js",
   "files": [