Skip to content

Commit 966840e

Browse files
committed
docs: improve readme
1 parent 747db58 commit 966840e

1 file changed

Lines changed: 51 additions & 4 deletions

File tree

README.md

Lines changed: 51 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ Usage:
5050
$ css-codemod [files]
5151

5252
Commands:
53-
[files] File path to transform. Glob patterns are supported.
53+
[files] File path to transform. Note glob patterns are supported but must be wrapped in quotes.
5454

5555
For more info, run any command with the `--help` flag:
5656
$ css-codemod --help
@@ -63,13 +63,60 @@ Options:
6363
Examples:
6464
css-codemod ./a.css
6565
css-codemod ./src/a.css
66-
css-codemod ./src/**/*.css
67-
css-codemod ./**/*.css
66+
css-codemod "./src/**/*.css"
67+
css-codemod "./**/*.css"
6868
```
6969

7070
## API
7171

72-
TODO(Document transform function API)
72+
### `Transform`
73+
74+
Define a transform function. This type is provided to explicitly type the exported `transform` function. In general, this should be the only type that needs to be imported. The expected return value is either a CSS string or `null`. When returned a CSS string that will be written back to the original file. When returned `null`, nothing happens and the original file is skipped.
75+
76+
### `TransformFileInfo`
77+
78+
The first argument passed to the `transform` function. It's an object with metadata about the current file being processed by the transform.
79+
80+
- `path`: the resolved path of the file being transformed.
81+
- `source`: the file contents source of the file being transformed.
82+
83+
### `TransformAPI`
84+
85+
The second argument passed to the `transform` function. It's an object with helpers provided by `css-codemod` to perform transformations.
86+
87+
- `parse`: parse a raw CSS string into an AST. This returns the root node of the underlying abstract syntax tree to perform mutations. This is performed with [PostCSS](https://postcss.org/) so the returned node is a PostCSS [Root](https://postcss.org/api/#root) node. Refer to the [PostCSS API documentation](https://postcss.org/api/) for documentation and various helpers.
88+
89+
### Example
90+
91+
```ts
92+
// transform.ts
93+
94+
import { Transform } from 'css-codemod';
95+
96+
export const transform: Transform = (fileInfo, api) => {
97+
// Convert the file source into an AST using the provided helper.
98+
const root = api.parse(fileInfo.source);
99+
100+
// Use PostCSS helpers to walk through each descendant node
101+
// Docs: https://postcss.org/api/#root-walk
102+
root.walk(node => {
103+
// Example logic to change all `color` declarations to have
104+
// a value of red.
105+
//
106+
// For example:
107+
// `color: green;` -> `color: red;`
108+
// `color: #fff;` -> `color: red;`
109+
// `color: rgb(0, 0, 0);` -> `color: red;`
110+
if (node.type === 'decl' && node.prop === 'color') {
111+
node.value = 'red';
112+
}
113+
});
114+
115+
// Convert the mutated AST back into a string.
116+
// Since a string is returned this will be written back to the file.
117+
return root.toString();
118+
};
119+
```
73120

74121
### PostCSS
75122

0 commit comments

Comments
 (0)