Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@tailwindcss/typography

Package Overview
Dependencies
Maintainers
5
Versions
134
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@tailwindcss/typography - npm Package Compare versions

Comparing version 0.0.0-insiders.1b543ba to 0.0.0-insiders.23e04c6

35

CHANGELOG.md

@@ -10,2 +10,32 @@ # Changelog

- Nothing yet!
## [0.5.4] - 2022-07-12
### Fixed
- Update `strong` and `code` color styles to inherit from parent ([#276](https://github.com/tailwindlabs/tailwindcss-typography/pull/276))
## [0.5.3] - 2022-07-07
### Added
- Add styles for `tfoot` elements ([#243](https://github.com/tailwindlabs/tailwindcss-typography/pull/243))
- Add `prose-h5` and `prose-h6` variants ([#273](https://github.com/tailwindlabs/tailwindcss-typography/pull/273))
### Fixed
- Fix prose elements `legacy` mode ([#259](https://github.com/tailwindlabs/tailwindcss-typography/pull/259))
- Allow `lead` class to override element styles ([#260](https://github.com/tailwindlabs/tailwindcss-typography/pull/260))
- Fix generation of `prose-headings` variant ([#264](https://github.com/tailwindlabs/tailwindcss-typography/pull/264))
- Fix `figure` spacing ([#267](https://github.com/tailwindlabs/tailwindcss-typography/pull/267))
- Fix child combinator `:where` selectors ([#268](https://github.com/tailwindlabs/tailwindcss-typography/pull/267))
- Fix `prose-headings` variant to include `h5` and `h6` elements ([#273](https://github.com/tailwindlabs/tailwindcss-typography/pull/273))
## [0.5.2] - 2022-02-14
### Fixed
- Ensure nested selectors using `&:hover` work ([#246](https://github.com/tailwindlabs/tailwindcss-typography/pull/246))
## [0.5.1] - 2022-01-28

@@ -110,3 +140,6 @@

[unreleased]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.1...HEAD
[unreleased]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.4...HEAD
[0.5.4]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.3...v0.5.4
[0.5.3]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.2...v0.5.3
[0.5.2]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.1...v0.5.2
[0.5.1]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.0...v0.5.1

@@ -113,0 +146,0 @@ [0.5.0]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.0-alpha.3...v0.5.0

4

package.json
{
"name": "@tailwindcss/typography",
"version": "0.0.0-insiders.1b543ba",
"version": "0.0.0-insiders.23e04c6",
"description": "A Tailwind CSS plugin for automatically styling plain HTML content with beautiful typographic defaults.",

@@ -29,3 +29,3 @@ "main": "src/index.js",

"peerDependencies": {
"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || insiders"
"tailwindcss": ">=3.0.0 || insiders"
},

@@ -32,0 +32,0 @@ "devDependencies": {

53

src/index.js

@@ -13,29 +13,26 @@ const plugin = require('tailwindcss/plugin')

let prefixedNot = prefix(`.not-${className}`).slice(1)
let selectorPrefix = selector.startsWith('>') ? `.${className} ` : ''
if (selector.endsWith('::before')) {
if (selector.startsWith('>')) {
return `> :where(${selector.slice(2, -8)}):not(:where([class~="${prefixedNot}"] *))::before`
}
return `:where(${selector.slice(0, -8)}):not(:where([class~="${prefixedNot}"] *))::before`
return `:where(${selectorPrefix}${selector.slice(
0,
-8
)}):not(:where([class~="${prefixedNot}"] *))::before`
}
if (selector.endsWith('::after')) {
if (selector.startsWith('>')) {
return `> :where(${selector.slice(2, -7)}):not(:where([class~="${prefixedNot}"] *))::after`
}
return `:where(${selector.slice(0, -7)}):not(:where([class~="${prefixedNot}"] *))::after`
return `:where(${selectorPrefix}${selector.slice(
0,
-7
)}):not(:where([class~="${prefixedNot}"] *))::after`
}
if (selector.endsWith('::marker')) {
if (selector.startsWith('>')) {
return `> :where(${selector.slice(2, -8)}):not(:where([class~="${prefixedNot}"] *))::marker`
}
return `:where(${selector.slice(0, -8)}):not(:where([class~="${prefixedNot}"] *))::marker`
return `:where(${selectorPrefix}${selector.slice(
0,
-8
)}):not(:where([class~="${prefixedNot}"] *))::marker`
}
if (selector.startsWith('>')) {
return `> :where(${selector.slice(2)}):not(:where([class~="${prefixedNot}"] *))`
}
return `:where(${selector}):not(:where([class~="${prefixedNot}"] *))`
return `:where(${selectorPrefix}${selector}):not(:where([class~="${prefixedNot}"] *))`
}

@@ -60,3 +57,7 @@

if (nested) {
return [k, Object.fromEntries(Object.entries(v).map(([k, v]) => updateSelector(k, v)))]
return [
inWhere(k, { className, prefix }),
v,
Object.fromEntries(Object.entries(v).map(([k, v]) => updateSelector(k, v))),
]
}

@@ -90,5 +91,4 @@

for (let [name, selector = name] of [
['headings', 'h1, h2, h3, h4, th'],
['lead', '[class~="lead"]'],
for (let [name, ...selectors] of [
['headings', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'th'],
['h1'],

@@ -98,2 +98,4 @@ ['h2'],

['h4'],
['h5'],
['h6'],
['p'],

@@ -119,4 +121,11 @@ ['a'],

['hr'],
['lead', '[class~="lead"]'],
]) {
addVariant(`${className}-${name}`, `& :is(${inWhere(selector, options)})`)
selectors = selectors.length === 0 ? [name] : selectors
let selector = target === 'legacy'
? selectors.map(selector => `& ${selector}`)
: selectors.join(', ')
addVariant(`${className}-${name}`, target === 'legacy' ? selector : `& :is(${inWhere(selector, options)})`)
}

@@ -123,0 +132,0 @@

985

src/index.test.js

@@ -8,4 +8,52 @@ const path = require('path')

let css = String.raw
let javascript = String.raw
let defaults = css`
*,
::before,
::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
`
function run(config, plugin = tailwind) {

@@ -80,44 +128,48 @@ let { currentTestName } = expect.getState()

return run(config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.prose {
color: var(--tw-prose-body);
max-width: 65ch;
}
.prose :where([class~='lead']):not(:where([class~='not-prose'] *)) {
color: var(--tw-prose-lead);
}
.prose :where(strong):not(:where([class~='not-prose'] *)) {
color: var(--tw-prose-bold);
font-weight: 600;
}
.prose :where(ol[type='A']):not(:where([class~='not-prose'] *)) {
list-style-type: upper-alpha;
}
.prose :where(blockquote p:first-of-type):not(:where([class~='not-prose'] *))::before {
content: open-quote;
}
.prose :where(blockquote p:last-of-type):not(:where([class~='not-prose'] *))::after {
content: close-quote;
}
.prose :where(h4 strong):not(:where([class~='not-prose'] *)) {
font-weight: 700;
}
.prose :where(figure > *):not(:where([class~='not-prose'] *)) {
margin: 0;
}
.prose :where(ol > li):not(:where([class~='not-prose'] *))::marker {
font-weight: 400;
color: var(--tw-prose-counters);
}
.prose > :where(ul > li p):not(:where([class~='not-prose'] *)) {
margin-top: 16px;
margin-bottom: 16px;
}
.prose :where(code):not(:where([class~='not-prose'] *))::before {
content: '`';
}
.prose :where(code):not(:where([class~='not-prose'] *))::after {
content: '`';
}
`)
expect(result.css).toMatchFormattedCss(
css`
${defaults}
.prose {
color: var(--tw-prose-body);
max-width: 65ch;
}
.prose :where([class~='lead']):not(:where([class~='not-prose'] *)) {
color: var(--tw-prose-lead);
}
.prose :where(strong):not(:where([class~='not-prose'] *)) {
color: var(--tw-prose-bold);
font-weight: 600;
}
.prose :where(ol[type='A']):not(:where([class~='not-prose'] *)) {
list-style-type: upper-alpha;
}
.prose :where(blockquote p:first-of-type):not(:where([class~='not-prose'] *))::before {
content: open-quote;
}
.prose :where(blockquote p:last-of-type):not(:where([class~='not-prose'] *))::after {
content: close-quote;
}
.prose :where(h4 strong):not(:where([class~='not-prose'] *)) {
font-weight: 700;
}
.prose :where(figure > *):not(:where([class~='not-prose'] *)) {
margin: 0;
}
.prose :where(ol > li):not(:where([class~='not-prose'] *))::marker {
font-weight: 400;
color: var(--tw-prose-counters);
}
.prose :where(.prose > ul > li p):not(:where([class~='not-prose'] *)) {
margin-top: 16px;
margin-bottom: 16px;
}
.prose :where(code):not(:where([class~='not-prose'] *))::before {
content: '`';
}
.prose :where(code):not(:where([class~='not-prose'] *))::after {
content: '`';
}
`
)
})

@@ -210,70 +262,74 @@ })

return run(config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.prose {
color: var(--tw-prose-body);
max-width: 65ch;
}
.prose :where([class~='lead']):not(:where([class~='not-prose'] *)) {
color: var(--tw-prose-lead);
}
.prose :where(strong):not(:where([class~='not-prose'] *)) {
color: var(--tw-prose-bold);
font-weight: 600;
}
.prose :where(ol[type='A']):not(:where([class~='not-prose'] *)) {
list-style-type: upper-alpha;
}
.prose :where(blockquote p:first-of-type):not(:where([class~='not-prose'] *))::before {
content: open-quote;
}
.prose :where(blockquote p:last-of-type):not(:where([class~='not-prose'] *))::after {
content: close-quote;
}
.prose :where(h4 strong):not(:where([class~='not-prose'] *)) {
font-weight: 700;
}
.prose :where(figure > *):not(:where([class~='not-prose'] *)) {
margin: 0;
}
.prose :where(ol > li):not(:where([class~='not-prose'] *))::marker {
font-weight: 400;
color: var(--tw-prose-counters);
}
.prose :where(code):not(:where([class~='not-prose'] *))::before {
content: '`';
}
.prose :where(code):not(:where([class~='not-prose'] *))::after {
content: '`';
}
.prose-lg {
font-size: 18px;
line-height: 1.75;
}
.prose-lg :where(p):not(:where([class~='not-prose'] *)) {
margin-top: 24px;
margin-bottom: 24px;
}
.prose-lg :where([class~='lead']):not(:where([class~='not-prose'] *)) {
font-size: 22px;
}
.prose-lg :where(blockquote):not(:where([class~='not-prose'] *)) {
margin-top: 40px;
margin-bottom: 40px;
}
.prose-lg :where(h1):not(:where([class~='not-prose'] *)) {
font-size: 48px;
margin-top: 0;
margin-bottom: 40px;
}
.prose-lg :where(h2):not(:where([class~='not-prose'] *)) {
font-size: 30px;
margin-top: 56px;
margin-bottom: 32px;
}
.prose-lg :where(h3):not(:where([class~='not-prose'] *)) {
font-size: 24px;
margin-top: 40px;
margin-bottom: 16px;
}
`)
expect(result.css).toMatchFormattedCss(
css`
${defaults}
.prose {
color: var(--tw-prose-body);
max-width: 65ch;
}
.prose :where([class~='lead']):not(:where([class~='not-prose'] *)) {
color: var(--tw-prose-lead);
}
.prose :where(strong):not(:where([class~='not-prose'] *)) {
color: var(--tw-prose-bold);
font-weight: 600;
}
.prose :where(ol[type='A']):not(:where([class~='not-prose'] *)) {
list-style-type: upper-alpha;
}
.prose :where(blockquote p:first-of-type):not(:where([class~='not-prose'] *))::before {
content: open-quote;
}
.prose :where(blockquote p:last-of-type):not(:where([class~='not-prose'] *))::after {
content: close-quote;
}
.prose :where(h4 strong):not(:where([class~='not-prose'] *)) {
font-weight: 700;
}
.prose :where(figure > *):not(:where([class~='not-prose'] *)) {
margin: 0;
}
.prose :where(ol > li):not(:where([class~='not-prose'] *))::marker {
font-weight: 400;
color: var(--tw-prose-counters);
}
.prose :where(code):not(:where([class~='not-prose'] *))::before {
content: '`';
}
.prose :where(code):not(:where([class~='not-prose'] *))::after {
content: '`';
}
.prose-lg {
font-size: 18px;
line-height: 1.75;
}
.prose-lg :where(p):not(:where([class~='not-prose'] *)) {
margin-top: 24px;
margin-bottom: 24px;
}
.prose-lg :where([class~='lead']):not(:where([class~='not-prose'] *)) {
font-size: 22px;
}
.prose-lg :where(blockquote):not(:where([class~='not-prose'] *)) {
margin-top: 40px;
margin-bottom: 40px;
}
.prose-lg :where(h1):not(:where([class~='not-prose'] *)) {
font-size: 48px;
margin-top: 0;
margin-bottom: 40px;
}
.prose-lg :where(h2):not(:where([class~='not-prose'] *)) {
font-size: 30px;
margin-top: 56px;
margin-bottom: 32px;
}
.prose-lg :where(h3):not(:where([class~='not-prose'] *)) {
font-size: 24px;
margin-top: 40px;
margin-bottom: 16px;
}
`
)
})

@@ -285,3 +341,3 @@ })

plugins: [typographyPlugin({ target: 'legacy' })],
content: [{ raw: html`<div class="prose"></div>` }],
content: [{ raw: html`<div class="prose prose-h1:text-center prose-headings:text-ellipsis"></div>` }],
theme: {

@@ -334,40 +390,68 @@ typography: {

return run(config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.prose {
color: var(--tw-prose-body);
max-width: 65ch;
}
.prose [class~='lead'] {
color: var(--tw-prose-lead);
}
.prose strong {
color: var(--tw-prose-bold);
font-weight: 600;
}
.prose ol[type='A'] {
list-style-type: upper-alpha;
}
.prose blockquote p:first-of-type::before {
content: open-quote;
}
.prose blockquote p:last-of-type::after {
content: close-quote;
}
.prose h4 strong {
font-weight: 700;
}
.prose figure > * {
margin: 0;
}
.prose ol > li::marker {
font-weight: 400;
color: var(--tw-prose-counters);
}
.prose code::before {
content: '&#96;';
}
.prose code::after {
content: '&#96;';
}
`)
expect(result.css).toMatchFormattedCss(
css`
${defaults}
.prose {
color: var(--tw-prose-body);
max-width: 65ch;
}
.prose [class~='lead'] {
color: var(--tw-prose-lead);
}
.prose strong {
color: var(--tw-prose-bold);
font-weight: 600;
}
.prose ol[type='A'] {
list-style-type: upper-alpha;
}
.prose blockquote p:first-of-type::before {
content: open-quote;
}
.prose blockquote p:last-of-type::after {
content: close-quote;
}
.prose h4 strong {
font-weight: 700;
}
.prose figure > * {
margin: 0;
}
.prose ol > li::marker {
font-weight: 400;
color: var(--tw-prose-counters);
}
.prose code::before {
content: '&#96;';
}
.prose code::after {
content: '&#96;';
}
.prose-headings\:text-ellipsis h1 {
text-overflow: ellipsis;
}
.prose-headings\:text-ellipsis h2 {
text-overflow: ellipsis;
}
.prose-headings\:text-ellipsis h3 {
text-overflow: ellipsis;
}
.prose-headings\:text-ellipsis h4 {
text-overflow: ellipsis;
}
.prose-headings\:text-ellipsis h5 {
text-overflow: ellipsis;
}
.prose-headings\:text-ellipsis h6 {
text-overflow: ellipsis;
}
.prose-headings\:text-ellipsis th {
text-overflow: ellipsis;
}
.prose-h1\:text-center h1 {
text-align: center;
}
`
)
})

@@ -427,40 +511,45 @@ })

return run(config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.markdown {
color: var(--tw-prose-body);
max-width: 65ch;
}
.markdown :where([class~='lead']):not(:where([class~='not-markdown'] *)) {
color: var(--tw-prose-lead);
}
.markdown :where(strong):not(:where([class~='not-markdown'] *)) {
color: var(--tw-prose-bold);
font-weight: 600;
}
.markdown :where(ol[type='A']):not(:where([class~='not-markdown'] *)) {
list-style-type: upper-alpha;
}
.markdown :where(blockquote p:first-of-type):not(:where([class~='not-markdown'] *))::before {
content: open-quote;
}
.markdown :where(blockquote p:last-of-type):not(:where([class~='not-markdown'] *))::after {
content: close-quote;
}
.markdown :where(h4 strong):not(:where([class~='not-markdown'] *)) {
font-weight: 700;
}
.markdown :where(figure > *):not(:where([class~='not-markdown'] *)) {
margin: 0;
}
.markdown :where(ol > li):not(:where([class~='not-markdown'] *))::marker {
font-weight: 400;
color: var(--tw-prose-counters);
}
.markdown :where(code):not(:where([class~='not-markdown'] *))::before {
content: '&#96;';
}
.markdown :where(code):not(:where([class~='not-markdown'] *))::after {
content: '&#96;';
}
`)
expect(result.css).toMatchFormattedCss(
css`
${defaults}
.markdown {
color: var(--tw-prose-body);
max-width: 65ch;
}
.markdown :where([class~='lead']):not(:where([class~='not-markdown'] *)) {
color: var(--tw-prose-lead);
}
.markdown :where(strong):not(:where([class~='not-markdown'] *)) {
color: var(--tw-prose-bold);
font-weight: 600;
}
.markdown :where(ol[type='A']):not(:where([class~='not-markdown'] *)) {
list-style-type: upper-alpha;
}
.markdown
:where(blockquote p:first-of-type):not(:where([class~='not-markdown'] *))::before {
content: open-quote;
}
.markdown :where(blockquote p:last-of-type):not(:where([class~='not-markdown'] *))::after {
content: close-quote;
}
.markdown :where(h4 strong):not(:where([class~='not-markdown'] *)) {
font-weight: 700;
}
.markdown :where(figure > *):not(:where([class~='not-markdown'] *)) {
margin: 0;
}
.markdown :where(ol > li):not(:where([class~='not-markdown'] *))::marker {
font-weight: 400;
color: var(--tw-prose-counters);
}
.markdown :where(code):not(:where([class~='not-markdown'] *))::before {
content: '&#96;';
}
.markdown :where(code):not(:where([class~='not-markdown'] *))::after {
content: '&#96;';
}
`
)
})

@@ -529,110 +618,110 @@ })

return run(config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
:is(:where(hr):not(:where([class~='not-prose'] *))) {
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
.prose {
color: var(--tw-prose-body);
}
.prose :where([class~='lead']):not(:where([class~='not-prose'] *)) {
color: var(--tw-prose-lead);
}
.prose :where(strong):not(:where([class~='not-prose'] *)) {
color: var(--tw-prose-bold);
font-weight: 600;
}
.prose :where(h4 strong):not(:where([class~='not-prose'] *)) {
font-weight: 700;
}
.prose-headings\:underline
:is(:where(h1, h2, h3, h4, th):not(:where([class~='not-prose'] *))) {
text-decoration: underline;
}
.prose-lead\:italic :is(:where([class~='lead']):not(:where([class~='not-prose'] *))) {
font-style: italic;
}
.prose-h1\:text-3xl :is(:where(h1):not(:where([class~='not-prose'] *))) {
font-size: 1.875rem;
line-height: 2.25rem;
}
.prose-h2\:text-2xl :is(:where(h2):not(:where([class~='not-prose'] *))) {
font-size: 1.5rem;
line-height: 2rem;
}
.prose-h3\:text-xl :is(:where(h3):not(:where([class~='not-prose'] *))) {
font-size: 1.25rem;
line-height: 1.75rem;
}
.prose-h4\:text-lg :is(:where(h4):not(:where([class~='not-prose'] *))) {
font-size: 1.125rem;
line-height: 1.75rem;
}
.prose-p\:text-gray-700 :is(:where(p):not(:where([class~='not-prose'] *))) {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity));
}
.prose-a\:font-bold :is(:where(a):not(:where([class~='not-prose'] *))) {
font-weight: 700;
}
.prose-blockquote\:italic :is(:where(blockquote):not(:where([class~='not-prose'] *))) {
font-style: italic;
}
.prose-figure\:mx-auto :is(:where(figure):not(:where([class~='not-prose'] *))) {
margin-left: auto;
margin-right: auto;
}
.prose-figcaption\:opacity-75 :is(:where(figcaption):not(:where([class~='not-prose'] *))) {
opacity: 0.75;
}
.prose-strong\:font-medium :is(:where(strong):not(:where([class~='not-prose'] *))) {
font-weight: 500;
}
.prose-em\:italic :is(:where(em):not(:where([class~='not-prose'] *))) {
font-style: italic;
}
.prose-code\:font-mono :is(:where(code):not(:where([class~='not-prose'] *))) {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
'Courier New', monospace;
}
.prose-pre\:font-mono :is(:where(pre):not(:where([class~='not-prose'] *))) {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
'Courier New', monospace;
}
.prose-ol\:pl-6 :is(:where(ol):not(:where([class~='not-prose'] *))) {
padding-left: 1.5rem;
}
.prose-ul\:pl-8 :is(:where(ul):not(:where([class~='not-prose'] *))) {
padding-left: 2rem;
}
.prose-li\:my-4 :is(:where(li):not(:where([class~='not-prose'] *))) {
margin-top: 1rem;
margin-bottom: 1rem;
}
.prose-table\:my-8 :is(:where(table):not(:where([class~='not-prose'] *))) {
margin-top: 2rem;
margin-bottom: 2rem;
}
.prose-thead\:border-red-300 :is(:where(thead):not(:where([class~='not-prose'] *))) {
--tw-border-opacity: 1;
border-color: rgb(252 165 165 / var(--tw-border-opacity));
}
.prose-tr\:border-red-200 :is(:where(tr):not(:where([class~='not-prose'] *))) {
--tw-border-opacity: 1;
border-color: rgb(254 202 202 / var(--tw-border-opacity));
}
.prose-th\:text-left :is(:where(th):not(:where([class~='not-prose'] *))) {
text-align: left;
}
.prose-img\:rounded-lg :is(:where(img):not(:where([class~='not-prose'] *))) {
border-radius: 0.5rem;
}
.prose-video\:my-12 :is(:where(video):not(:where([class~='not-prose'] *))) {
margin-top: 3rem;
margin-bottom: 3rem;
}
.prose-hr\:border-t-2 :is(:where(hr):not(:where([class~='not-prose'] *))) {
border-top-width: 2px;
}
`)
expect(result.css).toMatchFormattedCss(
css`
${defaults}
.prose {
color: var(--tw-prose-body);
}
.prose :where([class~='lead']):not(:where([class~='not-prose'] *)) {
color: var(--tw-prose-lead);
}
.prose :where(strong):not(:where([class~='not-prose'] *)) {
color: var(--tw-prose-bold);
font-weight: 600;
}
.prose :where(h4 strong):not(:where([class~='not-prose'] *)) {
font-weight: 700;
}
.prose-headings\:underline
:is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~='not-prose'] *))) {
text-decoration-line: underline;
}
.prose-h1\:text-3xl :is(:where(h1):not(:where([class~='not-prose'] *))) {
font-size: 1.875rem;
line-height: 2.25rem;
}
.prose-h2\:text-2xl :is(:where(h2):not(:where([class~='not-prose'] *))) {
font-size: 1.5rem;
line-height: 2rem;
}
.prose-h3\:text-xl :is(:where(h3):not(:where([class~='not-prose'] *))) {
font-size: 1.25rem;
line-height: 1.75rem;
}
.prose-h4\:text-lg :is(:where(h4):not(:where([class~='not-prose'] *))) {
font-size: 1.125rem;
line-height: 1.75rem;
}
.prose-p\:text-gray-700 :is(:where(p):not(:where([class~='not-prose'] *))) {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity));
}
.prose-a\:font-bold :is(:where(a):not(:where([class~='not-prose'] *))) {
font-weight: 700;
}
.prose-blockquote\:italic :is(:where(blockquote):not(:where([class~='not-prose'] *))) {
font-style: italic;
}
.prose-figure\:mx-auto :is(:where(figure):not(:where([class~='not-prose'] *))) {
margin-left: auto;
margin-right: auto;
}
.prose-figcaption\:opacity-75 :is(:where(figcaption):not(:where([class~='not-prose'] *))) {
opacity: 0.75;
}
.prose-strong\:font-medium :is(:where(strong):not(:where([class~='not-prose'] *))) {
font-weight: 500;
}
.prose-em\:italic :is(:where(em):not(:where([class~='not-prose'] *))) {
font-style: italic;
}
.prose-code\:font-mono :is(:where(code):not(:where([class~='not-prose'] *))) {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
'Courier New', monospace;
}
.prose-pre\:font-mono :is(:where(pre):not(:where([class~='not-prose'] *))) {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
'Courier New', monospace;
}
.prose-ol\:pl-6 :is(:where(ol):not(:where([class~='not-prose'] *))) {
padding-left: 1.5rem;
}
.prose-ul\:pl-8 :is(:where(ul):not(:where([class~='not-prose'] *))) {
padding-left: 2rem;
}
.prose-li\:my-4 :is(:where(li):not(:where([class~='not-prose'] *))) {
margin-top: 1rem;
margin-bottom: 1rem;
}
.prose-table\:my-8 :is(:where(table):not(:where([class~='not-prose'] *))) {
margin-top: 2rem;
margin-bottom: 2rem;
}
.prose-thead\:border-red-300 :is(:where(thead):not(:where([class~='not-prose'] *))) {
--tw-border-opacity: 1;
border-color: rgb(252 165 165 / var(--tw-border-opacity));
}
.prose-tr\:border-red-200 :is(:where(tr):not(:where([class~='not-prose'] *))) {
--tw-border-opacity: 1;
border-color: rgb(254 202 202 / var(--tw-border-opacity));
}
.prose-th\:text-left :is(:where(th):not(:where([class~='not-prose'] *))) {
text-align: left;
}
.prose-img\:rounded-lg :is(:where(img):not(:where([class~='not-prose'] *))) {
border-radius: 0.5rem;
}
.prose-video\:my-12 :is(:where(video):not(:where([class~='not-prose'] *))) {
margin-top: 3rem;
margin-bottom: 3rem;
}
.prose-hr\:border-t-2 :is(:where(hr):not(:where([class~='not-prose'] *))) {
border-top-width: 2px;
}
.prose-lead\:italic :is(:where([class~="lead"]):not(:where([class~="not-prose"] *))) {
font-style: italic;
}
`
)
})

@@ -702,111 +791,112 @@ })

return run(config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
:is(:where(hr):not(:where([class~='not-markdown'] *))) {
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
.markdown {
color: var(--tw-prose-body);
}
.markdown :where([class~='lead']):not(:where([class~='not-markdown'] *)) {
color: var(--tw-prose-lead);
}
.markdown :where(strong):not(:where([class~='not-markdown'] *)) {
color: var(--tw-prose-bold);
font-weight: 600;
}
.markdown :where(h4 strong):not(:where([class~='not-markdown'] *)) {
font-weight: 700;
}
.markdown-headings\:underline
:is(:where(h1, h2, h3, h4, th):not(:where([class~='not-markdown'] *))) {
text-decoration: underline;
}
.markdown-lead\:italic :is(:where([class~='lead']):not(:where([class~='not-markdown'] *))) {
font-style: italic;
}
.markdown-h1\:text-3xl :is(:where(h1):not(:where([class~='not-markdown'] *))) {
font-size: 1.875rem;
line-height: 2.25rem;
}
.markdown-h2\:text-2xl :is(:where(h2):not(:where([class~='not-markdown'] *))) {
font-size: 1.5rem;
line-height: 2rem;
}
.markdown-h3\:text-xl :is(:where(h3):not(:where([class~='not-markdown'] *))) {
font-size: 1.25rem;
line-height: 1.75rem;
}
.markdown-h4\:text-lg :is(:where(h4):not(:where([class~='not-markdown'] *))) {
font-size: 1.125rem;
line-height: 1.75rem;
}
.markdown-p\:text-gray-700 :is(:where(p):not(:where([class~='not-markdown'] *))) {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity));
}
.markdown-a\:font-bold :is(:where(a):not(:where([class~='not-markdown'] *))) {
font-weight: 700;
}
.markdown-blockquote\:italic :is(:where(blockquote):not(:where([class~='not-markdown'] *))) {
font-style: italic;
}
.markdown-figure\:mx-auto :is(:where(figure):not(:where([class~='not-markdown'] *))) {
margin-left: auto;
margin-right: auto;
}
.markdown-figcaption\:opacity-75
:is(:where(figcaption):not(:where([class~='not-markdown'] *))) {
opacity: 0.75;
}
.markdown-strong\:font-medium :is(:where(strong):not(:where([class~='not-markdown'] *))) {
font-weight: 500;
}
.markdown-em\:italic :is(:where(em):not(:where([class~='not-markdown'] *))) {
font-style: italic;
}
.markdown-code\:font-mono :is(:where(code):not(:where([class~='not-markdown'] *))) {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
'Courier New', monospace;
}
.markdown-pre\:font-mono :is(:where(pre):not(:where([class~='not-markdown'] *))) {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
'Courier New', monospace;
}
.markdown-ol\:pl-6 :is(:where(ol):not(:where([class~='not-markdown'] *))) {
padding-left: 1.5rem;
}
.markdown-ul\:pl-8 :is(:where(ul):not(:where([class~='not-markdown'] *))) {
padding-left: 2rem;
}
.markdown-li\:my-4 :is(:where(li):not(:where([class~='not-markdown'] *))) {
margin-top: 1rem;
margin-bottom: 1rem;
}
.markdown-table\:my-8 :is(:where(table):not(:where([class~='not-markdown'] *))) {
margin-top: 2rem;
margin-bottom: 2rem;
}
.markdown-thead\:border-red-300 :is(:where(thead):not(:where([class~='not-markdown'] *))) {
--tw-border-opacity: 1;
border-color: rgb(252 165 165 / var(--tw-border-opacity));
}
.markdown-tr\:border-red-200 :is(:where(tr):not(:where([class~='not-markdown'] *))) {
--tw-border-opacity: 1;
border-color: rgb(254 202 202 / var(--tw-border-opacity));
}
.markdown-th\:text-left :is(:where(th):not(:where([class~='not-markdown'] *))) {
text-align: left;
}
.markdown-img\:rounded-lg :is(:where(img):not(:where([class~='not-markdown'] *))) {
border-radius: 0.5rem;
}
.markdown-video\:my-12 :is(:where(video):not(:where([class~='not-markdown'] *))) {
margin-top: 3rem;
margin-bottom: 3rem;
}
.markdown-hr\:border-t-2 :is(:where(hr):not(:where([class~='not-markdown'] *))) {
border-top-width: 2px;
}
`)
expect(result.css).toMatchFormattedCss(
css`
${defaults}
.markdown {
color: var(--tw-prose-body);
}
.markdown :where([class~='lead']):not(:where([class~='not-markdown'] *)) {
color: var(--tw-prose-lead);
}
.markdown :where(strong):not(:where([class~='not-markdown'] *)) {
color: var(--tw-prose-bold);
font-weight: 600;
}
.markdown :where(h4 strong):not(:where([class~='not-markdown'] *)) {
font-weight: 700;
}
.markdown-headings\:underline
:is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~='not-markdown'] *))) {
text-decoration-line: underline;
}
.markdown-h1\:text-3xl :is(:where(h1):not(:where([class~='not-markdown'] *))) {
font-size: 1.875rem;
line-height: 2.25rem;
}
.markdown-h2\:text-2xl :is(:where(h2):not(:where([class~='not-markdown'] *))) {
font-size: 1.5rem;
line-height: 2rem;
}
.markdown-h3\:text-xl :is(:where(h3):not(:where([class~='not-markdown'] *))) {
font-size: 1.25rem;
line-height: 1.75rem;
}
.markdown-h4\:text-lg :is(:where(h4):not(:where([class~='not-markdown'] *))) {
font-size: 1.125rem;
line-height: 1.75rem;
}
.markdown-p\:text-gray-700 :is(:where(p):not(:where([class~='not-markdown'] *))) {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity));
}
.markdown-a\:font-bold :is(:where(a):not(:where([class~='not-markdown'] *))) {
font-weight: 700;
}
.markdown-blockquote\:italic
:is(:where(blockquote):not(:where([class~='not-markdown'] *))) {
font-style: italic;
}
.markdown-figure\:mx-auto :is(:where(figure):not(:where([class~='not-markdown'] *))) {
margin-left: auto;
margin-right: auto;
}
.markdown-figcaption\:opacity-75
:is(:where(figcaption):not(:where([class~='not-markdown'] *))) {
opacity: 0.75;
}
.markdown-strong\:font-medium :is(:where(strong):not(:where([class~='not-markdown'] *))) {
font-weight: 500;
}
.markdown-em\:italic :is(:where(em):not(:where([class~='not-markdown'] *))) {
font-style: italic;
}
.markdown-code\:font-mono :is(:where(code):not(:where([class~='not-markdown'] *))) {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
'Courier New', monospace;
}
.markdown-pre\:font-mono :is(:where(pre):not(:where([class~='not-markdown'] *))) {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
'Courier New', monospace;
}
.markdown-ol\:pl-6 :is(:where(ol):not(:where([class~='not-markdown'] *))) {
padding-left: 1.5rem;
}
.markdown-ul\:pl-8 :is(:where(ul):not(:where([class~='not-markdown'] *))) {
padding-left: 2rem;
}
.markdown-li\:my-4 :is(:where(li):not(:where([class~='not-markdown'] *))) {
margin-top: 1rem;
margin-bottom: 1rem;
}
.markdown-table\:my-8 :is(:where(table):not(:where([class~='not-markdown'] *))) {
margin-top: 2rem;
margin-bottom: 2rem;
}
.markdown-thead\:border-red-300 :is(:where(thead):not(:where([class~='not-markdown'] *))) {
--tw-border-opacity: 1;
border-color: rgb(252 165 165 / var(--tw-border-opacity));
}
.markdown-tr\:border-red-200 :is(:where(tr):not(:where([class~='not-markdown'] *))) {
--tw-border-opacity: 1;
border-color: rgb(254 202 202 / var(--tw-border-opacity));
}
.markdown-th\:text-left :is(:where(th):not(:where([class~='not-markdown'] *))) {
text-align: left;
}
.markdown-img\:rounded-lg :is(:where(img):not(:where([class~='not-markdown'] *))) {
border-radius: 0.5rem;
}
.markdown-video\:my-12 :is(:where(video):not(:where([class~='not-markdown'] *))) {
margin-top: 3rem;
margin-bottom: 3rem;
}
.markdown-hr\:border-t-2 :is(:where(hr):not(:where([class~='not-markdown'] *))) {
border-top-width: 2px;
}
.markdown-lead\:italic :is(:where([class~="lead"]):not(:where([class~="not-markdown"] *))) {
font-style: italic;
}
`
)
})

@@ -834,9 +924,88 @@ })

return run(config).then((result) => {
// TODO: Fix this test. It should list both properties but there's a bug in tailwind that's overriding them.
expect(result.css).toMatchFormattedCss(css`
expect(result.css).toMatchFormattedCss(
css`
${defaults}
.prose {
text-align: -webkit-match-parent;
text-align: match-parent;
}
`
)
})
})
it('should be possible to use nested syntax (&) when extending the config', () => {
let config = {
plugins: [typographyPlugin()],
content: [
{
raw: html`<div class="prose"></div>`,
},
],
theme: {
extend: {
typography: {
DEFAULT: {
css: {
color: '#000',
a: {
color: '#888',
'&:hover': {
color: '#ff0000',
},
},
},
},
},
},
},
}
return run(config).then((result) => {
expect(result.css).toIncludeCss(css`
.prose {
text-align: match-parent;
color: #000;
max-width: 65ch;
}
`)
expect(result.css).toIncludeCss(css`
.prose :where(a):not(:where([class~='not-prose'] *)) {
color: #888;
text-decoration: underline;
font-weight: 500;
}
`)
expect(result.css).toIncludeCss(css`
.prose :where(a):not(:where([class~='not-prose'] *)):hover {
color: #ff0000;
}
`)
})
})
it('should be possible to specify custom h5 and h6 styles', () => {
let config = {
plugins: [typographyPlugin()],
content: [
{
raw: html`<div class="prose prose-h5:text-sm prose-h6:text-xl"></div>`,
},
],
}
return run(config).then((result) => {
expect(result.css).toIncludeCss(css`
.prose-h5\:text-sm :is(:where(h5):not(:where([class~='not-prose'] *))) {
font-size: 0.875rem;
line-height: 1.25rem;
}
.prose-h6\:text-xl :is(:where(h6):not(:where([class~='not-prose'] *))) {
font-size: 1.25rem;
line-height: 1.75rem;
}
`)
})
})

113

src/styles.js

@@ -99,2 +99,3 @@ const colors = require('tailwindcss/colors')

marginBottom: em(16, 14),
paddingLeft: em(22, 14),
},

@@ -104,2 +105,3 @@ ul: {

marginBottom: em(16, 14),
paddingLeft: em(22, 14),
},

@@ -110,11 +112,5 @@ li: {

},
ol: {
paddingLeft: em(22, 14),
},
'ol > li': {
paddingLeft: em(6, 14),
},
ul: {
paddingLeft: em(22, 14),
},
'ul > li': {

@@ -174,3 +170,3 @@ paddingLeft: em(6, 14),

},
'tbody td': {
'tbody td, tfoot td': {
paddingTop: em(8, 12),

@@ -181,6 +177,6 @@ paddingRight: em(12, 12),

},
'tbody td:first-child': {
'tbody td:first-child, tfoot td:first-child': {
paddingLeft: '0',
},
'tbody td:last-child': {
'tbody td:last-child, tfoot td:last-child': {
paddingRight: '0',

@@ -286,2 +282,3 @@ },

marginBottom: em(20, 16),
paddingLeft: em(26, 16),
},

@@ -291,2 +288,3 @@ ul: {

marginBottom: em(20, 16),
paddingLeft: em(26, 16),
},

@@ -297,11 +295,5 @@ li: {

},
ol: {
paddingLeft: em(26, 16),
},
'ol > li': {
paddingLeft: em(6, 16),
},
ul: {
paddingLeft: em(26, 16),
},
'ul > li': {

@@ -361,3 +353,3 @@ paddingLeft: em(6, 16),

},
'tbody td': {
'tbody td, tfoot td': {
paddingTop: em(8, 14),

@@ -368,6 +360,6 @@ paddingRight: em(8, 14),

},
'tbody td:first-child': {
'tbody td:first-child, tfoot td:first-child': {
paddingLeft: '0',
},
'tbody td:last-child': {
'tbody td:last-child, tfoot td:last-child': {
paddingRight: '0',

@@ -473,2 +465,3 @@ },

marginBottom: em(24, 18),
paddingLeft: em(28, 18),
},

@@ -478,2 +471,3 @@ ul: {

marginBottom: em(24, 18),
paddingLeft: em(28, 18),
},

@@ -484,11 +478,5 @@ li: {

},
ol: {
paddingLeft: em(28, 18),
},
'ol > li': {
paddingLeft: em(8, 18),
},
ul: {
paddingLeft: em(28, 18),
},
'ul > li': {

@@ -548,3 +536,3 @@ paddingLeft: em(8, 18),

},
'tbody td': {
'tbody td, tfoot td': {
paddingTop: em(12, 16),

@@ -555,6 +543,6 @@ paddingRight: em(12, 16),

},
'tbody td:first-child': {
'tbody td:first-child, tfoot td:first-child': {
paddingLeft: '0',
},
'tbody td:last-child': {
'tbody td:last-child, tfoot td:last-child': {
paddingRight: '0',

@@ -660,2 +648,3 @@ },

marginBottom: em(24, 20),
paddingLeft: em(32, 20),
},

@@ -665,2 +654,3 @@ ul: {

marginBottom: em(24, 20),
paddingLeft: em(32, 20),
},

@@ -671,11 +661,5 @@ li: {

},
ol: {
paddingLeft: em(32, 20),
},
'ol > li': {
paddingLeft: em(8, 20),
},
ul: {
paddingLeft: em(32, 20),
},
'ul > li': {

@@ -735,3 +719,3 @@ paddingLeft: em(8, 20),

},
'tbody td': {
'tbody td, tfoot td': {
paddingTop: em(16, 18),

@@ -742,6 +726,6 @@ paddingRight: em(12, 18),

},
'tbody td:first-child': {
'tbody td:first-child, tfoot td:first-child': {
paddingLeft: '0',
},
'tbody td:last-child': {
'tbody td:last-child, tfoot td:last-child': {
paddingRight: '0',

@@ -847,2 +831,3 @@ },

marginBottom: em(32, 24),
paddingLeft: em(38, 24),
},

@@ -852,2 +837,3 @@ ul: {

marginBottom: em(32, 24),
paddingLeft: em(38, 24),
},

@@ -858,11 +844,5 @@ li: {

},
ol: {
paddingLeft: em(38, 24),
},
'ol > li': {
paddingLeft: em(10, 24),
},
ul: {
paddingLeft: em(38, 24),
},
'ul > li': {

@@ -922,3 +902,3 @@ paddingLeft: em(10, 24),

},
'tbody td': {
'tbody td, tfoot td': {
paddingTop: em(16, 20),

@@ -929,6 +909,6 @@ paddingRight: em(12, 20),

},
'tbody td:first-child': {
'tbody td:first-child, tfoot td:first-child': {
paddingLeft: '0',
},
'tbody td:last-child': {
'tbody td:last-child, tfoot td:last-child': {
paddingRight: '0',

@@ -1297,2 +1277,11 @@ },

},
'a strong': {
color: 'inherit',
},
'blockquote strong': {
color: 'inherit',
},
'thead th strong': {
color: 'inherit',
},
ol: {

@@ -1362,2 +1351,3 @@ listStyleType: 'decimal',

fontWeight: '900',
color: 'inherit',
},

@@ -1370,2 +1360,3 @@ h2: {

fontWeight: '800',
color: 'inherit',
},

@@ -1378,2 +1369,3 @@ h3: {

fontWeight: '700',
color: 'inherit',
},

@@ -1386,4 +1378,6 @@ h4: {

fontWeight: '700',
color: 'inherit',
},
// TODO: Figure out how to not need this, it's a merging issue
// TODO: Figure out how to not need these, it's a merging issue
img: {},
'figure > *': {},

@@ -1404,4 +1398,22 @@ figcaption: {

'a code': {
color: 'var(--tw-prose-links)',
color: 'inherit',
},
'h1 code': {
color: 'inherit',
},
'h2 code': {
color: 'inherit',
},
'h3 code': {
color: 'inherit',
},
'h4 code': {
color: 'inherit',
},
'blockquote code': {
color: 'inherit',
},
'thead th code': {
color: 'inherit',
},
pre: {

@@ -1456,2 +1468,9 @@ color: 'var(--tw-prose-pre-code)',

},
tfoot: {
borderTopWidth: '1px',
borderTopColor: 'var(--tw-prose-th-borders)',
},
'tfoot td': {
verticalAlign: 'top',
},
},

@@ -1458,0 +1477,0 @@ defaultModifiers.gray.css,

LICENSE

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc