You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This plugin only transforms utility class names that contain`-` or `:`, such as `w-32`, `before:h-[300px]`, `after:dark:via-[#0141ff]/40`. Some class names like `flex`, `relative` will not be transformed.
99
+
This plugin will only transform utility classes containing`-` or `:`, such as `w-32`, `before:h-[300px]`, `after:dark:via-[#0141ff]/40`. Some class names like `flex`, `relative` will not be transformed.
98
100
99
-
The plugin **traverses** all `html class` attributes and `js`string literals to find the utility classes generated by `tailwindcss`.
101
+
Because the plugin will **traverse** all `html class` attributes and class names in `js` literals, looking for utility classes generated by `tailwindcss`.
100
102
101
-
Transforming string literals like the following in `js` is dangerous:
103
+
Transforming `js` literals like the following is dangerous:
102
104
103
105
```js
104
106
constinnerHTML='i\'m flex and relative and grid'
105
107
document.body.innerHTML= innerHTML
106
108
```
107
109
108
-
Thus, only strings containing `-` or `:` will be transformed.
110
+
Therefore, only strings containing `-` or `:` will be transformed.
109
111
110
-
Additionally, the plugin provides the `twIgnore`option, which allows some strings to be skipped during the `Mangle`.
112
+
Additionally, the plugin provides an option `twIgnore` to skip `Mangle` for certain strings.
# Need to Extract More Metadata When Using Tailwindcss
2
+
3
+
## Need More Information
4
+
5
+
Currently, when `tailwindcss` extracts `Candidate` from files/content, it only extracts some string information and does not record the location.
6
+
7
+
```html
8
+
<divclass="flex bg-slate-500/25" />
9
+
↑ ↑ ↑ ↑
10
+
token1 token2
11
+
```
12
+
13
+
However, this makes it difficult for us to perform a project-level overall analysis.
14
+
15
+
We cannot know how many tokens are extracted from a file, nor do we know in which files the extracted tokens exist (the relationship between files and tokens is usually many-to-many).
16
+
17
+
Moreover, if there is a need to modify the generated product from the original source code later, we need to know the original position where the token was extracted.
18
+
19
+
For example, transforming the extracted token string into an object like the one below:
20
+
21
+
```ts
22
+
interfaceCandidate {
23
+
value:string
24
+
file:string
25
+
start:number
26
+
end:number
27
+
}
28
+
```
29
+
30
+
Here, `value` is the original string value, `file` is the file from which it was extracted, and `start` and `end` represent the position of this `token` in the file.
31
+
32
+
This way, we can make precise modifications, such as:
33
+
34
+
```diff filename="diff"
35
+
// before
36
+
- const className = `gap-y-4 bg-zinc-800/30`;
37
+
// after
38
+
+ const className = `a b`;
39
+
```
40
+
41
+
Otherwise, currently, to make modifications, we have to apply the entire `Candidates` (`Set<string>`) to all files for replacement, which often leads to many unintended changes.
42
+
43
+
With this, we only need to find the corresponding file and modify the nodes corresponding to its `start` and `end` to achieve the goal.
44
+
45
+
In fact, this functionality ultimately resembles the `compile-class` feature of `unocss`[compile-class](https://unocss.dev/transformers/compile-class).
0 commit comments