Adds emotion support

[kettanaito]

Changes

Architecture & Configuration

• Adds a new @atomic-layout/emotion package
• Configure unit tests
• Configure Storybook for E2E testing
  • For CJS build
  • For UMD build
  • For ESM build

Build

• CJS
• UMD
• ESM
• Properly list @emotion/core and @emotion/styled as globals in Rollup config
• Generate TypeScript type definitions properly

Implementation

• Resolve Only component, because it imports relative Box from the atomic-layout
• Implement Visible component
• Consider reusing atomic-layout entirely, because of the Babel plugin transforming the imports from styled-components to @emotion/styled. There is little motivation to keep some separate implementations (copies) of components by default.

Testing

• Reuse existing E2E test scenarios
• Ensure E2E tests pass
  • Fix styles override issue (Box does not allow display property override from applyStyles):

1) Components Box Supports CSS properties overrides:
     CypressError: Timed out retrying: expected '<div#box.sc-ifAKCX.cikOGB.css-16r01mf>' to have CSS property 'display' with the value 'table', but the value was 'block'

2) Semantics Polymorphic prop When given a custom React component Overrides layout styles:
     CypressError: Timed out retrying: expected '<header#header.sc-htoDjs.kFljPQ.css-1vgwltm>' to have CSS property 'display' with the value 'block', but the value was 'flex'

DX

• Add @atomic-layout/emotion readme
• Update the main README to reference @atomic-layout/emotion implementation

Nice to have

• Move Babel config, Storybook config and examples to the root level
• Remove the Storybook include workaround for babel-loader (Error: exports is not defined storybookjs/storybook#3346)

GitHub

• Successor to Adds a monorepo structure #261
• Relates to Plans to support emotion? #122
• Closes [RFC] Pluggable styling API #57

Release version

• patch (internal improvements)
• minor (backward-compatible changes)
• major (breaking, backward-incompatible changes)

Contributor's checklist

• My branch is up-to-date with the latest master
• I ran yarn verify and verified the build and tests passing

[bitttttten]

Very cool! Happy to test if you want to publish it to beta.

[kettanaito]

@bitttttten Absolutely! Thank you. At the moment I'm in the middle of gardening the internals so they won't get too duplicated while still allowing customizations on the rendering (styling) ends. Thinking of making Storybook accept an Atomic Layout build module via environmental variables so it can include even versions built with different styling solutions within a single monorepo.

Overall, no estimates how fast I can land this, but at least the roadmap is clear.

[kettanaito]

Performed a stub of @atomic-layout/emotion in the existing stories and it worked! Continue on making E2E testing parametric by providing a relative build module path.

[kettanaito]

Parametric Storybook builds

This pull request reworks Storybook configuration to accept parametric builds. By providing environmental variables that point to the package (as in "monorepo package") and build target (cjs/umd/esm) Storybook is able to resolve the build module and alias atomic-layout imports to that module.

Issue: Storybook includes cwd only

During the development I've encountered that Storybook's webpack configuration has an explicit include property on babel-loader that includes CWD only. This means that if stories directory lies outside CWD it won't get transpiled by babel-loader at all.

Currently I've introduced a workaround by manually iterating over Storybook's webpack configuration and appending examples (stories) directory to the include array. Ideally, this would need to be addressed by Storybook.

I still couldn't make Storybook to respect root-level babel.config.js, so .storybook/config.js still lives under packages/atomic-layout. Ideally, Storybook config, babel config, and examples directory should be moved to the root level of the monorepo.

[kettanaito]

Parametric Cypress runs

Much similar to the parametric Storybook builds, Cypress will now accept the package environmental variable that points to the package subjected to testing. I've used {PACKAGE} placeholder in cypress.json@fileServerBase to be replaced with the environmental variable for path resolving to be less implicit.

Cypress configuration has been moved to the rool level as well.

Issue: Cypress path resolving

If run in a nested package's directory, Cypress will resolve the paths in the execution command relative to that directory (which is expected). Since Cypress configuration lives in the root, one needs to explicitly point to it:

$ cypress run -C ../../cypress.json

The Cypress configuration may set paths to various assets like pluginsFile or supportFile:

{
  "supportFile": "./cypress/support/index.js"
}

However, those path in cypress.json will be resolved relatively to the cwd of the cypress run command. This is a nightmare, and to workaround this Cypress runs will be executed from the root level always:

$ (cd ../../ && cypress run ...)

This also removes the need to specify the cypress.json config and let the paths in the config be relative to the cypress.json location.

[kettanaito]

Currently trying to build @atomic-layout/emotion into CJS module. See the status in the emotion-build-cjs job.

[kettanaito]

CJS build

Got the CJS build working by properly configuring tsconfig.json to digest TypeScript modules referenced in packages/atomic-layout:

{
  "compilerOptions": {
    "rootDirs": ["src", "../atomic-layout/src"]
  }
}

That being sad, although CJS build is performed successfully, Storybook cannot build itself with that version of build. That may be both build and Storybook issue.

[kettanaito]

Storybook 5.3 issue

Solved by: creating .storybook/.babelrc and extending the root-level babel.config.js. This way Storybook doesn't attempt to get any other Babel configs and works well.

Updating from 5.1.11 to 5.3.7 introduces some internal changes to Storybook that result into the following exception during its build:

Uncaught ReferenceError: exports is not defined

On the local such exception is represented in a different way:

WARNING in /Users/.../atomic-layout/examples/hooks/UseViewportChange.jsx 25:20-23
"export 'Box' was not found in 'atomic-layout'

There is no connection between the error and the module origin. It warns on all named exports of the package.

[kettanaito]

Need to verify if those globals values for UMD build actually load up Emotion from the context.

[kettanaito]

Currently the size of UMD bundle of @atomic-layout/emotion exceeds the allowed limit of 10KB:

FAIL  lib/umd/index.js: 18.13KB > maxSize 10KB (gzip) 

I have a suspicion that happens due to @emotion/core and @emotion/styled not being excluded as globals properly.

Would be nice to analyze that bundle with some alternative of BundleAnalyzer for webpack, but for Rollup in this case.

[kettanaito]

Emotion support alpha is published! 🎉

The alpha version of the Atomic Layout package supporting @emotion/styled has been published! I would appreciate if you give it a test on your existing emotion projects.

Install

yarn add @atomic-layout/emotion@0.12.0-alpha.x @emotion/core @emotion/styled

Documentation

See the [Official documentation][atomic-layout-docs].

There are some shortcuts to get you started:

• Motivation
• Getting started
• Responsive props
• Recipes

Examples

• Basic composition
• Responsive props
• Nested composition

Share feedback

If you found any issues please submit them so I could take a look. Thank you.

---

cc @bitttttten