Merge branch 'main' into jest-27

emmatown · web-flow · commit b0a04367fa4d · 2021-10-07T10:40:57.000+10:00
diff --git a/.changeset/famous-ghosts-roll.md b/.changeset/famous-ghosts-roll.md
@@ -0,0 +1,7 @@
+---
+'@emotion/cache': patch
+'@emotion/css': patch
+'@emotion/react': patch
+---
+
+Fixed an edge case issue with incorrect rules being generated. When a context selector (`&`) was used not at the beginning of a selector (which is not valid SCSS but is allowed by the Stylis parser that we are using) within a group of selectors containing a pseudoclass then it was not replaced correctly with the current context selector.
diff --git a/.changeset/itchy-waves-beg.md b/.changeset/itchy-waves-beg.md
@@ -0,0 +1,5 @@
+---
+'@emotion/cache': patch
+---
+
+Improved the declared types related to Stylis. This should improve the compatibility with the types published in `@types/stylis`.
diff --git a/README.md b/README.md
@@ -111,17 +111,6 @@ Look here 👉 _[emotion babel plugin feature table and documentation](https://g
 - [CommercialRealEstate.com.au](https://www.commercialrealestate.com.au)
 - [codecademy.com](https://www.codecademy.com)
 
-## Contributors
-
-This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
-<a href="https://github.com/emotion-js/emotion/graphs/contributors"><img src="https://opencollective.com/emotion/contributors.svg?width=890&button=false" /></a>
-
-## Backers
-
-Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/emotion#backer)]
-
-<a href="https://opencollective.com/emotion#backers" target="_blank"><img src="https://opencollective.com/emotion/backers.svg?width=890"></a>
-
 ## Sponsors
 
 Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/emotion#sponsor)]
@@ -137,3 +126,14 @@ Support this project by becoming a sponsor. Your logo will show up here with a l
 <a href="https://opencollective.com/emotion/sponsor/7/website" target="_blank"><img src="https://opencollective.com/emotion/sponsor/7/avatar.svg"></a>
 <a href="https://opencollective.com/emotion/sponsor/8/website" target="_blank"><img src="https://opencollective.com/emotion/sponsor/8/avatar.svg"></a>
 <a href="https://opencollective.com/emotion/sponsor/9/website" target="_blank"><img src="https://opencollective.com/emotion/sponsor/9/avatar.svg"></a>
+
+## Backers
+
+Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/emotion#backer)]
+
+<a href="https://opencollective.com/emotion#backers" target="_blank"><img src="https://opencollective.com/emotion/backers.svg?width=890"></a>
+
+## Contributors
+
+This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
+<a href="https://github.com/emotion-js/emotion/graphs/contributors"><img src="https://opencollective.com/emotion/contributors.svg?width=890&button=false" /></a>
diff --git a/docs/extract-static.mdx b/docs/extract-static.mdx
@@ -12,9 +12,9 @@ extractStatic is deprecated and will be removed in emotion@10. We recommend disa
 
 ### Why is extractStatic being deprecated?
 
-Static extraction was made for earlier versions of emotion which had a very different architecture to the architecture emotion has today. As emotion has gotten more performant and features such as [composition](/docs/composition.md) have been added, static extraction has become less important. Because most of the community is leveraging the composition and `extractStatic` is rarely used, the time spent maintaining `extractStatic` is much higher than the benefits we get from it. Libraries such as [linaria](https://github.com/callstack-io/linaria) and [css-literal-loader](https://github.com/4Catalyzer/css-literal-loader) do static extraction well and the people working on them are focused on this specific problem. As a team, we believe that projects like [prepack](https://github.com/facebook/prepack), when they are ready, will provide a better and more powerful way to pre-compile styles.
+Static extraction was made for earlier versions of emotion which had a very different architecture to the architecture emotion has today. As emotion has gotten more performant and features such as [composition](/docs/composition.mdx) have been added, static extraction has become less important. Because most of the community is leveraging the composition and `extractStatic` is rarely used, the time spent maintaining `extractStatic` is much higher than the benefits we get from it. Libraries such as [linaria](https://github.com/callstack-io/linaria) and [css-literal-loader](https://github.com/4Catalyzer/css-literal-loader) do static extraction well and the people working on them are focused on this specific problem. As a team, we believe that projects like [prepack](https://github.com/facebook/prepack), when they are ready, will provide a better and more powerful way to pre-compile styles.
 
-The `extractStatic` option to `babel-plugin-emotion` allows you to extract styles with no interpolations into external css files. **`extractStatic` is not recommended** because it **breaks [composition](/docs/composition.md)** and other powerful patterns from libraries like [facepaint](https://github.com/emotion-js/facepaint).
+The `extractStatic` option to `babel-plugin-emotion` allows you to extract styles with no interpolations into external css files. **`extractStatic` is not recommended** because it **breaks [composition](/docs/composition.mdx)** and other powerful patterns from libraries like [facepaint](https://github.com/emotion-js/facepaint).
 
 **If you want to use dynamic values you must use css variables.**
 
diff --git a/docs/ssr.mdx b/docs/ssr.mdx
@@ -187,7 +187,7 @@ hydrate(ids)
 
 ## Next.js
 
-To use emotion's SSR with Next.js you need a custom `Document` component in `pages/_document.js` that renders the styles and inserts them into the `<head>`. [An example of Next.js with emotion can be found in the Next.js repo](https://github.com/zeit/next.js/tree/master/examples/with-emotion).
+To use emotion's SSR with Next.js you need a custom `Document` component in `pages/_document.js` that renders the styles and inserts them into the `<head>`. [An example of Next.js with emotion can be found in the Next.js repo](https://github.com/vercel/next.js/tree/master/examples/with-emotion-vanilla).
 
 > Note:
 >
diff --git a/docs/typescript.mdx b/docs/typescript.mdx
@@ -176,7 +176,7 @@ const Component: FC<ComponentProps> = ({
 }) => <div className={className}>{label}</div>
 
 const StyledComponent0 = styled(Component)`
-  color: ${props => label === 'Important' ? 'red' : 'green'};
+  color: ${props => props.label === 'Important' ? 'red' : 'green'};
 `
 
 const StyledComponent1 = styled(Component)({
diff --git a/packages/babel-plugin/package.json b/packages/babel-plugin/package.json
@@ -24,7 +24,7 @@
     "escape-string-regexp": "^4.0.0",
     "find-root": "^1.1.0",
     "source-map": "^0.5.7",
-    "stylis": "^4.0.3"
+    "stylis": "^4.0.10"
   },
   "peerDependencies": {
     "@babel/core": "^7.0.0"
diff --git a/packages/cache/package.json b/packages/cache/package.json
@@ -19,7 +19,7 @@
     "@emotion/sheet": "^1.0.0",
     "@emotion/utils": "^1.0.0",
     "@emotion/weak-memoize": "^0.2.5",
-    "stylis": "^4.0.3"
+    "stylis": "^4.0.10"
   },
   "devDependencies": {
     "@emotion/hash": "*",
diff --git a/packages/cache/src/stylis-plugins.js b/packages/cache/src/stylis-plugins.js
@@ -7,13 +7,37 @@ import {
   token,
   char,
   from,
-  identifier,
   peek,
-  position
+  position,
+  slice
 } from 'stylis'
 
 const last = arr => (arr.length ? arr[arr.length - 1] : null)
 
+// based on https://github.com/thysultan/stylis.js/blob/e6843c373ebcbbfade25ebcc23f540ed8508da0a/src/Tokenizer.js#L239-L244
+const identifierWithPointTracking = (begin, points, index) => {
+  let previous = 0
+  let character = 0
+
+  while (true) {
+    previous = character
+    character = peek()
+
+    // &\f
+    if (previous === 38 && character === 12) {
+      points[index] = 1
+    }
+
+    if (token(character)) {
+      break
+    }
+
+    next()
+  }
+
+  return slice(begin, position)
+}
+
 const toRules = (parsed, points) => {
   // pretend we've started with a comma
   let index = -1
@@ -30,7 +54,11 @@ const toRules = (parsed, points) => {
           // it's very unlikely for this sequence to actually appear in a different context, so we just leverage this fact here
           points[index] = 1
         }
-        parsed[index] += identifier(position - 1)
+        parsed[index] += identifierWithPointTracking(
+          position - 1,
+          points,
+          index
+        )
         break
       case 2:
         parsed[index] += delimit(character)
diff --git a/packages/cache/types/index.d.ts b/packages/cache/types/index.d.ts
@@ -7,9 +7,10 @@ export { EmotionCache }
 export interface StylisElement {
   type: string
   value: string
-  props: Array<string>
+  props: Array<string> | string
   root: StylisElement | null
-  children: Array<StylisElement>
+  parent: StylisElement | null
+  children: Array<StylisElement> | string
   line: number
   column: number
   length: number
@@ -20,14 +21,14 @@ export type StylisPluginCallback = (
   index: number,
   children: Array<StylisElement>,
   callback: StylisPluginCallback
-) => string | undefined
+) => string | void
 
 export type StylisPlugin = (
   element: StylisElement,
   index: number,
   children: Array<StylisElement>,
   callback: StylisPluginCallback
-) => string | undefined
+) => string | void
 
 export interface Options {
   nonce?: string
diff --git a/packages/css-prettifier/package.json b/packages/css-prettifier/package.json
@@ -16,7 +16,7 @@
   "repository": "https://github.com/emotion-js/emotion/tree/main/packages/css-prettifier",
   "dependencies": {
     "@emotion/memoize": "^0.7.4",
-    "stylis": "^4.0.3"
+    "stylis": "^4.0.10"
   },
   "devDependencies": {},
   "publishConfig": {
diff --git a/packages/css/test/__snapshots__/selectivity.test.js.snap b/packages/css/test/__snapshots__/selectivity.test.js.snap
@@ -124,6 +124,26 @@ exports[`css media query with nested selector without declarations on root 1`] =
 }"
 `;
 
+exports[`css should allow a weird class containing & when pseudoclass appears in the selector group 1`] = `
+".css-13p6h3h:hover,
+.css-13p6h3h .t\\\\&t {
+  background: blue;
+}"
+`;
+
+exports[`css should allow for context selector being appended to an element type 1`] = `
+"a.css-ciaq1 {
+  background: blue;
+}"
+`;
+
+exports[`css should allow for context selector being appended to an element type when pseudoclass appears in the selector group 1`] = `
+".css-miigdc:hover,
+a.css-miigdc {
+  background: blue;
+}"
+`;
+
 exports[`orphaned pseudos in nested atrules 1`] = `
 "@media (max-width: 400px) {
   @supports (display: grid) {
diff --git a/packages/css/test/selectivity.test.js b/packages/css/test/selectivity.test.js
@@ -117,6 +117,37 @@ describe('css', () => {
     `
     expect(sheet).toMatchSnapshot()
   })
+
+  // this isn't compatible with SCSS but is allowed in Stylis
+  test('should allow for context selector being appended to an element type', () => {
+    css`
+      a& {
+        background: blue;
+      }
+    `
+    expect(sheet).toMatchSnapshot()
+  })
+
+  // #2488
+  test('should allow for context selector being appended to an element type when pseudoclass appears in the selector group', () => {
+    css`
+      &:hover,
+      a& {
+        background: blue;
+      }
+    `
+    expect(sheet).toMatchSnapshot()
+  })
+
+  test('should allow a weird class containing & when pseudoclass appears in the selector group', () => {
+    css`
+      &:hover,
+      .t\\&t {
+        background: blue;
+      }
+    `
+    expect(sheet).toMatchSnapshot()
+  })
 })
 
 describe('orphaned pseudos', () => {
diff --git a/packages/hash/README.md b/packages/hash/README.md
@@ -8,4 +8,4 @@ import hash from '@emotion/hash'
 hash('some-string') // 12fj1d
 ```
 
-The source of this is from https://github.com/garycourt/murmurhash-js/blob/main/murmurhash2_gc.js.
+The source of this is from https://github.com/garycourt/murmurhash-js/blob/master/murmurhash2_gc.js.
diff --git a/packages/jest/package.json b/packages/jest/package.json
@@ -21,7 +21,7 @@
     "@emotion/css-prettifier": "^1.0.0",
     "chalk": "^4.1.0",
     "specificity": "^0.4.1",
-    "stylis": "^4.0.3"
+    "stylis": "^4.0.10"
   },
   "peerDependencies": {
     "@types/jest": "^26.0.14 || ^27.0.0",
diff --git a/site/src/components/Carbon.js b/site/src/components/Carbon.js
@@ -0,0 +1,107 @@
+import React from 'react'
+import { Global, css } from '@emotion/react'
+
+function buildScript(src, attrs = {}) {
+  const script = document.createElement('script')
+  script.async = true
+  Object.keys(attrs).forEach(attr => script.setAttribute(attr, attrs[attr]))
+  script.src = src
+
+  return script
+}
+
+export default function CarbonAds() {
+  const ref = React.useRef()
+
+  React.useEffect(() => {
+    const script = buildScript(
+      '//cdn.carbonads.com/carbon.js?serve=CESDV5QY&placement=emotionsh',
+      {
+        type: 'text/javascript',
+        id: '_carbonads_js'
+      }
+    )
+
+    ref.current.appendChild(script)
+  }, [])
+
+  return (
+    <>
+      <Global
+        styles={css`
+          #carbonads {
+            display: block;
+
+            overflow: hidden;
+            margin-bottom: 2em;
+          }
+
+          #carbonads a,
+          #carbonads a:hover {
+            color: inherit;
+            text-decoration: none;
+          }
+
+          #carbonads span {
+            display: block;
+
+            overflow: hidden;
+          }
+
+          #carbonads .carbon-img {
+            display: block;
+
+            line-height: 1;
+          }
+
+          #carbonads .carbon-img img {
+            display: block;
+            border: solid 1px hsla(0, 0%, 7%, 0.1);
+          }
+
+          #carbonads .carbon-text {
+            display: block;
+            margin-top: 0.5em;
+
+            font-size: 14px;
+            line-height: 1.35;
+          }
+
+          #carbonads .carbon-poweredby {
+            display: block;
+            margin-top: 0.5em;
+
+            font-size: 10px;
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: 0.1ch;
+            text-transform: uppercase;
+          }
+
+          @media only screen and (min-width: 320px) and (max-width: 759px) {
+            #carbonads {
+              position: relative;
+            }
+
+            #carbonads .carbon-wrap {
+              display: flex;
+              flex-direction: row;
+            }
+
+            #carbonads .carbon-text {
+              padding: 0 12px;
+              font-size: 16px;
+            }
+
+            #carbonads .carbon-poweredby {
+              position: absolute;
+              left: 142px;
+              bottom: 0;
+            }
+          }
+        `}
+      />
+      <div ref={ref} />
+    </>
+  )
+}
diff --git a/site/src/components/DocWrapper.js b/site/src/components/DocWrapper.js
@@ -15,6 +15,8 @@ import { getDocMap, docList } from '../utils/misc'
 import DocMetadata from './DocMetadata'
 import Search from './Search'
 
+import Carbon from './Carbon'
+
 let space = constants.space
 const scaleAnimation = keyframes`
   from {
@@ -178,6 +180,7 @@ export default ({
                 ]
               })}
             >
+              <Carbon />
               <Search />
               {docList.map(item => {
                 return (
diff --git a/yarn.lock b/yarn.lock

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@emotion/cache': patch
 +---
++
 +Improved the declared types related to Stylis. This should improve the compatibility with the types published in `@types/stylis`.
Original file line number	Diff line number	Diff line change
`@@ -187,7 +187,7 @@ hydrate(ids)`
`187`	`187`
`188`	`188`	`## Next.js`
`189`	`189`
`190`		-To use emotion's SSR with Next.js you need a custom `Document` component in `pages/_document.js` that renders the styles and inserts them into the `<head>`. [An example of Next.js with emotion can be found in the Next.js repo](https://github.com/zeit/next.js/tree/master/examples/with-emotion).
	`190`	+To use emotion's SSR with Next.js you need a custom `Document` component in `pages/_document.js` that renders the styles and inserts them into the `<head>`. [An example of Next.js with emotion can be found in the Next.js repo](https://github.com/vercel/next.js/tree/master/examples/with-emotion-vanilla).
`191`	`191`
`192`	`192`	`> Note:`
`193`	`193`	`>`
Original file line number	Diff line number	Diff line change
`@@ -176,7 +176,7 @@ const Component: FC<ComponentProps> = ({`
`176`	`176`	`}) => <div className={className}>{label}</div>`
`177`	`177`
`178`	`178`	const StyledComponent0 = styled(Component)`
`179`		`- color: ${props => label === 'Important' ? 'red' : 'green'};`
	`179`	`+ color: ${props => props.label === 'Important' ? 'red' : 'green'};`
`180`	`180`	`
`181`	`181`
`182`	`182`	`const StyledComponent1 = styled(Component)({`