refactor: split one linaria package into multiple @linaria/* (#687)

* refactor: split one `linaria` package into multiple `@linaria/*`

* chore: an attempt to fix test coverage and the website

* chore: second attempt to fix the website and test coverage

* chore: third attempt to fix the website

* fix: post-review fixes

* chore: try to clean mess in dependencies

* chore: watch task

* chore: remove useless options from jest config

* chore: typescript references

* chore: fix incremental build

* fix: backward compatibility with 2.0

.circleci/config.yml

@@ -25,7 +25,6 @@ commands:
             - dependencies-website-
       - run: |
           yarn install --frozen-lockfile
-          yarn install --frozen-lockfile --cwd website
       - save_cache:
           key: dependencies-{{ checksum "package.json" }}
           paths: node_modules
@@ -40,9 +39,9 @@ commands:
       - attach_workspace:
           at: ~/linaria
       - run: |
-          yarn lint
-          yarn typecheck
           yarn test:dts
+          yarn typecheck
+          yarn lint
   unit-tests:
     steps:
       - attach_workspace:
@@ -54,8 +53,8 @@ commands:
       - attach_workspace:
           at: ~/linaria
       - run: |
-          yarn test --coverage
-          cat ./coverage/lcov.info | ./node_modules/.bin/codecov
+          yarn test:coverage
+          cat ./packages/*/coverage/lcov.info | ./node_modules/.bin/codecov
           bash .circleci/comment-artifacts.sh
       - store_artifacts:
           path: coverage

.eslintignore

@@ -1,8 +1,8 @@
 __fixtures__/
 coverage/
-flow-typed/
 lib/
 esm/
+packages/*/types/
 dist/
 build/
 node_modules/

.gitignore

@@ -62,7 +62,9 @@ jspm_packages/
 # generated files
 lib/
 esm/
+types/
 dist/
 build/
+tsconfig.tsbuildinfo
 
 .linaria-cache

README.md

@@ -37,13 +37,13 @@ Zero-runtime CSS in JS library.
 ## Installation
 
 ```sh
-npm install linaria
+npm install @linaria/core @linaria/react @linaria/babel
 ```
 
 or
 
 ```sh
-yarn add linaria
+yarn add @linaria/core @linaria/react @linaria/babel
 ```
 
 ## Setup
@@ -66,7 +66,7 @@ Optionally, add the `linaria/babel` preset to your Babel configuration at the en
   "presets": [
     "@babel/preset-env",
     "@babel/preset-react",
-    "linaria/babel"
+    "@linaria/babel"
   ]
 }
 ```
@@ -78,7 +78,7 @@ See [Configuration](/docs/CONFIGURATION.md) to customize how Linaria processes y
 Linaria can be used with any framework, with additional helpers for React. The basic syntax looks like this:
 
 ```js
-import { css } from 'linaria';
+import { css } from '@linaria/core';
 import { modularScale, hiDPI } from 'polished';
 import fonts from './fonts';
 
@@ -102,7 +102,7 @@ You can use imported variables and functions for logic inside the CSS code. They
 If you're using [React](https://reactjs.org/), you can use the `styled` helper, which makes it easy to write React components with dynamic styles with a styled-component like syntax:
 
 ```js
-import { styled } from 'linaria/react';
+import { styled } from '@linaria/react';
 import { families, sizes } from './fonts';
 
 // Write your styles in `styled` tag
@@ -170,7 +170,7 @@ Take a look on [Contributing](CONTRIBUTING.md) docs to check how you can run Lin
   For example:
 
   ```js
-  import { css } from 'linaria';
+  import { css } from '@linaria/core';
   import colors from './colors';
 
   const title = css`

babel.config.js

@@ -56,9 +56,9 @@ module.exports = {
   overrides: [
     {
       /**
-       * only src/react and src/core are targeted to be run in the browser
+       * only react and core packages are targeted to be run in the browser
        */
-      test: /src\/((react)|(core))\//,
+      test: /\/packages\/((react)|(core))\//,
       presets: ['@babel/preset-react'],
       env: {
         legacy: {
@@ -85,7 +85,7 @@ module.exports = {
       /**
        * we have to transpile JSX in tests
        */
-      test: /src\/((__tests__)|(__fixtures__))\//,
+      test: /\/((__tests__)|(__fixtures__))\//,
       presets: ['@babel/preset-react'],
     },
   ],

docs/API.md

@@ -1,6 +1,6 @@
 # API
 
-Linaria exposes a core `css` method alongside with small, but just enough amount of helpers. Inside `linaria` module you can find following methods:
+Linaria exposes a core `css` method alongside with small, but just enough amount of helpers. Inside `@linaria/core` module you can find following methods:
 
 ## Client APIs
 
@@ -9,7 +9,7 @@ Linaria exposes a core `css` method alongside with small, but just enough amount
 String tag for tagged template literals consisting CSS code. The tagged template literal is evaluated to a unique class name by the Babel plugin:
 
 ```js
-import { css } from 'linaria';
+import { css } from '@linaria/core';
 
 const flower = css`
   display: inline;
@@ -22,7 +22,7 @@ const flower = css`
 All rules inside the template literal are scoped to the class name, including media queries and animations. For example, we can declare CSS animation like so:
 
 ```js
-import { css } from 'linaria';
+import { css } from '@linaria/core';
 
 const box = css`
   animation: rotate 1s linear infinite;
@@ -39,7 +39,7 @@ const box = css`
 Takes a list of class names and returns a concatenated string with the class names. Falsy values are ignored.
 
 ```js
-import { css, cx } from 'linaria';
+import { css, cx } from '@linaria/core';
 
 const cat = css`
   font-weight: bold;
@@ -67,7 +67,7 @@ Helper to build React components. It allows you to write your components in a si
 The syntax is similar to the `css` tag. Additionally, you can use function interpolations that receive the component's props:
 
 ```js
-import { styled } from 'linaria/react';
+import { styled } from '@linaria/react';
 import colors from './colors.json';
 
 const Container = styled.div`
@@ -130,14 +130,14 @@ const FancyButton = styled(Button)`
 `;
 ```
 
-## Server APIs (`linaria/server`)
+## Server APIs (`@linaria/server`)
 
 ### `collect(html: string, css: string) => string`
 
 Takes HTML and CSS strings and returns the critical CSS used in the page by analyzing the class names. It can be used to determine critical CSS for server side rendering.
 
 ```js
-import { collect } from 'linaria/server';
+import { collect } from '@linaria/server';
 
 const css = fs.readFileSync('./dist/styles.css', 'utf8');
 const html = ReactDOMServer.renderToString(<App />);

docs/BASICS.md

@@ -30,7 +30,7 @@ These tags let you write styles in CSS syntax inside the template literals.
 The `css` tag allows you to create simple class names:
 
 ```js
-import { css } from 'linaria';
+import { css } from '@linaria/core';
 
 // Create a class name
 const title = css`
@@ -70,7 +70,7 @@ The `styled` tag allows you to create a React component with some styles already
 You write `styled` followed by the name of the HTML tag you want to use, e.g. `styled.div`, `styled.a`, `styled.button`, `styled.h3` etc.
 
 ```js
-import { styled } from 'linaria/react';
+import { styled } from '@linaria/react';
 
 // Create a styled component
 const Title = styled.h1`