← 2026-03-03 の一覧へ戻るホーム
**Boss‑CSS：** 私は別の「CSS‑in‑JS」ライブラリを作りました。

2026/03/03 4:48

**Boss‑CSS：** 私は別の「CSS‑in‑JS」ライブラリを作りました。

RSS: https://news.ycombinator.com/rss

元のHacker News記事へ ↗
要約▶

Japanese Translation:

Boss‑CSS は、複数のスタイリング構文（prop ベース、className ベース、オブジェクトベース、および生の CSS）を統一し、インライン優先、クラス名優先、ランタイム専用、コンパイル専用などさまざまな抽出戦略をサポートする、多相的でツール非依存型の CSS‑in‑JavaScript ライブラリです。
PostCSS を介して実行され、CLI（

npx boss-css init
、
build
、
watch
、
compile
、
dev
）または Babel/Webpack/Vite プラグインを必要とせずに単純な 
npx boss-css compile
コマンドで動作します。
コアはイベント駆動型のプラグインシステムであり、カスタム props、ランタイム挙動、AI ドキュメントなどすべての機能が 
onBoot
や 
onProp
などのフックを持つサーバー/ブラウザ プラグインとして実装されています。ランタイム戦略フラグ（
runtime.only: true
）により、開発者は完全なランタイムモードまたはクライアント側で必要な CSS のみを注入しながらサーバー用に静的スタイルも生成するハイブリッドモードを有効化できます。
Boss‑CSS はデザイントークン（DTCG/Style Dictionary JSON、
tokens
プロパティによるローカルテーマ、および 
gray.600/60
のようなアルファサフィックス付きのトークン認識プロパティ）を統合しています。TypeScript 型、AI ドキュメント（
LLMS.md
）、一貫した使用法を強制する ESLint プラグインも生成できます。
React Native をサポートし、
boss-css/native
サーバープラグインでネイティブスタイル/コンポーネントをマッピングし、クロスプラットフォームのスタイリングを実現します。オプションの「Bosswind」プラグインは Tailwind のような省略形を追加しつつクラス名が衝突しないようにして、Tailwind と混在使用を可能にします。
その他の機能として、グループ化セレクタ、レスポンシブ 
@/at
プロパティ、コンテナクエリ、クラス合成ユーティリティ（
$.cx
、
$.cv
など）、および 
.boss.css
境界ファイルを使用したディレクトリ別に生成された CSS を分割して選択的に読み込む機能があります。
Boss‑CSS は現在オープンソースのアルファリリース（GitHub: https://github.com/wintercounter/boss）であり、ウェブサイト、プレイグラウンド、およびコミュニティ主導のロードマップを備えており、バンドラーの複雑さを削減し、Web、ネイティブ、Tailwind 環境全体でデザイントークンを標準化する安定したメンテナンス製品になることを目指しています。

本文

Boss‑CSS ― さまざまな書き方でスタイルを適用できる多相的「CSS‑in‑JS」ライブラリです。
ランタイム専用、静的抽出、クラス名、オブジェクトなど、API は馴染みのある形でフレームワークに依存しません。

1. 概要

  • 多相性 ― React・Solid・Next・Preact・Qwik・Stencil だけでなく、非 JavaScript 環境でも動作します。
  • 複数の構文 ― prop ベース、クラス名ベース、オブジェクトベース、準備済みコンポーネント、原始的 CSS ブロック。
  • 抽出戦略 ― インライン優先（デフォルト）、クラス名優先、完全ランタイム、ゼロランタイムコンパイル。
  • フレームワークに縛らない ― PostCSS CLI か単純な 
    boss-css compile
    コマンドで実行できます。

2. 構文

構文例備考
Prop based
<$$ color="red" hover={{color:'yellow'}} />
デフォルト、柔軟、完全型安全。
Class‑name based
<div className="color:red">…</div>
インラインスタイルのように動作しつつ、状態とメディアをサポート。
Object based
<span {...$$.style({color:'red', hover:{color:'purple'}})} />
prop スタイルと同等だがオブジェクトで記述。
Prepared components
$$.MyStyledContainer = $$.$({width:1200})

const C=()=> <$$.MyStyledContainer>…</$$.MyStyledContainer>
再利用可能なスタイル付き要素。
Raw CSS blocks
$$.css\
\n #el .cls { … }\n``		一時的なルールやカスタムセレクタ用。
Mixed
<$$.a className="display:flex" color={linkColor} hover={{background:'red'}}>Click me!</$$.a>
複数ソースからのスタイルを組み合わせる。

