feat!: remove deprecated tokens and drop others as v1 breaking changes

MIGRATE_TO_V1.md

@@ -0,0 +1,135 @@
+# v1 移行ガイド
+
+このガイドでは、`@digital-go-jp/tailwind-theme-plugin` を v1 へアップグレードする際に必要な対応をまとめています。
+
+## 破壊的変更一覧
+
+### 1. `lineHeight` トークンの削除（deprecated トークンの最終削除）
+
+ドット記法による `lineHeight` トークン（`leading-1-0`、`leading-1-2` など）は以前より deprecated となっていましたが、v1 で完全に削除されました。
+
+アンダースコア記法のトークンに置き換えてください。
+
+| 削除されたトークン | 代替トークン |
+| ------------------ | ------------ |
+| `leading-1-0`      | `leading-100` |
+| `leading-1-2`      | `leading-120` |
+| `leading-1-3`      | `leading-130` |
+| `leading-1-4`      | `leading-140` |
+| `leading-1-5`      | `leading-150` |
+| `leading-1-6`      | `leading-160` |
+| `leading-1-7`      | `leading-170` |
+| `leading-1-75`     | `leading-175` |
+
+---
+
+### 2. `screens` トークンの削除
+
+`screens` トークン（`desktop`、`desktop-admin`）はプラグインから削除されました。プロジェクト側で設定してください。
+
+#### Tailwind CSS v3
+
+`tailwind.config.js` の `theme.extend.screens` で設定してください。
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    extend: {
+      screens: {
+        desktop: "48em",
+        "desktop-admin": "62em",
+      },
+    },
+  },
+}
+```
+
+#### Tailwind CSS v4
+
+CSS ファイルの `@theme` で `--breakpoint-*` カスタムプロパティを使って設定してください。
+
+```css
+@theme {
+  --breakpoint-desktop: 48em;
+  --breakpoint-desktop-admin: 62em;
+}
+```
+
+---
+
+### 3. `listStyleType` トークンの削除
+
+`listStyleType` トークン（`list-lower-latin`、`list-circle`、`list-square`）はプラグインから削除されました。Tailwind CSS の arbitrary values を使って代替してください。
+
+#### Tailwind CSS v3
+
+`tailwind.config.js` の `theme.extend.listStyleType` で設定するか、arbitrary values を使ってください。
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    extend: {
+      listStyleType: {
+        'lower-latin': 'lower-latin',
+        circle: 'circle',
+        square: 'square',
+      },
+    },
+  },
+}
+```
+
+または arbitrary values を使う場合：
+
+```html
+<!-- 変更前 -->
+<ul class="list-lower-latin"> ... </ul>
+<ul class="list-circle"> ... </ul>
+<ul class="list-square"> ... </ul>
+
+<!-- 変更後 -->
+<ul class="list-[lower-latin]"> ... </ul>
+<ul class="list-[circle]"> ... </ul>
+<ul class="list-[square]"> ... </ul>
+```
+
+#### Tailwind CSS v4
+
+Arbitrary values を使ってください。
+
+```html
+<!-- 変更前 -->
+<ul class="list-lower-latin"> ... </ul>
+<ul class="list-circle"> ... </ul>
+<ul class="list-square"> ... </ul>
+
+<!-- 変更後 -->
+<ul class="list-[lower-latin]"> ... </ul>
+<ul class="list-[circle]"> ... </ul>
+<ul class="list-[square]"> ... </ul>
+```
+
+---
+
+### 4. `aspectRatio` トークンの削除
+
+`aspectRatio` トークン（`aspect-1/1`、`aspect-3/2`、`aspect-16/9`）はプラグインから削除されました。Tailwind CSS の arbitrary values を使って代替してください。
+
+```html
+<!-- 変更前 -->
+<div class="aspect-1/1"> ... </div>
+<div class="aspect-3/2"> ... </div>
+<div class="aspect-16/9"> ... </div>
+
+<!-- Tailwind CSS v3 の場合 -->
+<div class="aspect-square"> ... </div>
+<div class="aspect-[3/2]"> ... </div>
+<div class="aspect-video"> ... </div>
+
+<!-- Tailwind CSS v4 の場合 -->
+<div class="aspect-square"> ... </div>
+<div class="aspect-3/2"> ... </div>
+<div class="aspect-video"> ... </div>
+```

