From 8573308ac2826623166d0925d1016bf850a87a0f Mon Sep 17 00:00:00 2001 From: balazsmatepetro Date: Thu, 14 May 2020 15:39:26 +0200 Subject: [PATCH 1/6] fix: Generate random class name to make possible use complex selectors --- packages/with-selector/Readme.md | 4 ++-- packages/with-selector/package.json | 3 +++ packages/with-selector/src/WithSelector.js | 14 +++++++++++--- yarn.lock | 5 +++++ 4 files changed, 21 insertions(+), 5 deletions(-) diff --git a/packages/with-selector/Readme.md b/packages/with-selector/Readme.md index 07c8ffa..74275cc 100644 --- a/packages/with-selector/Readme.md +++ b/packages/with-selector/Readme.md @@ -28,7 +28,7 @@ const Button = styled('button')` color: #fff; } - &.class-name { + &.custom-class { background: green; } ` @@ -44,7 +44,7 @@ const Button = styled('button')` - + diff --git a/packages/with-selector/package.json b/packages/with-selector/package.json index 3322423..f260315 100644 --- a/packages/with-selector/package.json +++ b/packages/with-selector/package.json @@ -12,5 +12,8 @@ "license": "MIT", "publishConfig": { "access": "public" + }, + "dependencies": { + "nanoid": "^3.1.7" } } diff --git a/packages/with-selector/src/WithSelector.js b/packages/with-selector/src/WithSelector.js index b876242..1ca9f74 100644 --- a/packages/with-selector/src/WithSelector.js +++ b/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,26 @@ 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! + 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 } } diff --git a/yarn.lock b/yarn.lock index ecada68..d6e30b7 100644 --- a/yarn.lock +++ b/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" From 4a22bbf5ba6d4dd134a3f961a4d5c89bd0d54a5d Mon Sep 17 00:00:00 2001 From: balazsmatepetro Date: Thu, 14 May 2020 16:08:06 +0200 Subject: [PATCH 2/6] chore: Add changeset about the random class name generation --- .changeset/cuddly-carpets-sort.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/cuddly-carpets-sort.md diff --git a/.changeset/cuddly-carpets-sort.md b/.changeset/cuddly-carpets-sort.md new file mode 100644 index 0000000..65d6408 --- /dev/null +++ b/.changeset/cuddly-carpets-sort.md @@ -0,0 +1,5 @@ +--- +'@component-driven/with-selector': major +--- + +Generate random class name in `WithSelector` component to make possible to use complex selectors like `:active:not([aria-disabled="true"])`. From 00226c4d203b6b37f70b450a6bf5c2e8ff2c4662 Mon Sep 17 00:00:00 2001 From: balazsmatepetro Date: Fri, 15 May 2020 13:18:37 +0200 Subject: [PATCH 3/6] chore: replace changeset type to 'minor' --- .changeset/cuddly-carpets-sort.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/cuddly-carpets-sort.md b/.changeset/cuddly-carpets-sort.md index 65d6408..de8fea7 100644 --- a/.changeset/cuddly-carpets-sort.md +++ b/.changeset/cuddly-carpets-sort.md @@ -1,5 +1,5 @@ --- -'@component-driven/with-selector': major +'@component-driven/with-selector': minor --- Generate random class name in `WithSelector` component to make possible to use complex selectors like `:active:not([aria-disabled="true"])`. From 47d9b9c73b2f320d8e57a613b6b054c9a82b3a3b Mon Sep 17 00:00:00 2001 From: balazsmatepetro Date: Fri, 15 May 2020 13:20:19 +0200 Subject: [PATCH 4/6] chore: add better explanation to the note about the class name selector --- packages/with-selector/src/WithSelector.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/with-selector/src/WithSelector.js b/packages/with-selector/src/WithSelector.js index 1ca9f74..a0f472e 100644 --- a/packages/with-selector/src/WithSelector.js +++ b/packages/with-selector/src/WithSelector.js @@ -19,7 +19,8 @@ const useAddSelector = (ref, selector) => { useEffect(() => { const className = ref.current.classList[ref.current.classList.length - 1] const fullSelector = `${className && `.${className}`}${selector}` - // NOTE: This could be improved! + // 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) { From 5cfd52b3fb5cfa5f5a51b414d4275a81c63b7e62 Mon Sep 17 00:00:00 2001 From: balazsmatepetro Date: Fri, 15 May 2020 13:29:33 +0200 Subject: [PATCH 5/6] docs: add complex selector example to WithSelector component docs --- packages/with-selector/Readme.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/with-selector/Readme.md b/packages/with-selector/Readme.md index 74275cc..111d33d 100644 --- a/packages/with-selector/Readme.md +++ b/packages/with-selector/Readme.md @@ -26,6 +26,12 @@ const Button = styled('button')` border-color: #333; background: #888; color: #fff; + + &:not([aria-disabled='true']) { + background: cadetblue; + border-color: darkblue; + color: #f5f5f5; + } } &.custom-class { @@ -44,6 +50,9 @@ const Button = styled('button')` + + + From 23cdfd5ff9f2a0a52c0441757ad0d6cbf9d30b8e Mon Sep 17 00:00:00 2001 From: Andrey Okonetchnikov Date: Fri, 15 May 2020 13:34:53 +0200 Subject: [PATCH 6/6] Update cuddly-carpets-sort.md --- .changeset/cuddly-carpets-sort.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/cuddly-carpets-sort.md b/.changeset/cuddly-carpets-sort.md index de8fea7..a48f679 100644 --- a/.changeset/cuddly-carpets-sort.md +++ b/.changeset/cuddly-carpets-sort.md @@ -2,4 +2,4 @@ '@component-driven/with-selector': minor --- -Generate random class name in `WithSelector` component to make possible to use complex selectors like `:active:not([aria-disabled="true"])`. +Make it possible to use complex selectors like `:active:not([aria-disabled="true"])`