feat: remove dependency to @emotion/react + adopt native css solution (…

…#129)

* fix: upgrade Mantine to v7

* fix: playback speed dropdown color

* feat: export css via a separate entry point

* fix(package.json): remove @emotion/* from deps

* fix(package.json): remove @emotion/* from deps

* fix: copy Mantine's css to style.css

* fix: add support for css modules to tsup

* fix: ditch css modules in favor of native css

* fix: force theme from props

* docs: add usage docs + migration guide

* chore: update @Mantine deps

.eslintignore

@@ -4,4 +4,5 @@ build
 .eslintrc.js
 coverage
 react-shim.js
-__mocks__/styleMock.js
+__mocks__/styleMock.js
+postcss.config.js

.storybook/main.ts

@@ -8,6 +8,32 @@ const config: StorybookConfig = {
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
     '@storybook/addon-mdx-gfm',
+    {
+      name: '@storybook/addon-styling-webpack',
+      options: {
+        rules: [
+          {
+            test: /\.css$/,
+            sideEffects: true,
+            use: [
+              require.resolve('style-loader'),
+              {
+                loader: require.resolve('css-loader'),
+                options: {
+                  importLoaders: 1,
+                },
+              },
+              {
+                loader: require.resolve('postcss-loader'),
+                options: {
+                  implementation: require.resolve('postcss'),
+                },
+              },
+            ],
+          },
+        ],
+      },
+    },
   ],
   framework: {
     name: '@storybook/react-webpack5',

.vscode/extensions.json

@@ -1,3 +1,8 @@
 {
-  "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "vunguyentuan.vscode-postcss",
+    "vunguyentuan.vscode-css-variables"
+  ]
 }

.vscode/settings.json

@@ -23,5 +23,12 @@
     "source.fixAll.eslint": "explicit"
   },
   "editor.multiCursorModifier": "alt",
-  "eslint.useESLintClass": true
+  "eslint.useESLintClass": true,
+  "cssVariables.lookupFiles": [
+    "**/*.css",
+    "**/*.scss",
+    "**/*.sass",
+    "**/*.less",
+    "node_modules/@mantine/core/styles.css"
+  ]
 }

README.md

@@ -39,10 +39,10 @@ _(See complete setup guide for UI-based devtools below)_
 
 ```sh
 # yarn
-yarn add jotai-devtools @emotion/react
+yarn add jotai-devtools
 
 # npm
-npm install jotai-devtools @emotion/react --save
+npm install jotai-devtools --save
 ```
 
 ## ✨ UI DevTools
@@ -125,6 +125,7 @@ type DevToolsProps = {
 
 ```tsx
 import { DevTools } from 'jotai-devtools';
+import 'jotai-devtools/styles.css';
 
 const App = () => {
   return (
@@ -141,6 +142,7 @@ const App = () => {
 ```tsx
 import { createStore } from 'jotai';
 import { DevTools } from 'jotai-devtools';
+import 'jotai-devtools/styles.css';
 
 const customStore = createStore();
 
@@ -172,6 +174,28 @@ import {
 
 ## Migration guides
 
+### Migrate ƒrom @emotion/react to native CSS
+
+With the latest release, Jotai DevTools no longer depends on `@emotion/react`
+and is replaced it with native CSS.
+
+1. Remove `@emotion/react` from your dependencies
+
+   ```sh
+   # yarn
+   yarn remove @emotion/react
+
+   # npm
+   npm uninstall @emotion/react
+   ```
+
+2. Replace `@emotion/react` with `jotai-devtools/styles.css` in your code
+
+```diff
+import { DevTools } from 'jotai-devtools';
++ import 'jotai-devtools/styles.css';
+```
+
 ### Migrate Jotai to V2
 
 Find the official migration guide on

__tests__/devtools/AtomViewer.test.tsx

@@ -356,9 +356,9 @@ describe('DevTools - AtomViewer', () => {
           ${'bigint'}          | ${BigInt(123)}           | ${'123'}
           ${'symbol'}          | ${Symbol('some-symbol')} | ${'Symbol(some-symbol)'}
           ${'function'}        | ${() => () => 'hello'}   | ${"()=>'hello'"}
-          ${'object'}          | ${{ foo: 'bar' }}        | ${'{ foo: "bar"}'}
+          ${'object'}          | ${{ foo: 'bar' }}        | ${'{ foo: "bar" }'}
           ${'circular-object'} | ${circObj}               | ${'{}'}
-          ${'array'}           | ${[1, 2, 3]}             | ${'[ 1, 2, 3]'}
+          ${'array'}           | ${[1, 2, 3]}             | ${'[ 1, 2, 3 ]'}
         `(
           'should parse "$type" value correctly',
           async ({ value, expected }) => {