emotion-js · srmagura · Mar 10, 2022 · Mar 10, 2022 · Mar 10, 2022 · Mar 10, 2022
diff --git a/.changeset/big-years-relate.md b/.changeset/big-years-relate.md
@@ -0,0 +1,5 @@
+---
+'@emotion/serialize': patch
+---
+
+Changed the error message "Component selectors can only be used in conjunction with @emotion/babel-plugin" to reference the new SWC Emotion plugin which will support component selectors soon.
diff --git a/.changeset/five-balloons-sneeze.md b/.changeset/five-balloons-sneeze.md
@@ -0,0 +1,6 @@
+---
+'@emotion/cache': patch
+'@emotion/sheet': patch
+---
+
+TypeScript type for the `container` option has been adjusted. It will now accept a `ShadowRoot`, or any other kind of `Node`.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -9,6 +9,7 @@
   - This step can be removed from this document if we upgrade to the latest
     version of Gatsby, which is compatible with sharp 0.28.0+ which does include
     binaries for M1 Macs.
+- (If using Windows) Enable Developer Mode in the Windows settings app. On Windows 11, this can be done by searching the start menu for "Developer settings" and then enabling the Developer Mode toggle switch.
 - Run `yarn` in the repository's root directory to install everything you need for development.
 - Run `yarn build` in the root directory to build the modules.
 

diff --git a/package.json b/package.json
@@ -138,10 +138,6 @@
       "react": "React",
       "react/jsx-runtime": "ReactJSX",
       "react/jsx-dev-runtime": "ReactJSXDev"
-    },
-    "___experimentalFlags_WILL_CHANGE_IN_PATCH": {
-      "newEntrypoints": true,
-      "newDistFilenames": true
     }
   },
   "bugs": {
@@ -193,7 +189,7 @@
     "@manypkg/cli": "^0.16.1",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "@preconstruct/cli": "1.1.34",
+    "@preconstruct/cli": "^2.1.5",
     "@testing-library/react": "13.0.0-alpha.5",
     "@types/jest": "^27.0.3",
     "@types/node": "^10.11.4",

diff --git a/packages/cache/README.md b/packages/cache/README.md
@@ -51,7 +51,7 @@ The prefix before class names. It will also be set as the value of the `data-emo
 
 ### `container`
 
-`HTMLElement`
+`Node`
 
 A DOM node that emotion will insert all of its style tags into. This is useful for inserting styles into iframes or windows.
 

diff --git a/packages/cache/__tests__/__snapshots__/index.js.snap b/packages/cache/__tests__/__snapshots__/index.js.snap
@@ -1,5 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`should accept container option 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  color: blue;
+}
+
+<body>
+
+
+  <div
+    id="container"
+  >
+
+
+    <style
+      data-emotion="test-container"
+      data-s=""
+    >
+
+      .emotion-0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:blue;}
+    </style>
+  </div>
+  <div>
+    <div
+      class="emotion-0"
+    />
+  </div>
+</body>
+`;
+
 exports[`should accept insertionPoint option 1`] = `
 <head>
 

diff --git a/packages/cache/__tests__/index.js b/packages/cache/__tests__/index.js
@@ -33,3 +33,24 @@ it('should accept insertionPoint option', () => {
 
   expect(document.head).toMatchSnapshot()
 })
+
+it('should accept container option', () => {
+  const body = safeQuerySelector('body')
+
+  body.innerHTML = `
+    <div id="container" />
+  `
+
+  const cache = createCache({
+    key: 'test-container',
+    container: safeQuerySelector('#container')
+  })
+
+  render(
+    <CacheProvider value={cache}>
+      <div css={{ display: 'flex', color: 'blue' }} />
+    </CacheProvider>
+  )
+
+  expect(document.body).toMatchSnapshot()
+})
diff --git a/packages/cache/src/index.js b/packages/cache/src/index.js
@@ -90,7 +90,7 @@ let createCache = (options /*: Options */) /*: EmotionCache */ => {
     }
   }
   let inserted = {}
