Skip to content

Commit

Permalink
feat: migration to wyw-in-js (#1386)
Browse files Browse the repository at this point in the history
* feat: migration to wyw-in-js

* chore: remove packages that were moved to wyw-in-js

* chore: remove redundant tests

* chore: rollback dtslint

* chore: missed lockfile

* chore: changeset

* doc: migration guide -> v6

* fix: latest version of wyw, one more test, fixed docs
  • Loading branch information
Anber authored Dec 7, 2023
1 parent 63392f9 commit 2ac94b9
Show file tree
Hide file tree
Showing 347 changed files with 1,778 additions and 29,651 deletions.
6 changes: 3 additions & 3 deletions .changeset/grumpy-flowers-watch.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
'@linaria/atomic': patch
'@linaria/babel-preset': patch
'@linaria/testkit': patch
'@linaria/atomic': major
'@linaria/babel-preset': major
'@linaria/testkit': major
---

Stylis has been upgraded from v3 to v4.
48 changes: 48 additions & 0 deletions .changeset/violet-eyes-cheat.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
---
'@linaria/atomic': major
'@linaria/core': major
'@linaria/babel-plugin-interop': major
'linaria': major
'@linaria/postcss-linaria': major
'@linaria/react': major
'@linaria/stylelint': major
'@linaria/stylelint-config-standard-linaria': major
'@linaria/testkit': major
'linaria-website': major
'@linaria/server': major
---

BREAKING CHANGE: Linaria has been migrated to wyw-in-js.

# Migration Guide

## For Users

The main breaking change is that all tooling has been moved from the `@linaria` scope to the `@wyw-in-js` scope. This means that you will need to update your dependencies as follows:

- `@linaria/vite` -> `@wyw-in-js/vite`
- `@linaria/cli` -> `@wyw-in-js/cli`
- `@linaria/babel-preset` -> `@wyw-in-js/babel-preset`

However, the `atomic`, `core`, and `styled` imports remain in the `@linaria` scope.

Additionally, support for Webpack v4 has been dropped. The webpack plugins have been renamed:

- `@linaria/webpack4-loader` has been discontinued
- `@linaria/webpack5-loader` has been renamed to `@wyw-in-js/webpack-loader`

There is no longer a need to install `@linaria/shaker` as it is now part of `@wyw-in-js/transform`, which will be installed automatically with the bundler plugins.

The configuration file has been renamed from `linariarc` to `wyw-in-jsrc`.

## For Custom Processor Developers

Base classes for processors and most helpers have been moved to `@wyw-in-js/processor-utils`.

All APIs that had `linaria` in their names have been renamed:

- The field that stores meta information in runtime has been renamed from `__linaria` to `__wyw_meta`
- The export with all interpolated values has been renamed from `__linariaPreval` to `__wywPreval`
- The caller name in Babel has been renamed from `linaria` to `wyw-in-js`

For additional information, please visit the [wyw-in-js.dev](https://wyw-in-js.dev).
4 changes: 3 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*
**/linaria-debug

# Runtime data
pids
Expand Down Expand Up @@ -73,6 +72,9 @@ build/
tsconfig.tsbuildinfo

.linaria-cache
.wyw-cache

# debug
*.debug.ts
**/linaria-debug
**/wyw-debug
2 changes: 1 addition & 1 deletion .syncpackrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ module.exports = {
'workspaces',
'binary',

'linaria',
'wyw-in-js',

'scripts',
'betterScripts',
Expand Down
35 changes: 9 additions & 26 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,43 +40,26 @@ Zero-runtime CSS in JS library.
## Installation

```sh
npm install @linaria/core @linaria/react @linaria/babel-preset
npm install @linaria/core @linaria/react @wyw-in-js/babel-preset
```

or

```sh
yarn add @linaria/core @linaria/react @linaria/babel-preset
yarn add @linaria/core @linaria/react @wyw-in-js/babel-preset
```

## Setup

Linaria currently supports webpack and Rollup to extract the CSS at build time. To configure your bundler, check the following guides:
Linaria is now built on top of [wyw-in-js.dev](https://wyw-in-js.dev/). It supports various bundlers to extract the CSS at build time. To configure your bundler, check the following guides on the wyw-in-js.dev site:

- [webpack](/docs/BUNDLERS_INTEGRATION.md#webpack)
- [esbuild](/docs/BUNDLERS_INTEGRATION.md#esbuild)
- [Rollup](/docs/BUNDLERS_INTEGRATION.md#rollup)
- [Vite](/docs/BUNDLERS_INTEGRATION.md#vite)
- [Svelte](/docs/BUNDLERS_INTEGRATION.md#svelte)
- [webpack](https://wyw-in-js.dev/bundlers/webpack)
- [esbuild](https://wyw-in-js.dev/bundlers/esbuild)
- [Rollup](https://wyw-in-js.dev/bundlers/rollup)
- [Vite](https://wyw-in-js.dev/bundlers/vite)
- [Svelte](https://wyw-in-js.dev/bundlers/svelte)

Or configure Linaria with one of the following integrations:

- [Preact](/docs/CONFIGURATION.md#preact)
- [Gatsby](/docs/CONFIGURATION.md#gatsby)

Optionally, add the `@linaria` preset to your Babel configuration at the end of the presets list to avoid errors when importing the components in your server code or tests:

```json
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@linaria"
]
}
```

See [Configuration](/docs/CONFIGURATION.md) to customize how Linaria processes your files.
See [Configuration](https://wyw-in-js.dev/configuration) to customize how Linaria processes your files.

## Syntax

Expand Down
34 changes: 17 additions & 17 deletions docs/BUNDLERS_INTEGRATION.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,15 @@ Please note, that `@babel/core` is a peer dependency of all loaders. Do not forg

### webpack

To use Linaria with webpack, in your webpack config, add `@linaria/webpack-loader` under `module.rules`:
To use Linaria with webpack, in your webpack config, add `@wyw-in-js/webpack-loader` under `module.rules`:

```js
{
test: /\.js$/,
use: [
{ loader: 'babel-loader' },
{
loader: '@linaria/webpack-loader',
loader: '@wyw-in-js/webpack-loader',
options: {
sourceMap: process.env.NODE_ENV !== 'production',
},
Expand All @@ -35,7 +35,7 @@ To use Linaria with webpack, in your webpack config, add `@linaria/webpack-loade
}
```

Make sure that `@linaria/webpack-loader` is included after `babel-loader`.
Make sure that `@wyw-in-js/webpack-loader` is included after `babel-loader`.

In order to have your styles extracted, you'll also need to use **css-loader** and **MiniCssExtractPlugin**. First, install them:

Expand Down Expand Up @@ -131,7 +131,7 @@ module.exports = {
use: [
{ loader: 'babel-loader' },
{
loader: '@linaria/webpack-loader',
loader: '@wyw-in-js/webpack-loader',
options: { sourceMap: dev },
},
],
Expand Down Expand Up @@ -166,7 +166,7 @@ You can copy this file to your project if you are starting from scratch.
To install the dependencies used in the example config, run:

```sh
yarn add --dev webpack webpack-cli webpack-dev-server mini-css-extract-plugin css-loader file-loader babel-loader @linaria/webpack-loader
yarn add --dev webpack webpack-cli webpack-dev-server mini-css-extract-plugin css-loader file-loader babel-loader @wyw-in-js/webpack-loader
```

You can now run the dev server by running `webpack-dev-server` and build the files by running `webpack`.
Expand Down Expand Up @@ -227,7 +227,7 @@ You can pass options to the loader like so:

```js
{
loader: '@linaria/webpack-loader',
loader: '@wyw-in-js/webpack-loader',
options: {
sourceMap: false,
},
Expand All @@ -239,13 +239,13 @@ You can pass options to the loader like so:
To use Linaria with esbuild, you don't need to install any external package since esbuild handles CSS by itself:

```sh
yarn add --dev @linaria/esbuild
yarn add --dev @wyw-in-js/esbuild
```

Then add it to your esbuild config:

```js
import linaria from '@linaria/esbuild';
import linaria from '@wyw-in-js/esbuild';
import esbuild from 'esbuild';

const prod = process.env.NODE_ENV === 'production';
Expand All @@ -270,13 +270,13 @@ esbuild
To use Linaria with Rollup, you need to use it together with a plugin which handles CSS files, such as `rollup-plugin-css-only`:

```sh
yarn add --dev rollup-plugin-css-only @linaria/rollup
yarn add --dev rollup-plugin-css-only @wyw-in-js/rollup
```

Then add them to your `rollup.config.js`:

```js
import linaria from '@linaria/rollup';
import linaria from '@wyw-in-js/rollup';
import css from 'rollup-plugin-css-only';

export default {
Expand All @@ -294,7 +294,7 @@ export default {
If you are using [@rollup/plugin-babel](https://github.com/rollup/plugins/tree/master/packages/babel) as well, ensure the linaria plugin is declared earlier in the `plugins` array than your babel plugin.

```js
import linaria from '@linaria/rollup';
import linaria from '@wyw-in-js/rollup';
import css from 'rollup-plugin-css-only';
import babel from '@rollup/plugin-babel';

Expand All @@ -314,17 +314,17 @@ export default {

### Vite

~~Since Vite supports Rollup plugin~~ Since Vite provides more features and flexibility, Linaria has a separate plugin for it `@linaria/vite`. Vite handles CSS by itself, you don't need a css plugin.
~~Since Vite supports Rollup plugin~~ Since Vite provides more features and flexibility, Linaria has a separate plugin for it `@wyw-in-js/vite`. Vite handles CSS by itself, you don't need a css plugin.

```sh
yarn add --dev @linaria/vite
yarn add --dev @wyw-in-js/vite
```

Then add them to your `vite.config.js`:

```js
import { defineConfig } from 'vite';
import linaria from '@linaria/vite';
import linaria from '@wyw-in-js/vite';

export default defineConfig(() => ({
// ...
Expand All @@ -336,7 +336,7 @@ If you are using language features that requires a babel transform (such as type

```js
import { defineConfig } from 'vite';
import linaria from '@linaria/vite';
import linaria from '@wyw-in-js/vite';

// example to support typescript syntax:
export default defineConfig(() => ({
Expand Down Expand Up @@ -368,7 +368,7 @@ Install `rollup-plugin-css-only` and update `rollup.config.js`
```js
import svelte from 'rollup-plugin-svelte';
import css from 'rollup-plugin-css-only'; // for CSS bundling
import linaria from '@linaria/rollup';
import linaria from '@wyw-in-js/rollup';

const dev = process.env.NODE_ENV !== 'production';

Expand Down Expand Up @@ -402,7 +402,7 @@ Update `webpack.config.js` with the following:
const prod = process.env.NODE_ENV === 'production';

const linariaLoader = {
loader: '@linaria/webpack-loader',
loader: '@wyw-in-js/webpack-loader',
options: {
sourceMap: !prod,
},
Expand Down
33 changes: 33 additions & 0 deletions docs/MIGRATION_GUIDE.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,38 @@
# Migration Guide

# 6.x from 5.x, 4.x, 3.x

## For Users

The main breaking change is that all tooling has been moved from the `@linaria` scope to the `@wyw-in-js` scope. This means that you will need to update your dependencies as follows:

| Old | New
| --- | ---
|@linaria/babel-preset | @wyw-in-js/babel-preset
|@linaria/cli | @wyw-in-js/cli
|@linaria/esbuild | @wyw-in-js/esbuild
|@linaria/rollup | @wyw-in-js/rollup
|@linaria/shaker | discontinued
|@linaria/vite | @wyw-in-js/vite
|@linaria/webpack4-loader | discontinued
|@linaria/webpack5-loader | @wyw-in-js/webpack-loader

There is no longer a need to install `@linaria/shaker` as it is now part of `@wyw-in-js/transform`, which will be installed automatically with the bundler plugins.

The configuration file has been renamed from `linaria.config.js` (`linariarc`) to `wyw-in-js.config.js` (`.wyw-in-jsrc`).

## For Custom Processor Developers

Base classes for processors and most helpers have been moved to `@wyw-in-js/processor-utils`.

All APIs that had `linaria` in their names have been renamed:

- The field that stores meta information in runtime has been renamed from `__linaria` to `__wyw_meta`
- The export with all interpolated values has been renamed from `__linariaPreval` to `__wywPreval`
- The caller name in Babel has been renamed from `linaria` to `wyw-in-js`

For additional information, please visit the [wyw-in-js.dev](https://wyw-in-js.dev).

# 4.x, 3.x from 2.x

This release was mostly a refactor to [split into more packages](https://github.com/callstack/linaria/pull/687/).
Expand Down
4 changes: 2 additions & 2 deletions examples/astro-solid/astro.config.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { defineConfig } from 'astro/config';
import astro_solid from '@astrojs/solid-js';
import vite_linaria from '@linaria/vite';
import vite_wyw from '@wyw-in-js/vite';
import vite_inspect from 'vite-plugin-inspect';

export default defineConfig({
Expand All @@ -17,7 +17,7 @@ export default defineConfig({
},
vite: {
plugins: [
vite_linaria({
vite_wyw({
displayName: true,
classNameSlug: (hash, title, args) => `${args.dir}_${title}_${hash}`,
babelOptions: {
Expand Down
5 changes: 2 additions & 3 deletions examples/astro-solid/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,9 @@
"type": "module",
"devDependencies": {
"@astrojs/solid-js": "^1.2.3",
"@babel/core": "^7.22.15",
"@babel/core": "^7.23.5",
"@linaria/core": "workspace:^",
"@linaria/shaker": "workspace:^",
"@linaria/vite": "workspace:^",
"@wyw-in-js/vite": "^0.2.2",
"astro": "^1.6.10",
"solid-js": "^1.6.2",
"vite": "^3",
Expand Down
4 changes: 2 additions & 2 deletions examples/esbuild/build.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const linaria = require('@linaria/esbuild').default;
const wyw = require('@wyw-in-js/esbuild').default;

const prod = process.env.NODE_ENV === 'production';

Expand All @@ -13,7 +13,7 @@ require('esbuild')
minify: prod,
outfile: 'build/out.js',
plugins: [
linaria({
wyw({
sourceMap: prod,
}),
],
Expand Down
2 changes: 1 addition & 1 deletion examples/esbuild/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"linaria-website": "workspace:^"
},
"devDependencies": {
"@linaria/esbuild": "workspace:^",
"@wyw-in-js/esbuild": "^0.2.2",
"esbuild": "^0.15.16"
},
"scripts": {
Expand Down
Loading

0 comments on commit 2ac94b9

Please sign in to comment.