refactor(components): use vanilla-extract for styles (#1124)

* refactor(components): use vanilla-extract for styles

* docs: add dark mode var override example

* chore: add changeset

* fix: remove style

* chore: remove skipLibCheck

Author: Niznikr

.changeset/nice-gorillas-develop.md

@@ -0,0 +1,6 @@
+---
+"@launchpad-ui/components": patch
+"@launchpad-ui/tokens": patch
+---
+
+Use Vanilla Extract for component styles

.eslintrc.js

@@ -20,14 +20,7 @@ module.exports = {
       jsx: true,
     },
   },
-  plugins: [
-    'react',
-    '@typescript-eslint',
-    'testing-library',
-    'functional',
-    'jsx-a11y',
-    '@stylexjs',
-  ],
+  plugins: ['react', '@typescript-eslint', 'testing-library', 'functional', 'jsx-a11y'],
   settings: {
     react: {
       version: 'detect',
@@ -102,7 +95,6 @@ module.exports = {
         ],
       },
     ],
-    '@stylexjs/valid-styles': 'error',
   },
   overrides: [
     {

.storybook/main.ts

@@ -3,7 +3,6 @@ import type { StorybookConfig } from '@storybook/react-vite';
 import path from 'path';
 import fs from 'fs';
 import fg from 'fast-glob';
-import stylexPlugin from '@stylexjs/rollup-plugin';
 import { mergeConfig } from 'vite';
 import turbosnap from 'vite-plugin-turbosnap';
 
@@ -54,20 +53,6 @@ const config: StorybookConfig = {
       configType === 'PRODUCTION'
         ? {
             plugins: [turbosnap({ rootDir: config.root || process.cwd() })],
-            build: {
-              rollupOptions: {
-                plugins: [
-                  stylexPlugin({
-                    // Required for CSS variable support
-                    unstable_moduleResolution: {
-                      type: 'commonJS',
-                      rootDir: __dirname,
-                    },
-                    useCSSLayers: true,
-                  }),
-                ],
-              },
-            },
           }
         : {}
     );
@@ -76,10 +61,6 @@ const config: StorybookConfig = {
     autodocs: true,
     defaultName: 'Docs',
   },
-  previewHead: (head) => `
-    ${head}
-    ${process.env.NODE_ENV === 'production' ? '<link href="./stylex.css" rel="stylesheet" />' : ''}
-  `,
 };
 
 const getPackageStatusEnvVars = () => {

apps/remix/remix.config.js

@@ -3,6 +3,6 @@
  */
 module.exports = {
   ignoredRouteFiles: ['**/.*'],
-  serverDependenciesToBundle: [/^@launchpad-ui/, 'marked', '@stylexjs/stylex'],
+  serverDependenciesToBundle: [/^@launchpad-ui/, 'marked'],
   serverModuleFormat: 'cjs',
 };

package.json

@@ -65,9 +65,6 @@
     "@storybook/testing-library": "^0.2.2",
     "@storybook/theming": "^7.6.3",
     "@storybook/types": "^7.6.3",
-    "@stylexjs/babel-plugin": "^0.4.1",
-    "@stylexjs/eslint-plugin": "^0.4.1",
-    "@stylexjs/rollup-plugin": "^0.4.1",
     "@testing-library/dom": "^9.3.0",
     "@testing-library/jest-dom": "^6.1.2",
     "@testing-library/react": "^14.1.0",
@@ -79,7 +76,7 @@
     "@typescript-eslint/parser": "^6.17.0",
     "@vanilla-extract/css": "^1.14.0",
     "@vanilla-extract/vite-plugin": "^3.9.2",
-    "@vitejs/plugin-react": "^4.2.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
     "@vitest/coverage-v8": "^1.1.1",
     "@vitest/ui": "^1.1.1",
     "chromatic": "^10.2.0",

packages/components/.gitignore

@@ -28,16 +28,18 @@
   "scripts": {
     "build": "vite build -c ../../vite.config.mts && tsc --project tsconfig.build.json",
     "clean": "rm -rf dist",
-    "lint": "eslint '**/*.{ts,tsx,js}' --ignore-pattern 'tokens.stylex.ts'",
+    "lint": "eslint '**/*.{ts,tsx,js}'",
     "test": "vitest run --coverage"
   },
   "dependencies": {
     "@launchpad-ui/tokens": "workspace:~",
-    "@stylexjs/stylex": "0.4.1",
+    "@launchpad-ui/vars": "workspace:~",
+    "@vanilla-extract/recipes": "0.5.1",
     "react-aria-components": "1.0.0",
     "clsx": "2.1.0"
   },
   "peerDependencies": {
+    "@vanilla-extract/css": "^1.14.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

packages/components/package.json

@@ -1,89 +1,42 @@
-import type { StyleXStyles } from '@stylexjs/stylex';
+import type { ProgressBarVariants } from './styles/ProgressBar.css';
 import type { ForwardedRef } from 'react';
 import type { ProgressBarProps as AriaProgressBarProps } from 'react-aria-components';
 
-import * as stylex from '@stylexjs/stylex';
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { ProgressBar as AriaProgressBar } from 'react-aria-components';
 
-import { tokens } from './tokens.stylex';
+import { base, indeterminate, outerCircle, innerCircle, variants } from './styles/ProgressBar.css';
 
-const spin = stylex.keyframes({
-  from: { transform: 'rotate(0deg)' },
-  to: { transform: 'rotate(359deg)' },
-});
-
-const styles = stylex.create({
-  base: {
-    display: 'inline-block',
-    transformOrigin: '0 0',
-  },
-  indeterminate: {
-    animationName: spin,
-    animationDuration: tokens['duration.350'],
-    animationTimingFunction: 'linear',
-    animationIterationCount: 'infinite',
-  },
-  outerCircle: {
-    stroke: tokens['color.white.100'],
-  },
-  innerCircle: {
-    stroke: tokens['color.gray.500'],
-  },
-});
-
-const variants = stylex.create({
-  small: {
-    transform: 'scale(0.25)',
-  },
-  medium: {
-    transform: 'scale(0.375)',
-  },
-  large: {
-    transform: 'scale(0.5)',
-  },
-});
-
-interface ProgressBarProps extends Omit<AriaProgressBarProps, 'style'> {
-  style?: StyleXStyles;
-  size?: keyof typeof variants;
-}
+type ProgressBarProps = AriaProgressBarProps & ProgressBarVariants;
 
 const ProgressBar = forwardRef(
   (
-    { style, size = 'small', className, ...props }: ProgressBarProps,
+    { size = 'small', className, ...props }: ProgressBarProps,
     ref: ForwardedRef<HTMLDivElement>
   ) => {
     const center = 16;
     const strokeWidth = 4;
     const r = 16 - strokeWidth;
     const c = 2 * r * Math.PI;
 
-    const stylexProps = stylex.props(styles.base, variants[size], style);
-
     return (
-      <AriaProgressBar
-        {...props}
-        ref={ref}
-        className={clsx(stylexProps.className, className)}
-        style={stylexProps.style}
-      >
+      <AriaProgressBar {...props} ref={ref} className={clsx(base, variants({ size }), className)}>
         {({ percentage }) => (
           <svg
             width={64}
             height={64}
             viewBox="0 0 32 32"
             fill="none"
             strokeWidth={strokeWidth}
-            {...stylex.props(props.isIndeterminate && styles.indeterminate)}
+            className={clsx(props.isIndeterminate && indeterminate)}
           >
             <circle
               cx={center}
               cy={center}
               r={r}
               strokeWidth={strokeWidth}
-              {...stylex.props(styles.outerCircle)}
+              className={outerCircle}
             />
             <circle
               cx={center}
@@ -92,7 +45,7 @@ const ProgressBar = forwardRef(
               strokeDasharray={`${c} ${c}`}
               strokeDashoffset={c - (props.isIndeterminate ? 0.34 : percentage! / 100) * c}
               transform="rotate(-90 16 16)"
-              {...stylex.props(styles.innerCircle)}
+              className={innerCircle}
             />
           </svg>
         )}

packages/components/src/ProgressBar.tsx

@@ -0,0 +1,51 @@
+import type { RecipeVariants } from '@vanilla-extract/recipes';
+
+import { vars } from '@launchpad-ui/vars';
+import { keyframes, style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+const base = style({
+  display: 'inline-block',
+  transformOrigin: '0 0',
+});
+
+const outerCircle = style({
+  stroke: vars.color.white[100],
+});
+
+const innerCircle = style({
+  stroke: vars.color.gray[500],
+});
+
+const variants = recipe({
+  variants: {
+    size: {
+      small: {
+        transform: 'scale(0.25)',
+      },
+      medium: {
+        transform: 'scale(0.375)',
+      },
+      large: {
+        transform: 'scale(0.5)',
+      },
+    },
+  },
+});
+
+const spin = keyframes({
+  '0%': { transform: 'rotate(0deg)' },
+  '100%': { transform: 'rotate(360deg)' },
+});
+
+const indeterminate = style({
+  animationName: spin,
+  animationDuration: vars.duration[350],
+  animationTimingFunction: 'linear',
+  animationIterationCount: 'infinite',
+});
+
+type ProgressBarVariants = RecipeVariants<typeof variants>;
+
+export { base, indeterminate, outerCircle, innerCircle, variants };
+export type { ProgressBarVariants };

packages/components/src/styles/ProgressBar.css.ts

@@ -1,19 +1,19 @@
-import type { StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { ProgressBar } from '../src';
 
-export default {
+const meta: Meta<typeof ProgressBar> = {
   component: ProgressBar,
   title: 'React Aria Components/ProgressBar',
-  description:
-    "An implementation of LaunchDarkly's LaunchPad Design System using React Aria Components.",
   parameters: {
     status: {
       type: import.meta.env.STORYBOOK_PACKAGE_STATUS__COMPONENTS,
     },
   },
 };
 
+export default meta;
+
 type Story = StoryObj<typeof ProgressBar>;
 
 export const Example: Story = {