Skip to content

Commit 80d774e

Browse files
kilbotkilbot
committed
extra tailwind updates
1 parent 6d6493e commit 80d774e

File tree

7 files changed

+422
-75
lines changed

7 files changed

+422
-75
lines changed

‎packages/settings/MIGRATION.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,22 @@ The prefix comes **BEFORE** the variant in v4:
3232

3333
All **226+ occurrences across 19 files** were updated, including proper handling of variants!
3434

35+
#### Deprecated Utilities Replaced
36+
Updated all deprecated v3 utilities to v4 equivalents:
37+
38+
**Opacity Modifiers:**
39+
- ✅ `wcpos:ring-opacity-5` → `wcpos:ring-black/5`
40+
- ✅ `wcpos:ring-opacity-75` → `wcpos:ring-white/75`
41+
42+
**Renamed Utilities:**
43+
- ✅ `wcpos:shadow-sm` → `wcpos:shadow-xs` (3 occurrences)
44+
45+
**No Issues Found:**
46+
- ✅ No deprecated flex-shrink/flex-grow utilities
47+
- ✅ No overflow-ellipsis (would use wcpos:text-ellipsis)
48+
- ✅ No standalone `rounded` (would be wcpos:rounded-sm)
49+
- ✅ No standalone `ring` (would be wcpos:ring-3)
50+
3551
#### PostCSS Configuration (`postcss.config.js`)
3652
- **Before**: `tailwindcss: {}`
3753
- **After**: `'@tailwindcss/postcss': {}`

