Skip to content

Commit acc2f24

Browse files
committed
clean up type
1 parent eeb231c commit acc2f24

File tree

5 files changed

+30
-86
lines changed

5 files changed

+30
-86
lines changed

‎README.md

Lines changed: 11 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -21,52 +21,21 @@ npm install tailwind-utils
2121

2222
### Usage
2323

24-
2524
API choice 1:
2625

2726
```ts
28-
import { parse, create, Definition } from 'tailwind-utils'
29-
import theme from './tailwind-theme.js'
30-
31-
const definition:Definition = parse(theme, 'md:w-48');
32-
// { responsiveModifier: 'md', property: 'width', prefix: 'w', value: 48 }
33-
34-
const className:string = create(theme, { responsiveModifier: 'md', pseudoModifier: 'hover', property: 'backgroundColor', value: 'red-500' })
35-
// 'md:hover:bg-48'
36-
```
37-
38-
API choice 2:
27+
import createUtils from 'tailwind-utils';
28+
import config from './tailwind.config.js';
3929

40-
```ts
41-
import { ClassName, Definition } from 'tailwind-utils'
42-
import theme from './tailwind-theme.js'
30+
const { parse, classname } = createUtils(config);
4331

44-
const { parse, create } = ClassName(theme)
32+
const definition = parse('md:w-48');
33+
// { responsiveModifier: 'md', prefix: 'w', property: 'width', value: '12rem' }
4534

46-
const definition:Definition = parse('md:w-48');
47-
// { responsiveModifier: 'md', property: 'width', prefix: 'w', value: 48 }
48-
49-
const className:string = create({ responsiveModifier: 'md', pseudoModifier: 'hover', property: 'backgroundColor', value: 'red-500' })
50-
// 'md:hover:bg-48'
35+
const className = classname({
36+
pseudoModifier: 'hover',
37+
property: 'backgroundColor',
38+
value: 'fecaca80'
39+
});
40+
// hover:bg-red-200/50
5141
```
52-
53-
### Rough checklist
54-
55-
- [ ] Set up repo
56-
- [ ] Set up typescript
57-
- [ ] Set up tests
58-
- [ ] Parse [theme file](https://tailwindcss.com/docs/configuration#creating-your-configuration-file)
59-
- [ ] parse: key-value
60-
- [ ] parse: key without value (like [`border`](https://tailwindcss.com/docs/border-width)
61-
- [ ] parse: value without key (like [`block`](https://tailwindcss.com/docs/display#block))
62-
- [ ] parse: [responsive modifier](https://tailwindcss.com/docs/responsive-design)
63-
- [ ] parse: [pseudo modifier](https://tailwindcss.com/docs/hover-focus-and-other-states)
64-
- [ ] create: key-value
65-
- [ ] create: key without value (like [`border`](https://tailwindcss.com/docs/border-width)
66-
- [ ] create: value without key (like [`block`](https://tailwindcss.com/docs/display#block))
67-
- [ ] create: [responsive modifier](https://tailwindcss.com/docs/responsive-design)
68-
- [ ] create: [pseudo modifier](https://tailwindcss.com/docs/hover-focus-and-other-states)
69-
- [ ] Readme
70-
71-
This library will replace the tightly coupled utils - https://github.com/ui-devtools/ui-devtools/blob/main/packages/devtools/src/utils.js
72-

‎classname.test.ts

Lines changed: 15 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ describe('classname', () => {
99
assert.deepEqual(
1010
{ className: 'm-4' },
1111
classname({
12-
responsiveModifier: null,
13-
pseudoModifier: null,
1412
property: 'margin',
1513
value: '1rem'
1614
})
@@ -22,7 +20,7 @@ describe('classname', () => {
2220
{ className: 'md:w-48' },
2321
classname({
2422
responsiveModifier: 'md',
25-
pseudoModifier: null,
23+
2624
property: 'width',
2725
value: '12rem'
2826
})
@@ -33,8 +31,6 @@ describe('classname', () => {
3331
assert.deepEqual(
3432
{ className: 'text-sm' },
3533
classname({
36-
responsiveModifier: null,
37-
pseudoModifier: null,
3834
property: 'fontSize',
3935
value: '0.875rem'
4036
})
@@ -57,7 +53,6 @@ describe('classname', () => {
5753
assert.deepEqual(
5854
{ className: 'hover:bg-green-100' },
5955
classname({
60-
responsiveModifier: null,
6156
pseudoModifier: 'hover',
6257
property: 'backgroundColor',
6358
value: '#dcfce7'
@@ -69,8 +64,6 @@ describe('classname', () => {
6964
assert.deepEqual(
7065
{ className: 'absolute' },
7166
classname({
72-
responsiveModifier: null,
73-
pseudoModifier: null,
7467
property: 'position',
7568
value: 'absolute'
7669
})
@@ -81,8 +74,6 @@ describe('classname', () => {
8174
assert.deepEqual(
8275
{ className: 'font-serif' },
8376
classname({
84-
responsiveModifier: null,
85-
pseudoModifier: null,
8677
property: 'fontFamily',
8778
value: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif'
8879
})
@@ -93,8 +84,6 @@ describe('classname', () => {
9384
assert.deepEqual(
9485
{ className: 'drop-shadow-md' },
9586
classname({
96-
responsiveModifier: null,
97-
pseudoModifier: null,
9887
property: 'dropShadow',
9988
value: '0 4px 3px rgb(0 0 0 / 0.07), 0 2px 2px rgb(0 0 0 / 0.06)'
10089
})
@@ -105,8 +94,6 @@ describe('classname', () => {
10594
assert.deepEqual(
10695
{ className: '-m-64' },
10796
classname({
108-
responsiveModifier: null,
109-
pseudoModifier: null,
11097
property: 'margin',
11198
value: '-16rem'
11299
})
@@ -117,8 +104,6 @@ describe('classname', () => {
117104
assert.deepEqual(
118105
{ className: 'block' },
119106
classname({
120-
responsiveModifier: null,
121-
pseudoModifier: null,
122107
property: 'display',
123108
value: 'block'
124109
})
@@ -129,8 +114,6 @@ describe('classname', () => {
129114
assert.deepEqual(
130115
{ className: 'tracking-tighter' },
131116
classname({
132-
responsiveModifier: null,
133-
pseudoModifier: null,
134117
property: 'letterSpacing',
135118
value: '-0.05em'
136119
})
@@ -141,8 +124,6 @@ describe('classname', () => {
141124
assert.deepEqual(
142125
{ className: 'sr-only' },
143126
classname({
144-
responsiveModifier: null,
145-
pseudoModifier: null,
146127
property: 'composite',
147128
value: null,
148129
relatedProperties: {
@@ -163,8 +144,17 @@ describe('classname', () => {
163144
assert.deepEqual(
164145
{ className: 'bg-red-200/50' },
165146
classname({
166-
responsiveModifier: null,
167-
pseudoModifier: null,
147+
property: 'backgroundColor',
148+
value: '#fecaca80'
149+
})
150+
);
151+
});
152+
153+
test.only('asdinoasd', () => {
154+
assert.deepEqual(
155+
{ className: 'hover:bg-red-200/50' },
156+
classname({
157+
pseudoModifier: 'hover',
168158
property: 'backgroundColor',
169159
value: '#fecaca80'
170160
})
@@ -175,8 +165,6 @@ describe('classname', () => {
175165
assert.deepEqual(
176166
{ className: 'bg-red-200/50' },
177167
classname({
178-
responsiveModifier: null,
179-
pseudoModifier: null,
180168
property: 'backgroundColor',
181169
value: '#FECACA80'
182170
})
@@ -187,8 +175,6 @@ describe('classname', () => {
187175
assert.deepEqual(
188176
{ error: { value: 'Only hex values are supported, example: #fecaca80' } },
189177
classname({
190-
responsiveModifier: null,
191-
pseudoModifier: null,
192178
property: 'backgroundColor',
193179
value: 'rgb(255,255,255)'
194180
})
@@ -200,8 +186,6 @@ describe('classname', () => {
200186
assert.deepEqual(
201187
{ className: 'bg-black/50' },
202188
classname({
203-
responsiveModifier: null,
204-
pseudoModifier: null,
205189
property: 'backgroundColor',
206190
value: '#0008'
207191
})
@@ -213,8 +197,6 @@ describe('classname', () => {
213197
assert.deepEqual(
214198
{ className: 'bg-black' },
215199
classname({
216-
responsiveModifier: null,
217-
pseudoModifier: null,
218200
property: 'backgroundColor',
219201
value: '#000000'
220202
})
@@ -231,7 +213,7 @@ describe('classname', () => {
231213
},
232214
classname({
233215
responsiveModifier: 'small',
234-
pseudoModifier: null,
216+
235217
property: 'backgroundColor',
236218
value: '#dcfce7'
237219
})
@@ -247,7 +229,6 @@ describe('classname', () => {
247229
}
248230
},
249231
classname({
250-
responsiveModifier: null,
251232
pseudoModifier: 'hovers',
252233
property: 'backgroundColor',
253234
value: '#dcfce7'
@@ -260,7 +241,7 @@ describe('classname', () => {
260241
{ error: { property: 'UNIDENTIFIED_PROPERTY' } },
261242
classname({
262243
responsiveModifier: 'sm',
263-
pseudoModifier: null,
244+
264245
property: 'fontSizes',
265246
value: '1.5rem'
266247
})
@@ -272,7 +253,7 @@ describe('classname', () => {
272253
{ error: { value: 'UNIDENTIFIED_VALUE' } },
273254
classname({
274255
responsiveModifier: 'sm',
275-
pseudoModifier: null,
256+
276257
property: 'fontSize',
277258
value: '1.5em' // should be rem
278259
})

‎index.ts

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import resolveConfig from 'tailwindcss/resolveConfig';
22
import type { Config } from 'tailwindcss/types/config';
33
import flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette';
4-
import { properties, namedClassProperties, unsupportedProperties } from './properties';
4+
import { properties, namedClassProperties } from './properties';
55

66
const Tailwind = (config: Config) => {
77
const resolvedConfig = resolveConfig(config);
@@ -158,8 +158,8 @@ const Tailwind = (config: Config) => {
158158
property: propertyName,
159159
value: propertyValue
160160
}: {
161-
responsiveModifier: string | null;
162-
pseudoModifier: string | null;
161+
responsiveModifier?: string;
162+
pseudoModifier?: string;
163163
property: string;
164164
value: string;
165165
}) => {
@@ -171,10 +171,6 @@ const Tailwind = (config: Config) => {
171171
value?: string;
172172
} = {};
173173

174-
if (unsupportedProperties.includes(propertyName)) {
175-
error['property'] = 'UNSUPPORTED_PROPERTY';
176-
}
177-
178174
if (responsiveModifier) {
179175
if (responsiveModifiers.includes(responsiveModifier)) className = responsiveModifier + ':';
180176
else

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"utils"
1212
],
1313
"scripts": {
14-
"test": "vitest parse classname --reporter=custom-reporter",
14+
"test": "vitest parse classname ",
1515
"test:generated": "vitest generated --no-isolate",
1616
"build:fixtures": "npx tailwindcss -i node_modules/tailwindcss/tailwind.css -o ./dist/output.css"
1717
},

‎properties.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -585,5 +585,3 @@ export const namedClassProperties = {
585585
'whitespace-pre-line': { 'white-space': 'pre-line' },
586586
'whitespace-pre-wrap': { 'white-space': 'pre-wrap' }
587587
};
588-
589-
export const unsupportedProperties = [];

0 commit comments

Comments
 (0)
close