refactor: migrate styling from scss to vanilla-extract

jest.config.ts

@@ -4,13 +4,14 @@ const config: Config = {
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
   clearMocks: true,
-  moduleNameMapper: {
-    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+  transform: {
+    '^.+\\.css\\.ts$': '@vanilla-extract/jest-transform',
+    '^.+\\.(ts|tsx|js|jsx)$': 'ts-jest',
   },
   setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
   testPathIgnorePatterns: ['/node_modules/', '/dist/'],
   collectCoverage: true,
-  collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/index.{ts,tsx}'],
+  collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/index.{ts,tsx}', '!src/styles/**/*.css.ts'],
   coverageThreshold: {
     global: {
       statements: 90,

package.json

@@ -60,7 +60,9 @@
     "@types/react": "19.1.5",
     "@types/react-dom": "19.1.5",
     "@typescript-eslint/parser": "^8.34.1",
-    "autoprefixer": "^10.4.21",
+    "@vanilla-extract/css": "^1.17.5",
+    "@vanilla-extract/jest-transform": "^1.1.19",
+    "@vanilla-extract/rollup-plugin": "^1.5.0",
     "eslint": "^9.29.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-import": "^2.32.0",
@@ -75,14 +77,11 @@
     "jest": "^30.0.3",
     "jest-environment-jsdom": "^30.0.2",
     "lint-staged": "^16.1.2",
-    "postcss": "^8.5.6",
     "prettier": "^3.6.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "rollup": "^4.43.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.89.2",
     "ts-jest": "^29.4.0",
     "ts-node": "^10.9.2",
     "tslib": "^2.8.1",

rollup.config.js

@@ -5,8 +5,7 @@ import resolve from '@rollup/plugin-node-resolve';
 import terser from '@rollup/plugin-terser';
 import typescript from '@rollup/plugin-typescript';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
-import postcss from 'rollup-plugin-postcss';
-import autoprefixer from 'autoprefixer';
+import { vanillaExtractPlugin } from '@vanilla-extract/rollup-plugin';
 
 const extensions = ['.js', '.jsx', '.ts', '.tsx'];
 
@@ -50,19 +49,9 @@ export default {
       presets: ['@babel/preset-env', '@babel/preset-react'],
     }),
 
-    postcss({
-      plugins: [autoprefixer()],
-      extensions: ['.css', '.scss'],
-      minimize: true,
-      inject: true,
-      use: {
-        sass: {
-          silenceDeprecations: ['legacy-js-api'],
-        },
-      },
-    }),
-
     terser(),
+
+    vanillaExtractPlugin(),
   ],
   external: ['react', 'react-dom'],
 };

src/components/AnimatedSpan/AnimatedSpan.tsx

@@ -1,5 +1,7 @@
 import { type CSSProperties, type FC, useCallback, useRef } from 'react';
 
+import * as styles from '../../styles/motion.css.ts';
+
 type Props = {
   text: string;
   style: CSSProperties;
@@ -31,7 +33,7 @@ export const AnimatedSpan: FC<Props> = ({ text, style, onAnimationEnd }) => {
   }
 
   return (
-    <span style={style} aria-hidden="true" onAnimationEnd={handleAnimationEnd}>
+    <span className={styles.motion} style={style} aria-hidden="true" onAnimationEnd={handleAnimationEnd}>
       {text}
     </span>
   );

src/components/NodeMotion/NodeMotion.tsx

@@ -1,12 +1,10 @@
-import '../../styles/animations.scss';
-import '../../styles/motion.scss';
-
 import { type FC, memo, useEffect } from 'react';
 
 import { useAnimatedChildren } from '../../hooks/useAnimatedChildren';
 import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
 import { useResolvedMotion } from '../../hooks/useResolvedMotion';
 import { useValidation } from '../../hooks/useValidation';
+import * as styles from '../../styles/motion.css.ts';
 import type { NodeMotionProps } from '../../types';
 import { splitNodeAndExtractText } from '../../utils/splitNodeAndExtractText';
 
@@ -110,14 +108,14 @@ export const NodeMotion: FC<NodeMotionProps> = memo(props => {
 
   if (shouldAnimate) {
     return (
-      <Tag ref={targetRef} className="node-motion" aria-label={text}>
+      <Tag ref={targetRef} aria-label={text}>
         {animatedChildren}
       </Tag>
     );
   }
 
   return (
-    <Tag ref={targetRef} className="node-motion-inanimate" aria-label={text}>
+    <Tag ref={targetRef} className={styles.inanimate} aria-label={text}>
       {children}
     </Tag>
   );

src/components/TextMotion/TextMotion.tsx

@@ -1,12 +1,10 @@
-import '../../styles/animations.scss';
-import '../../styles/motion.scss';
-
 import { type FC, memo, useEffect } from 'react';
 
 import { useAnimatedText } from '../../hooks/useAnimatedText';
 import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
 import { useResolvedMotion } from '../../hooks/useResolvedMotion';
 import { useValidation } from '../../hooks/useValidation';
+import * as styles from '../../styles/motion.css.ts';
 import type { TextMotionProps } from '../../types';
 import { splitText } from '../../utils/splitText';
 
@@ -107,14 +105,14 @@ export const TextMotion: FC<TextMotionProps> = memo(props => {
 
   if (shouldAnimate) {
     return (
-      <Tag ref={targetRef} className="text-motion" aria-label={text}>
+      <Tag ref={targetRef} aria-label={text}>
         {animatedText}
       </Tag>
     );
   }
 
   return (
-    <Tag ref={targetRef} className="text-motion-inanimate" aria-label={text}>
+    <Tag ref={targetRef} className={styles.inanimate} aria-label={text}>
       {text}
     </Tag>
   );

src/styles/animations.css.ts

@@ -0,0 +1,87 @@
+import { keyframes } from '@vanilla-extract/css';
+
+export const fadeIn = keyframes({
+  from: { opacity: 'var(--fade-from, 0)' },
+  to: { opacity: 'var(--fade-to, 1)' },
+});
+
+export const fadeOut = keyframes({
+  from: { opacity: 'var(--fade-from, 1)' },
+  to: { opacity: 'var(--fade-to, 0)' },
+});
+
+export const slideUp = keyframes({
+  from: { transform: 'translateY(var(--slide-distance, 0.4rem))' },
+  to: { transform: 'translateY(0)' },
+});
+
+export const slideDown = keyframes({
+  from: { transform: 'translateY(var(--slide-distance, -0.4rem))' },
+  to: { transform: 'translateY(0)' },
+});
+
+export const slideRight = keyframes({
+  from: { transform: 'translateX(var(--slide-distance, -0.4rem))' },
+  to: { transform: 'translateX(0)' },
+});
+
+export const slideLeft = keyframes({
+  from: { transform: 'translateX(var(--slide-distance, 0.4rem))' },
+  to: { transform: 'translateX(0)' },
+});
+
+export const scaleIn = keyframes({
+  from: { transform: 'scale(var(--scale-from, 0.9))' },
+  to: { transform: 'scale(var(--scale-to, 1))' },
+});
+
+export const scaleOut = keyframes({
+  from: { transform: 'scale(var(--scale-from, 1))' },
+  to: { transform: 'scale(var(--scale-to, 0.9))' },
+});
+
+export const rotateClockwise = keyframes({
+  from: { transform: 'var(--rotate-from, rotate(0deg))' },
+  to: { transform: 'var(--rotate-to, rotate(360deg))' },
+});
+
+export const rotateCounterclockwise = keyframes({
+  from: { transform: 'var(--rotate-from, rotate(360deg))' },
+  to: { transform: 'var(--rotate-to, rotate(0deg))' },
+});
+
+export const bounceIn = keyframes({
+  '0%': { transform: 'scale(var(--bounce-from, 0.5))' },
+  '50%': { transform: 'scale(var(--bounce-mid, 1.05))' },
+  '100%': { transform: 'scale(var(--bounce-to, 1))' },
+});
+
+export const bounceOut = keyframes({
+  '0%': { transform: 'scale(var(--bounce-from, 1))' },
+  '50%': { transform: 'scale(var(--bounce-mid, 1.05))' },
+  '100%': { transform: 'scale(var(--bounce-to, 0.5))' },
+});
+
+export const elasticIn = keyframes({
+  '0%': { transform: 'scaleX(var(--elastic-from, 0))' },
+  '60%': { transform: 'scaleX(var(--elastic-mid1, 1.2))' },
+  '80%': { transform: 'scaleX(var(--elastic-mid2, 0.9))' },
+  '100%': { transform: 'scaleX(var(--elastic-to, 1))' },
+});
+
+export const elasticOut = keyframes({
+  '0%': { transform: 'scaleX(var(--elastic-from, 1))' },
+  '20%': { transform: 'scaleX(var(--elastic-mid1, 0.9))' },
+  '40%': { transform: 'scaleX(var(--elastic-mid2, 1.2))' },
+  '100%': { transform: 'scaleX(var(--elastic-to, 0))' },
+});
+
+export const flipIn = keyframes({
+  from: { transform: 'perspective(40rem) rotateY(var(--flip-from, 90deg))' },
+  to: { transform: 'perspective(40rem) rotateY(var(--flip-to, 0deg))' },
+});
+
+export const flipOut = keyframes({
+  from: { transform: 'perspective(40rem) rotateY(var(--flip-from, 0deg))' },
+  to: { transform: 'perspective(40rem) rotateY(var(--flip-to, 90deg))' },
+});