Skip to content

[FEATURE] Refactor SCSS Styling to Vanilla Extract #67

@shubug1015

Description

@shubug1015

Is your feature request related to a problem? Please describe.
The current react-textmotion library uses SCSS for styling. However, this approach introduces several issues that are especially problematic for a reusable library:

  • Global scope conflicts: Class names such as .text-motion and .node-motion exist in the global scope. If the consuming application defines the same class names, unexpected style overrides and layout breakage can occur.
  • Lack of type safety: Class names are referenced as raw strings, so typos or unused classes cannot be detected at build time.
  • Limited tree shaking: SCSS files are typically bundled into a single CSS output, which can cause unused animation styles to remain included in the final bundle.

These limitations can lead to unpredictable behavior and performance inefficiencies when the library is consumed by external projects.

Describe the solution you'd like
Refactor the current SCSS-based styling system to Vanilla Extract.
This migration is expected to deliver the following benefits:

  1. Local scoping to prevent style conflicts with consuming applications.
  2. Type safety, eliminating class name typos and improving reliability.
  3. Static CSS output that supports better tree shaking and minimizes unused styles.
  4. Component co-location, improving maintainability and cohesion.
  5. Future use of Vanilla Extract’s powerful theme system.

Describe alternatives you've considered

  • CSS Modules: Provides local scoping but lacks strong co-location benefits and theme system capabilities.
  • Runtime CSS-in-JS solutions (e.g., Styled Components, Emotion): Adds runtime overhead and requires consumers of the library to install these packages as peer dependencies.
  • Keeping SCSS with stricter naming conventions: Reduces risk but does not fundamentally solve global scope issues, type safety, or tree shaking limitations.

Additional context

  • Since react-textmotion is designed as a reusable animation library, preventing style collisions and ensuring predictable, type-safe behavior is crucial.
  • This refactoring focuses primarily on restructuring the styling layer, without altering the higher-level component architecture.

Metadata

Metadata

Assignees

Labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions