diff --git a/.flowconfig b/.flowconfig index b4f0bbebf..dbc76dd94 100644 --- a/.flowconfig +++ b/.flowconfig @@ -21,7 +21,6 @@ suppress_comment=.*\\$FlowFixMe module.name_mapper='^\(create-emotion\)$' -> '/packages/\1/src' module.name_mapper='^\(react-emotion\)$' -> '/packages/\1/src' -module.name_mapper='^\(preact-emotion\)$' -> '/packages/\1/src' module.name_mapper='^\(emotion\)$' -> '/packages/\1/src' module.name_mapper='^\(babel-plugin-emotion\)$' -> '/packages/\1/src' module.name_mapper='^\(emotion-theming\)$' -> '/packages/\1/src' diff --git a/BREAKING_CHANGES_IN_V10.md b/BREAKING_CHANGES_IN_V10.md index 6ed4cf3cb..ba13be186 100644 --- a/BREAKING_CHANGES_IN_V10.md +++ b/BREAKING_CHANGES_IN_V10.md @@ -1,6 +1,6 @@ # Breaking Changes -- Only supports react@16.3 and above(+ preact) +- Only supports react@16.3 and above - functions in interpolations are stringified in css and cx calls(probably won't affect you very much, there's a warning about it in v9) - `create-emotion-styled` is gone, use the new styled api and a provider - The css prop doesn't work via the babel plugin. `jsx` can be manually imported from `@emotion/core` or [babel-plugin-jsx-pragmatic](https://github.com/jmm/babel-plugin-jsx-pragmatic) can be used. (should we make a babel preset for that?) diff --git a/README.md b/README.md index eda3bd2ba..386890960 100644 --- a/README.md +++ b/README.md @@ -56,8 +56,6 @@ app.classList.add(myStyle) npm install --save emotion react-emotion babel-plugin-emotion ``` -_Note: use `preact-emotion` in place of `react-emotion` if using [Preact](https://github.com/developit/preact)_ - ```javascript import styled, { css } from 'react-emotion' diff --git a/docs/composition.md b/docs/composition.md index 90d552d22..b036f55c0 100644 --- a/docs/composition.md +++ b/docs/composition.md @@ -1,5 +1,5 @@ --- -title: "Composition" +title: 'Composition' --- Composition is one of the most powerful and useful patterns in Emotion. You can compose styles together by interpolating value returned from `css` in another style block. diff --git a/docs/docs.yaml b/docs/docs.yaml index f261d3229..e8f58cc7b 100644 --- a/docs/docs.yaml +++ b/docs/docs.yaml @@ -42,4 +42,3 @@ - '@emotion/primitives' - create-emotion - create-emotion-server - - preact-emotion diff --git a/docs/globals.md b/docs/globals.md index 2e88aa9fb..57cb7d2f5 100644 --- a/docs/globals.md +++ b/docs/globals.md @@ -1,5 +1,5 @@ --- -title: "Global Styles" +title: 'Global Styles' --- Sometimes it's useful to insert global css like resets or font faces. The `Global` component can be used for this. It accepts a `styles` prop which accepts the same values as the `css` prop except it inserts styles globally. Global styles are also removed when the styles change or when the Global component unmounts. @@ -16,7 +16,8 @@ render( color: hotpink !important; } `} - />Everything is hotpink now! + /> + Everything is hotpink now! ) ``` diff --git a/docs/install.md b/docs/install.md index dc5b81c91..48b8f1760 100644 --- a/docs/install.md +++ b/docs/install.md @@ -1,5 +1,5 @@ --- -title: "Install" +title: 'Install' --- Emotion can be used in many different ways. The easiest way to get started is to use the [`@emotion/core` package](/packages/@emotion/core). @@ -7,8 +7,6 @@ Emotion can be used in many different ways. The easiest way to get started is to ```bash # React yarn add @emotion/core -# Preact -yarn add @emotion/preact-core ``` or if you prefer npm @@ -16,8 +14,6 @@ or if you prefer npm ```bash # React npm install --save @emotion/core -# Preact -npm install --save @emotion/preact-core ``` To use it, import what you need, for example use [jsx](/docs/jsx.md) to create class names with styles. @@ -33,7 +29,10 @@ const style = css` ` const SomeComponent = ({ children }) => ( -
Some hotpink text.{children}
+
+ Some hotpink text. + {children} +
) const anotherStyle = css({ @@ -52,29 +51,21 @@ render( ## With [`styled`](/docs/styled.md) -`styled` is a way to create React/Preact components that have styles attached to them. +`styled` is a way to create React components that have styles attached to them. ```bash # assuming you already have @emotion/core installed -# React yarn add @emotion/styled -# Preact -yarn add @emotion/preact-styled ``` or if you prefer npm ```bash -# React npm install --save @emotion/styled -# Preact -npm install --save @emotion/preact-styled ``` ```jsx // @live -// change this import to @emotion/preact-styled -// if you're using Preact import styled from '@emotion/styled' const Button = styled.button` diff --git a/docs/media-queries.md b/docs/media-queries.md index 3a9f36499..69ba33a87 100644 --- a/docs/media-queries.md +++ b/docs/media-queries.md @@ -1,5 +1,5 @@ --- -title: "Media Queries" +title: 'Media Queries' --- Using media queries in emotion works just like using media queries in regular css except you don't have to specify a selector inside the block, you can put your css directly in the css block. diff --git a/docs/nested.md b/docs/nested.md index e918899d6..bb8728257 100644 --- a/docs/nested.md +++ b/docs/nested.md @@ -1,5 +1,5 @@ --- -title: "Nested Selectors" +title: 'Nested Selectors' --- Sometimes it's useful to nest selectors to target elements inside the current class or React component. Here is an example of a simple element selector nested in the class generated with `css`: diff --git a/docs/ssr.md b/docs/ssr.md index 3a8402115..545aa16b0 100644 --- a/docs/ssr.md +++ b/docs/ssr.md @@ -1,5 +1,5 @@ --- -title: "Server Side Rendering" +title: 'Server Side Rendering' --- Server side rendering works out of the box in emotion 10 and above diff --git a/docs/styled.md b/docs/styled.md index 17544214d..cc51a5188 100644 --- a/docs/styled.md +++ b/docs/styled.md @@ -2,11 +2,11 @@ title: 'Styled Components' --- -`styled` is a way to create React or Preact components that have styles attached to them. It's available from [@emotion/styled](/packages/@emotion/styled) and [@emotion/preact-styled](/packages/@emotion/preact-styled). `styled` was heavily inspired by [styled-components](https://www.styled-components.com/) and [glamorous](https://glamorous.rocks/) +`styled` is a way to create React components that have styles attached to them. It's available from [@emotion/styled](/packages/@emotion/styled). `styled` was heavily inspired by [styled-components](https://www.styled-components.com/) and [glamorous](https://glamorous.rocks/) ### Styling elements and components -`styled` is very similar to `css` except you call it with an html tag or React/Preact component and then call that with a template literal for string styles or a regular function call for object styles. +`styled` is very similar to `css` except you call it with an html tag or React component and then call that with a template literal for string styles or a regular function call for object styles. ```jsx // @live diff --git a/docs/typescript.md b/docs/typescript.md index b6483ecec..40abf8fd1 100644 --- a/docs/typescript.md +++ b/docs/typescript.md @@ -1,5 +1,5 @@ --- -title: "Typescript" +title: 'Typescript' --- Emotion includes TypeScript definitions for `emotion`, `react-emotion`, `preact-emotion`, `create-emotion`, and `create-emotion-styled`. These definitions also infer types for css properties with the object syntax, HTML/SVG tag names, and prop types. @@ -247,10 +247,6 @@ const Button = styled('button')` export default Button ``` -## preact-emotion - -The `preact-emotion` types are the same as the `react-emotion` types except that the types use Preact component types like `ComponentConstructor` and `FunctionalComponent` instead of React component types. - ## create-emotion The `create-emotion` types are very similar to the `emotion` types except that you can pass your own context and options. diff --git a/packages/babel-plugin-emotion/__tests__/other-macros/__fixtures__/preact-emotion.js b/packages/babel-plugin-emotion/__tests__/other-macros/__fixtures__/preact-emotion.js deleted file mode 100644 index 8475b2669..000000000 --- a/packages/babel-plugin-emotion/__tests__/other-macros/__fixtures__/preact-emotion.js +++ /dev/null @@ -1,5 +0,0 @@ -import styled from 'preact-emotion/macro' - -let Thing = styled.div` - color: hotpink; -` diff --git a/packages/babel-plugin-emotion/__tests__/other-macros/__snapshots__/index.js.snap b/packages/babel-plugin-emotion/__tests__/other-macros/__snapshots__/index.js.snap index 9eea64147..78489b759 100644 --- a/packages/babel-plugin-emotion/__tests__/other-macros/__snapshots__/index.js.snap +++ b/packages/babel-plugin-emotion/__tests__/other-macros/__snapshots__/index.js.snap @@ -1,26 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`macros preact-emotion 1`] = ` -"import styled from 'preact-emotion/macro' - -let Thing = styled.div\` - color: hotpink; -\` - - - ↓ ↓ ↓ ↓ ↓ ↓ - -import _styled from \\"@emotion/preact-styled-base\\"; - -let Thing = _styled(\\"div\\", { - target: \\"ep298t30\\", - label: \\"Thing\\" -})({ - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" -});" -`; - exports[`macros react-emotion 1`] = ` "import styled from 'react-emotion/macro' @@ -40,4 +19,4 @@ let Thing = _styled(\\"div\\", { name: \\"1lrxbo5\\", styles: \\"color:hotpink;\\" });" -`; +` diff --git a/packages/core/src/context.js b/packages/core/src/context.js index 27de5aaa4..cfc5f2553 100644 --- a/packages/core/src/context.js +++ b/packages/core/src/context.js @@ -25,10 +25,8 @@ let withEmotionCache = function withEmotionCache>( ) } - return process.env.PREACT - ? render - : // $FlowFixMe - React.forwardRef(render) + // $FlowFixMe + return React.forwardRef(render) } let consume = (func: EmotionCache => React.Node) => { @@ -51,10 +49,7 @@ if (!isBrowser) { render() { return ( - {process.env.PREACT - ? // $FlowFixMe - this.props.children[0](this.state.value) - : this.props.children(this.state.value)} + {this.props.children(this.state.value)} ) } diff --git a/packages/emotion/README.md b/packages/emotion/README.md index 9b96bf075..189d5ef1f 100644 --- a/packages/emotion/README.md +++ b/packages/emotion/README.md @@ -21,13 +21,13 @@ Emotion is a performant and flexible CSS-in-JS library. Building on many other C Frequently viewed docs: -* [Introduction](https://emotion.sh/docs/introduction) -* [Install](https://emotion.sh/docs/install) -* [CSS](https://emotion.sh/docs/css) -* [Styled Components](https://emotion.sh/docs/styled) -* [Composition](https://emotion.sh/docs/composition) -* [Nested Selectors](https://emotion.sh/docs/nested) -* [Media Queries](https://emotion.sh/docs/media-queries) +- [Introduction](https://emotion.sh/docs/introduction) +- [Install](https://emotion.sh/docs/install) +- [CSS](https://emotion.sh/docs/css) +- [Styled Components](https://emotion.sh/docs/styled) +- [Composition](https://emotion.sh/docs/composition) +- [Nested Selectors](https://emotion.sh/docs/nested) +- [Media Queries](https://emotion.sh/docs/media-queries) ### Quick Start @@ -53,8 +53,6 @@ app.classList.add(myStyle) npm install --save emotion react-emotion babel-plugin-emotion ``` -_Note: use `preact-emotion` in place of `react-emotion` if using [Preact](https://github.com/developit/preact)_ - ```javascript import styled, { css } from 'react-emotion' @@ -83,34 +81,34 @@ Look here 👉 _[emotion babel plugin feature table and documentation](https://g ### Examples -* [emotion website](site) [[Demo Here](https://emotion.sh)] -* [next-hnpwa-guide-kit](https://github.com/tkh44/next-hnpwa-guide-kit) [[Demo Here](https://hnpwa.life)] -* [reactivesearch](https://github.com/appbaseio/reactivesearch), a react UI library for Elasticsearch [[Website](https://opensource.appbase.io/reactivesearch/)] -* [circuit-ui](https://github.com/sumup/circuit-ui), a react component library built at SumUp [[Storybook](https://sumup.github.io/circuit-ui/)] -* [govuk-react](https://github.com/penx/govuk-react/), a React component library built for UK Government departments -* **open a PR and add yours!** +- [emotion website](site) [[Demo Here](https://emotion.sh)] +- [next-hnpwa-guide-kit](https://github.com/tkh44/next-hnpwa-guide-kit) [[Demo Here](https://hnpwa.life)] +- [reactivesearch](https://github.com/appbaseio/reactivesearch), a react UI library for Elasticsearch [[Website](https://opensource.appbase.io/reactivesearch/)] +- [circuit-ui](https://github.com/sumup/circuit-ui), a react component library built at SumUp [[Storybook](https://sumup.github.io/circuit-ui/)] +- [govuk-react](https://github.com/penx/govuk-react/), a React component library built for UK Government departments +- **open a PR and add yours!** ### Ecosystem -* [facepaint](https://github.com/emotion-js/facepaint) -* [emotion-vue](https://github.com/egoist/emotion-vue) -* [ember-emotion](https://github.com/alexlafroscia/ember-emotion) -* [CSS to emotion transform](https://transform.now.sh/css-to-emotion/) -* [ShevyJS](https://github.com/kyleshevlin/shevyjs) -* [design-system-utils](https://github.com/mrmartineau/design-system-utils) - Utilities to give better access to your design system. +- [facepaint](https://github.com/emotion-js/facepaint) +- [emotion-vue](https://github.com/egoist/emotion-vue) +- [ember-emotion](https://github.com/alexlafroscia/ember-emotion) +- [CSS to emotion transform](https://transform.now.sh/css-to-emotion/) +- [ShevyJS](https://github.com/kyleshevlin/shevyjs) +- [design-system-utils](https://github.com/mrmartineau/design-system-utils) - Utilities to give better access to your design system. ### In the Wild -* [healthline.com](https://www.healthline.com) -* [nytimes.com](https://www.nytimes.com) -* [vault.crucible.gg](http://vault.crucible.gg/) -* [saldotuc.com](https://saldotuc.com) -* [gatsbythemes.com](https://gatsbythemes.com/) -* [blazity.com](https://blazity.com/) -* [postmates.com](https://postmates.com/) -* [thedisconnect.co](https://thedisconnect.co/one) -* [zefenify.com](https://zefenify.com/about.html) -* [sentry.io](https://sentry.io) +- [healthline.com](https://www.healthline.com) +- [nytimes.com](https://www.nytimes.com) +- [vault.crucible.gg](http://vault.crucible.gg/) +- [saldotuc.com](https://saldotuc.com) +- [gatsbythemes.com](https://gatsbythemes.com/) +- [blazity.com](https://blazity.com/) +- [postmates.com](https://postmates.com/) +- [thedisconnect.co](https://thedisconnect.co/one) +- [zefenify.com](https://zefenify.com/about.html) +- [sentry.io](https://sentry.io) ## Contributors diff --git a/packages/preact-core/__tests__/__snapshots__/index.js.snap b/packages/preact-core/__tests__/__snapshots__/index.js.snap deleted file mode 100644 index 201484dc8..000000000 --- a/packages/preact-core/__tests__/__snapshots__/index.js.snap +++ /dev/null @@ -1,43 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Global works 1`] = ` - - - -
-

- - something -

-
- - -`; - -exports[`the css prop works 1`] = ` - - - - - -
-

-

- wow -
-

-
- - -`; diff --git a/packages/preact-core/__tests__/index.js b/packages/preact-core/__tests__/index.js deleted file mode 100644 index ee107f9b8..000000000 --- a/packages/preact-core/__tests__/index.js +++ /dev/null @@ -1,41 +0,0 @@ -// @flow -/** @jsx jsx */ -import 'test-utils/dev-mode' -import 'test-utils/preact-mode' -import { jsx, Global } from '@emotion/preact-core' -import { throwIfFalsy } from 'test-utils' -import { render } from 'preact' - -test('the css prop works', () => { - throwIfFalsy(document.body).innerHTML = `
` - - render( -

-

wow
-

, - throwIfFalsy(document.getElementById('root')) - ) - - expect(document.documentElement).toMatchSnapshot() -}) - -test('Global works', () => { - throwIfFalsy(document.documentElement).innerHTML = `` - throwIfFalsy(document.body).innerHTML = `
` - - render( -

- - something -

, - throwIfFalsy(document.getElementById('root')) - ) - - expect(document.documentElement).toMatchSnapshot() -}) diff --git a/packages/preact-core/package.json b/packages/preact-core/package.json deleted file mode 100644 index 4cf44c076..000000000 --- a/packages/preact-core/package.json +++ /dev/null @@ -1,35 +0,0 @@ -{ - "name": "@emotion/preact-core", - "version": "10.0.0-really-unsafe-please-do-not-use.2", - "main": "dist/preact-core.cjs.js", - "module": "dist/preact-core.esm.js", - "browser": { - "./dist/preact-core.cjs.js": "./dist/preact-core.browser.cjs.js", - "./dist/preact-core.esm.js": "./dist/preact-core.browser.esm.js" - }, - "files": [ - "src", - "dist" - ], - "author": "mitchellhamilton ", - "license": "MIT", - "dependencies": { - "@emotion/cache": "^10.0.0-really-unsafe-please-do-not-use.2", - "@emotion/css": "^10.0.0-really-unsafe-please-do-not-use.2", - "@emotion/serialize": "^10.0.0-really-unsafe-please-do-not-use.2", - "@emotion/sheet": "^10.0.0-really-unsafe-please-do-not-use.2", - "@emotion/utils": "^10.0.0-really-unsafe-please-do-not-use.2" - }, - "peerDependencies": { - "preact": "8.x" - }, - "devDependencies": { - "html-tag-names": "^1.1.2", - "svg-tag-names": "^1.1.1" - }, - "repository": "https://github.com/emotion-js/emotion/tree/master/next-packages/preact-core", - "publishConfig": { - "access": "public" - }, - "umd:main": "./dist/index.min.js" -} diff --git a/packages/preact-core/src/index.js b/packages/preact-core/src/index.js deleted file mode 100644 index 76ff10323..000000000 --- a/packages/preact-core/src/index.js +++ /dev/null @@ -1 +0,0 @@ -export * from '@emotion/core' diff --git a/packages/preact-emotion/README.md b/packages/preact-emotion/README.md deleted file mode 100644 index bf5b7c026..000000000 --- a/packages/preact-emotion/README.md +++ /dev/null @@ -1,33 +0,0 @@ -# preact-emotion - -> The styled API for emotion and preact - -`preact-emotion` exports `styled` which allows you to use emotion to create Preact components that have styles attached to them, it also exports all of `emotion`'s exports. - -For more documentation on `styled`, [read about it and try it out in the `styled` docs](https://emotion.sh/docs/styled) - -```bash -npm install --save emotion preact-emotion -``` - -```jsx -// @live -import styled, { css } from 'preact-emotion' -const SomeComponent = styled('div')` - display: flex; - background-color: ${props => props.color}; -` - -const AnotherComponent = styled('h1')( - { - color: 'hotpink' - }, - props => ({ flex: props.flex }) -) - -render( - - Some text. - -) -``` diff --git a/packages/preact-emotion/macro.js b/packages/preact-emotion/macro.js deleted file mode 100644 index 145567647..000000000 --- a/packages/preact-emotion/macro.js +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = require('babel-plugin-emotion').macros.createStyledMacro({ - importPath: '@emotion/preact-styled-base', - isWeb: true -}) diff --git a/packages/preact-emotion/package.json b/packages/preact-emotion/package.json deleted file mode 100644 index d975c8061..000000000 --- a/packages/preact-emotion/package.json +++ /dev/null @@ -1,48 +0,0 @@ -{ - "name": "preact-emotion", - "version": "10.0.0-really-unsafe-please-do-not-use.2", - "description": "The Next Generation of CSS-in-JS, for Preact projects.", - "main": "dist/index.cjs.js", - "module": "dist/index.esm.js", - "types": "types/index.d.ts", - "files": [ - "dist", - "src", - "macro.js", - "types" - ], - "dependencies": { - "@emotion/preact-styled-base": "^10.0.0-really-unsafe-please-do-not-use.2", - "babel-plugin-emotion": "^10.0.0-really-unsafe-please-do-not-use.2" - }, - "peerDependencies": { - "preact": "8.x" - }, - "devDependencies": { - "emotion": "^10.0.0-really-unsafe-please-do-not-use.2", - "preact": "^8.2.9", - "react-emotion": "^10.0.0-really-unsafe-please-do-not-use.2" - }, - "author": "Kye Hohenberger", - "homepage": "https://emotion.sh", - "license": "MIT", - "repository": "https://github.com/emotion-js/emotion/tree/master/packages/preact-emotion", - "keywords": [ - "styles", - "emotion", - "react", - "preact", - "css", - "css-in-js" - ], - "bugs": { - "url": "https://github.com/emotion-js/emotion/issues" - }, - "umd:main": "./dist/emotion.umd.min.js", - "publishConfig": { - "tag": "next" - }, - "browser": { - "./dist/index.cjs.js": "./dist/index.browser.cjs.js" - } -} diff --git a/packages/preact-emotion/src/index.js b/packages/preact-emotion/src/index.js deleted file mode 100644 index 1fe025ffa..000000000 --- a/packages/preact-emotion/src/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from '@emotion/preact-styled-base' diff --git a/packages/preact-emotion/types/index.d.ts b/packages/preact-emotion/types/index.d.ts deleted file mode 100644 index 4aa112f61..000000000 --- a/packages/preact-emotion/types/index.d.ts +++ /dev/null @@ -1,25 +0,0 @@ -// Definitions by: Junyoung Clare Jang -// TypeScript Version: 2.6 - -import { - Interpolation, - StyledOptions, - Themed, -} from 'create-emotion-styled/types/common'; -import { - CreateStyled, - StyledComponent, -} from './preact'; - -export * from 'emotion'; - -export { - CreateStyled, - Interpolation, - StyledComponent, - StyledOptions, - Themed, -}; - -declare const styled: CreateStyled; -export default styled; diff --git a/packages/preact-emotion/types/preact.d.ts b/packages/preact-emotion/types/preact.d.ts deleted file mode 100644 index 79be471d3..000000000 --- a/packages/preact-emotion/types/preact.d.ts +++ /dev/null @@ -1,81 +0,0 @@ -// Definitions by: Junyoung Clare Jang -// TypeScript Version: 2.6 - -import { ComponentConstructor, ComponentFactory, FunctionalComponent, Ref } from 'preact'; -import { ClassInterpolation } from 'create-emotion'; -import { - Interpolation, - StyledOptions, - StyledOtherProps, - StyledStatelessProps, - Themed, -} from 'create-emotion-styled/types/common'; - -export interface StyledComponentMethods { - withComponent( - tag: T, - options?: StyledOptions, - ): StyledOtherComponent; - - withComponent( - component: FunctionalComponent, - options?: StyledOptions, - ): StyledStatelessComponent; - - withComponent( - component: ComponentConstructor | ComponentFactory, - options?: StyledOptions, - ): StyledOtherComponent; -} - -export interface StyledStatelessComponent - extends ComponentConstructor>, - ClassInterpolation, - StyledComponentMethods {} - -export interface StyledOtherComponent - extends ComponentConstructor>>, - ClassInterpolation, - StyledComponentMethods {} - -export type StyledComponent = - | StyledStatelessComponent - | StyledOtherComponent - ; - -export interface CreateStyledStatelessComponent { - ( - ...args: Array>> - ): StyledStatelessComponent; -} - -export interface CreateStyledOtherComponent { - ( - ...args: Array>> - ): StyledOtherComponent; -} - -export interface CreateStyledFunction { - ( - tag: T, - options?: StyledOptions, - ): CreateStyledOtherComponent; - - ( - component: FunctionalComponent, - options?: StyledOptions, - ): CreateStyledStatelessComponent; - - ( - component: ComponentConstructor | ComponentFactory, - options?: StyledOptions, - ): CreateStyledOtherComponent; -} - -export type CreateStyledShorthands = { - [T in keyof JSX.IntrinsicElements]: CreateStyledOtherComponent; -}; - -export interface CreateStyled - extends CreateStyledFunction, - CreateStyledShorthands {} diff --git a/packages/preact-emotion/types/test.tsx b/packages/preact-emotion/types/test.tsx deleted file mode 100644 index 3d7659779..000000000 --- a/packages/preact-emotion/types/test.tsx +++ /dev/null @@ -1,214 +0,0 @@ -// tslint:disable-next-line:no-implicit-dependencies -import * as Preact from 'preact'; -import styled, { flush, CreateStyled } from '../'; - -const h = Preact.h; - -let Component; -let mount; - -/* - * Inference HTML Tag Props - */ -const Component0 = styled.div({ color: 'red' }); -mount = event} />; - -Component = styled('div')({ color: 'red' }); -mount = event} />; - -Component = styled.div`color: red;`; -mount = event} />; - -Component = styled('div')`color: red;`; -mount = event} />; - -Component = styled.a({ color: 'red' }); -mount = ; - -Component = styled('a')({ color: 'red' }); -mount = ; - -/* - * Passing custom props - */ -interface CustomProps { lookColor: string; } - -Component = styled.div( - { color: 'blue' }, - props => ({ - background: props.lookColor, - }), - props => ({ - border: `1px solid ${props.lookColor}`, - }), -); -mount = ; - -Component = styled('div')( - { color: 'blue' }, - props => ({ - background: props.lookColor, - }), -); -mount = ; - -const anotherColor = 'blue'; -Component = styled('div')` - background: ${(props: CustomProps) => props.lookColor}; - color: ${anotherColor}; -`; -mount = ; - -/* - * With other components - */ -interface CustomProps2 { customProp: string; } -interface SFCComponentProps { className?: string; foo: string; } - -const SFCComponent: Preact.FunctionalComponent = props => ( -
{props.children} {props.foo}
-); - -declare class MyClassC extends Preact.Component { - render(): JSX.Element; -} - -// infer SFCComponentProps -Component = styled(SFCComponent)({ color: 'red' }); -mount = ; - -// infer SFCComponentProps -Component = styled(SFCComponent)`color: red`; -mount = ; - -Component = styled(MyClassC)``; -mount = ; - -// do not infer SFCComponentProps with pass CustomProps, need to pass both -Component = styled(SFCComponent)({ - color: 'red', -}, props => ({ - background: props.customProp, -})); -mount = ; - -// do not infer SFCComponentProps with pass CustomProps, need to pass both -Component = styled(SFCComponent)` - color: red; - background: ${(props: CustomProps2) => props.customProp}; -`; -mount = ; - -/* - * With explicit theme - */ - -interface Theme { - color: { - primary: string; - secondary: string; - }; -} - -const _styled = styled as CreateStyled; - -Component = _styled.div` - color: ${props => props.theme.color.primary} -`; -mount = event} />; - -/* - * withComponent - */ - -interface CustomProps3 { - bgColor: string; -} - -Component = styled.div(props => ({ - bgColor: props.bgColor, -})); - -const Link = Component.withComponent('a'); -mount = ; - -const Button = Component.withComponent('button'); -mount = } - - ) - } - } - // $FlowFixMe - let ref: ThingThatDoesSomething - render( (ref = node)} />) - expect(safeQuerySelector('#thing').textContent).toBe(firstContextValue) - ref.setState({ value: secondContextValue }, () => { - expect(safeQuerySelector('#thing').textContent).toBe(secondContextValue) - cb() - }) -}) - -test('does not throw on unmount', () => { - let { Provider, Consumer } = React.createContext(null) - - render( - - {value =>
{value}
} - - ) - preactRender( - null, - safeQuerySelector('#root'), - throwIfFalsy(safeQuerySelector('#root').firstChild) - ) -}) diff --git a/scripts/emotion-react-mock-for-preact/package.json b/scripts/emotion-react-mock-for-preact/package.json deleted file mode 100644 index ca5364419..000000000 --- a/scripts/emotion-react-mock-for-preact/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "emotion-react-mock-for-preact", - "version": "9.2.5", - "main": "src/index.js", - "private": true -} diff --git a/scripts/emotion-react-mock-for-preact/src/index.js b/scripts/emotion-react-mock-for-preact/src/index.js deleted file mode 100644 index 075347298..000000000 --- a/scripts/emotion-react-mock-for-preact/src/index.js +++ /dev/null @@ -1,160 +0,0 @@ -// @flow -import * as React from 'preact' -import { type Node } from 'react' -// from https://github.com/jamiebuilds/create-react-context but with stuff we don't need removed and changed to only support preact - -type RenderFn = (value: T) => Node - -type ProviderProps = { - value: T, - children?: Node -} - -type ConsumerProps = { - children: [RenderFn], - observedBits?: number -} - -type ConsumerState = { - value: T -} - -type Provider = React.Component> -type Consumer = React.Component, ConsumerState> - -type Context = { - Provider: Class>, - Consumer: Class> -} - -// https://github.com/styled-components/styled-components/blob/e05b3fe247e9d956bcde786cec376e32afb85bca/src/utils/create-broadcast.js -const createEventEmitter = (state: any) => { - const listeners: { [number]: Function | void } = {} - let id = 0 - - return { - set(nextState) { - state = nextState - - for (const key in listeners) { - // $FlowFixMe - const listener = listeners[key] - if (listener === undefined) { - continue - } - - listener(state) - } - }, - on(listener: any) { - const currentId = id - listeners[currentId] = listener - id += 1 - listener(state) - return currentId - }, - off(unsubID: number) { - listeners[unsubID] = undefined - }, - get() { - return state - } - } -} - -export function createContext(defaultValue: T): Context { - const contextProp = - '__emotion-preact-context-' + Math.random().toString(36) + '__' - - class Provider extends React.Component> { - emitter = createEventEmitter(this.props.value) - - getChildContext() { - return { - [contextProp]: this.emitter - } - } - - componentWillReceiveProps(nextProps) { - // not using Object.is like the actual createContext since we don't care about the cases where they differ - if (this.props.value !== nextProps.value) { - this.emitter.set(nextProps.value) - } - } - - render() { - // $FlowFixMe - return this.props.children[0] - } - } - - class Consumer extends React.Component, ConsumerState> { - constructor(props, context) { - super(props, context) - let value - if (this.context[contextProp] !== undefined) { - value = this.context[contextProp].get() - } else { - value = defaultValue - } - this.state = { value } - } - - componentDidMount() { - if (this.context[contextProp] !== undefined) { - this.context[contextProp].on(this.onUpdate) - } - } - - componentWillUnmount() { - if (this.context[contextProp] !== undefined) { - this.context[contextProp].off(this.onUpdate) - } - } - - onUpdate = newValue => { - if (newValue !== this.state.value) { - this.setState({ value: newValue }) - } - } - - render() { - return this.props.children[0](this.state.value) - } - } - - return { - Provider, - Consumer - } -} - -export const forwardRef = >( - render: (props: Props, ref: Ref | null) => React$Node -) => { - return (props: { ...Props, innerRef: Ref }) => { - let ref = null - let newProps = props - if (props.innerRef) { - ;({ innerRef: ref, ...newProps } = props) - } - return render(newProps, ref) - } -} - -export let Fragment = () => {} -if (process.env.NODE_ENV !== 'production') { - Fragment = () => { - // TODO: add a doc page about how to use the compat cache for ssr and link to it here - throw new Error( - "Fragments aren't supported in preact yet, to do server side rendering in preact with emotion, please use the compat cache" - ) - } -} - -export { - // I know preact now exports createElement but h is smaller - // so we can use it instead since rollup will rename everything - h as createElement, - Component -} from 'preact' diff --git a/scripts/test-utils/preact-mode.js b/scripts/test-utils/preact-mode.js deleted file mode 100644 index 058b2bb3b..000000000 --- a/scripts/test-utils/preact-mode.js +++ /dev/null @@ -1,3 +0,0 @@ -/* eslint-env jest */ -process.env.PREACT = true -jest.mock('react', () => require('emotion-react-mock-for-preact')) diff --git a/site/src/components/Playground.js b/site/src/components/Playground.js index 9a4a231dc..6ee29f578 100644 --- a/site/src/components/Playground.js +++ b/site/src/components/Playground.js @@ -12,7 +12,6 @@ export const scope = { case 'emotion': return require('emotion') case 'react-emotion': - case 'preact-emotion': return require('react-emotion') case '@emotion/core': return require('@emotion/core')