Skip to content

Commit c88ec53

Browse files
adamwathanadamwathan
committed
Fuck videos
1 parent 7f05797 commit c88ec53

File tree

2 files changed

+248
-9
lines changed

2 files changed

+248
-9
lines changed

‎src/pages/blog/2024-05-30-prettier-plugin-collapse-whitespace/Demos.jsx

Lines changed: 245 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,245 @@
1+
import { motion } from 'framer-motion'
2+
import { useEffect, useRef, useState } from 'react'
3+
4+
function Space({ children = ' ' }) {
5+
return (
6+
<motion.span
7+
transition={{ type: 'spring', bounce: '0', duration: 1 }}
8+
variants={{
9+
initial: {
10+
width: 'auto',
11+
},
12+
highlighted: {
13+
width: 'auto',
14+
},
15+
exiting: {
16+
width: '0ch',
17+
transition: { type: 'spring', bounce: '0', duration: 1 },
18+
},
19+
settled: {
20+
width: 'auto',
21+
},
22+
}}
23+
className="relative inline-block rounded-sm"
24+
>
25+
<span className="relative">
26+
<motion.span
27+
variants={{
28+
initial: {
29+
opacity: 0,
30+
},
31+
highlighted: {
32+
opacity: 0.25,
33+
},
34+
exiting: {
35+
opacity: 0,
36+
transition: { duration: 0.1 },
37+
},
38+
settled: {
39+
opacity: 0,
40+
},
41+
}}
42+
className="absolute inset-0 bg-white rounded-sm"
43+
/>
44+
<motion.span
45+
className="relative"
46+
variants={{
47+
initial: {
48+
opacity: 1,
49+
},
50+
highlighted: {
51+
opacity: 1,
52+
},
53+
exiting: {
54+
opacity: 0,
55+
transition: { duration: 0.1 },
56+
},
57+
settled: {
58+
opacity: 1,
59+
transition: { delay: 0.2 },
60+
},
61+
}}
62+
>
63+
{children}
64+
</motion.span>
65+
</span>
66+
</motion.span>
67+
)
68+
}
69+
70+
const TIMINGS = {
71+
initial: [1500, 'highlighted'],
72+
highlighted: [1000, 'exiting'],
73+
exiting: [2500, 'settled'],
74+
settled: [4000, 'highlighted'],
75+
}
76+
77+
export function WhitespaceDemo() {
78+
let [activeState, setActiveState] = useState('initial')
79+
80+
useTimeout(() => {
81+
setActiveState(TIMINGS[activeState][1])
82+
}, TIMINGS[activeState][0])
83+
84+
return (
85+
<motion.div initial="initial" animate={activeState}>
86+
<pre className="language-jsx">
87+
<code className="language-jsx">
88+
<span className="token keyword">function</span>{' '}
89+
<span className="token function">
90+
<span className="token maybe-class-name">MyComponent</span>
91+
</span>
92+
<span className="token punctuation">(</span>
93+
<span className="token parameter">
94+
<span className="token punctuation">{'{'}</span> children{' '}
95+
<span className="token punctuation">{'}'}</span>
96+
</span>
97+
<span className="token punctuation">)</span>{' '}
98+
<span className="token punctuation">{'{'}</span>
99+
{'\n'}
100+
{' '}
101+
<span className="token keyword control-flow">return</span>{' '}
102+
<span className="token punctuation">(</span>
103+
{'\n'}
104+
{' '}
105+
<span className="token tag">
106+
<span className="token tag">
107+
<span className="token punctuation">&lt;</span>div
108+
</span>{' '}
109+
<span className="token attr-name">className</span>
110+
<span className="token attr-value">
111+
<span className="token punctuation attr-equals">=</span>
112+
<span className="token punctuation">"</span>
113+
<Space />
114+
mx-auto <Space />
115+
max-w-7xl px-6 lg:px-8
116+
<Space />
117+
<span className="token punctuation">"</span>
118+
</span>
119+
<span className="token punctuation">&gt;</span>
120+
</span>
121+
<span className="token plain-text">
122+
{'\n'}
123+
{' '}
124+
</span>
125+
<span className="token punctuation">{'{'}</span>children
126+
<span className="token punctuation">{'}'}</span>
127+
<span className="token plain-text">
128+
{'\n'}
129+
{' '}
130+
</span>
131+
<span className="token tag">
132+
<span className="token tag">
133+
<span className="token punctuation">&lt;/</span>div
134+
</span>
135+
<span className="token punctuation">&gt;</span>
136+
</span>
137+
{'\n'}
138+
{' '}
139+
<span className="token punctuation">)</span>
140+
{'\n'}
141+
<span className="token punctuation">{'}'}</span>
142+
</code>
143+
</pre>
144+
</motion.div>
145+
)
146+
}
147+
148+
export function DuplicationDemo() {
149+
let [activeState, setActiveState] = useState('initial')
150+
151+
useTimeout(() => {
152+
setActiveState(TIMINGS[activeState][1])
153+
}, TIMINGS[activeState][0])
154+
155+
return (
156+
<motion.div initial="initial" animate={activeState}>
157+
<pre className="language-jsx">
158+
<code className="language-jsx">
159+
<span className="token keyword">function</span>{' '}
160+
<span className="token function">
161+
<span className="token maybe-class-name">MyComponent</span>
162+
</span>
163+
<span className="token punctuation">(</span>
164+
<span className="token parameter">
165+
<span className="token punctuation">{'{'}</span> children{' '}
166+
<span className="token punctuation">{'}'}</span>
167+
</span>
168+
<span className="token punctuation">)</span>{' '}
169+
<span className="token punctuation">{'{'}</span>
170+
{'\n'}
171+
{' '}
172+
<span className="token keyword control-flow">return</span>{' '}
173+
<span className="token punctuation">(</span>
174+
{'\n'}
175+
{' '}
176+
<span className="token tag">
177+
<span className="token tag">
178+
<span className="token punctuation">&lt;</span>div
179+
</span>{' '}
180+
<span className="token attr-name">className</span>
181+
<span className="token attr-value">
182+
<span className="token punctuation attr-equals">=</span>
183+
<span className="token punctuation">"</span>
184+
flex{' '}
185+
<span
186+
className={`${
187+
activeState === 'exiting'
188+
? 'decoration-transparent'
189+
: 'decoration-yellow-300 delay-200'
190+
} underline underline-offset-1 decoration-wavy transition decoration-1`}
191+
>
192+
bg-zinc-100
193+
</span>{' '}
194+
<Space>
195+
<span className="underline underline-offset-1 decoration-wavy transition decoration-1 decoration-yellow-300">
196+
bg-zinc-100
197+
</span>{' '}
198+
</Space>
199+
px-4
200+
<span className="token punctuation">"</span>
201+
</span>
202+
<span className="token punctuation">&gt;</span>
203+
</span>
204+
<span className="token plain-text">
205+
{'\n'}
206+
{' '}
207+
</span>
208+
<span className="token punctuation">{'{'}</span>children
209+
<span className="token punctuation">{'}'}</span>
210+
<span className="token plain-text">
211+
{'\n'}
212+
{' '}
213+
</span>
214+
<span className="token tag">
215+
<span className="token tag">
216+
<span className="token punctuation">&lt;/</span>div
217+
</span>
218+
<span className="token punctuation">&gt;</span>
219+
</span>
220+
{'\n'}
221+
{' '}
222+
<span className="token punctuation">)</span>
223+
{'\n'}
224+
<span className="token punctuation">{'}'}</span>
225+
</code>
226+
</pre>
227+
</motion.div>
228+
)
229+
}
230+
231+
function useTimeout(callback, delay) {
232+
const timeoutRef = useRef(null)
233+
const savedCallback = useRef(callback)
234+
useEffect(() => {
235+
savedCallback.current = callback
236+
}, [callback])
237+
useEffect(() => {
238+
const tick = () => savedCallback.current()
239+
if (typeof delay === 'number') {
240+
timeoutRef.current = window.setTimeout(tick, delay)
241+
return () => window.clearTimeout(timeoutRef.current)
242+
}
243+
}, [delay])
244+
return timeoutRef
245+
}

