Vanilla Extract: CSS-in-JS bez działania w czasie wykonywania
Pisz bezpieczny typowo CSS za pomocą Vanilla Extract, który podczas budowania generuje statyczne pliki CSS.
Vanilla Extract: CSS-in-JS bez działania w czasie wykonywania to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Czym jest Vanilla Extract?
Vanilla Extract to biblioteka CSS-in-JS, która zapewnia zerowy narzut w czasie działania. CSS jest definiowany w TypeScript i kompilowany do statycznych plików CSS podczas budowania — zapewnia to bezpieczeństwo typów bez wstrzykiwania stylów w czasie działania.
Kluczowa zasada
W przeciwieństwie do styled-components i Emotion, Vanilla Extract działa w całości podczas budowania. Import JavaScriptu służy jako API do definiowania stylów, a wynikiem są zwykłe pliki CSS. Po stronie klienta nie jest wykonywany żaden JavaScript w celu zastosowania stylów.
Konwencja nazewnictwa plików
Pliki Vanilla Extract używają rozszerzenia .css.ts:
// button.css.ts
import { style } from '@vanilla-extract/css';
export const button = style({
background: 'royalblue',
color: 'white',
padding: '10px 20px',
borderRadius: '4px',
cursor: 'pointer',
':hover': {
background: '#2563eb'
}
});Używanie w komponentach
Należy zaimportować eksportowaną nazwę klasy i ją zastosować:
import { button } from './button.css.ts';
function Button({ children }) {
return <button className={button}>{children}</button>;
}Kontrakty motywów
Najpotężniejszą funkcją Vanilla Extract jest możliwość zdefiniowania kontraktu motywu (kształtu tokenów) i utworzenia wielu motywów, które go implementują:
import { createTheme, createThemeContract } from '@vanilla-extract/css';
const contract = createThemeContract({
color: { primary: null, bg: null }
});
export const lightTheme = createTheme(contract, {
color: { primary: '#3b82f6', bg: '#ffffff' }
});
export const darkTheme = createTheme(contract, {
color: { primary: '#60a5fa', bg: '#111827' }
});styleVariants
Można utworzyć wiele wariantów stylu bez powtarzania kodu:
import { styleVariants } from '@vanilla-extract/css';
export const variants = styleVariants({
primary: { background: 'royalblue' },
danger: { background: 'crimson' },
ghost: { background: 'transparent', border: '1px solid royalblue' }
});
// <Button className={variants[variant]}>Recipes z @vanilla-extract/recipes
Funkcja recipe z pakietu recipes elegancko łączy style bazowe i warianty:
import { recipe } from '@vanilla-extract/recipes';
export const button = recipe({
base: { padding: '10px 20px', borderRadius: '4px' },
variants: {
color: {
primary: { background: 'royalblue', color: 'white' },
danger: { background: 'crimson', color: 'white' }
},
size: {
sm: { fontSize: '0.875rem' },
lg: { fontSize: '1.25rem' }
}
}
});Sprinkles dla klas narzędziowych
@vanilla-extract/sprinkles generuje klasy narzędziowe na podstawie zestawu tokenów — podobnie jak bezpieczny typowo Tailwind bez kosztu w czasie działania:
Bezpieczeństwo typów
Ponieważ style są obiektami TypeScript, otrzymują Państwo pełne autouzupełnianie w IDE oraz sprawdzanie typów nazw właściwości CSS i ich wartości. Literówki w nazwach właściwości są wykrywane podczas budowania, a nie w czasie działania.
Integracja z narzędziami budowania
Vanilla Extract integruje się z Vite, webpack, esbuild i Next.js za pomocą dedykowanych adapterów. Wyodrębniony CSS jest udostępniany jako plik statyczny.
Kiedy wybrać Vanilla Extract
Vanilla Extract należy wybrać, gdy potrzebują Państwo:
- pełnego bezpieczeństwa typów TypeScript dla stylów
- zerowego narzutu CSS-in-JS w czasie działania
- statycznego wyniku CSS zapewniającego maksymalną wydajność
- solidnego systemu motywów z kontraktami tokenów sprawdzanymi pod kątem typów
Szybki test
Jaka jest kluczowa przewaga wydajnościowa Vanilla Extract nad rozwiązaniami CSS-in-JS działającymi w czasie wykonywania, takimi jak styled-components?
Podsumowanie
Vanilla Extract to biblioteka CSS-in-JS stworzona z myślą o TypeScript, bez kosztu w czasie działania. Style należy definiować w plikach .css.ts za pomocą bezpiecznych typowo obiektów JavaScript. Podczas budowania generowane są statyczne pliki CSS. Kontrakty motywów zapewniają obsługę wielu motywów z kontrolą typów. styleVariants i recipe elegancko obsługują warianty komponentów. Brak kosztu w czasie działania sprawia, że Vanilla Extract doskonale nadaje się do aplikacji, w których wydajność ma kluczowe znaczenie.
Często zadawane pytania
Czy lekcja „Vanilla Extract: CSS-in-JS bez działania w czasie wykonywania” jest bezpłatna?
Tak — pełny tekst „Vanilla Extract: CSS-in-JS bez działania w czasie wykonywania” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Vanilla Extract: CSS-in-JS bez działania w czasie wykonywania”?
Pisz bezpieczny typowo CSS za pomocą Vanilla Extract, który podczas budowania generuje statyczne pliki CSS. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Vanilla Extract: CSS-in-JS bez działania w czasie wykonywania”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Styled-components: literały szablonowe z tagami
- Emotion: css() i styled()
- CSS Modules: style z ograniczonym zakresem
- Vanilla Extract: CSS-in-JS bez działania w czasie wykonywania