Skip to content
Permalink
Browse files

Reimplement vanilla emotion, babel-plugin-emotion with new utils and …

…change react-emotion tests to new styled (#824)

* some stuff

* Fix some stuff

* More stuff

* Add to breaking changes list

* Fix a bunch of stuff

* Skip a source map test for now since it's for the old css prop implementation

* Fix some stuff with the babel plugin

* Add jest-junit to display test results in circle ci ui

* Add to breaking changes list

* SSR tests are closer to working

* Reorder condition

* Update jest

* I'm confused

* Whoops, didn't mean to commit that

* Fix most of the react-emotion tests

* Change emotion-theming and use forwardRef in withCSSContext

* Remove useless snapshot

* Try a thing for perf

* Add snapshots for emotion-theming

* Update emotion-theming README

* Actually display test results in circle ci

* Fix a bunch of stuff

* Update a snapshot

* Update another snapshot

* Update some babel plugin test snapshots

* Update more snapshots

* Remove some unnecessary tests

* and i broke primitives/native...........

* Fix more tests

* Fix linting and flow errors

* Baiiiiiiiiiiiiiiiiiiiiiiiiii static extraction

* Add more minification/compile time hashing to styled

* Update snapshots

* Fix a test

* Fix another test

* Shallow rendering sucks............................

* Remove static extraction tests

* Remove another test for static extraction

* Remove a snapshot file

* Move stuff from @emotion/snapshot-serializer to jest-emotion

* Remove obselete snapshots

* Fix more tests

* Fix a test and skip a test

* Remove unused variable

* Add playgrounds

* Try out a thing with ssr

* Add Style component

* Change error message

* Remove @emotion/provider

* Baiiiiiiiiiiiiiiiiiiiiiiiiiiii old css prop implementation

* These tests are unhelpful and annoying

* And of course, I didn't actually delete it before

* WIP reimplementation of babel-plugin-emotion

* Add pure comments to @emotion/css calls

* Fix some stuff

* Simplify object-to-string

* Move some tests

* Move over the majority of the style tests

* Move some tests and delete some useless ones

* primitives

* Remove @emotion/babel-plugin-core and move primitives/native babel tests

* Rename caches export of emotion to cache and remove @emotion/compat-cache

* Remove unneccesary bits from babel config

* Very close to fixing ssr

* Fix ThemeProvider tests

* Fix a bug with the babel plugin

* Simplify styled macro

* Fix a test

* Remove console.log and debugger statement

* Fix snapshot serializer with dom elements being snapshotted multiple times

* Fix more tests

* Support labelFormat

* Fix labelling in macros

* Remove unnecessary things since autoLabel is not by default in not prod

* Rename to ClassNames

* Fix a type

* Inline create-plugin in babel plugin

* Remove @emotion/babel-utils

* Change a comment

* Change dependencies

* Fix more SSR tests

* Remove getClassName helper

* Rename some stuff to make it more consistent/accurate

* Rename more

* Update yarn.lock

* Support global styles based on the theme and refactor Global component

* Remove .macro packages

* Change babel tests

* Fix benchmarks

* Fix all babel plugin tests

* Fix more tests

* Update breaking changes list

* Remove unneccessary test

* Fix server instance tests

* Fix more tests

* Fix a thing

* Fix a thing

* Update docs.yaml

* stuff

* Fix preact-emotion build

* WIP stuff with keyframes being cached across styles and cra playground

* Add to breaking changes list

* Fix jest

* Fix keyframes, this bit isn't done but it works

* Improve keyframe implementation

* Add a comment

* Fix another case

* Add another comment

* Fix site

* Remove the ts tests for styled for now, the types are probably gonna be rewritten anyway

* Rename an option in the babel plugin

* Improve check

* Update some docs

* Fix a thing

* Fix a thing

* Maybe fix site

* Add flow babel preset to site

* Optimizations

* IMO, this is better behaviour

* Fix site

* Fix site

* Add warning for using the css prop on Global

Closes #845

* Use for loop and let

* Change some stuff

* Move let

* Fix test and add another test

* Add publishConfig.tag='next' to some packages

* Move packages

* Change lerna.json, remove stuff that will be unused now and remove bootstrap npm script since yarn does everything

* Fix flow

* Update CONTRIBUTING.md

* Fix build script

* Create flow files for all packages

* Move theme to a seperate context

* Fix thing

* Start some changes to the build system - not done but the plan is to build dev and prod bundles for node similar to react except only do it for the cjs non-browser build

* Rename some dist files

* Finish build changes

* Fix build script

* Checking process.env.NODE_ENV is cheapppppppppppppppp now

* Add another test

* Remove some unused code

* Disable ts tests for now since they're failing randomly

Honestly, I kind of want to keep them disabled if they just download the latest version of ts making ci fail randomly

* Add more tests and fix keyframes using in Global in SSR

* Add a test for keyframes in styled in SSR

* Add another test for jest-emotion

* Add some more tests for SSR

* Change the way keyframes are inserted again to fix a bug with the old ssr api and keyframes

* Make @import work

* Fix stuff

* Add speedy option to cache

* Fix it mostly

* Format

* Fix flow error

* Change some stuff related to refs

* Add publish-packages script

* Add private to razzle playground

* Temp change thing for publishing a test release

* Change dist tag

* v10.0.0-really-unsafe-please-do-not-use.0

* Fix build system

* v10.0.0-really-unsafe-please-do-not-use.1

* Let's try not to do that agin.

* v10.0.0-really-unsafe-please-do-not-use.2

* Change package folders

* Remove cyclical dependency

* Probably fix site
  • Loading branch information...
mitchellhamilton committed Sep 30, 2018
1 parent 67e5ecb commit 6cb8d15438b01b8623af42f304d5ea3032332187
Showing 473 changed files with 19,014 additions and 21,727 deletions.
@@ -8,9 +8,9 @@ jobs:
- checkout
- restore_cache:
keys:
- v1-dependencies-{{ checksum "yarn.lock" }}
# fallback to using the latest cache if no exact match is found
- v1-dependencies-
- v1-dependencies-{{ checksum "yarn.lock" }}
# fallback to using the latest cache if no exact match is found
- v1-dependencies-
- run: yarn install --pure-lockfile
- run: yarn flow
- run: yarn build
@@ -31,12 +31,21 @@ jobs:
- checkout
- restore_cache:
keys:
- v1-dependencies-{{ checksum "yarn.lock" }}
# fallback to using the latest cache if no exact match is found
- v1-dependencies-
- v1-dependencies-{{ checksum "yarn.lock" }}
# fallback to using the latest cache if no exact match is found
- v1-dependencies-
- run: yarn install --pure-lockfile
- run: yarn coverage
- run:
name: Jest Tests
command: yarn coverage --reporters=default --reporters=jest-junit
environment:
JEST_JUNIT_OUTPUT: 'reports/junit/js-test-results.xml'
- run: yarn codecov
- store_test_results:
path: reports/junit
- store_artifacts:
path: reports/junit

test_dist:
docker:
- image: circleci/node:10.6.0
@@ -45,11 +54,16 @@ jobs:
- checkout
- restore_cache:
keys:
- v1-dependencies-{{ checksum "yarn.lock" }}
# fallback to using the latest cache if no exact match is found
- v1-dependencies-
- v1-dependencies-{{ checksum "yarn.lock" }}
# fallback to using the latest cache if no exact match is found
- v1-dependencies-
- run: yarn install --pure-lockfile
- run: yarn test:prod
- run:
name: Jest Tests
command: yarn test:prod --reporters=default --reporters=jest-junit
environment:
JEST_JUNIT_OUTPUT: 'reports/junit/js-test-results.xml'

lint_and_typescript:
docker:
- image: circleci/node:10.6.0
@@ -58,13 +72,11 @@ jobs:
- checkout
- restore_cache:
keys:
- v1-dependencies-{{ checksum "yarn.lock" }}
# fallback to using the latest cache if no exact match is found
- v1-dependencies-
- v1-dependencies-{{ checksum "yarn.lock" }}
# fallback to using the latest cache if no exact match is found
- v1-dependencies-
- run: yarn install --pure-lockfile
- run: yarn lint:check
- run: yarn test:typescript


workflows:
version: 2
@@ -5,6 +5,7 @@
.*/node_modules/config-chain/.*
.*/node_modules/styled-components/.*
.*/node_modules/graphql/.*
.*/node_modules/metro.*


[include]
@@ -18,9 +19,7 @@

[options]
suppress_comment=.*\\$FlowFixMe
module.name_mapper='^\(@emotion/babel-utils\)$' -> '<PROJECT_ROOT>/test/empty.js'
module.name_mapper='^\(create-emotion\)$' -> '<PROJECT_ROOT>/packages/\1/src'
module.name_mapper='^\(create-emotion-styled\)$' -> '<PROJECT_ROOT>/packages/\1/src'
module.name_mapper='^\(react-emotion\)$' -> '<PROJECT_ROOT>/packages/\1/src'
module.name_mapper='^\(preact-emotion\)$' -> '<PROJECT_ROOT>/packages/\1/src'
module.name_mapper='^\(emotion\)$' -> '<PROJECT_ROOT>/packages/\1/src'
@@ -30,4 +29,3 @@ module.name_mapper='^\(emotion-server\)$' -> '<PROJECT_ROOT>/packages/\1/src'
module.name_mapper='^\(create-emotion-server\)$' -> '<PROJECT_ROOT>/packages/\1/src'
module.name_mapper='^\(jest-emotion\)$' -> '<PROJECT_ROOT>/packages/\1/src'
module.name_mapper='^@emotion\/\([a-zA-Z0-9_\-]+\)$' -> '<PROJECT_ROOT>/packages/\1/src/index'
module.name_mapper='^@emotion\/\([a-zA-Z0-9_\-]+\)$' -> '<PROJECT_ROOT>/next-packages/\1/src/index'
@@ -9,4 +9,6 @@ package-lock.json
.DS_Store
.cache
public/
/extract.test.emotion.css
/extract.test.emotion.css
build
!playgrounds/cra/public
@@ -0,0 +1,12 @@
# Breaking Changes

* Only supports react@16.3 and above(+ preact)
* 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?)
* MORE STUFF THAT I CAN'T REMEMBER RIGHT NOW
* emotion will not be stored on the global object so create-emotion only accepts 1 argument, the options
* channel and createBroadcast from emotion-theming no longer exist
* extractStatic is gone
* create-emotion-server accepts the cache instead of the emotion instance
* jest-emotion no longer accepts an emotion instance, only the options arg, it also requires a DOM now
@@ -1,35 +1,31 @@
## Prerequisites

