cache className resolve

Author: RobinMalfait

src/util/generateVariantFunction.js

@@ -1,11 +1,17 @@
 import _ from 'lodash'
 import postcss from 'postcss'
 import selectorParser from 'postcss-selector-parser'
+import { useMemo } from './useMemo'
 
 const classNameParser = selectorParser(selectors => {
   return selectors.first.filter(({ type }) => type === 'class').pop().value
 })
 
+const getClassNameFromSelector = useMemo(
+  selector => classNameParser.transformSync(selector),
+  selector => selector
+)
+
 export default function generateVariantFunction(generator) {
   return (container, config) => {
     const cloned = postcss.root({ nodes: container.clone().nodes })
@@ -24,7 +30,7 @@ export default function generateVariantFunction(generator) {
               rule.selectors = rule.selectors.map(selector => {
                 return modifierFunction({
                   get className() {
-                    return classNameParser.transformSync(selector)
+                    return getClassNameFromSelector(selector)
                   },
                   selector,
                 })