feat(plasma-new-hope): add emotion support

salute-developers · Jul 1, 2024 · 179f1e5 · 179f1e5
1 parent f441bc6
commit 179f1e5
Show file tree

Hide file tree

Showing 10 changed files with 533 additions and 13 deletions.
diff --git a/.babelrc.js b/.babelrc.js
@@ -4,16 +4,25 @@ const plugins = [
     '@babel/plugin-proposal-class-properties',
     'babel-plugin-annotate-pure-calls',
     '@babel/plugin-transform-react-constant-elements',
-    [
-        'babel-plugin-styled-components',
-        {
-            displayName: false,
-            namespace,
-        },
-    ],
 ];
 const ignore = ['**/*.d.ts', '**/helpers', '**/__helpers', '**/*.stories.tsx'];
 
+process.env.EMOTION
+    ? plugins.push([
+          '@emotion/babel-plugin',
+          {
+              autoLabel: 'always',
+              labelFormat: `${namespace}__[local]`,
+          },
+      ])
+    : plugins.push([
+          'babel-plugin-styled-components',
+          {
+              displayName: false,
+              namespace,
+          },
+      ]);
+
 process.env.COVERAGE && plugins.push(['babel-plugin-istanbul']);
 
 module.exports = {

diff --git a/packages/plasma-new-hope/.gitignore b/packages/plasma-new-hope/.gitignore
@@ -10,6 +10,10 @@ src-sc
 styled-components/*
 !styled-components/package.json
 
+# emotion
+src-emotion
+emotion/*
+!emotion/package.json
 
 node_modules
 

diff --git a/packages/plasma-new-hope/.storybook/main.ts b/packages/plasma-new-hope/.storybook/main.ts
@@ -3,11 +3,29 @@ import type { StorybookConfig } from '@storybook/react-vite';
 import linaria from '@linaria/vite';
 
 const USE_STYLED_COMPONENTS = process.env.USE_STYLED_COMPONENTS || false;
+const USE_EMOTION_COMPONENTS = process.env.USE_EMOTION_COMPONENTS || false;
+
+const storyMap = {
+    linaria: ['../src/**/*.stories.tsx'],
+    'styled-components': ['../src-sc/**/*.stories.tsx'],
+    emotion: ['../src-emotion/**/*.stories.tsx'],
+};
+
+const stories = [];
+
+if (process.env.USE_STYLED_COMPONENTS) {
+    stories.push(...storyMap['styled-components']);
+} else if (process.env.USE_EMOTION_COMPONENTS) {
+    stories.push(...storyMap['emotion']);
+} else {
+    // default
+    stories.push(...storyMap['linaria']);
+}
 
 const config: StorybookConfig = {
     staticDirs: ['public'],
     addons: ['@storybook/addon-essentials'],
-    stories: USE_STYLED_COMPONENTS ? ['../src-sc/**/*.stories.tsx'] : ['../src/**/*.stories.tsx'],
+    stories,
     framework: {
         name: '@storybook/react-vite',
         options: {},

diff --git a/packages/plasma-new-hope/emotion/package.json b/packages/plasma-new-hope/emotion/package.json
@@ -0,0 +1,5 @@
+{
+    "module": "es/index.js",
+    "main": "cjs/index.js",
+    "types": "../types/index.d.ts"
+}