drop silent mode as no performance benefit (#1104)

packages/css-render/__tests__/mount/index.spec.ts

@@ -180,46 +180,11 @@ describe('head', () => {
   })
 })
 
-describe('silent mode', () => {
-  it('works in silent mode', () => {
-    const divA = document.createElement('div')
-    const divB = document.createElement('div')
-    divA.classList.add('a')
-    divB.classList.add('b')
-    divA.appendChild(divB)
-    document.body.appendChild(divA)
-    const style = c([
-      c(
-        '.a',
-        {
-          color: 'red'
-        },
-        [
-          c('.b', {
-            color: 'rgb(0, 255, 0)'
-          })
-        ]
-      )
-    ])
-
-    style.mount({
-      id: 'ab',
-      silent: true
-    })
-
-    expect(getComputedStyle(document.querySelector('.a')!).color).to.equal(
-      'rgb(255, 0, 0)'
-    )
-    expect(getComputedStyle(document.querySelector('.b')!).color).to.equal(
-      'rgb(0, 255, 0)'
-    )
-  })
-})
-
 describe('force', () => {
   it('works', () => {
     const divA = document.createElement('div')
     divA.classList.add('a')
+    document.body.appendChild(divA)
     const style = c('.a', ({ props }) => ({
       color: props.color
     }))

packages/css-render/playground/index.ts

@@ -13,6 +13,5 @@ const style = c([
 ])
 
 style.mount({
-  id: 'ab',
-  silent: true
+  id: 'ab'
 })

packages/css-render/src/CssRender.ts

@@ -12,25 +12,14 @@ import {
 } from './utils'
 
 export function CssRender (config: CssRenderConfig = {}): CssRenderInstance {
-  let styleSheet: CSSStyleSheet | null = null
   const cssr: CssRenderInstance = {
     c: (
       (...args: any[]) => c(cssr, ...args as [any, any, any])
     ) as createCNode,
     use: (plugin: CssRenderPlugin, ...args: any[]) => plugin.install(cssr, ...args),
     find: queryElement,
     context: {},
-    config,
-    get __styleSheet () {
-      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-      if (!styleSheet) {
-        const style = document.createElement('style')
-        document.head.appendChild(style)
-        styleSheet = document.styleSheets[document.styleSheets.length - 1]
-        return styleSheet
-      }
-      return styleSheet
-    }
+    config
   }
   return cssr
 }

packages/css-render/src/c.ts

@@ -25,14 +25,13 @@ function wrappedMount<T extends undefined | SsrAdapter> (
   options: MountOption<T> = {}
 // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
 ): T extends undefined ? HTMLStyleElement : void {
-  const { id, ssr, props, head = false, silent = false, force = false, anchorMetaName } = options
+  const { id, ssr, props, head = false, force = false, anchorMetaName } = options
   const targetElement = mount(
     this.instance,
     this,
     id,
     props,
     head,
-    silent,
     force,
     anchorMetaName,
     ssr

packages/css-render/src/mount.ts

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/prefer-ts-expect-error */
 /* eslint-disable @typescript-eslint/strict-boolean-expressions */
 import hash from './hash'
-import { render } from './render'
 import {
   CNode,
   CssRenderInstance,
@@ -15,8 +14,6 @@ if (typeof window !== 'undefined') {
   (window as any).__cssrContext = {}
 }
 
-type CssrContext = Record<string, boolean>
-
 export function unmount (
   intance: CssRenderInstance,
   node: CNode,
@@ -50,7 +47,6 @@ function mount (
   id: MountId,
   props: CRenderProps,
   head: boolean,
-  silent: boolean,
   force: boolean,
   anchorMetaName: string | undefined,
   ssrAdapter: SsrAdapter
@@ -61,7 +57,6 @@ function mount (
   id: MountId,
   props: CRenderProps,
   head: boolean,
-  silent: boolean,
   force: boolean,
   anchorMetaName: string | undefined,
   ssrAdapter?: undefined
@@ -72,7 +67,6 @@ function mount (
   id: MountId,
   props: CRenderProps,
   head: boolean,
-  silent: boolean,
   force: boolean,
   anchorMetaName: string | undefined,
   ssrAdapter?: SsrAdapter
@@ -84,27 +78,11 @@ function mount (
   id: MountId,
   props: CRenderProps,
   head: boolean,
-  silent: boolean,
   force: boolean,
   anchorMetaName: string | undefined,
   ssrAdapter?: SsrAdapter
   // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
 ): HTMLStyleElement | void {
-  if (silent && !ssrAdapter) {
-    if (id === undefined) {
-      // it is possible to use hash to get rid of the requirements of id
-      // if you are interested in it, please create a pr
-      // i have no time to impl it
-      console.error('[css-render/mount]: `id` is required in `silent` mode.')
-      return
-    }
-    const cssrContext: CssrContext = (window as any).__cssrContext
-    if (!cssrContext[id]) {
-      cssrContext[id] = true
-      render(node, instance, props, silent)
-    }
-    return
-  }
   let style: string | undefined
   if (id === undefined) {
     style = node.render(props)

packages/css-render/src/render.ts

@@ -115,8 +115,7 @@ function traverseCNode <T extends CRenderProps> (
   selectorPaths: CSelectorPath,
   styles: string[],
   instance: CssRenderInstance,
-  params: T,
-  styleSheet?: CSSStyleSheet
+  params: T
 ): void {
   const $ = node.$
   let blockSelector = ''
@@ -164,14 +163,8 @@ function traverseCNode <T extends CRenderProps> (
   const style = createStyle(selector, node.props, instance, params)
   if (blockSelector) {
     styles.push(`${blockSelector} {`)
-    if (styleSheet && style) {
-      styleSheet.insertRule(`${blockSelector} {\n${style}\n}\n`)
-    }
-  } else {
-    if (styleSheet && style) {
-      styleSheet.insertRule(style)
-    }
-    if (!styleSheet && style.length) styles.push(style)
+  } else if (style.length) {
+    styles.push(style)
   }
   if (node.children) {
     loopCNodeListWithCallback(node.children, {
@@ -180,13 +173,9 @@ function traverseCNode <T extends CRenderProps> (
     }, childNode => {
       if (typeof childNode === 'string') {
         const style = createStyle(selector, { raw: childNode }, instance, params)
-        if (styleSheet) {
-          styleSheet.insertRule(style)
-        } else {
-          styles.push(style)
-        }
+        styles.push(style)
       } else {
-        traverseCNode(childNode, selectorPaths, styles, instance, params, styleSheet)
+        traverseCNode(childNode, selectorPaths, styles, instance, params)
       }
     })
   }
@@ -200,20 +189,15 @@ function traverseCNode <T extends CRenderProps> (
 export function render <T extends CRenderProps> (
   node: CNode,
   instance: CssRenderInstance,
-  props?: T,
-  insertRule: boolean = false
+  props?: T
 ): string {
   const styles: string[] = []
   traverseCNode(
     node,
     [],
     styles,
     instance,
-    props,
-    insertRule
-      ? node.instance.__styleSheet
-      : undefined
+    props
   )
-  if (insertRule) return ''
   return styles.join('\n\n')
 }

packages/css-render/src/types.ts

@@ -33,7 +33,6 @@ export interface MountOption<T extends SsrAdapter | undefined = undefined> {
   props?: CRenderProps
   ssr?: T
   head?: boolean
-  silent?: boolean
   force?: boolean
   anchorMetaName?: string
 }
@@ -137,8 +136,6 @@ export interface CssRenderInstance {
   use: (plugin: CssRenderPlugin, ...args: any[]) => void
   find: CFindTarget
   config: CssRenderConfig
-  /** @private */
-  __styleSheet: CSSStyleSheet
 }
 
 export interface CssRenderPlugin {