https://github.com/anuraghazra/tw-dynamic-interpolation
Experiment to extract PurgeCSS whitelists for dynamically interpolated tailwind classes via Typescript Compiler API
https://github.com/anuraghazra/tw-dynamic-interpolation
Last synced: 2 months ago
JSON representation
Experiment to extract PurgeCSS whitelists for dynamically interpolated tailwind classes via Typescript Compiler API
- Host: GitHub
- URL: https://github.com/anuraghazra/tw-dynamic-interpolation
- Owner: anuraghazra
- Created: 2021-03-13T18:44:37.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-03-15T15:53:24.000Z (about 4 years ago)
- Last Synced: 2025-02-14T05:30:19.022Z (4 months ago)
- Language: TypeScript
- Size: 18.6 KB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
## Experimental
Extract PurgeCSS whitelists for dynamically interpolated tailwind classes.
## How it works?
#### Step 1.
First we find all the interpolated `TemplateLiteralExpression` in the code, and transform them to wrap within a `as const` assertion.
```ts
type Color = "red" | "blue";
const t = `bg-${Color}-100`;
// -> const t = `bg-${Color}-100` as const;
```
#### Step 2.
And then we find and extract raw type information with the help of `ts.TypeChecker` and do some manipulation on the strings to get the final classes.
### Usage with tailwind
```js
const tsExtractor = require("purgecss-dynamic-extractor").default;
const content = [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
];
module.exports = {
purge: {
content: content,
options: {
safelist: [...tsExtractor(content)],
},
},
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
```
### Development
Install deps
```
yarn
```
Run script
```
yarn dev
```