- [Node.js](http://nodejs.org/) >= v7 must be installed.
- [Yarn](https://yarnpkg.com/en/docs/install)
* [Node.js](http://nodejs.org/) >= v7 must be installed.
* [Yarn](https://yarnpkg.com/en/docs/install)

## Installation

- Run `yarn` in the module's root directory to install everything you need for development.
- Run `yarn build` in the root directory to build the modules.
* 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.

> NOTE:
>
> lerna is **NOT** used for installing packages. Only yarn is used. lerna is only used for publishing
## Running Tests

- `yarn test` will run the tests once.
- `yarn coverage` will run the tests and produce a coverage report in `coverage/`.
- `yarn test:watch` will run the tests on every change.
* `yarn test` will run the tests once.
* `yarn coverage` will run the tests and produce a coverage report in `coverage/`.
* `yarn test:watch` will run the tests on every change.

## Building

- Run `yarn build` in the root directory to build the modules. (Required before publishing)
- Run `yarn build PACKAGE_NAME ANOTHER_PACKAGE_NAME` to only build certain packages.
- Run `yarn build:watch` to build packages on every change.
* Run `yarn build` in the root directory to build the modules. (Required before publishing)
* Run `yarn build PACKAGE_NAME ANOTHER_PACKAGE_NAME` to only build certain packages.
* Run `yarn build:watch` to build packages on every change.

## Documentation Website Development

- Run above installation steps and then
- Run `yarn start:site` to run a development server of gatsby.
- Run `yarn build:site` to create a build of the assets for the documentation website.

## Benchmarking

- `yarn benchmark` will run the benchmarks locally

- If you commit message includes `#benchmark` the benchmarks will run on the CI.

- The results for branches in the emotion-js/emotion repo are **here: https://travis-ci.org/emotion-js/emotion/branches**
* Run above installation steps and then
* Run `yarn start:site` to run a development server of gatsby.
* Run `yarn build:site` to create a build of the assets for the documentation website.
@@ -4,6 +4,7 @@
</p>
<p align="center" style="font-size: 1.2rem;">The Next Generation of CSS-in-JS</p>

**Emotion 10 is currently in beta, there are many breaking changes between versions, [for docs on Emotion 9 please go to the latest v9 tag](https://github.com/emotion-js/emotion/tree/v9.2.8/docs) or https://emotion.sh**
[![Backers on Open Collective](https://opencollective.com/emotion/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/emotion/sponsors/badge.svg)](#sponsors) [![npm version](https://badge.fury.io/js/emotion.svg)](https://badge.fury.io/js/emotion)
[![Build Status](https://img.shields.io/circleci/project/github/emotion-js/emotion/master.svg)](https://circleci.com/gh/emotion-js/emotion)
[![codecov](https://codecov.io/gh/emotion-js/emotion/branch/master/graph/badge.svg)](https://codecov.io/gh/emotion-js/emotion)
@@ -23,24 +23,10 @@ module.exports = api => {
!filename.includes('no-babel') && needsBabelPluginEmotion(filename),
plugins: ['babel-plugin-emotion-test']
},
{
test: filename =>
filename.includes('auto-label') && needsBabelPluginEmotion(filename),
plugins: [['babel-plugin-emotion-test', { autoLabel: true }]]
},
{
test: filename =>
filename.includes('extract') && needsBabelPluginEmotion(filename),
plugins: [['babel-plugin-emotion-test', { extractStatic: true }]]
},
{
test: filename =>
filename.includes('source-map') && needsBabelPluginEmotion(filename),
plugins: [['babel-plugin-emotion-test', { sourceMap: true }]]
},
{
test: filename => filename.includes('babel-plugin-emotion/test/macro/'),
plugins: ['babel-plugin-macros-register']
}
]
}
@@ -10,10 +10,6 @@ In `emotion` version 8 and above, installation is optional. In older versions, i

### Features which are enabled with the babel plugin

### styled.element Syntax

`styled('div')` will work without the plugin

### Minification

Any leading/trailing space between properties in your `css` and `styled` blocks is removed. This can reduce the size of your final bundle.
@@ -22,22 +18,10 @@ Any leading/trailing space between properties in your `css` and `styled` blocks

Uglifyjs will use the injected `/*#__PURE__*/` flag comments to mark your `css` and `styled` blocks as candidates for dead code elimination.

### Static Extraction

Generated CSS that is eligible for extraction can be moved to an external css file.

> Note:
>
> extractStatic is deprecated and will be removed in emotion@10. We recommend disabling extractStatic or using other libraries like [linaria](https://github.com/callstack-io/linaria) or [css-literal-loader](https://github.com/4Catalyzer/css-literal-loader)
### Source Maps

When enabled, navigate directly to the style declaration in your javascript file.

### css as Prop

Convenient helper for calling `css` and appending the generated className during compile time.

### Components as selectors

The ability to refer to another component to apply override styles depending on nesting context. Learn more in the [react-emotion docs](/docs/styled.md#targeting-another-emotion-component).
@@ -42,6 +42,5 @@
- jest-emotion
- "@emotion/primitives"
- create-emotion
- create-emotion-styled
- create-emotion-server
- preact-emotion

0 comments on commit 6cb8d15

Please sign in to comment.
You can’t perform that action at this time.