enhance: use css scope rule

huozhi · Feb 16, 2025 · 2680249 · 2680249
1 parent be837ed
commit 2680249
Show file tree

Hide file tree

Showing 8 changed files with 222 additions and 200 deletions.
diff --git a/src/code/code.test.tsx b/src/code/code.test.tsx
diff --git a/src/code/code.tsx b/src/code/code.tsx
@@ -1,7 +1,7 @@
 import { tokenize, generate } from 'sugar-high'
 import { css, headerCss } from './css'
 import * as presets from 'sugar-high/presets'
-import { useId, useMemo } from 'react'
+import { useMemo } from 'react'
 import { Style } from '../style'
 
 const getPresetByExt = (ext: string) => {
@@ -90,21 +90,19 @@ function generateHighlightedLines(
 }
 
 export function CodeHeader({ 
-  id, 
   title, 
   controls = false
 }: {
-  id: string
   title?: string
   controls: boolean
 }) {
   if (!title && !controls) return null
   return (
     <div 
-      data-codice-header={id}
+      data-codice-header
       data-codice-header-controls={controls}
     >
-      <Style css={headerCss(id)} />
+      <Style css={headerCss()} />
       {controls ? (
         <div data-codice-controls>
           <span data-codice-control />
@@ -163,8 +161,7 @@ export function Code({
   asMarkup?: boolean
   extension?: string
 } & React.HTMLAttributes<HTMLDivElement>) {
-  const id = useId()
-  const styles = css(id, { fontSize, lineNumbers, lineNumbersWidth, padding })
+  const styles = css({ fontSize, lineNumbers, lineNumbersWidth, padding })
 
   const lineElements = useMemo(() => 
     asMarkup 
@@ -175,9 +172,9 @@ export function Code({
 
   return (
     // Add both attribute because it's both root component and child component (of editor)
-    <div {...props} data-codice="code" data-codice-code={id}>
+    <div {...props} data-codice="code" data-codice-code>
       <Style css={styles} />
-      <CodeHeader title={title} controls={controls} id={id} />
+      <CodeHeader title={title} controls={controls} />
       <CodeFrame preformatted={preformatted} asMarkup={asMarkup}>
         {lineElements}
       </CodeFrame>

diff --git a/src/code/css.ts b/src/code/css.ts
@@ -1,7 +1,9 @@
 import { fontSizeCss } from '../style'
 
-const baseCss = (id: string) => {
-  const C = `[data-codice-code="${id}"]`
+const C = `:scope[data-codice-code]`
+const H = `:scope[data-codice-header]`
+
+const baseCss = () => {
   return `\
 ${C} pre {
   white-space: pre-wrap;
@@ -23,8 +25,7 @@ ${C} .sh__line[data-highlight] {
 `
 }
 
-export const headerCss = (id: string) => {
-  const H = `[data-codice-header="${id}"]`
+export const headerCss = () => {
   return `\
 ${H} {
   position: relative;
@@ -62,11 +63,11 @@ ${H} [data-codice-control] {
 `
 }
 
-const lineNumbersCss = (id: string) => `\
-[data-codice-code="${id}"] code {
+const lineNumbersCss = () => `\
+${C} code {
   counter-reset: codice-code-line-number;
 }
-[data-codice-code="${id}"] [data-codice-code-line-number] {
+${C} [data-codice-code-line-number] {
   counter-increment: codice-code-line-number 1;
   content: counter(codice-code-line-number);
   display: inline-block;
@@ -79,7 +80,7 @@ const lineNumbersCss = (id: string) => `\
 }
 `
 
-export const css = (id: string, {
+export const css = ({
   fontSize,
   lineNumbers,
   lineNumbersWidth = '2.5rem',
@@ -90,19 +91,18 @@ export const css = (id: string, {
   lineNumbersWidth: string
   padding: string
 }): string => {
-  const U = `[data-codice-code="${id}"]`
   const fz = fontSizeCss(fontSize)
   return `\
-${U} {
+${C} {
   --codice-code-line-number-color: #a4a4a4;
   --codice-code-highlight-color: #555555;
   --codice-control-color: #8d8989;
   --codice-font-size: ${fz};
   --codice-code-line-number-width: ${lineNumbersWidth};
   --codice-code-padding: ${padding};
 }
-${baseCss(id)}
-${headerCss(id)}
-${lineNumbers ? lineNumbersCss(id) : ''}
+${baseCss()}
+${headerCss()}
+${lineNumbers ? lineNumbersCss() : ''}
 `
 }
diff --git a/src/editor/css.ts b/src/editor/css.ts
@@ -1,6 +1,8 @@
 import { fontSizeCss } from '../style'
 
-export const css = (id: string, {
+const R = `:scope[data-codice-editor]`
+
+export const css = ({
   fontSize,
   lineNumbersWidth = '2.5rem',
   padding = '1rem',
@@ -11,7 +13,6 @@ export const css = (id: string, {
   padding: string
   fontFamily: string
 }) => {
-  const R = `[data-codice-editor="${id}"]`
   return `\
 ${R} {
   --codice-text-color: transparent;
@@ -69,7 +70,7 @@ ${R} textarea {
   height: 100%;
   overflow: hidden;
 }
-${R}[data-codice-line-numbers="true"] textarea {
+${R} [data-codice-line-numbers="true"] textarea {
   padding-left: calc(var(--codice-code-line-number-width) + var(--codice-code-padding));
 }
 `