Merge 9ed98cc into 8de5b0b

README.md

@@ -2,7 +2,7 @@
 
 > A simple way to include CSS with React Components.
 
-* **Tiny**, around 1.6 KB gzipped
+* **Tiny**, around 1.7 KB gzipped
 * **One dependency** - ([Stylis](https://github.com/thysultan/stylis.js))
 * **Write** plain ol' CSS. Period.
 * **Pre-processing** when you need it. Powered by [Stylis](https://github.com/thysultan/stylis.js).

src/utilities/__tests__/classNames.test.js

@@ -79,6 +79,30 @@ describe('makeUniqSelectorForCombinator', () => {
 
     expect(results).toBe('.Card__abc-123+.Card__abc-123')
   })
+
+  test('Allows for differing combinator values', () => {
+    const combinator = '+'
+    const selector = '.Card + .Nope'
+    const results = makeUniqSelectorForCombinator(combinator, selector, uuid, id)
+
+    expect(results).toBe('.Card__abc-123+.Nope')
+  })
+
+  test('Allows for differing combinator values, but is aware of repeated base class', () => {
+    const combinator = '+'
+    const selector = '.Card + .Nope + .Card'
+    const results = makeUniqSelectorForCombinator(combinator, selector, uuid, id)
+
+    expect(results).toBe('.Card__abc-123+.Nope+.Card__abc-123')
+  })
+
+  test('Allows for differing combinator values, but is aware of repeated base class with underscore', () => {
+    const combinator = '+'
+    const selector = '.Card + .Nope + .Card__block'
+    const results = makeUniqSelectorForCombinator(combinator, selector, uuid, id)
+
+    expect(results).toBe('.Card__abc-123+.Nope+.Card__block__abc-123')
+  })
 })
 
 describe('makeUniqSelector', () => {
@@ -116,6 +140,10 @@ describe('makeUniqSelector', () => {
     expect(makeUniqSelector('.a, .b', uuid, id)).toBe('.a__abc-123, .b')
   })
 
+  test('Returns uniq selector for classNames with hyphen', () => {
+    expect(makeUniqSelector('.a--md', uuid, id)).toBe('.a--md__abc-123')
+  })
+
   test('Returns uniq selector for chained classNames', () => {
     expect(makeUniqSelector('.a.b.c', uuid, id)).toBe('.a__abc-123.b.c')
     expect(makeUniqSelector('.a.b .c', uuid, id)).toBe('.a__abc-123.b .c')

src/utilities/classNames.js

@@ -33,6 +33,27 @@ export const makeUniqFirstClassName = (uuid, id) => (item, index) => {
   return index === 0 ? `${item}__${uuid}-${id}` : item
 }
 
+/**
+ * Gets the base selector from a selector sequence.
+ *
+ * @param   {string} selector
+ * @returns {string}
+ */
+export const getBaseSelector = selector => {
+  return selector.split(/ |:|_|-/gi)[0].trim()
+}
+
+/**
+ * Splits a selector into individual rules.
+ *
+ * @param   {string} rule
+ * @param   {string} token
+ * @returns {array}
+ */
+export const getPreCompileSelectors = (rule, token) => {
+  return rule.split(token).filter(r => r).map(r => r.trim())
+}
+
 /**
  * Compiles cssRules from token points.
  *
@@ -42,7 +63,8 @@ export const makeUniqFirstClassName = (uuid, id) => (item, index) => {
  * @returns {string}
  */
 export const compileRule = (rule, token, compiler, prefix = '', suffix = '') => {
-  return prefix + rule.split(token).filter(r => r).map(compiler).join(token) + suffix
+  const selectors = getPreCompileSelectors(rule, token)
+  return prefix + selectors.map(compiler).join(token) + suffix
 }
 
 /**
@@ -87,7 +109,13 @@ export const makeUniqClassName = (selector, uuid, id) => {
  * @returns {string}
  */
 export const makeUniqSelectorForCombinator = (combinator, selector, uuid, id) => {
-  const compiler = s => makeUniqClassName(s.trim(), uuid, id)
+  const selectors = getPreCompileSelectors(selector, combinator)
+  const compiler = (s, index) => {
+    const base = getBaseSelector(s)
+    if (index > 0 && base !== selectors[0]) return s
+    return makeUniqClassName(s, uuid, id)
+  }
+
   return compileRule(selector, combinator, compiler)
 }