3. ランタイムと抽出

  • インライン優先（デフォルト） ― ほとんどのスタイルはインラインに、動的状態のみ CSS に。
  • クラス名優先 ― Tailwind のようにほぼすべてルールをクラス名で表現。
  • 完全ランタイム ― WYSIWYG エディタやデータ駆動型スタイル向け。
  • ゼロランタイムコンパイル ― 
    boss-css compile
    が 
    <$$>
    をネイティブ要素に変換し、インラインスタイルのみを残す。
# ソースをネイティブ HTML + スタイルオブジェクトへコンパイル
npx boss-css compile

4. ツール

CLIコマンド
Init
npx boss-css init
Build
npx boss-css build
Watch
npx boss-css watch
Compile
npx boss-css compile
Dev server
npx boss-css dev

5. プラグインと拡張性

  • イベント駆動コア ― 機能はすべてプラグイン化。
  • カスタムプロパティ ― 新しい CSS プロパティやショートハンド（例：
    bleed
    ）を追加可能。
  • AI 対応 ― ライブ設定からドキュメント、TypeScript 型、AI スキルを自動生成。
  • Fontsource ― 
    boss-css/fontsource
    でフォントをロード。
  • コンテナクエリ・ブレークポイント・デザイントークン・スタイル境界などはすべてプラグインベース。

6. デザイントークン

<$$ color="primary" />
<$$ color={$$.token.color.primary} />
<div className="color:primary"></div>

DTCG/Style Dictionary JSON、ローカルテーマ（

tokens={{...}}
）、アルファ接尾辞（
gray.600/60
）に対応。

7. TypeScript

  • .bo$$/index.d.ts
    に型安全な props を生成。
  • トークンと準備済みコンポーネントのオートコンプリート。
  • React Native 対応時はネイティブランタイム型も付与。

8. その他機能

機能説明
Spread helpers
const p = $$.$({color:'red'}); <$$ {...p} />
Target children
<$$ child={{'.title':{color:'blue'}}}>…</$$>
Variants & composition
$$(cx, cv, scv, sv)
あるいは 
className={{'display:none':isHidden}}
Server‑firstNext.js、SvelteKit 等で動作。
React Native同一 API でネイティブスタイル (
.bo$$/native.js
) を出力。
Tailwind companionBoss クラス名は衝突せず、
Bosswind
プラグインで Tailwind ライクショートハンドを追加可能。

9. よくある落とし穴

  • クラス名解析は静的文字列のみ対応。
  • ランタイム専用モードではクラス名解析が無効化される。
  • コンパイルモードは現在 JSX と主要抽出戦略を対象にしている。

10. Linting

npx boss-css lint

API の誤使用を防ぎ、スタイル規約の一貫性を保つ。

11. 締めくくり

Boss は従来型 CSS‑in‑JS とユーティリティクラス生成、ランタイム専用アプローチの中間に位置します。
「CSS‑in‑JS」という呼び名はその多様性を示すものであり、きれいな作者体験と任意のビルド戦略への適応が可能です。

リンク

Vite + React 環境で上記機能を試すには Playgroud をご利用ください。
楽しいスタイリングを！

同じ日のほかのニュース

一覧に戻る →

2026/03/03 7:32

メタ社のスマートグラスの裏側にいる作業員は、全てを見渡すことができます。

## Japanese Translation: > Metaの新しい「Meta Ray‑Ban」メガネは、仕事・旅行・リアルタイム翻訳・プライバシー制御を一つのAIアシスタントとして位置付けられています。EssilorLuxotticaと共同で製造され、スウェーデンで販売される予定で、2023‑24年に200万台から2025年秋には700万台へと売上が急増する見込みです。このデバイスはサーバー側で処理を行う必要があり、ローカルでの対話は不可能です。アプリは電話にインターネット接続がなくても、常にMetaサーバーにアクセスします。 > Metaのプライバシーポリシーでは、ユーザーが明示的にオプトインしない限り、音声・テキスト・画像・動画を自動的に取得することが許可されています。すべてのコンテンツはAIによって自動または手動でレビューされる可能性があり、オプトアウトの選択肢はありません。プライバシー専門家は、ユーザーがしばしばメガネのカメラがAIアシスタントに話しかけた際に録画していることを認識していない点を指摘し、透明性の欠如を強調しています。 > データ注釈作業はサブコントラクター（例：ナイロビのSama）に委託されており、従業員は極めてプライベートな資料（例：トイレ訪問、セックスシーン、銀行カード情報など）をレビューすることがあります。匿名化は不完全であり、照明が悪い場合には顔が見えてしまう可能性があります。Metaの利用規約では保存場所や詳細な取り扱いについて具体的に示されておらず、ヨーロッパの幹部はGDPR準拠がサーバー所在地よりもデータ保護基準に依存していると指摘し、法的責任はMeta Irelandに帰属すると述べています。 > スウェーデンのプライバシー保護機関はまだ製品をレビューしていないため、ユーザーが自分のデータがAIモデルのトレーニングや広告ターゲティングにどのように使用されるかを十分に理解できていないという懸念があります。MetaはクラウドベースのAI処理を維持しつつメガネの販売を継続する計画であり、これがGDPR監視の強化につながり、企業や消費者がウェアラブルAIデバイスにおけるより明確なオプトインデータポリシーを要求する動きを促す可能性があります。