‎packages/settings/PACKAGE-UPDATES.md‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
# Package Updates Analysis
2+
3+
## ✅ Fixed
4+
5+
### 1. **node-sass → sass** (CRITICAL)
6+
- ❌ `[email protected]` - **DEPRECATED**
7+
- ✅ `sass@^1.84.0` - Modern Dart Sass implementation
8+
9+
### 2. **@tanstack/react-query-devtools**
10+
- ✅ Updated to `^5.90.7` to match `@tanstack/react-query`
11+
12+
## 🚨 Deprecated Packages (Action Recommended)
13+
14+
### 1. **react-beautiful-dnd** (Current: 13.1.1)
15+
**Status:** DEPRECATED - No longer maintained
16+
17+
**Recommended Alternatives:**
18+
- **@dnd-kit/core** (Modern, TypeScript-first, actively maintained)
19+
- **@hello-pangea/dnd** (Community fork of react-beautiful-dnd)
20+
- **react-dnd** (More low-level, flexible)
21+
22+
**Impact:** Used for drag-and-drop in payment gateway ordering
23+
**Action:** Consider migrating to @dnd-kit or @hello-pangea/dnd
24+
25+
### 2. **@types/wordpress__components** (Current: 23.8.0)
26+
**Status:** DEPRECATED
27+
28+
**Note:** Types might be included in `@wordpress/components` now
29+
**Action:** Check if types are built-in with latest `@wordpress/components`
30+
31+
## 📦 Recommended Updates
32+
33+
### Minor/Patch Updates (Safe to Update)
34+
35+
| Package | Current | Latest | Priority |
36+
|---------|---------|--------|----------|
37+
| `@headlessui/react` | 2.2.0 | 2.2.9 | HIGH |
38+
| `@babel/core` | 7.24.7 | 7.28.5 | HIGH |
39+
| `@babel/plugin-transform-runtime` | 7.24.7 | 7.28.5 | HIGH |
40+
| `@babel/preset-env` | 7.24.7 | 7.28.5 | HIGH |
41+
| `@babel/preset-react` | 7.24.7 | 7.28.5 | HIGH |
42+
| `@babel/preset-typescript` | 7.24.7 | 7.28.5 | HIGH |
43+
| `@babel/runtime` | 7.24.7 | 7.28.4 | HIGH |
44+
| `typescript` | 5.4.5 | 5.9.3 | HIGH |
45+
| `webpack` | 5.92.0 | 5.102.1 | HIGH |
46+
| `postcss` | 8.4.38 | 8.5.6 | MEDIUM |
47+
| `autoprefixer` | 10.4.19 | 10.4.22 | MEDIUM |
48+
| `prettier` | 3.3.2 | 3.6.2 | MEDIUM |
49+
| `husky` | 9.0.11 | 9.1.7 | LOW |
50+
| `terser-webpack-plugin` | 5.3.10 | 5.3.14 | LOW |
51+
| `mini-css-extract-plugin` | 2.9.0 | 2.9.4 | LOW |
52+
| `ts-loader` | 9.5.2 | 9.5.4 | LOW |
53+
| `postcss-loader` | 8.1.1 | 8.2.0 | LOW |
54+
| `html-webpack-plugin` | 5.6.0 | 5.6.4 | LOW |
55+
| `fork-ts-checker-webpack-plugin` | 9.0.2 | 9.1.0 | LOW |
56+
| `jsdoc` | 4.0.3 | 4.0.5 | LOW |
57+
| `postcss-cli` | 11.0.0 | 11.0.1 | LOW |
58+
| `@types/lodash` | 4.17.5 | 4.17.20 | LOW |
59+
| `@transifex/native` | 7.1.3 | 7.1.4 | LOW |
60+
| `@transifex/react` | 7.1.3 | 7.1.4 | LOW |
61+
| `@transifex/cli` | 7.1.3 | 7.1.4 | LOW |
62+
63+
### Major Updates (⚠️ Test Thoroughly)
64+
65+
| Package | Current | Latest | Breaking Changes? |
66+
|---------|---------|--------|-------------------|
67+
| `react` | 18.3.1 | 19.2.0 | ⚠️ YES - React 19 has breaking changes |
68+
| `react-dom` | 18.3.1 | 19.2.0 | ⚠️ YES |
69+
| `@types/react` | 18.3.3 | 19.2.3 | ⚠️ YES |
70+
| `@types/react-dom` | 18.3.0 | 19.2.2 | ⚠️ YES |
71+
| `@wordpress/components` | 28.13.0 | 30.7.0 | ⚠️ Possibly |
72+
| `@wordpress/api-fetch` | 7.0.0 | 7.34.0 | ⚠️ Possibly |
73+
| `@wordpress/element` | 6.0.0 | 6.34.0 | ⚠️ Possibly |
74+
| `@wordpress/url` | 4.0.0 | 4.34.0 | ⚠️ Possibly |
75+
| `@wordpress/env` | 10.23.0 | 10.34.0 | ⚠️ Possibly |
76+
| `react-error-boundary` | 4.0.13 | 6.0.0 | ⚠️ YES |
77+
| `@typescript-eslint/eslint-plugin` | 7.13.0 | 8.46.4 | ⚠️ YES |
78+
| `@typescript-eslint/parser` | 7.13.0 | 8.46.4 | ⚠️ YES |
79+
| `babel-loader` | 9.1.3 | 10.0.0 | ⚠️ Possibly |
80+
| `webpack-cli` | 5.1.4 | 6.0.1 | ⚠️ Possibly |
81+
| `sass-loader` | 14.2.1 | 16.0.6 | ⚠️ Possibly |
82+
| `jest` | 29.7.0 | 30.2.0 | ⚠️ Possibly |
83+
| `@types/jest` | 29.5.12 | 30.0.0 | ⚠️ YES |
84+
85+
## 💡 Recommended Update Strategy
86+
87+
### Phase 1: Safe Updates (Do Now)
88+
```bash
89+
pnpm update @headlessui/react @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react @babel/preset-typescript @babel/runtime typescript webpack autoprefixer postcss prettier
90+
```
91+
92+
### Phase 2: WordPress Packages (Test Thoroughly)
93+
The WordPress packages have significant version jumps. Check release notes:
94+
- https://github.com/WordPress/gutenberg/releases
95+
96+
### Phase 3: React 19 Migration (Plan Carefully)
97+
**DO NOT UPDATE YET** without reviewing:
98+
- https://react.dev/blog/2024/12/05/react-19
99+
- Breaking changes in React 19
100+
- Compatibility with @wordpress/components
101+
102+
### Phase 4: Major Dev Tools (When Ready)
103+
- TypeScript ESLint v8
104+
- Jest v30
105+
- Webpack CLI v6
106+
- Babel Loader v10
107+
- Sass Loader v16
108+
109+
## 🔧 Migration Tasks
110+
111+
### 1. Replace react-beautiful-dnd
112+
**Priority:** MEDIUM
113+
**Complexity:** HIGH
114+
**Files affected:**
115+
- `src/screens/checkout/gateways.tsx`
116+
117+
**Options:**
118+
```bash
119+
# Option 1: Modern alternative
120+
pnpm add @dnd-kit/core @dnd-kit/sortable
121+
122+
# Option 2: Community fork (drop-in replacement)
123+
pnpm add @hello-pangea/dnd
124+
pnpm remove react-beautiful-dnd
125+
```
126+
127+
### 2. Remove @types/wordpress__components
128+
Check if types are now included in `@wordpress/[email protected]`
129+
130+
## 📝 Notes
131+
132+
1. **Tailwind CSS v4** and **React Query v5.90.7** are already updated ✅
133+
2. **node-sass** has been replaced with **sass** ✅
134+
3. WordPress packages have very old versions - major updates might require code changes
135+
4. React 19 is a significant update - requires migration planning
136+
5. Consider running `pnpm audit` to check for security vulnerabilities
137+
138+
## 🚀 Quick Update Command
139+
140+
For safe, non-breaking updates:
141+
```bash
142+
cd /Users/kilbot/Projects/woocommerce-pos/packages/settings
143+
pnpm update --latest @headlessui/react @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react @babel/preset-typescript @babel/runtime typescript webpack
144+
```
145+

