Linear dikenal sebagai aplikasi manajemen proyek yang terasa sangat cepat. Di balik itu, tim Linear baru saja menuntaskan proyek besar yang jarang diumumkan perusahaan lain: memindahkan aplikasi React mereka dari styled-components ke StyleX, sistem styling buatan Meta. Migrasinya tidak main-main — lebih dari 1.000 pull request selama sekitar lima bulan, rampung awal Agustus 2026. Kenapa mereka rela repot? Ada dua alasan yang relevan untuk hampir semua tim frontend: performa dan keteraturan kode.

Kenapa styled-components mulai ditinggalkan

Alasan utamanya performa. styled-components adalah runtime CSS-in-JS: gaya di-generate dan disuntikkan ke halaman saat aplikasi berjalan di browser, bukan saat build. Artinya pengguna ikut membayar biaya styling di setiap render.

Menurut Kenneth Skovhus, engineer Linear yang memimpin proyek ini, pemicunya adalah upgrade ke React 18. React menyediakan hook useInsertionEffect untuk membantu library CSS-in-JS mengurangi masalah performa, tetapi styled-components tidak pernah mengadopsinya dan proyeknya masuk status maintenance. Tim sempat menguji fork optimasi buatan Cody Olsen (Sanity) yang memotong waktu render hingga 40 persen — tetapi bahkan pembuatnya menyebut fork itu sebagai jalan terakhir, bukan solusi jangka panjang.

Alasan kedua: enkapsulasi gaya

Dengan styled-components, komponen mudah ditata ulang dari luar — misalnya lewat pola styled(Button). Praktis untuk bergerak cepat, tetapi berbahaya dalam jangka panjang: tampilan satu komponen bisa diubah dari tempat lain tanpa kontrak yang jelas.

Linear ingin membuat itu sengaja lebih sulit, sehingga setiap komponen punya kontrak styling yang eksplisit. Alasan ini makin relevan seiring makin banyak kode ditulis bersama agen AI: batas yang tegas memudahkan agen memahami aturan dan mencegah perubahan liar.

Apa itu StyleX?

StyleX adalah compiler CSS-in-JS dari Meta. Gaya ditulis dalam JavaScript, tetapi dikompilasi menjadi atomic CSS saat build — tanpa injeksi aturan apa pun ketika aplikasi berjalan. Ukuran CSS-nya juga cenderung mendatar seiring proyek membesar karena kelas yang dihasilkan dipakai ulang.

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  box: {
    padding: 16,
    color: 'blue',
  },
});

API-nya kecil dan type-safe: stylex.create() untuk mendefinisikan gaya, stylex.props() untuk menerapkannya — termasuk secara kondisional atau digabung dari props. Efek sampingnya, beberapa pola seperti selector global dan menata ulang komponen dari luar menjadi lebih sulit. Menurut Linear, itu justru tujuannya.

Strategi migrasi Linear

1. Fondasi dulu. Sebelum migrasi massal, tim mendefinisikan variabel, konstanta, dan primitif styling StyleX — termasuk ThemeProvider khusus untuk sistem tema bertingkat Linear.
2. Codemod deterministik. Skovhus membangun alat konversi otomatis styled-components-to-stylex-codemod: input sama, output sama. Kini alat itu telah melewati 500+ PR dengan sekitar 100.000 baris kode dan tersedia playground online untuk uji coba.
3. Mulai dari komponen daun. Komponen yang tidak membungkus komponen lain dimigrasi lebih dulu — diff lebih kecil dan risiko konflik cascade lebih rendah.
4. Lint agresif. Aturan lint kustom (memakai Oxlint) menandai pola lama sebelum menyebar ke kode baru.
5. Sediakan jalan keluar. Untuk kebutuhan yang tetap bersifat CSS global — seperti menata DOM pustaka pihak ketiga — tim memakai CSS Modules sebagai escape hatch.

Hasilnya

Saat laporan pertamanya ditulis pada Juni 2026, baru 58 persen file yang dikonversi, tetapi hasil awal sudah terasa: render antar-halaman sekitar 30 persen lebih cepat. Setelah migrasi rampung, InfoQ melaporkan angka finalnya: pekerjaan di main thread berkurang 20-35 persen pada halaman yang padat, navigasi sekitar 30 persen lebih cepat di perangkat kelas menengah, dan nol aturan CSS yang disuntikkan saat berpindah halaman.

Catatan penting: ini bukan proyek yang mulus tanpa cela. Skovhus menyebut banyak regresi tampilan kecil yang harus dilacak manual, seperti hover state yang rusak. Agen bisa melakukan pekerjaan yang menakjubkan, tetapi manusia tetap sangat dibutuhkan, tulisnya.

Apa artinya untuk tim Anda

• Migrasi besar belum tentu perlu. Namun jika aplikasi Anda memakai CSS-in-JS runtime dan terasa berat saat navigasi, biaya styling runtime adalah tersangka yang layak diperiksa.
• StyleX paling unggul untuk aplikasi besar yang terus tumbuh, karena ukuran CSS tidak ikut membengkak.
• Migrasi bisa bertahap — styled-components dan StyleX dapat hidup berdampingan untuk sementara.
• Siapkan proses verifikasi visual, karena regresi tersembunyi adalah risiko utamanya.

Tren ini juga meluas: Skovhus menyebut StyleX telah dipakai perusahaan seperti Figma dan Cursor, sementara InfoQ mencatat Cursor memindahkan aplikasinya dari Tailwind dan Meta membuka sistem desainnya, Astryx. Di komunitas, StyleX dinilai lebih kaku untuk manusia — tetapi justru kekakuan itu yang membuatnya cocok untuk agen AI.

Sumber: Kenneth Skovhus — Moving Linear from styled-components to StyleX; InfoQ — Linear Completes 1,000-PR Migration From styled-components to Meta's StyleX; GitHub — styled-components-to-stylex-codemod; Dokumentasi StyleX.