vendor-styles-components
OfficialComponent-level vendor CSS for Turbopack
Authorgrowilabs
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Turbopack (Pages Router) rejects direct third-party global CSS imports from components and forces global CSS into the application entry, which either breaks builds or forces unnecessary global inclusion that harms first contentful paint for pages that do not need those styles.
Core Features & Use Cases
- Two-track vendor CSS system that separates widely-shared vendor styles (commons track) from component-scoped vendor styles (components track).
- Components track uses Vite entry points that import CSS with an inline suffix, prebuilds them into pure JavaScript modules that inject style tags at runtime, and rewrites emitted asset URLs while moving fonts to public/static/fonts.
- Use cases include editor plugins, interactive widgets, and isolated UI components that require third-party CSS without polluting the global stylesheet or breaking Turbopack compilation.
Quick Start
Run pnpm run pre:styles-components to precompile component vendor styles into .prebuilt modules and move emitted assets to public/static/fonts before starting development or production builds.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: vendor-styles-components Download link: https://github.com/growilabs/growi/archive/main.zip#vendor-styles-components Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.