skills.rest
growilabs
growilabsOFFICIAL
Explore all skills by this author →
GitHub

vendor-styles-components

Precompile vendor CSS into JavaScript modules for Turbopack component imports.

1.5k|242|Updated Feb 16, 2017
Search Tags:#nextjs#assets#vite#turbopack#build-pipeline#precompile#vendor-css
One-click install
npx skills add https://github.com/growilabs/growi --skill vendor-styles-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vendor-styles-components
Source: https://github.com/growilabs/growi/tree/main/apps/app/.claude/skills/vendor-styles-components
Command: npx skills add https://github.com/growilabs/growi --skill vendor-styles-components

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about vendor-styles-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I import vendor CSS into a component without breaking Turbopack in Next.js Pages Router?▼

Precompiling vendor CSS into JavaScript modules allows component-local third-party CSS imports in Turbopack. Vite handles the inline CSS entry points, outputting prebuilt JS modules that inject styles at runtime.

Why does Turbopack reject direct third-party CSS imports from components?▼

Turbopack rejects direct third-party CSS imports from components because it forces global CSS into the application entry. This architecture prevents component-scoped styles from polluting the global stylesheet and degrading page load performance.

What is the best way to isolate editor plugin CSS in Next.js using Turbopack?▼

Isolating editor plugin CSS in Next.js with Turbopack requires a two-track vendor CSS system. The components track uses Vite entry points to prebuild CSS into pure JavaScript modules, injecting style tags at runtime without global stylesheet pollution.

How do I precompile component vendor styles before starting a development build?▼

Running `pnpm run pre:styles-components` precompiles component vendor styles into `.prebuilt` JavaScript modules. This turborepo task also relocates emitted assets to `public/static/fonts` with URL rewriting before starting development or production builds.

Does this vendor CSS precompilation system work with Next.js App Router projects?▼

No, this vendor CSS precompilation system applies specifically to Next.js Pages Router projects using Turbopack. It targets component-level third-party CSS imports, editor plugins, and isolated UI widgets requiring vendor styles without global bundle degradation.

How are font assets handled when precompiling vendor CSS into JavaScript modules?▼

Font assets are handled by rewriting emitted asset URLs and moving fonts to `public/static/fonts` during precompilation. This ensures the prebuilt JavaScript modules correctly reference relocated assets when injecting style tags at runtime.

Related Skills

Explore More Software Engineering Skills→
AgentiveCityAgentiveCity
2

shadcn-setup-and-theming

Install and configure shadcn/ui with Tailwind and design tokens in React projects.

Official
Intermediate
kriscendobotkriscendobot
3

emoji-favicon

Generate emoji favicons as inline SVG data URIs for browsers.

Community
Basic
haidonglethqbhaidonglethqb

web-frameworks

Integrate Next.js, Turborepo, and RemixIcon for React web applications.

Community
Advanced
MohammedHTahirMohammedHTahir

turbopack

Troubleshoot Next.js 16 Turbopack bundling and build failures from Webpack configuration mismatches.

Community
Intermediate