Brunobkr/llama.cpp_AlgMor24_github
ΩFFFΣLLIa • llama.cpp • AlgMor24 ██████╗ ███████╗███████╗███████╗██╗ ██╗ ██╗ █████╗ ██╔═══██╗██╔════╝██╔════╝██╔════╝██║ ██║ ██║██╔══██╗ ██║ ██║█████╗ █████╗ █████╗ ██║ ██║ ██║███████║ ██║ ██║██╔══╝ ██╔══╝ ██╔══╝ ██║ ██║ ██║██╔══██║ ╚██████╔╝██║ ██║ ███████╗███████╗███████╗██║██║ ██║ ╚═════╝ ╚═╝ ╚═╝ ╚══════╝╚══════╝╚══════╝╚═╝╚═╝ ╚═╝ High-Performance LLM / VLM Inference & Autonomous Agentic Ecosystem… See the full description on the dataset page: https://huggingface.co/datasets/Brunobkr/llama.cpp_AlgMor24_github.
03.1k
1const path = require('path')2const tailwind = require('tailwindcss')3const postcss = require('postcss')4const typographyPlugin = require('.')5 6let html = String.raw7let css = String.raw8 9let vars = `10 --tw-border-spacing-x: 0;11 --tw-border-spacing-y: 0;12 --tw-translate-x: 0;13 --tw-translate-y: 0;14 --tw-rotate: 0;15 --tw-skew-x: 0;16 --tw-skew-y: 0;17 --tw-scale-x: 1;18 --tw-scale-y: 1;19 --tw-pan-x: ;20 --tw-pan-y: ;21 --tw-pinch-zoom: ;22 --tw-scroll-snap-strictness: proximity;23 --tw-ordinal: ;24 --tw-slashed-zero: ;25 --tw-numeric-figure: ;26 --tw-numeric-spacing: ;27 --tw-numeric-fraction: ;28 --tw-ring-inset: ;29 --tw-ring-offset-width: 0px;30 --tw-ring-offset-color: #fff;31 --tw-ring-color: rgb(59 130 246 / 0.5);32 --tw-ring-offset-shadow: 0 0 #0000;33 --tw-ring-shadow: 0 0 #0000;34 --tw-shadow: 0 0 #0000;35 --tw-shadow-colored: 0 0 #0000;36 --tw-blur: ;37 --tw-brightness: ;38 --tw-contrast: ;39 --tw-grayscale: ;40 --tw-hue-rotate: ;41 --tw-invert: ;42 --tw-saturate: ;43 --tw-sepia: ;44 --tw-drop-shadow: ;45 --tw-backdrop-blur: ;46 --tw-backdrop-brightness: ;47 --tw-backdrop-contrast: ;48 --tw-backdrop-grayscale: ;49 --tw-backdrop-hue-rotate: ;50 --tw-backdrop-invert: ;51 --tw-backdrop-opacity: ;52 --tw-backdrop-saturate: ;53 --tw-backdrop-sepia: ;54`55let defaults = css`56 *,57 ::before,58 ::after {59 ${vars}60 }61 ::backdrop {62 ${vars}63 }64`65 66function run(config, plugin = tailwind) {67 let { currentTestName } = expect.getState()68 config = {69 ...{ plugins: [typographyPlugin], corePlugins: { preflight: false } },70 ...config,71 }72 73 return postcss(plugin(config)).process(74 ['@tailwind base;', '@tailwind components;', '@tailwind utilities'].join('\n'),75 {76 from: `${path.resolve(__filename)}?test=${currentTestName}`,77 }78 )79}80 81test('specificity is reduced with :where', async () => {82 let config = {83 content: [{ raw: html`<div class="prose"></div>` }],84 theme: {85 typography: {86 DEFAULT: {87 css: [88 {89 color: 'var(--tw-prose-body)',90 maxWidth: '65ch',91 '[class~="lead"]': {92 color: 'var(--tw-prose-lead)',93 },94 strong: {95 color: 'var(--tw-prose-bold)',96 fontWeight: '600',97 },98 'ol[type="A"]': {99 listStyleType: 'upper-alpha',100 },101 'blockquote p:first-of-type::before': {102 content: 'open-quote',103 },104 'blockquote p:last-of-type::after': {105 content: 'close-quote',106 },107 'h4 strong': {108 fontWeight: '700',109 },110 'figure > *': {111 margin: 0,112 },113 'ol > li::marker': {114 fontWeight: '400',115 color: 'var(--tw-prose-counters)',116 },117 '> ul > li p': {118 marginTop: '16px',119 marginBottom: '16px',120 },121 'code::before': {122 content: '"`"',123 },124 'code::after': {125 content: '"`"',126 },127 },128 ],129 },130 },131 },132 }133 134 return run(config).then((result) => {135 expect(result.css).toMatchFormattedCss(136 css`137 ${defaults}138 139 .prose {140 color: var(--tw-prose-body);141 max-width: 65ch;142 }143 .prose :where([class~='lead']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {144 color: var(--tw-prose-lead);145 }146 .prose :where(strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {147 color: var(--tw-prose-bold);148 font-weight: 600;149 }150 .prose :where(ol[type='A']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {151 list-style-type: upper-alpha;152 }153 .prose154 :where(blockquote p:first-of-type):not(:where([class~='not-prose'], [class~='not-prose']155 *))::before {156 content: open-quote;157 }158 .prose159 :where(blockquote p:last-of-type):not(:where([class~='not-prose'], [class~='not-prose']160 *))::after {161 content: close-quote;162 }163 .prose :where(h4 strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {164 font-weight: 700;165 }166 .prose :where(figure > *):not(:where([class~='not-prose'], [class~='not-prose'] *)) {167 margin: 0;168 }169 .prose :where(ol > li):not(:where([class~='not-prose'], [class~='not-prose'] *))::marker {170 font-weight: 400;171 color: var(--tw-prose-counters);172 }173 .prose174 :where(.prose > ul > li p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {175 margin-top: 16px;176 margin-bottom: 16px;177 }178 .prose :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *))::before {179 content: '`';180 }181 .prose :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *))::after {182 content: '`';183 }184 `185 )186 })187})188 189test('variants', async () => {190 let config = {191 content: [{ raw: html`<div class="sm:prose hover:prose-lg lg:prose-lg"></div>` }],192 theme: {193 typography: {194 DEFAULT: {195 css: [196 {197 color: 'red',198 p: {199 color: 'lime',200 },201 '> ul > li': {202 color: 'purple',203 },204 },205 ],206 },207 lg: {208 css: {209 color: 'green',210 p: {211 color: 'tomato',212 },213 '> ul > li': {214 color: 'blue',215 },216 },217 },218 xl: {219 css: {220 color: 'yellow',221 '> ul > li': {222 color: 'hotpink',223 },224 },225 },226 },227 },228 }229 230 return run(config).then((result) => {231 expect(result.css).toMatchFormattedCss(232 css`233 ${defaults}234 235 .hover\:prose-lg:hover {236 color: green;237 }238 .hover\:prose-lg:hover :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {239 color: tomato;240 }241 .hover\:prose-lg:hover242 :where(.hover\:prose-lg:hover243 > ul244 > li):not(:where([class~='not-prose'], [class~='not-prose'] *)) {245 color: blue;246 }247 @media (min-width: 640px) {248 .sm\:prose {249 color: red;250 }251 .sm\:prose :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {252 color: lime;253 }254 .sm\:prose255 :where(.sm\:prose > ul > li):not(:where([class~='not-prose'], [class~='not-prose'] *)) {256 color: purple;257 }258 }259 @media (min-width: 1024px) {260 .lg\:prose-lg {261 color: green;262 }263 .lg\:prose-lg :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {264 color: tomato;265 }266 .lg\:prose-lg267 :where(.lg\:prose-lg > ul > li):not(:where([class~='not-prose'], [class~='not-prose']268 *)) {269 color: blue;270 }271 }272 `273 )274 })275})276 277test('modifiers', async () => {278 let config = {279 content: [{ raw: html`<div class="prose prose-lg"></div>` }],280 theme: {281 typography: {282 DEFAULT: {283 css: [284 {285 color: 'var(--tw-prose-body)',286 maxWidth: '65ch',287 '[class~="lead"]': {288 color: 'var(--tw-prose-lead)',289 },290 strong: {291 color: 'var(--tw-prose-bold)',292 fontWeight: '600',293 },294 'ol[type="A"]': {295 listStyleType: 'upper-alpha',296 },297 'blockquote p:first-of-type::before': {298 content: 'open-quote',299 },300 'blockquote p:last-of-type::after': {301 content: 'close-quote',302 },303 'h4 strong': {304 fontWeight: '700',305 },306 'figure > *': {307 margin: 0,308 },309 'ol > li::marker': {310 fontWeight: '400',311 color: 'var(--tw-prose-counters)',312 },313 'code::before': {314 content: '"`"',315 },316 'code::after': {317 content: '"`"',318 },319 },320 ],321 },322 lg: {323 css: [324 {325 fontSize: '18px',326 lineHeight: '1.75',327 p: {328 marginTop: '24px',329 marginBottom: '24px',330 },331 '[class~="lead"]': {332 fontSize: '22px',333 },334 blockquote: {335 marginTop: '40px',336 marginBottom: '40px',337 },338 '> ul > li': {339 paddingLeft: '12px',340 },341 h1: {342 fontSize: '48px',343 marginTop: '0',344 marginBottom: '40px',345 },346 h2: {347 fontSize: '30px',348 marginTop: '56px',349 marginBottom: '32px',350 },351 h3: {352 fontSize: '24px',353 marginTop: '40px',354 marginBottom: '16px',355 },356 },357 ],358 },359 },360 },361 }362 363 return run(config).then((result) => {364 expect(result.css).toMatchFormattedCss(365 css`366 ${defaults}367 368 .prose {369 color: var(--tw-prose-body);370 max-width: 65ch;371 }372 .prose :where([class~='lead']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {373 color: var(--tw-prose-lead);374 }375 .prose :where(strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {376 color: var(--tw-prose-bold);377 font-weight: 600;378 }379 .prose :where(ol[type='A']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {380 list-style-type: upper-alpha;381 }382 .prose383 :where(blockquote p:first-of-type):not(:where([class~='not-prose'], [class~='not-prose']384 *))::before {385 content: open-quote;386 }387 .prose388 :where(blockquote p:last-of-type):not(:where([class~='not-prose'], [class~='not-prose']389 *))::after {390 content: close-quote;391 }392 .prose :where(h4 strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {393 font-weight: 700;394 }395 .prose :where(figure > *):not(:where([class~='not-prose'], [class~='not-prose'] *)) {396 margin: 0;397 }398 .prose :where(ol > li):not(:where([class~='not-prose'], [class~='not-prose'] *))::marker {399 font-weight: 400;400 color: var(--tw-prose-counters);401 }402 .prose :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *))::before {403 content: '`';404 }405 .prose :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *))::after {406 content: '`';407 }408 .prose-lg {409 font-size: 18px;410 line-height: 1.75;411 }412 .prose-lg :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {413 margin-top: 24px;414 margin-bottom: 24px;415 }416 .prose-lg417 :where([class~='lead']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {418 font-size: 22px;419 }420 .prose-lg :where(blockquote):not(:where([class~='not-prose'], [class~='not-prose'] *)) {421 margin-top: 40px;422 margin-bottom: 40px;423 }424 .prose-lg425 :where(.prose-lg > ul > li):not(:where([class~='not-prose'], [class~='not-prose'] *)) {426 padding-left: 12px;427 }428 .prose-lg :where(h1):not(:where([class~='not-prose'], [class~='not-prose'] *)) {429 font-size: 48px;430 margin-top: 0;431 margin-bottom: 40px;432 }433 .prose-lg :where(h2):not(:where([class~='not-prose'], [class~='not-prose'] *)) {434 font-size: 30px;435 margin-top: 56px;436 margin-bottom: 32px;437 }438 .prose-lg :where(h3):not(:where([class~='not-prose'], [class~='not-prose'] *)) {439 font-size: 24px;440 margin-top: 40px;441 margin-bottom: 16px;442 }443 `444 )445 })446})447 448test('legacy target', async () => {449 let config = {450 plugins: [typographyPlugin({ target: 'legacy' })],451 content: [452 { raw: html`<div class="prose prose-h1:text-center prose-headings:text-ellipsis"></div>` },453 ],454 theme: {455 typography: {456 DEFAULT: {457 css: [458 {459 color: 'var(--tw-prose-body)',460 maxWidth: '65ch',461 '[class~="lead"]': {462 color: 'var(--tw-prose-lead)',463 },464 strong: {465 color: 'var(--tw-prose-bold)',466 fontWeight: '600',467 },468 'ol[type="A"]': {469 listStyleType: 'upper-alpha',470 },471 'blockquote p:first-of-type::before': {472 content: 'open-quote',473 },474 'blockquote p:last-of-type::after': {475 content: 'close-quote',476 },477 'h4 strong': {478 fontWeight: '700',479 },480 'figure > *': {481 margin: 0,482 },483 'ol > li::marker': {484 fontWeight: '400',485 color: 'var(--tw-prose-counters)',486 },487 'code::before': {488 content: '"`"',489 },490 'code::after': {491 content: '"`"',492 },493 },494 ],495 },496 },497 },498 }499 500 return run(config).then((result) => {501 expect(result.css).toMatchFormattedCss(502 css`503 ${defaults}504 505 .prose {506 color: var(--tw-prose-body);507 max-width: 65ch;508 }509 .prose [class~='lead'] {510 color: var(--tw-prose-lead);511 }512 .prose strong {513 color: var(--tw-prose-bold);514 font-weight: 600;515 }516 .prose ol[type='A'] {517 list-style-type: upper-alpha;518 }519 .prose blockquote p:first-of-type::before {520 content: open-quote;521 }522 .prose blockquote p:last-of-type::after {523 content: close-quote;524 }525 .prose h4 strong {526 font-weight: 700;527 }528 .prose figure > * {529 margin: 0;530 }531 .prose ol > li::marker {532 font-weight: 400;533 color: var(--tw-prose-counters);534 }535 .prose code::before {536 content: '`';537 }538 .prose code::after {539 content: '`';540 }541 .prose-headings\:text-ellipsis h1 {542 text-overflow: ellipsis;543 }544 .prose-headings\:text-ellipsis h2 {545 text-overflow: ellipsis;546 }547 .prose-headings\:text-ellipsis h3 {548 text-overflow: ellipsis;549 }550 .prose-headings\:text-ellipsis h4 {551 text-overflow: ellipsis;552 }553 .prose-headings\:text-ellipsis h5 {554 text-overflow: ellipsis;555 }556 .prose-headings\:text-ellipsis h6 {557 text-overflow: ellipsis;558 }559 .prose-headings\:text-ellipsis th {560 text-overflow: ellipsis;561 }562 .prose-h1\:text-center h1 {563 text-align: center;564 }565 `566 )567 })568})569 570test('custom class name', async () => {571 let config = {572 plugins: [typographyPlugin({ className: 'markdown' })],573 content: [{ raw: html`<div class="markdown"></div>` }],574 theme: {575 typography: {576 DEFAULT: {577 css: [578 {579 color: 'var(--tw-prose-body)',580 maxWidth: '65ch',581 '[class~="lead"]': {582 color: 'var(--tw-prose-lead)',583 },584 strong: {585 color: 'var(--tw-prose-bold)',586 fontWeight: '600',587 },588 'ol[type="A"]': {589 listStyleType: 'upper-alpha',590 },591 'blockquote p:first-of-type::before': {592 content: 'open-quote',593 },594 'blockquote p:last-of-type::after': {595 content: 'close-quote',596 },597 'h4 strong': {598 fontWeight: '700',599 },600 'figure > *': {601 margin: 0,602 },603 'ol > li::marker': {604 fontWeight: '400',605 color: 'var(--tw-prose-counters)',606 },607 'code::before': {608 content: '"`"',609 },610 'code::after': {611 content: '"`"',612 },613 },614 ],615 },616 },617 },618 }619 620 return run(config).then((result) => {621 expect(result.css).toMatchFormattedCss(622 css`623 ${defaults}624 625 .markdown {626 color: var(--tw-prose-body);627 max-width: 65ch;628 }629 .markdown630 :where([class~='lead']):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {631 color: var(--tw-prose-lead);632 }633 .markdown :where(strong):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {634 color: var(--tw-prose-bold);635 font-weight: 600;636 }637 .markdown638 :where(ol[type='A']):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {639 list-style-type: upper-alpha;640 }641 .markdown642 :where(blockquote643 p:first-of-type):not(:where([class~='not-markdown'], [class~='not-markdown']644 *))::before {645 content: open-quote;646 }647 .markdown648 :where(blockquote649 p:last-of-type):not(:where([class~='not-markdown'], [class~='not-markdown'] *))::after {650 content: close-quote;651 }652 .markdown653 :where(h4 strong):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {654 font-weight: 700;655 }656 .markdown657 :where(figure > *):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {658 margin: 0;659 }660 .markdown661 :where(ol > li):not(:where([class~='not-markdown'], [class~='not-markdown'] *))::marker {662 font-weight: 400;663 color: var(--tw-prose-counters);664 }665 .markdown666 :where(code):not(:where([class~='not-markdown'], [class~='not-markdown'] *))::before {667 content: '`';668 }669 .markdown670 :where(code):not(:where([class~='not-markdown'], [class~='not-markdown'] *))::after {671 content: '`';672 }673 `674 )675 })676})677 678test('element variants', async () => {679 let config = {680 content: [681 {682 raw: html`<div683 class="684 prose685 prose-headings:underline686 prose-lead:italic687 prose-h1:text-3xl688 prose-h2:text-2xl689 prose-h3:text-xl690 prose-h4:text-lg691 prose-p:text-gray-700692 prose-a:font-bold693 prose-blockquote:italic694 prose-figure:mx-auto695 prose-figcaption:opacity-75696 prose-strong:font-medium697 prose-em:italic698 prose-kbd:border-b-2699 prose-code:font-mono700 prose-pre:font-mono701 prose-ol:pl-6702 prose-ul:pl-8703 prose-li:my-4704 prose-table:my-8705 prose-thead:border-red-300706 prose-tr:border-red-200707 prose-th:text-left708 prose-td:align-center709 prose-img:rounded-lg710 prose-video:my-12711 prose-hr:border-t-2712 "713 ></div>`,714 },715 ],716 theme: {717 typography: {718 DEFAULT: {719 css: [720 {721 color: 'var(--tw-prose-body)',722 '[class~="lead"]': {723 color: 'var(--tw-prose-lead)',724 },725 strong: {726 color: 'var(--tw-prose-bold)',727 fontWeight: '600',728 },729 'h4 strong': {730 fontWeight: '700',731 },732 },733 ],734 },735 },736 },737 }738 return run(config).then((result) => {739 expect(result.css).toMatchFormattedCss(740 css`741 ${defaults}742 743 .prose {744 color: var(--tw-prose-body);745 }746 .prose :where([class~='lead']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {747 color: var(--tw-prose-lead);748 }749 .prose :where(strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {750 color: var(--tw-prose-bold);751 font-weight: 600;752 }753 .prose :where(h4 strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {754 font-weight: 700;755 }756 .prose-headings\:underline757 :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~='not-prose'], [class~='not-prose']758 *))) {759 text-decoration-line: underline;760 }761 .prose-h1\:text-3xl762 :is(:where(h1):not(:where([class~='not-prose'], [class~='not-prose'] *))) {763 font-size: 1.875rem;764 line-height: 2.25rem;765 }766 .prose-h2\:text-2xl767 :is(:where(h2):not(:where([class~='not-prose'], [class~='not-prose'] *))) {768 font-size: 1.5rem;769 line-height: 2rem;770 }771 .prose-h3\:text-xl772 :is(:where(h3):not(:where([class~='not-prose'], [class~='not-prose'] *))) {773 font-size: 1.25rem;774 line-height: 1.75rem;775 }776 .prose-h4\:text-lg777 :is(:where(h4):not(:where([class~='not-prose'], [class~='not-prose'] *))) {778 font-size: 1.125rem;779 line-height: 1.75rem;780 }781 .prose-p\:text-gray-700782 :is(:where(p):not(:where([class~='not-prose'], [class~='not-prose'] *))) {783 --tw-text-opacity: 1;784 color: rgb(55 65 81 / var(--tw-text-opacity));785 }786 .prose-a\:font-bold787 :is(:where(a):not(:where([class~='not-prose'], [class~='not-prose'] *))) {788 font-weight: 700;789 }790 .prose-blockquote\:italic791 :is(:where(blockquote):not(:where([class~='not-prose'], [class~='not-prose'] *))) {792 font-style: italic;793 }794 .prose-figure\:mx-auto795 :is(:where(figure):not(:where([class~='not-prose'], [class~='not-prose'] *))) {796 margin-left: auto;797 margin-right: auto;798 }799 .prose-figcaption\:opacity-75800 :is(:where(figcaption):not(:where([class~='not-prose'], [class~='not-prose'] *))) {801 opacity: 0.75;802 }803 .prose-strong\:font-medium804 :is(:where(strong):not(:where([class~='not-prose'], [class~='not-prose'] *))) {805 font-weight: 500;806 }807 .prose-em\:italic808 :is(:where(em):not(:where([class~='not-prose'], [class~='not-prose'] *))) {809 font-style: italic;810 }811 .prose-kbd\:border-b-2812 :is(:where(kbd):not(:where([class~='not-prose'], [class~='not-prose'] *))) {813 border-bottom-width: 2px;814 }815 .prose-code\:font-mono816 :is(:where(code):not(:where([class~='not-prose'], [class~='not-prose'] *))) {817 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',818 'Courier New', monospace;819 }820 .prose-pre\:font-mono821 :is(:where(pre):not(:where([class~='not-prose'], [class~='not-prose'] *))) {822 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',823 'Courier New', monospace;824 }825 .prose-ol\:pl-6 :is(:where(ol):not(:where([class~='not-prose'], [class~='not-prose'] *))) {826 padding-left: 1.5rem;827 }828 .prose-ul\:pl-8 :is(:where(ul):not(:where([class~='not-prose'], [class~='not-prose'] *))) {829 padding-left: 2rem;830 }831 .prose-li\:my-4 :is(:where(li):not(:where([class~='not-prose'], [class~='not-prose'] *))) {832 margin-top: 1rem;833 margin-bottom: 1rem;834 }835 .prose-table\:my-8836 :is(:where(table):not(:where([class~='not-prose'], [class~='not-prose'] *))) {837 margin-top: 2rem;838 margin-bottom: 2rem;839 }840 .prose-thead\:border-red-300841 :is(:where(thead):not(:where([class~='not-prose'], [class~='not-prose'] *))) {842 --tw-border-opacity: 1;843 border-color: rgb(252 165 165 / var(--tw-border-opacity));844 }845 .prose-tr\:border-red-200846 :is(:where(tr):not(:where([class~='not-prose'], [class~='not-prose'] *))) {847 --tw-border-opacity: 1;848 border-color: rgb(254 202 202 / var(--tw-border-opacity));849 }850 .prose-th\:text-left851 :is(:where(th):not(:where([class~='not-prose'], [class~='not-prose'] *))) {852 text-align: left;853 }854 .prose-img\:rounded-lg855 :is(:where(img):not(:where([class~='not-prose'], [class~='not-prose'] *))) {856 border-radius: 0.5rem;857 }858 .prose-video\:my-12859 :is(:where(video):not(:where([class~='not-prose'], [class~='not-prose'] *))) {860 margin-top: 3rem;861 margin-bottom: 3rem;862 }863 .prose-hr\:border-t-2864 :is(:where(hr):not(:where([class~='not-prose'], [class~='not-prose'] *))) {865 border-top-width: 2px;866 }867 .prose-lead\:italic868 :is(:where([class~='lead']):not(:where([class~='not-prose'], [class~='not-prose'] *))) {869 font-style: italic;870 }871 `872 )873 })874})875 876test('element variants with custom class name', async () => {877 let config = {878 plugins: [typographyPlugin({ className: 'markdown' })],879 content: [880 {881 raw: html`<div882 class="883 markdown884 markdown-headings:underline885 markdown-lead:italic886 markdown-h1:text-3xl887 markdown-h2:text-2xl888 markdown-h3:text-xl889 markdown-h4:text-lg890 markdown-p:text-gray-700891 markdown-a:font-bold892 markdown-blockquote:italic893 markdown-figure:mx-auto894 markdown-figcaption:opacity-75895 markdown-strong:font-medium896 markdown-em:italic897 markdown-kbd:border-b-2898 markdown-code:font-mono899 markdown-pre:font-mono900 markdown-ol:pl-6901 markdown-ul:pl-8902 markdown-li:my-4903 markdown-table:my-8904 markdown-thead:border-red-300905 markdown-tr:border-red-200906 markdown-th:text-left907 markdown-td:align-center908 markdown-img:rounded-lg909 markdown-video:my-12910 markdown-hr:border-t-2911 "912 ></div>`,913 },914 ],915 theme: {916 typography: {917 DEFAULT: {918 css: [919 {920 color: 'var(--tw-prose-body)',921 '[class~="lead"]': {922 color: 'var(--tw-prose-lead)',923 },924 strong: {925 color: 'var(--tw-prose-bold)',926 fontWeight: '600',927 },928 'h4 strong': {929 fontWeight: '700',930 },931 },932 ],933 },934 },935 },936 }937 return run(config).then((result) => {938 expect(result.css).toMatchFormattedCss(939 css`940 ${defaults}941 942 .markdown {943 color: var(--tw-prose-body);944 }945 .markdown946 :where([class~='lead']):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {947 color: var(--tw-prose-lead);948 }949 .markdown :where(strong):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {950 color: var(--tw-prose-bold);951 font-weight: 600;952 }953 .markdown954 :where(h4 strong):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {955 font-weight: 700;956 }957 .markdown-headings\:underline958 :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~='not-markdown'], [class~='not-markdown']959 *))) {960 text-decoration-line: underline;961 }962 .markdown-h1\:text-3xl963 :is(:where(h1):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {964 font-size: 1.875rem;965 line-height: 2.25rem;966 }967 .markdown-h2\:text-2xl968 :is(:where(h2):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {969 font-size: 1.5rem;970 line-height: 2rem;971 }972 .markdown-h3\:text-xl973 :is(:where(h3):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {974 font-size: 1.25rem;975 line-height: 1.75rem;976 }977 .markdown-h4\:text-lg978 :is(:where(h4):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {979 font-size: 1.125rem;980 line-height: 1.75rem;981 }982 .markdown-p\:text-gray-700983 :is(:where(p):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {984 --tw-text-opacity: 1;985 color: rgb(55 65 81 / var(--tw-text-opacity));986 }987 .markdown-a\:font-bold988 :is(:where(a):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {989 font-weight: 700;990 }991 .markdown-blockquote\:italic992 :is(:where(blockquote):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {993 font-style: italic;994 }995 .markdown-figure\:mx-auto996 :is(:where(figure):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {997 margin-left: auto;998 margin-right: auto;999 }1000 .markdown-figcaption\:opacity-751001 :is(:where(figcaption):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {1002 opacity: 0.75;1003 }1004 .markdown-strong\:font-medium1005 :is(:where(strong):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {1006 font-weight: 500;1007 }1008 .markdown-em\:italic1009 :is(:where(em):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {1010 font-style: italic;1011 }1012 .markdown-kbd\:border-b-21013 :is(:where(kbd):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {1014 border-bottom-width: 2px;1015 }1016 .markdown-code\:font-mono1017 :is(:where(code):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {1018 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',1019 'Courier New', monospace;1020 }1021 .markdown-pre\:font-mono1022 :is(:where(pre):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {1023 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',1024 'Courier New', monospace;1025 }1026 .markdown-ol\:pl-61027 :is(:where(ol):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {1028 padding-left: 1.5rem;1029 }1030 .markdown-ul\:pl-81031 :is(:where(ul):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {1032 padding-left: 2rem;1033 }1034 .markdown-li\:my-41035 :is(:where(li):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {1036 margin-top: 1rem;1037 margin-bottom: 1rem;1038 }1039 .markdown-table\:my-81040 :is(:where(table):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {1041 margin-top: 2rem;1042 margin-bottom: 2rem;1043 }1044 .markdown-thead\:border-red-3001045 :is(:where(thead):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {1046 --tw-border-opacity: 1;1047 border-color: rgb(252 165 165 / var(--tw-border-opacity));1048 }1049 .markdown-tr\:border-red-2001050 :is(:where(tr):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {1051 --tw-border-opacity: 1;1052 border-color: rgb(254 202 202 / var(--tw-border-opacity));1053 }1054 .markdown-th\:text-left1055 :is(:where(th):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {1056 text-align: left;1057 }1058 .markdown-img\:rounded-lg1059 :is(:where(img):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {1060 border-radius: 0.5rem;1061 }1062 .markdown-video\:my-121063 :is(:where(video):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {1064 margin-top: 3rem;1065 margin-bottom: 3rem;1066 }1067 .markdown-hr\:border-t-21068 :is(:where(hr):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {1069 border-top-width: 2px;1070 }1071 .markdown-lead\:italic1072 :is(:where([class~='lead']):not(:where([class~='not-markdown'], [class~='not-markdown']1073 *))) {1074 font-style: italic;1075 }1076 `1077 )1078 })1079})1080 1081test('customizing defaults with multiple values does not result in invalid css', async () => {1082 let config = {1083 plugins: [typographyPlugin()],1084 content: [1085 {1086 raw: html`<div class="prose"></div>`,1087 },1088 ],1089 theme: {1090 typography: {1091 DEFAULT: {1092 css: {1093 textAlign: ['-webkit-match-parent', 'match-parent'],1094 },1095 },1096 },1097 },1098 }1099 return run(config).then((result) => {1100 expect(result.css).toMatchFormattedCss(1101 css`1102 ${defaults}1103 1104 .prose {1105 text-align: -webkit-match-parent;1106 text-align: match-parent;1107 }1108 `1109 )1110 })1111})1112 1113it('should be possible to use nested syntax (&) when extending the config', () => {1114 let config = {1115 plugins: [typographyPlugin()],1116 content: [1117 {1118 raw: html`<div class="prose"></div>`,1119 },1120 ],1121 theme: {1122 extend: {1123 typography: {1124 DEFAULT: {1125 css: {1126 color: '#000',1127 a: {1128 color: '#888',1129 '&:hover': {1130 color: '#ff0000',1131 },1132 },1133 },1134 },1135 },1136 },1137 },1138 }1139 1140 return run(config).then((result) => {1141 expect(result.css).toIncludeCss(css`1142 .prose {1143 color: #000;1144 max-width: 65ch;1145 }1146 `)1147 1148 expect(result.css).toIncludeCss(css`1149 .prose :where(a):not(:where([class~='not-prose'], [class~='not-prose'] *)) {1150 color: #888;1151 text-decoration: underline;1152 font-weight: 500;1153 }1154 `)1155 1156 expect(result.css).toIncludeCss(css`1157 .prose :where(a):not(:where([class~='not-prose'], [class~='not-prose'] *)):hover {1158 color: #ff0000;1159 }1160 `)1161 })1162})1163 1164it('should be possible to specify custom h5 and h6 styles', () => {1165 let config = {1166 plugins: [typographyPlugin()],1167 content: [1168 {1169 raw: html`<div class="prose prose-h5:text-sm prose-h6:text-xl"></div>`,1170 },1171 ],1172 }1173 1174 return run(config).then((result) => {1175 expect(result.css).toIncludeCss(css`1176 .prose-h5\:text-sm :is(:where(h5):not(:where([class~='not-prose'], [class~='not-prose'] *))) {1177 font-size: 0.875rem;1178 line-height: 1.25rem;1179 }1180 .prose-h6\:text-xl :is(:where(h6):not(:where([class~='not-prose'], [class~='not-prose'] *))) {1181 font-size: 1.25rem;1182 line-height: 1.75rem;1183 }1184 `)1185 })1186})1187 1188it('should not break with multiple selectors with pseudo elements using variants', () => {1189 let config = {1190 darkMode: 'class',1191 plugins: [typographyPlugin()],1192 content: [1193 {1194 raw: html`<div class="dark:prose"></div>`,1195 },1196 ],1197 theme: {1198 typography: {1199 DEFAULT: {1200 css: {