‎packages/settings/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
"jest": "29.7.0",
5353
"jsdoc": "4.0.3",
5454
"mini-css-extract-plugin": "2.9.0",
55-
"node-sass": "9.0.0",
55+
"sass": "^1.84.0",
5656
"npm-run-all": "4.1.5",
5757
"postcss": "8.4.38",
5858
"postcss-cli": "11.0.0",

‎packages/settings/src/components/combobox.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -87,8 +87,7 @@ const Combobox = ({ options, onSearch, onChange, value, placeholder, loading }:
8787
'wcpos:text-left',
8888
'wcpos:focus:outline-none',
8989
'focus-visible:wcpos:ring-2',
90-
'focus-visible:wcpos:ring-white',
91-
'focus-visible:wcpos:ring-opacity-75',
90+
'focus-visible:wcpos:ring-white/75',
9291
'focus-visible:wcpos:ring-offset-2',
9392
'focus-visible:wcpos:ring-offset-teal-300',
9493
'wcpos:sm:text-sm',
@@ -147,8 +146,7 @@ const Combobox = ({ options, onSearch, onChange, value, placeholder, loading }:
147146
'wcpos:text-base',
148147
'wcpos:shadow-lg',
149148
'wcpos:ring-1',
150-
'wcpos:ring-black',
151-
'wcpos:ring-opacity-5',
149+
'wcpos:ring-black/5',
152150
'wcpos:focus:outline-none',
153151
'wcpos:sm:text-sm',
154152
])}
@@ -214,7 +212,7 @@ const Combobox = ({ options, onSearch, onChange, value, placeholder, loading }:
214212
) : null}
215213
</>
216214
)}
217-
</CB.Option>
215+
</CBOption>
218216
))
219217
)}
220218
</CBOptions>

‎packages/settings/src/components/select.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,11 +45,10 @@ function Select({ value, options, onChange }: SelectProps) {
4545
// 'wcpos:focus:outline-none',
4646
// 'focus-visible:wcpos:border-indigo-500',
4747
// 'focus-visible:wcpos:ring-2',
48-
// 'focus-visible:wcpos:ring-white',
49-
// 'focus-visible:wcpos:ring-opacity-75',
48+
// 'focus-visible:wcpos:ring-white/75',
5049
// 'focus-visible:wcpos:ring-offset-2',
5150
// 'focus-visible:wcpos:ring-offset-orange-300',
52-
'wcpos:shadow-sm',
51+
'wcpos:shadow-xs',
5352
'wcpos:focus:ring-indigo-500',
5453
'wcpos:focus:border-wp-admin-theme-color',
5554
'wcpos:sm:text-sm',
@@ -90,8 +89,7 @@ function Select({ value, options, onChange }: SelectProps) {
9089
'wcpos:text-base',
9190
'wcpos:shadow-lg',
9291
'wcpos:ring-1',
93-
'wcpos:ring-black',
94-
'wcpos:ring-opacity-5',
92+
'wcpos:ring-black/5',
9593
'wcpos:focus:outline-none',
9694
'wcpos:sm:text-sm',
9795
])}

‎packages/settings/src/screens/license/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ const License = () => {
146146
type="text"
147147
name="license-key"
148148
id="license-key"
149-
className="wcpos:mt-1 wcpos:focus:ring-indigo-500 wcpos:focus:border-wp-admin-theme-color wcpos:block wcpos:w-full wcpos:shadow-sm wcpos:sm:text-sm wcpos:border-gray-300 wcpos:rounded-md"
149+
className="wcpos:mt-1 wcpos:focus:ring-indigo-500 wcpos:focus:border-wp-admin-theme-color wcpos:block wcpos:w-full wcpos:shadow-xs wcpos:sm:text-sm wcpos:border-gray-300 wcpos:rounded-md"
150150
onChange={throttle(handleChange, 100)}
151151
/>
152152
</div>

0 commit comments

Comments
 (0)