refactor(Markdown): replace Sass with plain CSS and Tailwind @apply#8156
Conversation
Removes Sass dependencies from Markdown.scss and prism-theme.scss. Converted to plain CSS files with @apply for Tailwind utilities. Inlined all Sass variables, functions (getFontSize, getColor), and color.adjust() calls as computed values. Replaced @include break with plain @media (min-width: 768px). Added @reference directive for Tailwind v4 @apply support. Part of webpack#8047.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
alexander-akait
left a comment
alexander-akait
left a comment
There was a problem hiding this comment.
Can we use colors, width, height, padding and etc from tailwind too, we have options for this, so keeping hardcoded values are bad
| } | ||
| h6 { | ||
| font-size: 13.331px; | ||
| @apply text-[13.331px]; |
There was a problem hiding this comment.
Where we get such values? For me they are looking very weird
There was a problem hiding this comment.
They come from the original Markdown.scss, which had a getFontSize() Sass helper using a modular type scale (ratio 1.2, base 16px). So 16 * 1.2^4 = 33.178px for h1, 16 * 1.2^3 = 27.648px for h2, etc. I just inlined the computed values when removing Sass. If you want to round them or switch to a different scale, I can do that.
There was a problem hiding this comment.
Let's use different values, better to use rem
There was a problem hiding this comment.
Switched to Tailwind's built-in text scale: text-4xl (2.25rem) down to text-sm (0.875rem). No more arbitrary values.
2 participants
Summary
Part of #8047. Converts
Markdown.scssandprism-theme.scssto plain CSS, removing the Sass dependency from this component.Markdown.scsswithMarkdown.cssusing@applyfor Tailwind utilitiesprism-theme.scsswithprism-theme.css(no Tailwind needed here)@reference "tailwindcss"at the top ofMarkdown.cssfor Tailwind v4@applysupportgetFontSize()andgetColor()calls as computed valuescolor.adjust()calls to their hex/rgba equivalents@include breakwith@media (min-width: 768px)Markdown.jsxto import.cssinstead of.scssAll styles are visually identical to the original.
What kind of change does this PR introduce?
Refactor. No behavior or visual changes.
Did you add tests for your changes?
No.
Does this PR introduce a breaking change?
No.
If relevant, what needs to be documented once your changes are merged or what have you already documented?
N/A
Use of AI
No.