Allow ampersand suffixes.

package.json

@@ -77,5 +77,6 @@
         ]
       }
     }
-  }
+  },
+  "packageManager": "[email protected]+sha1.a428b12202bc4f23b17e6dffe730734dae5728e2"
 }

packages/fela-integration/src/fela_fela-tools/__tests__/__snapshots__/integration-test.js.snap

@@ -16,6 +16,8 @@ exports[`Fela with Fela Tools integration Rendering rules should remove undefine
 
 exports[`Fela with Fela Tools integration Rendering rules should render any nested selector with the &-prefix 1`] = `".a{color:red}.b~#foo{color:blue}.c .bar{color:green}"`;
 
+exports[`Fela with Fela Tools integration Rendering rules should render any nested selector with the &-suffix 1`] = `".a{color:red}.bar:hover .b{color:green}"`;
+
 exports[`Fela with Fela Tools integration Rendering rules should render attribute selectors 1`] = `".a{color:red}.b[bool=true]{color:blue}"`;
 
 exports[`Fela with Fela Tools integration Rendering rules should render attribute selectors and add specificity prefix 1`] = `".parent .a{color:red}.parent .b[bool=true]{color:blue}"`;

packages/fela-integration/src/fela_fela-tools/__tests__/integration-test.js

@@ -128,6 +128,21 @@ describe('Fela with Fela Tools integration', () => {
       expect(renderToString(renderer)).toMatchSnapshot()
     })
 
+    it('should render any nested selector with the &-suffix', () => {
+      const rule = () => ({
+        color: 'red',
+        '.bar:hover &': {
+          color: 'green',
+        },
+      })
+      const renderer = createRenderer()
+
+      renderer.renderRule(rule)
+
+      expect(renderToString(renderer)).toMatchSnapshot()
+    })
+
+
     it('should render media queries', () => {
       const rule = () => ({
         color: 'red',

packages/fela-utils/src/generateCSSSelector.js

@@ -2,9 +2,12 @@ export default function generateCSSSelector(
   className,
   pseudo = '',
   specificityPrefix = '',
-  propertyPriority = 1
+  propertyPriority = 1,
+  psuedoPrefix = false
 ) {
   const classNameSelector = `.${className}`.repeat(propertyPriority)
-
+  if (psuedoPrefix) {
+    return `${specificityPrefix}${pseudo}${classNameSelector}`
+  }
   return `${specificityPrefix}${classNameSelector}${pseudo}`
 }

packages/fela-utils/src/isNestedSelector.js

@@ -1,5 +1,5 @@
-const regex = /^(:|\[|>|&)/
+const prefix = /^(:|\[|>|&)/
 
 export default function isNestedSelector(property) {
-  return regex.test(property)
+  return prefix.test(property) || property.endsWith('&')
 }

packages/fela-utils/src/normalizeNestedProperty.js

@@ -2,6 +2,9 @@ export default function normalizeNestedProperty(nestedProperty) {
   if (nestedProperty.charAt(0) === '&') {
     return nestedProperty.substr(1)
   }
+  if (nestedProperty.endsWith('&')) {
+    return nestedProperty.substr(0, nestedProperty.length - 1)
+  }
 
   return nestedProperty
 }

packages/fela/src/createRenderer.js

@@ -200,7 +200,13 @@ export default function createRenderer(config = {}) {
       )
     },
 
-    _renderStyleToClassNames(style, pseudo = '', media = '', support = '') {
+    _renderStyleToClassNames(
+      style,
+      pseudo = '',
+      media = '',
+      support = '',
+      psuedoPrefix = false
+    ) {
       let classNames = ''
 
       const applyPlugin = (processed, plugin) => plugin(processed, renderer)
@@ -214,7 +220,8 @@ export default function createRenderer(config = {}) {
               value,
               pseudo + normalizeNestedProperty(property),
               media,
-              support
+              support,
+              property.endsWith('&')
             )
           } else if (isMediaQuery(property)) {
             const combinedMediaQuery = generateCombinedMediaQuery(
@@ -300,7 +307,8 @@ Check http://fela.js.org/docs/basics/Rules.html#styleobject for more information
               value,
               pseudo,
               media,
-              support
+              support,
+              psuedoPrefix
             )
           }
 
@@ -316,7 +324,15 @@ Check http://fela.js.org/docs/basics/Rules.html#styleobject for more information
       return classNames
     },
 
-    _renderStyleToCache(reference, property, value, pseudo, media, support) {
+    _renderStyleToCache(
+      reference,
+      property,
+      value,
+      pseudo,
+      media,
+      support,
+      psuedoPrefix
+    ) {
       // we remove undefined values to enable
       // usage of optional props without side-effects
       if (isUndefinedValue(value)) {
@@ -336,7 +352,8 @@ Check http://fela.js.org/docs/basics/Rules.html#styleobject for more information
         className,
         pseudo,
         config.specificityPrefix,
-        renderer.propertyPriority[property]
+        renderer.propertyPriority[property],
+        psuedoPrefix
       )
 
       const change = {