2026/03/03 6:09

Macintoshへようこそ（お帰りなさい）。

## Japanese Translation: --- ## Summary 著者は、最近の macOS リリース―特に不安定な「macOS Tahoe」―が継続的なバグと頻繁な UI 変更に悩まされており、システムの安定性やユーザー体験を侵食していると主張しています。主要な問題点は次の通りです： - **Time‑Machine バックアップ** は古いスナップショットが削除されない限り失敗します。 - **Spotlight** のタグインデックスは不完全な結果しか返さず、インデックスを再構築したり Finder を再起動しても部分的にしか解決しません。 - **Finder** は Spotlight クエリ中や検索結果の更新時にハングします。また、外部ファイルが作成された後にフォルダ内容を更新できず（*Go To Folder* やパスオートコンプリートといった回避策も限定的で、しばしば Finder の再起動が必要になります）。 - **AirPods Pro** は約 1 秒後に音声の不具合を起こし、ファームウェアや OS アップグレードでは問題は解決されません。 - **全画面ウィンドウ** は Cmd + Tab で切り替えるとフォーカスが失われ、キーボードショートカットが機能せず、ウィンドウをクリックするまで Safari のビデオコントロールに影響します。 これらの問題は複数の macOS リリースおよび Mac モデル（著者自身の M1 Max 2021 を含む）で継続しており、Apple 自身のコンポーネントに起因することを示しています。著者は、アイコン変更やダークパターン UI の微調整といった Apple の迅速な美観修正が長期的信頼性を損ねる可能性があると警告しています。将来のアップデートでバグが対処されることは期待できるものの、安定性よりも視覚的洗練を優先することへの懸念があります。 **Rosetta 2 の段階的廃止** は ARM64 Linux コンテナサポートに依存している開発者にとってさらに悪影響を及ぼし、アプリケーションの互換性を脅かす恐れがあります。総じて、著者は Apple に対し、短期的な美観更新よりもソフトウェア安定性、謙虚さ、および長期的利用価値に再集中するよう訴えています

2026/03/03 5:30

ブリティッシュコロンビア州、時刻変更を廃止し一年中サマータイムを採用

## Japanese Translation: ### 改訂要約 ブリティッシュコロンビア州は、2026年11月1日付で「太平洋時間（Pacific Time）」と呼ばれる夏時間を永久に採用し、それ以降の時刻変更をすべて終了します。デービッド・エビー首相は月曜日にこの決定を発表し、3月8日（最後の春先進調整）が最終的な移行となると述べました。この動きは、2019年の公衆意見調査で回答者の93％が健康・安全上の理由から永久夏時間を支持したことに続くものです。エビー氏は子供やペットの睡眠不足、二度の時刻変更による車両事故増加を強調しました。歴史的に、BC州は1918年以降に時刻を切り替えてきました（法務長官ニキ・シャルマ氏が指摘）。州政府は最終変更前に住民に8か月の調整期間を設け、カリフォルニア州、オレゴン州、ワシントン州といった米国隣接州にも同様の法案採択を促しています。東部BC地域（例：デイソンクリーク）はすでに年間を通じて山岳標準時を観測しているため除外されます。新制度下では、バンクーバーの永久夏時間で最も早い日の出は6月5:06 AM、最も遅い日は12月9:08 AMです。夕暮れは12月5:14 PMから6月9:22 PMまで変動します。この変更は生活品質の向上、事故リスクの低減、およびイエローナイフ州と同じ年間を通じて夏時間を採用することでBC州を調和させることを目的としています。

**Boss‑CSS：** 私は別の「CSS‑in‑JS」ライブラリを作りました。 | そっか～ニュース