Question 1

git diff --check が失敗する原因となる、@google/design.md の css-tailwind エクスポート内の余分な末尾改行はどのように修正すればよいですか？

Accepted Answer

`@google/design.md@0.3.0` では、`serializeTailwindV4()` はすでに末尾に改行を1つ追加していますが、CLI は `console.log()` を使用しているため、さらにもう1つ追加されてしまいます。`css-tailwind` のエクスポート出力について、`console.log(output)` を `process.stdout.write(output)` に置き換えてエクスポーターを修正してください。修正を含むリリースが利用可能になるまでは、エクスポート後に生成ファイルを正規化してください:

```bash
./node_modules/.bin/designmd export --format css-tailwind DESIGN.md \
  | perl -0pe 's/
+\z/
/' > out.css
```

ファイルがちょうど1つの改行で終わっていることを確認してください:

```bash
python3 -c "from pathlib import Path; b=Path('out.css').read_bytes(); print(len(b)-len(b.rstrip(b'\n')))"
```

期待される結果は `1` です。これにより、チェックインされた生成 CSS に対して `git diff --check` などの厳密な空白チェックが失敗するのを防げます。

Question 2

DESIGN.mdからデザイントークンをネイティブのCSSカスタムプロパティとしてエクスポートするにはどうすればよいですか？

Accepted Answer

`css-vars` エクスポート形式を使用します:

```bash
npx @google/design.md export --format css-vars DESIGN.md > design.tokens.css
```

これにより、CSS カスタムプロパティを含む `:root` ブロックが生成されます。例:

```css
:root {
  --color-primary: #1A1C1E;
  --spacing-md: 16px;
}
```

すべての変数に名前空間プレフィックスを追加するには、`--prefix` を使用します:

```bash
npx @google/design.md export --format css-vars --prefix ds DESIGN.md > design.tokens.css
```

ダークテーマやメディアクエリのバリアントは初期実装には含まれていません。サポートは PR #109 で追加されました。

Question 3

量子コンピューティングとは何か、簡単な言葉で説明してください。

Accepted Answer

通常のコンピューターは、1（オン）または0（オフ）のいずれかのビットを使用します。量子コンピューターは量子ビットを使用し、量子ビットは結果が測定されるまで重ね合わせと呼ばれる複合的な状態で存在することができます。これにより、量子コンピューターは特定の複雑な計算において多数の可能性を一度に探索することができますが、通常のコンピューターを単に高速化したものではありません。

Question 4

@google/design.md lint を実行したときに "raw.match is not a function" エラーを修正するにはどうすればよいですか？

Accepted Answer

このクラッシュは、DESIGN.md 内の `spacing` 値が `unit: 8` のような YAML の文字列以外の値である場合に、@google/design.md@0.2.0 で発生します。ランタイム型ガードの修正が含まれる v0.3.0 にアップグレードしてください。回避策として、すべての寸法値を引用符で囲んでください：

```yaml
spacing:
  unit: "8"
  "1": "4px"
```

`unit: 8` や引用符なしの `unit: 8px` ではなく、`unit: "8px"` を使用してください。

Question 5

Color と Dimension の型定義を spec-config.yaml からデータ駆動にするにはどうすればよいですか？

Accepted Answer

v0.4.0 にアップグレードします。このバージョンでは、プリミティブ型は `spec-config.yaml` からレンダリングされます。変更を手動で適用する場合は、たとえば次のように `types` セクションを追加します:

```yaml
types:
  Color:
    description: "A color value is any valid CSS color string."
    formats:
      - "Hex: #RGB, #RGBA, #RRGGBB, #RRGGBBAA"
      - "Named colors: red, cornflowerblue, transparent"
      - "Functional: rgb(), rgba(), hsl(), hsla(), hwb()"
      - "Wide-gamut: oklch(), oklab(), lch(), lab()"
      - "Mixing: color-mix(in srgb, ...)"
    note: "All color values are internally converted to sRGB for WCAG contrast checking."
  Dimension:
    description: "A dimension value is a string with a unit suffix."
    units: [px, em, rem]
```

次に、`spec.mdx` から静的な Color と Dimension の説明文を削除し、`typography_properties` のレンダリングと同じ方法で `spec-config.yaml` 内の `types` を反復処理するように spec ジェネレーターを更新します。spec-config と spec-generator のテストを実行して、出力を確認します。

design.md

概要

README プレビュー

FAQ (5)

同类型项目

hermes-agent

firecrawl

go

markitdown