Skip to content

Commit 58f8ad4

Browse files
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>
1 parent 16a046a commit 58f8ad4

File tree

5 files changed

+36
-5
lines changed

5 files changed

+36
-5
lines changed

.changeset/cuddly-carpets-sort.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@component-driven/with-selector': minor
3+
---
4+
5+
Make it possible to use complex selectors like `:active:not([aria-disabled="true"])`

packages/with-selector/Readme.md

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,15 @@ const Button = styled('button')`
2626
border-color: #333;
2727
background: #888;
2828
color: #fff;
29+
30+
&:not([aria-disabled='true']) {
31+
background: cadetblue;
32+
border-color: darkblue;
33+
color: #f5f5f5;
34+
}
2935
}
3036
31-
&.class-name {
37+
&.custom-class {
3238
background: green;
3339
}
3440
`
@@ -44,7 +50,10 @@ const Button = styled('button')`
4450
<WithSelector selector=":active">
4551
<Button>active</Button>
4652
</WithSelector>
47-
<WithSelector selector=".class-name">
53+
<WithSelector selector={`:active:not([aria-disabled="true"])`}>
54+
<Button>active:not([aria-disabled="true"])</Button>
55+
</WithSelector>
56+
<WithSelector selector=".custom-class">
4857
<Button>class-name</Button>
4958
</WithSelector>
5059
</>

packages/with-selector/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,8 @@
1212
"license": "MIT",
1313
"publishConfig": {
1414
"access": "public"
15+
},
16+
"dependencies": {
17+
"nanoid": "^3.1.7"
1518
}
1619
}

packages/with-selector/src/WithSelector.js

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { cloneElement, useEffect, useRef, useState } from 'react'
2+
import { customAlphabet } from 'nanoid'
23

34
function addStylesheetRule(rule) {
45
const styleEl = document.createElement('style')
@@ -7,19 +8,27 @@ function addStylesheetRule(rule) {
78
styleSheet.insertRule(rule, styleSheet.cssRules.length)
89
}
910

11+
const generateCssClassName = customAlphabet(
12+
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
13+
32
14+
)
15+
1016
// Inspired by https://codesandbox.io/s/pseudo-class-sticker-sheet-jiu2x
1117
const useAddSelector = (ref, selector) => {
1218
const [modifiedClassName, setModifiedClassName] = useState('')
1319
useEffect(() => {
1420
const className = ref.current.classList[ref.current.classList.length - 1]
1521
const fullSelector = `${className && `.${className}`}${selector}`
16-
const classNameWithSelector = fullSelector.replace(/(.)(:|\.)/g, '$1-')
22+
// NOTE: This could be improved, because checking the provided selector starts with a '.'
23+
// is probably not the best way to determine the selector is a class name or not.
24+
const isClassNameSelector = selector.startsWith('.')
1725
let newRule = ''
1826
for (const ss of document.styleSheets) {
1927
for (const rule of ss.cssRules) {
2028
if (fullSelector === rule.selectorText) {
21-
newRule = `${classNameWithSelector} { ${rule.style.cssText}}`
22-
setModifiedClassName(classNameWithSelector.substring(1))
29+
const cssClassName = isClassNameSelector ? selector : `.${generateCssClassName()}`
30+
newRule = `${cssClassName} { ${rule.style.cssText}}`
31+
setModifiedClassName(cssClassName.substring(1))
2332
break
2433
}
2534
}

yarn.lock

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5731,6 +5731,11 @@ nan@^2.12.1:
57315731
resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
57325732
integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
57335733

5734+
nanoid@^3.1.7:
5735+
version "3.1.7"
5736+
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.7.tgz#3705ccf590b6a51fbd1794fcf204ce7b5dc46c01"
5737+
integrity sha512-ruOwuatdEf4BxQmZopZqhIMudQ9V83aKocr+q2Y7KasnDNvo2OgbgZBYago5hSD0tCmoSl4flIw9ytDLIVM2IQ==
5738+
57345739
nanomatch@^1.2.9:
57355740
version "1.2.13"
57365741
resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"

0 commit comments

Comments
 (0)