feat: Make possible to use with complex selectors (#19)

* fix: Generate random class name to make possible use complex selectors

* chore: Add changeset about the random class name generation

* chore: replace changeset type to 'minor'

* chore: add better explanation to the note about the class name selector

* docs: add complex selector example to WithSelector component docs

* Update cuddly-carpets-sort.md

Co-authored-by: Andrey Okonetchnikov <okonet@users.noreply.github.com>

Author: balazsmatepetro

.changeset/cuddly-carpets-sort.md

@@ -0,0 +1,5 @@
+---
+'@component-driven/with-selector': minor
+---
+
+Make it possible to use complex selectors like `:active:not([aria-disabled="true"])`

packages/with-selector/Readme.md

@@ -26,9 +26,15 @@ const Button = styled('button')`
     border-color: #333;
     background: #888;
     color: #fff;
+
+    &:not([aria-disabled='true']) {
+      background: cadetblue;
+      border-color: darkblue;
+      color: #f5f5f5;
+    }
   }
 
-  &.class-name {
+  &.custom-class {
     background: green;
   }
 `
@@ -44,7 +50,10 @@ const Button = styled('button')`
   <WithSelector selector=":active">
     <Button>active</Button>
   </WithSelector>
-  <WithSelector selector=".class-name">
+  <WithSelector selector={`:active:not([aria-disabled="true"])`}>
+    <Button>active:not([aria-disabled="true"])</Button>
+  </WithSelector>
+  <WithSelector selector=".custom-class">
     <Button>class-name</Button>
   </WithSelector>
 </>

packages/with-selector/package.json

@@ -12,5 +12,8 @@
   "license": "MIT",
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "nanoid": "^3.1.7"
   }
 }

packages/with-selector/src/WithSelector.js

@@ -1,4 +1,5 @@
 import { cloneElement, useEffect, useRef, useState } from 'react'
+import { customAlphabet } from 'nanoid'
 
 function addStylesheetRule(rule) {
   const styleEl = document.createElement('style')
@@ -7,19 +8,27 @@ function addStylesheetRule(rule) {
   styleSheet.insertRule(rule, styleSheet.cssRules.length)
 }
 
+const generateCssClassName = customAlphabet(
+  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
+  32
+)
+
 // Inspired by https://codesandbox.io/s/pseudo-class-sticker-sheet-jiu2x
 const useAddSelector = (ref, selector) => {
   const [modifiedClassName, setModifiedClassName] = useState('')
   useEffect(() => {
     const className = ref.current.classList[ref.current.classList.length - 1]
     const fullSelector = `${className && `.${className}`}${selector}`
-    const classNameWithSelector = fullSelector.replace(/(.)(:|\.)/g, '$1-')
+    // NOTE: This could be improved, because checking the provided selector starts with a '.'
+    // is probably not the best way to determine the selector is a class name or not.
+    const isClassNameSelector = selector.startsWith('.')
     let newRule = ''
     for (const ss of document.styleSheets) {
       for (const rule of ss.cssRules) {
         if (fullSelector === rule.selectorText) {
-          newRule = `${classNameWithSelector} { ${rule.style.cssText}}`
-          setModifiedClassName(classNameWithSelector.substring(1))
+          const cssClassName = isClassNameSelector ? selector : `.${generateCssClassName()}`
+          newRule = `${cssClassName} { ${rule.style.cssText}}`
+          setModifiedClassName(cssClassName.substring(1))
           break
         }
       }

yarn.lock

@@ -5731,6 +5731,11 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
   integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
 
+nanoid@^3.1.7:
+  version "3.1.7"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.7.tgz#3705ccf590b6a51fbd1794fcf204ce7b5dc46c01"
+  integrity sha512-ruOwuatdEf4BxQmZopZqhIMudQ9V83aKocr+q2Y7KasnDNvo2OgbgZBYago5hSD0tCmoSl4flIw9ytDLIVM2IQ==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"