Skip to content

Commit 897dcea

Browse files
jonathanawesomejonathanawesome
authored
Tailwind v3 clean up (#7236)
1 parent 540f718 commit 897dcea

File tree

4 files changed

+78
-77
lines changed

4 files changed

+78
-77
lines changed

‎.vscode/settings.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@
1616
}
1717
],
1818
"files.associations": {
19-
"*.env.template": "dotenv"
19+
"*.env.template": "dotenv",
20+
"*.css": "tailwindcss"
2021
},
2122
"editor.codeActionsOnSave": {
2223
"source.organizeImports": "never"

‎packages/web/app/tailwind.config.ts‎

Lines changed: 71 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import svgToDataUri from 'mini-svg-data-uri';
2+
import type { Config } from 'tailwindcss';
23
import tailwindcssAnimate from 'tailwindcss-animate';
34
import tailwindcssRadix from 'tailwindcss-radix';
45
import colors from 'tailwindcss/colors';
56
import { fontFamily } from 'tailwindcss/defaultTheme';
6-
import { default as flattenColorPalette } from 'tailwindcss/lib/util/flattenColorPalette';
7+
import flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette';
8+
import plugin from 'tailwindcss/plugin';
79

8-
module.exports = {
10+
const config: Config = {
911
darkMode: 'class',
1012
content: ['./index.html', './src/**/*.ts{,x}'],
1113
important: true,
@@ -145,78 +147,78 @@ module.exports = {
145147
sm: 'calc(var(--radius) - 4px)',
146148
xs: 'calc(var(--radius) - 6px)',
147149
},
148-
ringColor: theme => ({
150+
ringColor: ({ theme }) => ({
149151
DEFAULT: theme('colors.orange.500/75'),
150152
...theme('colors'),
151153
}),
152154
keyframes: {
153155
// Dropdown menu
154156
'scale-in': {
155-
'0%': { opacity: 0, transform: 'scale(0)' },
156-
'100%': { opacity: 1, transform: 'scale(1)' },
157+
'0%': { opacity: '0', transform: 'scale(0)' },
158+
'100%': { opacity: '1', transform: 'scale(1)' },
157159
},
158160
'slide-down': {
159-
'0%': { opacity: 0, transform: 'translateY(-10px)' },
160-
'100%': { opacity: 1, transform: 'translateY(0)' },
161+
'0%': { opacity: '0', transform: 'translateY(-10px)' },
162+
'100%': { opacity: '1', transform: 'translateY(0)' },
161163
},
162164
'slide-up': {
163-
'0%': { opacity: 0, transform: 'translateY(10px)' },
164-
'100%': { opacity: 1, transform: 'translateY(0)' },
165+
'0%': { opacity: '0', transform: 'translateY(10px)' },
166+
'100%': { opacity: '1', transform: 'translateY(0)' },
165167
},
166168
// Tooltip
167169
'slide-up-fade': {
168-
'0%': { opacity: 0, transform: 'translateY(2px)' },
169-
'100%': { opacity: 1, transform: 'translateY(0)' },
170+
'0%': { opacity: '0', transform: 'translateY(2px)' },
171+
'100%': { opacity: '1', transform: 'translateY(0)' },
170172
},
171173
'slide-right-fade': {
172-
'0%': { opacity: 0, transform: 'translateX(-2px)' },
173-
'100%': { opacity: 1, transform: 'translateX(0)' },
174+
'0%': { opacity: '0', transform: 'translateX(-2px)' },
175+
'100%': { opacity: '1', transform: 'translateX(0)' },
174176
},
175177
'slide-down-fade': {
176-
'0%': { opacity: 0, transform: 'translateY(-2px)' },
177-
'100%': { opacity: 1, transform: 'translateY(0)' },
178+
'0%': { opacity: '0', transform: 'translateY(-2px)' },
179+
'100%': { opacity: '1', transform: 'translateY(0)' },
178180
},
179181
'slide-left-fade': {
180-
'0%': { opacity: 0, transform: 'translateX(2px)' },
181-
'100%': { opacity: 1, transform: 'translateX(0)' },
182+
'0%': { opacity: '0', transform: 'translateX(2px)' },
183+
'100%': { opacity: '1', transform: 'translateX(0)' },
182184
},
183185
// Navigation menu
184186
'enter-from-right': {
185-
'0%': { transform: 'translateX(200px)', opacity: 0 },
186-
'100%': { transform: 'translateX(0)', opacity: 1 },
187+
'0%': { transform: 'translateX(200px)', opacity: '0' },
188+
'100%': { transform: 'translateX(0)', opacity: '1' },
187189
},
188190
'enter-from-left': {
189-
'0%': { transform: 'translateX(-200px)', opacity: 0 },
190-
'100%': { transform: 'translateX(0)', opacity: 1 },
191+
'0%': { transform: 'translateX(-200px)', opacity: '0' },
192+
'100%': { transform: 'translateX(0)', opacity: '1' },
191193
},
192194
'exit-to-right': {
193-
'0%': { transform: 'translateX(0)', opacity: 1 },
194-
'100%': { transform: 'translateX(200px)', opacity: 0 },
195+
'0%': { transform: 'translateX(0)', opacity: '1' },
196+
'100%': { transform: 'translateX(200px)', opacity: '0' },
195197
},
196198
'exit-to-left': {
197-
'0%': { transform: 'translateX(0)', opacity: 1 },
198-
'100%': { transform: 'translateX(-200px)', opacity: 0 },
199+
'0%': { transform: 'translateX(0)', opacity: '1' },
200+
'100%': { transform: 'translateX(-200px)', opacity: '0' },
199201
},
200202
'scale-in-content': {
201-
'0%': { transform: 'rotateX(-30deg) scale(0.9)', opacity: 0 },
202-
'100%': { transform: 'rotateX(0deg) scale(1)', opacity: 1 },
203+
'0%': { transform: 'rotateX(-30deg) scale(0.9)', opacity: '0' },
204+
'100%': { transform: 'rotateX(0deg) scale(1)', opacity: '1' },
203205
},
204206
'scale-out-content': {
205-
'0%': { transform: 'rotateX(0deg) scale(1)', opacity: 1 },
206-
'100%': { transform: 'rotateX(-10deg) scale(0.95)', opacity: 0 },
207+
'0%': { transform: 'rotateX(0deg) scale(1)', opacity: '1' },
208+
'100%': { transform: 'rotateX(-10deg) scale(0.95)', opacity: '0' },
207209
},
208210
'fade-in': {
209-
'0%': { opacity: 0 },
210-
'100%': { opacity: 1 },
211+
'0%': { opacity: '0' },
212+
'100%': { opacity: '1' },
211213
},
212214
'fade-out': {
213-
'0%': { opacity: 1 },
214-
'100%': { opacity: 0 },
215+
'0%': { opacity: '1' },
216+
'100%': { opacity: '0' },
215217
},
216218
// Toast
217219
'toast-hide': {
218-
'0%': { opacity: 1 },
219-
'100%': { opacity: 0 },
220+
'0%': { opacity: '1' },
221+
'100%': { opacity: '0' },
220222
},
221223
'toast-slide-in-right': {
222224
'0%': { transform: 'translateX(calc(100% + 1rem))' },
@@ -235,12 +237,12 @@ module.exports = {
235237
'100%': { transform: 'translateY(calc(100% + 1rem))' },
236238
},
237239
'accordion-down': {
238-
from: { height: 0 },
240+
from: { height: '0' },
239241
to: { height: 'var(--radix-accordion-content-height)' },
240242
},
241243
'accordion-up': {
242244
from: { height: 'var(--radix-accordion-content-height)' },
243-
to: { height: 0 },
245+
to: { height: '0' },
244246
},
245247
shimmer: {
246248
from: {
@@ -293,7 +295,6 @@ module.exports = {
293295
'toast-swipe-out-y': 'toast-swipe-out-y 100ms ease-out forwards',
294296
'accordion-down': 'accordion-down 0.2s ease-out',
295297
'accordion-up': 'accordion-up 0.2s ease-out',
296-
//
297298
shimmer: 'shimmer 1.5s linear infinite',
298299
/** @source https://gist.github.com/krishaantechnology/245b29cfbb25eb456c09fce63673decc */
299300
shake: 'shake 0.82s cubic-bezier(.36,.07,.19,.97) both',
@@ -307,43 +308,38 @@ module.exports = {
307308
// Utilities and variants for styling Radix state
308309
tailwindcssRadix({}),
309310
tailwindcssAnimate,
310-
addVariablesForColors,
311-
asd(),
311+
plugin(({ addBase, theme }) => {
312+
const allColors = flattenColorPalette(theme('colors'));
313+
const newVars = Object.fromEntries(
314+
Object.entries(allColors).map(([key, val]) => [`--${key}`, val]),
315+
);
316+
addBase({
317+
':root': newVars,
318+
});
319+
}),
320+
plugin(({ matchUtilities, theme }) => {
321+
matchUtilities(
322+
{
323+
'bg-grid': value => ({
324+
backgroundImage: `url("${svgToDataUri(
325+
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`,
326+
)}")`,
327+
}),
328+
'bg-grid-small': value => ({
329+
backgroundImage: `url("${svgToDataUri(
330+
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="8" height="8" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`,
331+
)}")`,
332+
}),
333+
'bg-dot': value => ({
334+
backgroundImage: `url("${svgToDataUri(
335+
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="none"><circle fill="${value}" id="pattern-circle" cx="10" cy="10" r="1.6257413380501518"></circle></svg>`,
336+
)}")`,
337+
}),
338+
},
339+
{ values: flattenColorPalette(theme('backgroundColor')), type: 'color' },
340+
);
341+
}),
312342
],
313343
};
314344

315-
function asd() {
316-
return function ({ matchUtilities, theme }) {
317-
matchUtilities(
318-
{
319-
'bg-grid': value => ({
320-
backgroundImage: `url("${svgToDataUri(
321-
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`,
322-
)}")`,
323-
}),
324-
'bg-grid-small': value => ({
325-
backgroundImage: `url("${svgToDataUri(
326-
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="8" height="8" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`,
327-
)}")`,
328-
}),
329-
'bg-dot': value => ({
330-
backgroundImage: `url("${svgToDataUri(
331-
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="none"><circle fill="${value}" id="pattern-circle" cx="10" cy="10" r="1.6257413380501518"></circle></svg>`,
332-
)}")`,
333-
}),
334-
},
335-
{ values: flattenColorPalette(theme('backgroundColor')), type: 'color' },
336-
);
337-
};
338-
}
339-
340-
function addVariablesForColors({ addBase, theme }) {
341-
const allColors = flattenColorPalette(theme('colors'));
342-
const newVars = Object.fromEntries(
343-
Object.entries(allColors).map(([key, val]) => [`--${key}`, val]),
344-
);
345-
346-
addBase({
347-
':root': newVars,
348-
});
349-
}
345+
export default config;

‎packages/web/app/tailwind.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
declare module 'tailwindcss/lib/util/flattenColorPalette' {
2+
const flattenColorPalette: (colors: any) => Record<string, string>;
3+
export default flattenColorPalette;
4+
}

‎packages/web/app/tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,6 @@
2525
}
2626
]
2727
},
28-
"include": ["src"],
28+
"include": ["src", "tailwind.config.ts", "tailwind.d.ts"],
2929
"exclude": ["node_modules"]
3030
}

0 commit comments

Comments
 (0)