-  let container /*: HTMLElement */
+  let container /* : Node */
   const nodesToHydrate = []
   if (isBrowser) {
     container = options.container || document.head

diff --git a/packages/cache/types/index.d.ts b/packages/cache/types/index.d.ts
@@ -34,7 +34,7 @@ export interface Options {
   nonce?: string
   stylisPlugins?: Array<StylisPlugin>
   key: string
-  container?: HTMLElement
+  container?: Node
   speedy?: boolean
   /** @deprecate use `insertionPoint` instead */
   prepend?: boolean

diff --git a/packages/css/test/no-babel/__snapshots__/index.test.js.snap b/packages/css/test/no-babel/__snapshots__/index.test.js.snap
@@ -12,11 +12,11 @@ exports[`css @supports 1`] = `
 />
 `;
 
-exports[`css component as selectors (object syntax) 1`] = `"Component selectors can only be used in conjunction with @emotion/babel-plugin."`;
+exports[`css component as selectors (object syntax) 1`] = `"Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform."`;
 
 exports[`css component as selectors (object syntax) 2`] = `"The above error occurred in the <Styled(div)> component:"`;
 
-exports[`css component selectors without target 1`] = `"Component selectors can only be used in conjunction with @emotion/babel-plugin."`;
+exports[`css component selectors without target 1`] = `"Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform."`;
 
 exports[`css composition 1`] = `
 .emotion-0 {

diff --git a/packages/serialize/src/index.ts b/packages/serialize/src/index.ts
@@ -167,6 +167,11 @@ if (process.env.NODE_ENV !== 'production') {
   }
 }
 
+const noComponentSelectorMessage =
+  'Component selectors can only be used in conjunction with ' +
+  '@emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware ' +
+  'compiler transform.'
+
 function handleInterpolation(
   mergedProps: unknown | undefined,
   registered: RegisteredCache | undefined,
@@ -181,9 +186,7 @@ function handleInterpolation(
       process.env.NODE_ENV !== 'production' &&
       String(componentSelector) === 'NO_COMPONENT_SELECTOR'
     ) {
-      throw new Error(
-        'Component selectors can only be used in conjunction with @emotion/babel-plugin.'
-      )
+      throw new Error(noComponentSelectorMessage)
     }
     return componentSelector as unknown as string
   }
@@ -324,9 +327,7 @@ function createStringFromObject(
           key === 'NO_COMPONENT_SELECTOR' &&
           process.env.NODE_ENV !== 'production'
         ) {
-          throw new Error(
-            'Component selectors can only be used in conjunction with @emotion/babel-plugin.'
-          )
+          throw new Error(noComponentSelectorMessage)
         }
         if (
           Array.isArray(value) &&

diff --git a/packages/sheet/README.md b/packages/sheet/README.md
@@ -25,7 +25,7 @@ sheet.insert('html { color: hotpink; }')
 type Options = {
   nonce?: string
   key: string
-  container: HTMLElement
+  container: Node
   speedy?: boolean
   prepend?: boolean
 }

diff --git a/packages/sheet/__tests__/__snapshots__/index.js.snap b/packages/sheet/__tests__/__snapshots__/index.js.snap
@@ -271,3 +271,24 @@ exports[`StyleSheet should work if insertionPoint is last element 1`] = `
   <body />
 </html>
 `;
+
+exports[`StyleSheet should work with a ShadowRoot container 1`] = `
+<html>
+  <head />
+  <body>
+    <div />
+  </body>
+</html>
+`;
+
+exports[`StyleSheet should work with a ShadowRoot container 2`] = `
+HTMLCollection [
+  <style
+    data-emotion=""
+    data-s=""
+  >
+
+    html { color: hotpink; }
+  </style>,
+]
+`;
diff --git a/packages/sheet/__tests__/index.js b/packages/sheet/__tests__/index.js
@@ -100,6 +100,23 @@ describe('StyleSheet', () => {
     sheet.flush()
   })
 
+  it('should work with a ShadowRoot container', () => {
+    const div = document.createElement('div')
+    // $FlowFixMe
+    document.body.appendChild(div)
+    const container = div.attachShadow({ mode: 'open' })
+    const sheet = new StyleSheet({ ...defaultOptions, container })
+    expect(sheet.container).toBe(container)
+    sheet.insert(rule)
+    expect(document.documentElement).toMatchSnapshot()
+    // The shadowRoot is not serialized in the snapshot, so we need to take a
+    // separate snapshot of the shadowRoot's children.
+    expect(container.children).toMatchSnapshot()
+    expect(sheet.tags).toHaveLength(1)
+    expect(sheet.tags[0].parentNode).toBe(container)
+    sheet.flush()
+  })
+
   it('should accept prepend option', () => {
     const head = safeQuerySelector('head')
     const otherStyle = document.createElement('style')

diff --git a/packages/sheet/src/index.ts b/packages/sheet/src/index.ts
@@ -42,7 +42,7 @@ function sheetForTag(tag: HTMLStyleElement): CSSStyleSheet {
 export type Options = {
   nonce?: string
   key: string
-  container: HTMLElement
+  container: Node
   speedy?: boolean
   prepend?: boolean
   insertionPoint?: HTMLElement
@@ -63,7 +63,8 @@ export class StyleSheet {
   isSpeedy: boolean
   ctr: number
   tags: HTMLStyleElement[]
-  container: HTMLElement
+  // Using Node instead of HTMLElement since container may be a ShadowRoot
+  container: Node
   key: string
   nonce: string | undefined
   prepend: boolean | undefined

diff --git a/packages/sheet/types/tests.ts b/packages/sheet/types/tests.ts
@@ -60,3 +60,9 @@ styleSheet.flush()
 styleSheet.flush(undefined as any)
 // $ExpectError
 styleSheet.flush(...(undefined as any as Array<any>))
+
+const shadowRoot = document.createElement('div').attachShadow({ mode: 'open' })
+const shadowStyleSheet = new StyleSheet({
+  key: 'abc',
+  container: shadowRoot
+})
-Original file line number
+Diff line change
@@ Expand Up @@
     ### `container`
-    `HTMLElement`
+    `Node`
     A DOM node that emotion will insert all of its style tags into. This is useful for inserting styles into iframes or windows.
@@ Expand Down @@