Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add fixes and guide for tailwind v4 #698

Merged
merged 7 commits into from
Feb 13, 2025
Merged

feat: add fixes and guide for tailwind v4 #698

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
390d185
feat: export config as default
yue4u Feb 10, 2025
f1d9247
fix: export types for moduleResolution: "bundler"
yue4u Feb 10, 2025
bf9f372
doc: add tailwind v4 guide wip
yue4u Feb 10, 2025
b992280
fix: bump dev tailwind types and migrate to official types
yue4u Feb 10, 2025
f81be4a
fix: update snapshot
yue4u Feb 10, 2025
b2821b2
fix: turn off noisy lint rules for now
yue4u Feb 10, 2025
9f21409
fix: tailwind class condition
yue4u Feb 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .storybook/src/v4.0.0.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@ const {
} = require('@charcoal-ui/tailwind-config')

/**
* @type {import('tailwindcss/tailwind-config').TailwindConfig}
* @type {import('tailwindcss').Config}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

from tailwind 3.1

*/
module.exports = {
darkMode: false,
Expand Down
2 changes: 1 addition & 1 deletion .storybook/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ const { light, dark } = require('@charcoal-ui/theme')
const { createTailwindConfig } = require('@charcoal-ui/tailwind-config')

/**
* @type {import('tailwindcss/tailwind-config').TailwindConfig}
* @type {import('tailwindcss').Config}
*/
module.exports = {
darkMode: false,
Expand Down
6 changes: 4 additions & 2 deletions eslint.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ const tseslintConfig = tseslint.config(
'@typescript-eslint/no-inferrable-types': 'error',
'@typescript-eslint/ban-ts-comment': 'error',
'@typescript-eslint/prefer-namespace-keyword': 'error',
'@typescript-eslint/no-unsafe-assignment': 'error',
'@typescript-eslint/no-non-null-assertion': 'error',
},
}
Expand All @@ -49,13 +48,16 @@ const typescriptConfig = [
import: _import,
},
rules: {
'@typescript-eslint/no-unsafe-argument': 'off',
'@typescript-eslint/no-unsafe-member-access': 'off',
'@typescript-eslint/no-unsafe-assignment': 'off',
Comment on lines +51 to +53
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

さすが大変になってきたので一旦offにした。このエラーは伝播するので少しだけでもcastしたらすごいことになりますね

'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-unused-vars': [
'error',
{ argsIgnorePattern: '^_', ignoreRestSiblings: true },
],
'@typescript-eslint/no-unnecessary-condition': 'error',
'@typescript-eslint/strict-boolean-expressions': 'error',
'@typescript-eslint/strict-boolean-expressions': 'off',
'@typescript-eslint/consistent-type-definitions': 'off',
'@typescript-eslint/no-empty-interface': 'off',
'import/no-extraneous-dependencies': [
Expand Down
1 change: 1 addition & 0 deletions packages/icon-files/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"main": "./src/index.cjs",
"module": " ./src/index.js",
"exports": {
"types": "./src/index.d.ts",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for moduleResolution: "bundler"

"require": "./src/index.cjs",
"default": "./src/index.js"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/ssr.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@ const CAN_USE_DOM = typeof HTMLElement !== 'undefined'

// Workaround: `extends HTMLElement` の形式でないとbabelのトランスパイルがおかしくなる
if (__SERVER__ || !CAN_USE_DOM) {
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
// eslint-disable-next-line @typescript-eslint/no-explicit-any
globalThis.HTMLElement = class {} as any
}
4 changes: 2 additions & 2 deletions packages/react/docs/TokenV2DemoTailwind.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,10 @@ export default function TokenV2Tailwind() {
<div aria-label="Categories" role="tablist">
{categories.map((category) => (
<a
className={`text-text-tertiary hover:text-text-tertiary-hover active:text-text-tertiary-press text-body px-component-30 border-t-l cursor-pointer border-[0px] border-solid py-[13px] font-bold ${
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

元の実装が若干怪しかったでした

className={`text-body px-component-30 border-t-l cursor-pointer border-[0px] border-solid py-[13px] font-bold ${
category === selected
? 'border-selected text-text'
: 'border-[transparent]'
: 'border-[transparent] text-text-tertiary hover:text-text-tertiary-hover active:text-text-tertiary-press'
}`}
id={`category-${category}`}
role="tab"
Expand Down
10 changes: 5 additions & 5 deletions packages/react/docs/__snapshots__/TokenV2Demo.story.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -342,7 +342,7 @@ exports[`Storybook Tests > theme/Token v2 Demo > Tailwind 1`] = `
<a
aria-controls="panel-Illustration"
aria-selected={true}
className="text-text-tertiary hover:text-text-tertiary-hover active:text-text-tertiary-press text-body px-component-30 border-t-l cursor-pointer border-[0px] border-solid py-[13px] font-bold border-selected text-text"
className="text-body px-component-30 border-t-l cursor-pointer border-[0px] border-solid py-[13px] font-bold border-selected text-text"
id="category-Illustration"
onClick={[Function]}
role="tab"
Expand All @@ -352,7 +352,7 @@ exports[`Storybook Tests > theme/Token v2 Demo > Tailwind 1`] = `
<a
aria-controls="panel-Comic"
aria-selected={false}
className="text-text-tertiary hover:text-text-tertiary-hover active:text-text-tertiary-press text-body px-component-30 border-t-l cursor-pointer border-[0px] border-solid py-[13px] font-bold border-[transparent]"
className="text-body px-component-30 border-t-l cursor-pointer border-[0px] border-solid py-[13px] font-bold border-[transparent] text-text-tertiary hover:text-text-tertiary-hover active:text-text-tertiary-press"
id="category-Comic"
onClick={[Function]}
role="tab"
Expand All @@ -362,7 +362,7 @@ exports[`Storybook Tests > theme/Token v2 Demo > Tailwind 1`] = `
<a
aria-controls="panel-Novel"
aria-selected={false}
className="text-text-tertiary hover:text-text-tertiary-hover active:text-text-tertiary-press text-body px-component-30 border-t-l cursor-pointer border-[0px] border-solid py-[13px] font-bold border-[transparent]"
className="text-body px-component-30 border-t-l cursor-pointer border-[0px] border-solid py-[13px] font-bold border-[transparent] text-text-tertiary hover:text-text-tertiary-hover active:text-text-tertiary-press"
id="category-Novel"
onClick={[Function]}
role="tab"
Expand All @@ -372,7 +372,7 @@ exports[`Storybook Tests > theme/Token v2 Demo > Tailwind 1`] = `
<a
aria-controls="panel-3D"
aria-selected={false}
className="text-text-tertiary hover:text-text-tertiary-hover active:text-text-tertiary-press text-body px-component-30 border-t-l cursor-pointer border-[0px] border-solid py-[13px] font-bold border-[transparent]"
className="text-body px-component-30 border-t-l cursor-pointer border-[0px] border-solid py-[13px] font-bold border-[transparent] text-text-tertiary hover:text-text-tertiary-hover active:text-text-tertiary-press"
id="category-3D"
onClick={[Function]}
role="tab"
Expand All @@ -382,7 +382,7 @@ exports[`Storybook Tests > theme/Token v2 Demo > Tailwind 1`] = `
<a
aria-controls="panel-Shopping"
aria-selected={false}
className="text-text-tertiary hover:text-text-tertiary-hover active:text-text-tertiary-press text-body px-component-30 border-t-l cursor-pointer border-[0px] border-solid py-[13px] font-bold border-[transparent]"
className="text-body px-component-30 border-t-l cursor-pointer border-[0px] border-solid py-[13px] font-bold border-[transparent] text-text-tertiary hover:text-text-tertiary-hover active:text-text-tertiary-press"
id="category-Shopping"
onClick={[Function]}
role="tab"
Expand Down
23 changes: 20 additions & 3 deletions packages/tailwind-config/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,24 @@ yarn
yarn add -D @charcoal-ui/tailwind-config
```

## 使い方
## 使い方 tailwind v4 (WIP)

Tailwind v4 の[@config](https://tailwindcss.com/docs/functions-and-directives#config-directive)経由で引き続既存の設定を利用できます。

公式の[マイグレーションガイド](https://tailwindcss.com/docs/upgrade-guide)を参考した上以下の対応を行なってください。

```diff
- @import 'tailwindcss';
/* 現時点@layer 未対応 */
+ @import 'tailwindcss/theme.css';
+ @import 'tailwindcss/utilities.css';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

components を import してないのはなぜですか？（ これ入れないと https://github.com/tailwindlabs/tailwindcss-typography とかを使ってるプロジェクトは壊れるので可能な限り @import 'tailwindcss' したほうが良いと思います ）

Copy link
Contributor Author

@yue4u yue4u Feb 10, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tailwindcss/components.css存在していなさそうでした。

tailwindlabs/tailwindcss#15723

スクリーンショット 2025-02-10 17 43 16

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

おや、なるほど。

しかし @layer components が定義されないことで同じ問題が起こるのでは、と思っています（いずれにせよ @import 'tailwindcss' を避けるのはリスキー ）
https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/index.css

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@yue4u これって解決しましたか？ @import 'tailwindcss' を定義するのかしないのかという部分

Copy link
Contributor Author

@yue4u yue4u Feb 13, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

このMRは一時的対策で、PRで書いた手順で動くよーという意味であって完全にリスク回避するものではないです。つまり私からみて一旦これ以上できることはないです。

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

了解です


+ @config '@charcoal-ui/tailwind-config' /** デフォルトのconfig使う場合 */
/* また */
+ @config '../tailwind.config.ts' /** v3 configへのpath */
```

## 使い方 tailwind v2,v3

tailwind.config.js の中で `require` して使います。

Expand All @@ -26,7 +43,7 @@ tailwind.config.js の中で `require` して使います。
const { config } = require('@charcoal-ui/tailwind-config')

/**
* @type {import('tailwindcss/tailwind-config').TailwindConfig}
* @type {import('tailwindcss').Config}
*/
module.exports = {
darkMode: false,
Expand All @@ -42,7 +59,7 @@ const { light, dark } = require('@charcoal-ui/theme')
const { createTailwindConfig } = require('@charcoal-ui/tailwind-config')

/**
* @type {import('tailwindcss/tailwind-config').TailwindConfig}
* @type {import('tailwindcss').Config}
*/
module.exports = {
darkMode: false,
Expand Down
2 changes: 1 addition & 1 deletion packages/tailwind-config/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"postcss-selector-parser": "^6.0.9",
"react": "^18.3.1",
"rimraf": "^3.0.2",
"tailwindcss": "^3.0.5",
"tailwindcss": "^3.4.17",
"tsup": "^6.5.0",
"typescript": "^4.9.5",
"vitest": "^2.0.2"
Expand Down
2 changes: 1 addition & 1 deletion packages/tailwind-config/src/Custom.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const { light, dark } = require('@charcoal-ui/theme')
const { createTailwindConfig } = require('@charcoal-ui/tailwind-config')

/**
* @type {import('tailwindcss/tailwind-config').TailwindConfig}
* @type {import('tailwindcss').Config}
*/
module.exports = {
darkMode: false,
Expand Down
19 changes: 18 additions & 1 deletion packages/tailwind-config/src/README.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,24 @@ bun add -D @charcoal-ui/tailwind-config

`@charcoal-ui/tailwind-config` は、Tailwind に `@charcoal-ui/foundation` を適用します。

## 使い方
## 使い方 tailwind v4 (WIP)

Tailwind v4 の[@config](https://tailwindcss.com/docs/functions-and-directives#config-directive)経由で引き続既存の設定を利用できます。

公式の[マイグレーションガイド](https://tailwindcss.com/docs/upgrade-guide)を参考した上以下の対応を行なってください。

```diff
- @import 'tailwindcss';
/* 現時点@layer 未対応 */
+ @import 'tailwindcss/theme.css';
+ @import 'tailwindcss/utilities.css';

+ @config '@charcoal-ui/tailwind-config' /** デフォルトのconfig使う場合 */
/* また */
+ @config '../tailwind.config.ts' /** v3 configへのpath */
```

## 使い方 tailwind v2,v3

`tailwind.config.js` の中で `require` して使います。

Expand Down
Loading
Loading