Skip to content

Commit d2a9852

Browse files
sujalgoelsujalgoel
authored
fix(Markdown): replace Sass with plain CSS and Tailwind @apply (#8156)
1 parent 78494e5 commit d2a9852

File tree

4 files changed

+384
-479
lines changed

4 files changed

+384
-479
lines changed

‎src/components/Markdown/Markdown.css‎

Lines changed: 372 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,372 @@
1+
@reference "tailwindcss";
2+
@import "./prism-theme.css";
3+
4+
/*
5+
Local constants (previously Sass variables):
6+
$bannerHeight: 56px
7+
$navigationHeight: 56px
8+
$navigationSubHeight: 28px
9+
$someExtraHeight: 10px
10+
$topHeightDesktop: 94px (56 + 28 + 10)
11+
$topHeightMobile: 56px
12+
*/
13+
14+
.markdown {
15+
@apply leading-normal;
16+
17+
h1 {
18+
@apply text-4xl;
19+
}
20+
h2 {
21+
@apply text-3xl;
22+
}
23+
h3 {
24+
@apply text-2xl;
25+
}
26+
h4 {
27+
@apply text-xl;
28+
}
29+
h5 {
30+
@apply text-base;
31+
}
32+
h6 {
33+
@apply text-sm;
34+
}
35+
36+
h2,
37+
h3,
38+
h4,
39+
h5,
40+
h6 {
41+
> span[id] {
42+
@apply absolute w-0 block invisible pointer-events-none pt-14 -mt-14;
43+
@media (min-width: 768px) {
44+
@apply pt-[94px] -mt-[94px];
45+
}
46+
}
47+
}
48+
49+
h1,
50+
h2,
51+
h3,
52+
h4,
53+
h5,
54+
h6 {
55+
@apply block font-semibold text-[#32434a] leading-[1.4];
56+
font-family:
57+
"Source Serif Pro", ui-serif, Georgia, Cambria, "Times New Roman", Times,
58+
serif;
59+
margin: 0 0 0.25em;
60+
word-break: break-word;
61+
62+
tt,
63+
code {
64+
font-size: 90%;
65+
color: inherit;
66+
}
67+
68+
a[aria-hidden="true"] {
69+
@apply ml-2 text-[0.8em] h-[1em] opacity-0 invisible;
70+
transition: all 250ms;
71+
}
72+
73+
&:hover a[aria-hidden="true"] {
74+
@apply opacity-100 visible;
75+
}
76+
}
77+
78+
h1:first-child {
79+
margin: 0;
80+
@apply leading-none;
81+
}
82+
83+
p,
84+
blockquote,
85+
aside,
86+
table,
87+
pre {
88+
@apply my-[1em];
89+
}
90+
91+
ul,
92+
ol,
93+
dl {
94+
@apply mt-[0.5em] mb-[1em];
95+
}
96+
97+
li {
98+
@apply my-[0.5em];
99+
}
100+
101+
hr {
102+
@apply border-none bg-gray-200 h-[3px] my-[2em];
103+
}
104+
105+
ul,
106+
ol {
107+
@apply pl-[30px];
108+
list-style: revert;
109+
110+
&:first-child {
111+
margin-top: 0;
112+
}
113+
&:last-child {
114+
margin-bottom: 0;
115+
}
116+
}
117+
118+
dl {
119+
dt {
120+
@apply text-base font-bold italic mt-[15px] mb-[5px];
121+
122+
&:first-child {
123+
padding: 0;
124+
}
125+
}
126+
127+
dd {
128+
@apply mb-[15px] px-[15px];
129+
}
130+
131+
dt,
132+
dd {
133+
> :first-child {
134+
margin-top: 0;
135+
}
136+
> :last-child {
137+
margin-bottom: 0;
138+
}
139+
}
140+
}
141+
142+
aside {
143+
@apply border-l-4 border-solid border-l-[#dddddd] py-[0.75em] px-[1em] text-gray-500;
144+
> :first-child {
145+
margin-top: 0;
146+
}
147+
> :last-child {
148+
margin-bottom: 0;
149+
}
150+
&.tip,
151+
&.warning,
152+
&.preview,
153+
&.todo {
154+
@apply border-l-[3px];
155+
156+
.tip-content {
157+
@apply italic;
158+
}
159+
160+
code {
161+
color: inherit;
162+
}
163+
164+
> .tip__prefix,
165+
> .warning__prefix,
166+
> .preview__prefix,
167+
> .todo__prefix {
168+
@apply capitalize font-semibold block text-base text-[#1a1a1a] mb-[0.25em];
169+
}
170+
}
171+
172+
&.tip {
173+
@apply bg-[#eaf8ff] text-[#4e7182] border-l-[#1eb4ff];
174+
}
175+
176+
&.warning {
177+
@apply bg-[#fdf5d8] text-[#716b53] border-l-[#f3c316];
178+
}
179+
180+
&.preview {
181+
@apply bg-gray-100 text-[#716b53] border-l-[#1e72b3];
182+
}
183+
184+
&.todo {
185+
@apply bg-[#fbddcd] text-[#907a6e] border-l-[#e95d13];
186+
187+
.tip-content::before {
188+
content: "[TODO]: ";
189+
font-style: normal;
190+
}
191+
}
192+
}
193+
194+
blockquote {
195+
@apply border-l-4 border-solid border-l-[#dddddd] py-[0.75em] px-[1em] text-gray-500 italic;
196+
197+
> :first-child {
198+
margin-top: 0;
199+
}
200+
> :last-child {
201+
margin-bottom: 0;
202+
}
203+
}
204+
205+
table {
206+
@apply my-[1em];
207+
208+
@media (min-width: 768px) {
209+
@apply block overflow-x-auto overflow-y-hidden;
210+
}
211+
212+
p {
213+
margin: 0;
214+
}
215+
216+
code {
217+
padding-top: 0;
218+
}
219+
}
220+
221+
thead {
222+
@apply hidden;
223+
@media (min-width: 768px) {
224+
display: table-header-group;
225+
}
226+
}
227+
228+
th {
229+
@apply font-bold text-left py-1.5 px-3 bg-[#f1f4f4] border-r border-solid border-r-[#cccccc];
230+
231+
&:last-child {
232+
@apply border-r-0;
233+
}
234+
}
235+
236+
tr {
237+
@apply border border-solid border-[#cccccc] block mb-2.5;
238+
239+
&:nth-child(2n) {
240+
@apply bg-[#f8f8f8];
241+
}
242+
243+
&:last-child {
244+
@apply border-b border-b-[#cccccc];
245+
}
246+
247+
@media (min-width: 768px) {
248+
@apply mb-0;
249+
display: table-row;
250+
}
251+
}
252+
253+
td {
254+
@apply py-1 px-3 border-r-0 grid grid-cols-2 text-left border-b border-solid border-b-gray-100;
255+
&::before {
256+
content: attr(data-th);
257+
@apply font-bold;
258+
}
259+
&:last-child {
260+
@apply border-b-0;
261+
}
262+
@media (min-width: 768px) {
263+
display: table-cell;
264+
@apply py-3.5 px-[22px];
265+
text-align: unset;
266+
&::before {
267+
content: none;
268+
}
269+
@apply border-r border-r-[#cccccc] border-b-0;
270+
&:last-child {
271+
@apply border-r-0;
272+
}
273+
}
274+
}
275+
276+
img:not([class*="support__"]) {
277+
@apply max-w-full h-auto;
278+
}
279+
280+
b,
281+
strong {
282+
font-weight: 600;
283+
}
284+
285+
i,
286+
em {
287+
@apply italic;
288+
}
289+
290+
code,
291+
tt {
292+
font-family:
293+
"Source Code Pro", Consolas, "Liberation Mono", Menlo, Courier, monospace;
294+
@apply text-[90%] mx-0.5 py-0.5 px-1.5 whitespace-normal bg-[rgba(70,94,105,0.05)] rounded-[3px];
295+
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
296+
}
297+
298+
a code {
299+
@apply text-[#1a6bac];
300+
}
301+
a {
302+
text-decoration: underline;
303+
text-underline-offset: 2px;
304+
text-decoration-thickness: 1px;
305+
}
306+
pre {
307+
@apply bg-[#2d3748] text-[#e2e8f0] p-4 pr-14 rounded-[3px] text-sm leading-normal overflow-auto;
308+
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
309+
310+
code {
311+
@apply m-0 p-0 whitespace-pre border-none bg-transparent text-[#a5cee1];
312+
font-family: monospace;
313+
text-shadow: 0 1px 0 rgba(22, 31, 35, 0.5);
314+
315+
.code-details-summary-span {
316+
@apply -ml-[15px] cursor-pointer;
317+
318+
&::after {
319+
content: "›";
320+
@apply float-left relative -left-0.5 text-center text-[#1e78c2] text-base;
321+
}
322+
}
323+
324+
a {
325+
border-bottom: 1px dotted;
326+
@apply border-b-[#175d96];
327+
}
328+
329+
.code-link {
330+
@apply relative;
331+
332+
&:hover {
333+
@apply text-[#2186d8];
334+
}
335+
}
336+
}
337+
338+
code,
339+
tt {
340+
@apply bg-transparent border-none;
341+
}
342+
}
343+
344+
p {
345+
code,
346+
tt {
347+
@apply max-w-full overflow-auto;
348+
line-height: initial;
349+
margin: 0;
350+
}
351+
}
352+
353+
span {
354+
code,
355+
tt {
356+
@apply whitespace-pre-line;
357+
}
358+
}
359+
360+
h2 {
361+
@apply mt-[2em];
362+
}
363+
h2:first-child {
364+
@apply mt-[1em];
365+
}
366+
h2 + h3 {
367+
@apply mt-[0.5em];
368+
}
369+
h3 {
370+
@apply mt-[1.5em];
371+
}
372+
}

‎src/components/Markdown/Markdown.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import "./Markdown.scss";
1+
import "./Markdown.css";
22
import PropTypes from "prop-types";
33

44
const Markdown = (props) => <div className="markdown">{props.children}</div>;

0 commit comments

Comments
 (0)