‎src/pages/blog/2024-05-30-prettier-plugin-collapse-whitespace/index.mdx

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { adamwathan } from '@/authors'
22
import card from './card.jpg'
3+
import { WhitespaceDemo, DuplicationDemo } from './Demos.jsx'
34

45
export const meta = {
56
title: 'Automatically clean up whitespace and duplicate class names',
@@ -27,22 +28,15 @@ When you're copying around class names or deleting a class name from the middle
2728

2829
Now our Prettier plugin will handle this for you automatically, so you don't need to clean it up yourself.
2930

30-
<div className="relative rounded-2xl overflow-hidden">
31-
<div className="absolute inset-0 rounded-2xl ring-1 ring-inset ring-slate-900/10 pointer-events-none"></div>
32-
<video src="https://assets.tailwindcss.com/blog%2F2024-05-30-prettier-plugin-collapse-whitespace%2Fremove-whitespace-3.mp4" autoPlay playsInline loop muted className="block m-0 min-w-[550px]" />
33-
</div>
31+
<WhitespaceDemo />
3432

3533
---
3634

3735
## Removing duplicate classes
3836

3937
Our [VS Code extension](https://tailwindcss.com/docs/editor-setup#intelli-sense-for-vs-code) has warned you about duplicate class names for a long time, but now our Prettier plugin can remove those duplicate classes for you automatically.
4038

41-
<div className="relative rounded-2xl overflow-hidden">
42-
<div className="absolute inset-0 rounded-2xl ring-1 ring-inset ring-slate-900/10 pointer-events-none"></div>
43-
<video src="https://assets.tailwindcss.com/blog%2F2024-05-30-prettier-plugin-collapse-whitespace%2Fprettier-remove-duplicates.mp4" autoPlay playsInline loop muted className="block m-0 min-w-[550px]" />
44-
</div>
45-
39+
<DuplicationDemo />
4640

4741
---
4842

0 commit comments

Comments
 (0)