vanilla-extract — Zero-runtime Stylesheets-in-TypeScript.
import { createTheme, style } from '@vanilla-extract/css'; export const [themeClass, vars] = createTheme({ color: { brand: 'blue', white: '#fff' }, space: { small: '4px', medium: '8px', } }); export const hero = style({ backgroundColor: vars.color.brandd, color: vars.color.white, padding: vars.space.large });
大規模 Closure Tools プロジェクトに Prettier を導入するまでの道のり - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームの鈴木(@__sosukesuzuki)です。 弊社のサービスである kintone では、コードのフォーマットを ESLint のみで行っているためプロジェクト内でコーディングスタイルを統一しきれていないという問題を抱えていました。 そこで opinionated なコードフォーマッター Prettier を導入し、コードベース全体でコーディングスタイルを統一するための支援をフロントエンドエキスパートチームで行いました。 2011 年にローンチされた kintone では、フロントエンドの大部分が Closure Tools を使って開発されています。Closure Tools は型の指定方法やクラスの定義方法などに独自システムを採用しており、現在の JavaScript のエコシステムや仕様と一部乖離しています。そのため、Prettier 本
Semgrepを使った構文木ベースの検索と置換でコードのリファクタリングをする
Semgrepはr2cという会社/サービスが開発しているツールです。 Semgrepの特徴としてTree-sitterでコードをパースしたConcrete Syntax Tree(CST)の構文木をベースにして検索や置換ができます。 コードをCSTにパースした構文木に対して検索/置換することで、ただの文字列検索/置換に比べてミスマッチしない検索/置換ができます。 例えば、次のa.js、b.js、c.jsはそれぞれevalを使っていますが、スタイルは違いますが意味はほとんど同じです。 // a.js eval("const a = 1, b = 2; eval(a + b);"); // b.js eval('const a = 1, b = 2;\ eval(a + b);'); // c.js eval(`const a = 1, b = 2; eval(a + b);`); $ sem
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
