@plumeria/codemod 18.2.1 → 18.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +72 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,11 +1,82 @@
|
|
|
1
1
|
# @plumeria/codemod
|
|
2
2
|
|
|
3
|
-
Codemods for
|
|
3
|
+
Codemods for moving a codebase onto Plumeria, and for migrating Plumeria APIs.
|
|
4
|
+
No install needed — run it with `npx`.
|
|
4
5
|
|
|
5
6
|
```sh
|
|
7
|
+
npx @plumeria/codemod migrate --from css-modules
|
|
6
8
|
npx @plumeria/codemod rename-prop classStyle sx
|
|
7
9
|
```
|
|
8
10
|
|
|
11
|
+
Commit before running, so the rewrite can be reverted with `git checkout`.
|
|
12
|
+
|
|
13
|
+
## `migrate --from css-modules`
|
|
14
|
+
|
|
15
|
+
Converts every `*.module.css` under the paths into a `*.styles.ts` beside it,
|
|
16
|
+
and rewrites the files importing it — the import, the `className` prop, the
|
|
17
|
+
class names, and `composes`:
|
|
18
|
+
|
|
19
|
+
```sh
|
|
20
|
+
npx @plumeria/codemod migrate --from css-modules [paths...]
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
```css
|
|
24
|
+
/* Card.module.css */
|
|
25
|
+
.base { font-size: 12px }
|
|
26
|
+
.card { composes: base; padding: 16px }
|
|
27
|
+
.card:hover { background: teal }
|
|
28
|
+
.card .card-title { color: red }
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
```ts
|
|
32
|
+
/* Card.styles.ts */
|
|
33
|
+
import * as css from '@plumeria/core';
|
|
34
|
+
|
|
35
|
+
export const styles = css.create({
|
|
36
|
+
base: { fontSize: 12 },
|
|
37
|
+
card: {
|
|
38
|
+
...css.marker('card', ':defined'),
|
|
39
|
+
padding: 16,
|
|
40
|
+
':hover': { background: 'teal' },
|
|
41
|
+
},
|
|
42
|
+
cardTitle: {
|
|
43
|
+
[css.extended('card', ':defined')]: { color: 'red' },
|
|
44
|
+
},
|
|
45
|
+
});
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
```diff
|
|
49
|
+
/* Card.tsx */
|
|
50
|
+
+ import '@plumeria/core';
|
|
51
|
+
- import styles from './Card.module.css';
|
|
52
|
+
+ import { styles } from './Card.styles';
|
|
53
|
+
|
|
54
|
+
- <div className={styles.card}>
|
|
55
|
+
- <span className={styles['card-title']} />
|
|
56
|
+
+ <div classStyle={[styles.base, styles.card]}>
|
|
57
|
+
+ <span classStyle={styles.cardTitle} />
|
|
58
|
+
</div>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
A descendant rule has no combinator to translate into, so it becomes
|
|
62
|
+
`css.marker` on the parent and `css.extended` on the child. Which class is which
|
|
63
|
+
is read from the stylesheet; no markup is inspected. Class names become
|
|
64
|
+
camel-case keys, and a bare pixel length loses its unit.
|
|
65
|
+
|
|
66
|
+
### What it reports instead of converting
|
|
67
|
+
|
|
68
|
+
```
|
|
69
|
+
src/Card.module.css
|
|
70
|
+
10:1 sibling-combinator .item + .item
|
|
71
|
+
A marker carries no order. Write the relation as a selector key.
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
Sibling combinators, `:global`, and a `composes` reaching into another file are
|
|
75
|
+
named rather than guessed at, and the original rule is left in place. The exit
|
|
76
|
+
code is 1 while anything remains, so the command composes with a script.
|
|
77
|
+
|
|
78
|
+
Pass `-d, --dry-run` to see the stylesheets and consumer counts without writing.
|
|
79
|
+
|
|
9
80
|
## `rename-prop`
|
|
10
81
|
|
|
11
82
|
Renames the styling prop across your source. The names are arguments, so it
|
|
@@ -70,5 +141,3 @@ withPlumeria(nextConfig, { styleProp: 'sx' });
|
|
|
70
141
|
// eslint.config.js
|
|
71
142
|
settings: { plumeria: { styleProp: 'sx' } }
|
|
72
143
|
```
|
|
73
|
-
|
|
74
|
-
Commit before running, so the rewrite can be reverted with `git checkout`.
|