build(storybook): swap Emotion's Babel transform for @swc/plugin-emotion

.eslintrc.js

@@ -50,6 +50,19 @@ module.exports = {
       // being applied to subsequent plugin imports/extensions. Wild.
       files: ['*.tsx', '*.ts'],
       rules: {
+        // Bundlers (esbuild/Vite dev, tsdown/rolldown) elide type-only
+        // imports based on per-file usage heuristics, not full type info.
+        // A value-imported type re-exported via `export type {}` can look
+        // used to the heuristic, get preserved as a runtime import, and
+        // crash at runtime since the source has no matching runtime export.
+        '@typescript-eslint/consistent-type-imports': [
+          'error',
+          {
+            prefer: 'type-imports',
+            fixStyle: 'separate-type-imports',
+            disallowTypeAnnotations: false,
+          },
+        ],
         '@typescript-eslint/no-empty-object-type': [
           'error',
           {

package.json

@@ -43,7 +43,8 @@
     "@storybook/react-vite": "10.3.3",
     "@svgr/cli": "5.5.0",
     "@swc-node/register": "^1.11.1",
-    "@swc/core": "^1.15.18",
+    "@swc/core": "1.15.43",
+    "@swc/plugin-emotion": "14.15.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.0.0",
@@ -61,6 +62,7 @@
     "@typescript-eslint/eslint-plugin": "^8.57.0",
     "@typescript-eslint/parser": "^8.57.0",
     "@vitejs/plugin-react": "^5.0.0",
+    "@vitejs/plugin-react-swc": "4.3.0",
     "@vitest/browser": "^3.2.4",
     "babel-jest": "30.4.1",
     "babel-plugin-macros": "^3.0.1",
@@ -112,6 +114,7 @@
   "repository": "git@github.com:Codecademy/skillsoft-gamut.git",
   "resolutions": {
     "@react-aria/interactions": "3.25.0",
+    "@swc/core": "1.15.43",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@types/react-test-renderer": "^18.2.0",

packages/eslint-plugin-gamut/package.json

@@ -17,7 +17,6 @@
   ],
   "license": "MIT",
   "main": "./dist/index.js",
-  "module": "dist/index.js",
   "publishConfig": {
     "access": "public"
   },

packages/eslint-plugin-gamut/src/gamut-import-paths.ts

@@ -1,4 +1,4 @@
-import { TSESTree } from '@typescript-eslint/utils';
+import type { TSESTree } from '@typescript-eslint/utils';
 
 import { createRule } from './createRule';
 

packages/eslint-plugin-gamut/src/require-styled-target-for-selector.ts

@@ -1,4 +1,5 @@
-import { AST_NODE_TYPES, TSESTree } from '@typescript-eslint/utils';
+import type { TSESTree } from '@typescript-eslint/utils';
+import { AST_NODE_TYPES } from '@typescript-eslint/utils';
 
 import { createRule } from './createRule';
 

packages/eslint-plugin-gamut/src/utils.ts

@@ -1,4 +1,5 @@
-import { AST_NODE_TYPES, TSESTree } from '@typescript-eslint/utils';
+import type { TSESTree } from '@typescript-eslint/utils';
+import { AST_NODE_TYPES } from '@typescript-eslint/utils';
 
 export const isNamedVariableTheme = (
   arrowExpression: TSESTree.ArrowFunctionExpression

packages/gamut-icons/icon-template.js

@@ -5,7 +5,8 @@ function iconTemplate(api, opts, { jsx }) {
 
   return template.ast`
     import * as React from 'react';
-    import { Svg, GamutIconProps } from '../../props';
+    import { Svg } from '../../props';
+    import type { GamutIconProps } from '../../props';
     import { useIconId } from '../../useIconId';
 
     export const ${exportName} = React.forwardRef<SVGSVGElement, GamutIconProps>(({

packages/gamut-icons/src/props.ts

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 import { styledOptions, system } from '@skillsoft/gamut-styles';
-import { StyleProps, variance } from '@skillsoft/variance';
+import type { StyleProps } from '@skillsoft/variance';
+import { variance } from '@skillsoft/variance';
 
 export interface IconStyleProps extends StyleProps<typeof iconProps> {
   /**

packages/gamut-illustrations/src/AIBuilder.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const AIBuilder: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/AIBuilderLanding.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const AIBuilderLanding: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/Achievement.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const Achievement: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/Announcement.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const Announcement: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/Bee.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const Bee: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/Bell.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const Bell: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/BinaryBlocks.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const BinaryBlocks: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/BinaryStairs.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const BinaryStairs: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/Blocks.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from '.';
+import type { IllustrationProps } from '.';
 
 export const Blocks: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/Blueprint.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const Blueprint: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/BlueprintWhite.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const BlueprintWhite: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/BookAndNotepad.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const BookAndNotepad: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/Browser.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const Browser: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/BrowserLock.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const BrowserLock: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/BrowserPuzzle.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const BrowserPuzzle: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/ChatBox.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const ChatBox: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/CodeCelebration.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const CodeCelebration: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/Coffee.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const Coffee: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/Confetti.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const Confetti: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/Conversation.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const Conversation: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/CubeIllustration.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const CubeIllustration: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/CustomProject.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const CustomProject: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/EmailAt.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const EmailAt: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/Envelope.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const Envelope: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/ErrorWindow.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const ErrorWindow: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/Events.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const Events: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/ExplodedCube.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const ExplodedCube: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/ExplodedCubeLight.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const ExplodedCubeLight: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/Heart.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const Heart: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/Hills.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const Hills: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/HomeOffice.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const HomeOffice: React.FC<IllustrationProps> = ({
   className,

packages/gamut-illustrations/src/InnovationBuildingBlocks.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const InnovationBuildingBlocks: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/Interest.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import type React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const Interest: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,

packages/gamut-illustrations/src/Interview.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import type React from 'react';
 
-import { IllustrationProps } from './types';
+import type { IllustrationProps } from './types';
 
 export const Interview: React.FC<IllustrationProps> = ({
   'aria-hidden': ariaHidden,