README.md

@@ -37,6 +37,10 @@ Tailwind CSS の設定をしている CSS ファイルで以下のように設
 @import '@digital-go-jp/tailwind-theme-plugin/v4';
 ```
 
+## v1 への移行
+
+v0 から v1 へアップグレードする際は、[移行ガイド](./MIGRATE_TO_V1.md)を参照してください。
+
 ## 使用例
 
 - [examples](./examples/) ディレクトリ

examples-v4/src/tailwind-theme-plugin/v4.css

@@ -1,7 +1,3 @@
-/* このファイルは自動生成されています。直接編集しないでください。 */
-/* 生成元: scripts/generate-v4-theme.ts */
-/* 生成日時: 2026-01-27T00:24:28.991Z */
-
 @theme {
   /* Colors */
   --color-white: #ffffff;
@@ -188,14 +184,6 @@
   --leading-160: 1.6;
   --leading-170: 1.7;
   --leading-175: 1.75;
-  --leading-1-0: 1;
-  --leading-1-2: 1.2;
-  --leading-1-3: 1.3;
-  --leading-1-4: 1.4;
-  --leading-1-5: 1.5;
-  --leading-1-6: 1.6;
-  --leading-1-7: 1.7;
-  --leading-1-75: 1.75;
 
   /* Border radius */
   --radius-4: 0.25rem;
@@ -577,16 +565,3 @@
   font-weight: 400;
   line-height: 1.5;
 }
-
-/* List style type utilities */
-@utility list-lower-latin {
-  list-style-type: lower-latin;
-}
-
-@utility list-circle {
-  list-style-type: circle;
-}
-
-@utility list-square {
-  list-style-type: square;
-}

examples/tailwind-theme-plugin/index.es.js

@@ -9,7 +9,7 @@ function p() {
     }), Object.defineProperty(e, "default", {
       enumerable: !0,
       get: function() {
-        return f;
+        return r;
       }
     });
     function i(n, t) {
@@ -19,21 +19,21 @@ function p() {
       };
     }
     i.withOptions = function(n, t = () => ({})) {
-      const r = function(g) {
+      const f = function(g) {
         return {
           __options: g,
           handler: n(g),
           config: t(g)
         };
       };
-      return r.__isOptionsFunction = !0, r.__pluginFunction = n, r.__configFunction = t, r;
+      return f.__isOptionsFunction = !0, f.__pluginFunction = n, f.__configFunction = t, f;
     };
-    const f = i;
+    const r = i;
   })(l)), l;
 }
-var c;
-function s() {
-  return c || (c = 1, (function(e) {
+var h;
+function b() {
+  return h || (h = 1, (function(e) {
     Object.defineProperty(e, "__esModule", {
       value: !0
     }), Object.defineProperty(e, "default", {
@@ -42,24 +42,24 @@ function s() {
         return n;
       }
     });
-    const i = /* @__PURE__ */ f(p());
-    function f(t) {
+    const i = /* @__PURE__ */ r(p());
+    function r(t) {
       return t && t.__esModule ? t : {
         default: t
       };
     }
     const n = i.default;
   })(a)), a;
 }
-var o, h;
+var o, c;
 function u() {
-  if (h) return o;
-  h = 1;
-  let e = s();
+  if (c) return o;
+  c = 1;
+  let e = b();
   return o = (e.__esModule ? e : { default: e }).default, o;
 }
-var b = u();
-const H = /* @__PURE__ */ m(b), W = H(() => {
+var s = u();
+const H = /* @__PURE__ */ m(s), W = H(() => {
 }, {
   theme: {
     extend: {
@@ -687,15 +687,7 @@ const H = /* @__PURE__ */ m(b), W = H(() => {
         150: "1.5",
         160: "1.6",
         170: "1.7",
-        175: "1.75",
-        "1-0": "1",
-        "1-2": "1.2",
-        "1-3": "1.3",
-        "1-4": "1.4",
-        "1-5": "1.5",
-        "1-6": "1.6",
-        "1-7": "1.7",
-        "1-75": "1.75"
+        175: "1.75"
       },
       borderRadius: {
         4: "0.25rem",
@@ -707,20 +699,6 @@ const H = /* @__PURE__ */ m(b), W = H(() => {
         32: "2rem",
         full: "624.9375rem"
       },
-      screens: {
-        desktop: "48em",
-        "desktop-admin": "62em"
-      },
-      listStyleType: {
-        "lower-latin": "lower-latin",
-        circle: "circle",
-        square: "square"
-      },
-      aspectRatio: {
-        "1/1": "1 / 1",
-        "3/2": "3 / 2",
-        "16/9": "16 / 9"
-      },
       boxShadow: {
         1: "0 2px 8px 1px rgba(0,0,0,0.1), 0 1px 5px 0 rgba(0,0,0,0.3)",
         2: "0 2px 12px 2px rgba(0,0,0,0.1), 0 1px 6px 0 rgba(0,0,0,0.3)",

scripts/generate-theme.ts

@@ -630,15 +630,6 @@ const themeConfig: Config["theme"] = {
     160: String(tokens.LineHeight[160].$value),
     170: String(tokens.LineHeight[170].$value),
     175: String(tokens.LineHeight[175].$value),
-    // NOTE: Remove the old keys later
-    "1-0": String(tokens.LineHeight[100].$value),
-    "1-2": String(tokens.LineHeight[120].$value),
-    "1-3": String(tokens.LineHeight[130].$value),
-    "1-4": String(tokens.LineHeight[140].$value),
-    "1-5": String(tokens.LineHeight[150].$value),
-    "1-6": String(tokens.LineHeight[160].$value),
-    "1-7": String(tokens.LineHeight[170].$value),
-    "1-75": String(tokens.LineHeight[175].$value),
   },
   borderRadius: {
     4: tokens.BorderRadius[4].$value,
@@ -650,20 +641,6 @@ const themeConfig: Config["theme"] = {
     32: tokens.BorderRadius[32].$value,
     full: tokens.BorderRadius.Full.$value,
   },
-  screens: {
-    desktop: "48em",
-    "desktop-admin": "62em",
-  },
-  listStyleType: {
-    "lower-latin": "lower-latin",
-    circle: "circle",
-    square: "square",
-  },
-  aspectRatio: {
-    "1/1": "1 / 1",
-    "3/2": "3 / 2",
-    "16/9": "16 / 9",
-  },
   boxShadow: {
     1: tokens.Elevation[1].$value,
     2: tokens.Elevation[2].$value,

scripts/generate-v4-theme.ts

@@ -528,14 +528,6 @@ const lineHeight = {
   160: String(tokens.LineHeight[160].$value),
   170: String(tokens.LineHeight[170].$value),
   175: String(tokens.LineHeight[175].$value),
-  "1-0": String(tokens.LineHeight[100].$value),
-  "1-2": String(tokens.LineHeight[120].$value),
-  "1-3": String(tokens.LineHeight[130].$value),
-  "1-4": String(tokens.LineHeight[140].$value),
-  "1-5": String(tokens.LineHeight[150].$value),
-  "1-6": String(tokens.LineHeight[160].$value),
-  "1-7": String(tokens.LineHeight[170].$value),
-  "1-75": String(tokens.LineHeight[175].$value),
 };
 
 const borderRadius = {
@@ -560,12 +552,6 @@ const boxShadow = {
   8: tokens.Elevation[8].$value,
 };
 
-const listStyleType = {
-  "lower-latin": "lower-latin",
-  circle: "circle",
-  square: "square",
-};
-
 function generateColorVariables(): string {
   const lines: string[] = [];
 
@@ -650,19 +636,6 @@ function generateFontSizeUtilities(): string {
   return lines.join("\n");
 }
 
-function generateListStyleTypeUtilities(): string {
-  const lines: string[] = [];
-
-  for (const [name, value] of Object.entries(listStyleType)) {
-    lines.push(`@utility list-${name} {`);
-    lines.push(`  list-style-type: ${value};`);
-    lines.push(`}`);
-    lines.push(``);
-  }
-
-  return lines.join("\n");
-}
-
 function generateV4CSS(): string {
   return `@theme {
   /* Colors */
@@ -685,9 +658,7 @@ ${generateShadowVariables()}
 }
 
 /* Font size utilities */
-${generateFontSizeUtilities()}
-/* List style type utilities */
-${generateListStyleTypeUtilities()}`;
+${generateFontSizeUtilities()}`;
 }
 
 const output = generateV4CSS();