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.6719376 to 0.0.0-insiders.0339c42

src/index.d.ts

76

CHANGELOG.md

@@ -10,4 +10,69 @@ # Changelog

### Fixed
- Fix space between `<figcaption>` and `<pre>` ([#313](https://github.com/tailwindlabs/tailwindcss-typography/pull/313))
- Remove typography styles from `not-prose` elements in addition to their children ([#301](https://github.com/tailwindlabs/tailwindcss-typography/pull/301))
- Add `<picture>` styles ([#314](https://github.com/tailwindlabs/tailwindcss-typography/pull/314))
- Fix `prose-invert` when used with colors in light mode ([#315](https://github.com/tailwindlabs/tailwindcss-typography/pull/315))
## [0.5.9] - 2023-01-10
### Fixed
- Ensure `p` styles are inserted before `.lead` styles ([#294](https://github.com/tailwindlabs/tailwindcss-typography/pull/294))
## [0.5.8] - 2022-11-07
### Fixed
- Fix selector when using a non-default class (e.g. `prose-sm`) ([#289](https://github.com/tailwindlabs/tailwindcss-typography/pull/289))
## [0.5.7] - 2022-09-02
### Fixed
- Update TypeScript types ([#284](https://github.com/tailwindlabs/tailwindcss-typography/pull/284))
## [0.5.6] - 2022-09-01
- Actually publish types ([a54c1a8](https://github.com/tailwindlabs/tailwindcss-typography/commit/a54c1a82a64efdf23aab57e62edaa369d1a857f1))
## [0.5.5] - 2022-09-01
### Added
- Add typescript types ([#283](https://github.com/tailwindlabs/tailwindcss-typography/pull/283))
## [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
### Removed
- Remove `dist` folder and related dependencies ([#226](https://github.com/tailwindlabs/tailwindcss-typography/pull/226))

@@ -36,3 +101,3 @@

### Fixed
### Fixed

@@ -109,3 +174,10 @@ - Fix list-style modifier selectors ([#137](https://github.com/tailwindlabs/tailwindcss-typography/pull/137))

[unreleased]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.0...HEAD
[unreleased]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.7...HEAD
[0.5.7]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.6...v0.5.7
[0.5.6]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.5...v0.5.6
[0.5.5]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.4...v0.5.5
[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
[0.5.0]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.0-alpha.3...v0.5.0

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

11

package.json
{
"name": "@tailwindcss/typography",
"version": "0.0.0-insiders.6719376",
"version": "0.0.0-insiders.0339c42",
"description": "A Tailwind CSS plugin for automatically styling plain HTML content with beautiful typographic defaults.",
"main": "src/index.js",
"types": "src/index.d.ts",
"files": [
"src/*.js",
"src/*.d.ts",
"dist/"

@@ -29,3 +31,3 @@ ],

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

@@ -45,3 +47,3 @@ "devDependencies": {

"react-dom": "^17.0.2",
"tailwindcss": "^3.0.0-alpha.2"
"tailwindcss": "^3.2.2"
},

@@ -51,3 +53,4 @@ "dependencies": {

"lodash.isplainobject": "^4.0.6",
"lodash.merge": "^4.6.2"
"lodash.merge": "^4.6.2",
"postcss-selector-parser": "6.0.10"
},

@@ -54,0 +57,0 @@ "jest": {

11

README.md
<p>
<a href="https://tailwindcss.com/docs/typography-plugin#gh-light-mode-only" target="_blank">
<img src="./.github/logo-light.svg" alt="Tailwind CSS Typography" width="450" height="70">
<a href="https://tailwindcss.com/docs/typography-plugin" target="_blank">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss-typography/HEAD/.github/logo-dark.svg">
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss-typography/HEAD/.github/logo-light.svg">
<img alt="Tailwind CSS Typography" src="https://raw.githubusercontent.com/tailwindlabs/tailwindcss-typography/HEAD/.github/logo-light.svg" width="450" height="70" style="max-width: 100%;">
</picture>
</a>
<a href="https://tailwindcss.com/docs/typography-plugin#gh-dark-mode-only" target="_blank">
<img src="./.github/logo-dark.svg" alt="Tailwind CSS Typography" width="450" height="70">
</a>
</p>

@@ -9,0 +10,0 @@

63

src/index.js

@@ -5,2 +5,3 @@ const plugin = require('tailwindcss/plugin')

const styles = require('./styles')
const { commonTrailingPseudos } = require('./utils')

@@ -12,31 +13,16 @@ const computed = {

function inWhere(selector, { className, prefix }) {
function inWhere(selector, { className, modifier, prefix }) {
let prefixedNot = prefix(`.not-${className}`).slice(1)
let selectorPrefix = selector.startsWith('>')
? `${modifier === 'DEFAULT' ? `.${className}` : `.${className}-${modifier}`} `
: ''
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`
}
// Parse the selector, if every component ends in the same pseudo element(s) then move it to the end
let [trailingPseudo, rebuiltSelector] = commonTrailingPseudos(selector)
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`
if (trailingPseudo) {
return `:where(${selectorPrefix}${rebuiltSelector}):not(:where([class~="${prefixedNot}"],[class~="${prefixedNot}"] *))${trailingPseudo}`
}
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`
}
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}"],[class~="${prefixedNot}"] *))`
}

@@ -48,3 +34,3 @@

function configToCss(config = {}, { target, className, prefix }) {
function configToCss(config = {}, { target, className, modifier, prefix }) {
function updateSelector(k, v) {

@@ -62,6 +48,10 @@ if (target === 'legacy') {

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

@@ -92,5 +82,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'],

@@ -100,2 +89,4 @@ ['h2'],

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

@@ -121,4 +112,13 @@ ['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)})`
)
}

@@ -133,2 +133,3 @@

className,
modifier,
prefix,

@@ -135,0 +136,0 @@ }

1372

src/index.test.js

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

let css = String.raw
let javascript = String.raw
let vars = `
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--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: ;
`
let defaults = css`
*,
::before,
::after {
${vars}
}
::backdrop {
${vars}
}
`
function run(config, plugin = tailwind) {

@@ -80,47 +136,144 @@ 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: '&#96;';
}
.prose :where(code):not(:where([class~='not-prose'] *))::after {
content: '&#96;';
}
`)
expect(result.css).toMatchFormattedCss(
css`
${defaults}
.prose {
color: var(--tw-prose-body);
max-width: 65ch;
}
.prose :where([class~='lead']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
color: var(--tw-prose-lead);
}
.prose :where(strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
color: var(--tw-prose-bold);
font-weight: 600;
}
.prose :where(ol[type='A']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
list-style-type: upper-alpha;
}
.prose
:where(blockquote p:first-of-type):not(:where([class~='not-prose'], [class~='not-prose']
*))::before {
content: open-quote;
}
.prose
:where(blockquote p:last-of-type):not(:where([class~='not-prose'], [class~='not-prose']
*))::after {
content: close-quote;
}
.prose :where(h4 strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
font-weight: 700;
}
.prose :where(figure > *):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
margin: 0;
}
.prose :where(ol > li):not(:where([class~='not-prose'], [class~='not-prose'] *))::marker {
font-weight: 400;
color: var(--tw-prose-counters);
}
.prose
:where(.prose > ul > li p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
margin-top: 16px;
margin-bottom: 16px;
}
.prose :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *))::before {
content: '&#96;';
}
.prose :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *))::after {
content: '&#96;';
}
`
)
})
})
test('variants', async () => {
let config = {
content: [{ raw: html`<div class="sm:prose hover:prose-lg lg:prose-lg"></div>` }],
theme: {
typography: {
DEFAULT: {
css: [
{
color: 'red',
p: {
color: 'lime',
},
'> ul > li': {
color: 'purple',
},
},
],
},
lg: {
css: {
color: 'green',
p: {
color: 'tomato',
},
'> ul > li': {
color: 'blue',
},
},
},
xl: {
css: {
color: 'yellow',
'> ul > li': {
color: 'hotpink',
},
},
},
},
},
}
return run(config).then((result) => {
expect(result.css).toMatchFormattedCss(
css`
${defaults}
.hover\:prose-lg:hover {
color: green;
}
.hover\:prose-lg:hover :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
color: tomato;
}
.hover\:prose-lg:hover
:where(.hover\:prose-lg:hover
> ul
> li):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
color: blue;
}
@media (min-width: 640px) {
.sm\:prose {
color: red;
}
.sm\:prose :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
color: lime;
}
.sm\:prose
:where(.sm\:prose > ul > li):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
color: purple;
}
}
@media (min-width: 1024px) {
.lg\:prose-lg {
color: green;
}
.lg\:prose-lg :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
color: tomato;
}
.lg\:prose-lg
:where(.lg\:prose-lg > ul > li):not(:where([class~='not-prose'], [class~='not-prose']
*)) {
color: blue;
}
}
`
)
})
})
test('modifiers', async () => {

@@ -187,2 +340,5 @@ let config = {

},
'> ul > li': {
paddingLeft: '12px',
},
h1: {

@@ -211,70 +367,83 @@ fontSize: '48px',

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: '&#96;';
}
.prose :where(code):not(:where([class~='not-prose'] *))::after {
content: '&#96;';
}
.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'], [class~='not-prose'] *)) {
color: var(--tw-prose-lead);
}
.prose :where(strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
color: var(--tw-prose-bold);
font-weight: 600;
}
.prose :where(ol[type='A']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
list-style-type: upper-alpha;
}
.prose
:where(blockquote p:first-of-type):not(:where([class~='not-prose'], [class~='not-prose']
*))::before {
content: open-quote;
}
.prose
:where(blockquote p:last-of-type):not(:where([class~='not-prose'], [class~='not-prose']
*))::after {
content: close-quote;
}
.prose :where(h4 strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
font-weight: 700;
}
.prose :where(figure > *):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
margin: 0;
}
.prose :where(ol > li):not(:where([class~='not-prose'], [class~='not-prose'] *))::marker {
font-weight: 400;
color: var(--tw-prose-counters);
}
.prose :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *))::before {
content: '&#96;';
}
.prose :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *))::after {
content: '&#96;';
}
.prose-lg {
font-size: 18px;
line-height: 1.75;
}
.prose-lg :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
margin-top: 24px;
margin-bottom: 24px;
}
.prose-lg
:where([class~='lead']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
font-size: 22px;
}
.prose-lg :where(blockquote):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
margin-top: 40px;
margin-bottom: 40px;
}
.prose-lg
:where(.prose-lg > ul > li):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
padding-left: 12px;
}
.prose-lg :where(h1):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
font-size: 48px;
margin-top: 0;
margin-bottom: 40px;
}
.prose-lg :where(h2):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
font-size: 30px;
margin-top: 56px;
margin-bottom: 32px;
}
.prose-lg :where(h3):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
font-size: 24px;
margin-top: 40px;
margin-bottom: 16px;
}
`
)
})

@@ -286,3 +455,5 @@ })

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: {

@@ -335,40 +506,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;
}
`
)
})

@@ -428,40 +627,56 @@ })

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'], [class~='not-markdown'] *)) {
color: var(--tw-prose-lead);
}
.markdown :where(strong):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {
color: var(--tw-prose-bold);
font-weight: 600;
}
.markdown
:where(ol[type='A']):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {
list-style-type: upper-alpha;
}
.markdown
:where(blockquote
p:first-of-type):not(:where([class~='not-markdown'], [class~='not-markdown']
*))::before {
content: open-quote;
}
.markdown
:where(blockquote
p:last-of-type):not(:where([class~='not-markdown'], [class~='not-markdown'] *))::after {
content: close-quote;
}
.markdown
:where(h4 strong):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {
font-weight: 700;
}
.markdown
:where(figure > *):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {
margin: 0;
}
.markdown
:where(ol > li):not(:where([class~='not-markdown'], [class~='not-markdown'] *))::marker {
font-weight: 400;
color: var(--tw-prose-counters);
}
.markdown
:where(code):not(:where([class~='not-markdown'], [class~='not-markdown'] *))::before {
content: '&#96;';
}
.markdown
:where(code):not(:where([class~='not-markdown'], [class~='not-markdown'] *))::after {
content: '&#96;';
}
`
)
})

@@ -530,110 +745,132 @@ })

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'], [class~='not-prose'] *)) {
color: var(--tw-prose-lead);
}
.prose :where(strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
color: var(--tw-prose-bold);
font-weight: 600;
}
.prose :where(h4 strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
font-weight: 700;
}
.prose-headings\:underline
:is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~='not-prose'], [class~='not-prose']
*))) {
text-decoration-line: underline;
}
.prose-h1\:text-3xl
:is(:where(h1):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
font-size: 1.875rem;
line-height: 2.25rem;
}
.prose-h2\:text-2xl
:is(:where(h2):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
font-size: 1.5rem;
line-height: 2rem;
}
.prose-h3\:text-xl
:is(:where(h3):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
font-size: 1.25rem;
line-height: 1.75rem;
}
.prose-h4\:text-lg
:is(:where(h4):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
font-size: 1.125rem;
line-height: 1.75rem;
}
.prose-p\:text-gray-700
:is(:where(p):not(:where([class~='not-prose'], [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'], [class~='not-prose'] *))) {
font-weight: 700;
}
.prose-blockquote\:italic
:is(:where(blockquote):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
font-style: italic;
}
.prose-figure\:mx-auto
:is(:where(figure):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
margin-left: auto;
margin-right: auto;
}
.prose-figcaption\:opacity-75
:is(:where(figcaption):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
opacity: 0.75;
}
.prose-strong\:font-medium
:is(:where(strong):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
font-weight: 500;
}
.prose-em\:italic
:is(:where(em):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
font-style: italic;
}
.prose-code\:font-mono
:is(:where(code):not(:where([class~='not-prose'], [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'], [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'], [class~='not-prose'] *))) {
padding-left: 1.5rem;
}
.prose-ul\:pl-8 :is(:where(ul):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
padding-left: 2rem;
}
.prose-li\:my-4 :is(:where(li):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
margin-top: 1rem;
margin-bottom: 1rem;
}
.prose-table\:my-8
:is(:where(table):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
margin-top: 2rem;
margin-bottom: 2rem;
}
.prose-thead\:border-red-300
:is(:where(thead):not(:where([class~='not-prose'], [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'], [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'], [class~='not-prose'] *))) {
text-align: left;
}
.prose-img\:rounded-lg
:is(:where(img):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
border-radius: 0.5rem;
}
.prose-video\:my-12
:is(:where(video):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
margin-top: 3rem;
margin-bottom: 3rem;
}
.prose-hr\:border-t-2
:is(:where(hr):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
border-top-width: 2px;
}
.prose-lead\:italic
:is(:where([class~='lead']):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
font-style: italic;
}
`
)
})

@@ -703,110 +940,409 @@ })

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));
expect(result.css).toMatchFormattedCss(
css`
${defaults}
.markdown {
color: var(--tw-prose-body);
}
.markdown
:where([class~='lead']):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {
color: var(--tw-prose-lead);
}
.markdown :where(strong):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {
color: var(--tw-prose-bold);
font-weight: 600;
}
.markdown
:where(h4 strong):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {
font-weight: 700;
}
.markdown-headings\:underline
:is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~='not-markdown'], [class~='not-markdown']
*))) {
text-decoration-line: underline;
}
.markdown-h1\:text-3xl
:is(:where(h1):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
font-size: 1.875rem;
line-height: 2.25rem;
}
.markdown-h2\:text-2xl
:is(:where(h2):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
font-size: 1.5rem;
line-height: 2rem;
}
.markdown-h3\:text-xl
:is(:where(h3):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
font-size: 1.25rem;
line-height: 1.75rem;
}
.markdown-h4\:text-lg
:is(:where(h4):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
font-size: 1.125rem;
line-height: 1.75rem;
}
.markdown-p\:text-gray-700
:is(:where(p):not(:where([class~='not-markdown'], [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'], [class~='not-markdown'] *))) {
font-weight: 700;
}
.markdown-blockquote\:italic
:is(:where(blockquote):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
font-style: italic;
}
.markdown-figure\:mx-auto
:is(:where(figure):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
margin-left: auto;
margin-right: auto;
}
.markdown-figcaption\:opacity-75
:is(:where(figcaption):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
opacity: 0.75;
}
.markdown-strong\:font-medium
:is(:where(strong):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
font-weight: 500;
}
.markdown-em\:italic
:is(:where(em):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
font-style: italic;
}
.markdown-code\:font-mono
:is(:where(code):not(:where([class~='not-markdown'], [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'], [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'], [class~='not-markdown'] *))) {
padding-left: 1.5rem;
}
.markdown-ul\:pl-8
:is(:where(ul):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
padding-left: 2rem;
}
.markdown-li\:my-4
:is(:where(li):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
margin-top: 1rem;
margin-bottom: 1rem;
}
.markdown-table\:my-8
:is(:where(table):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
margin-top: 2rem;
margin-bottom: 2rem;
}
.markdown-thead\:border-red-300
:is(:where(thead):not(:where([class~='not-markdown'], [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'], [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'], [class~='not-markdown'] *))) {
text-align: left;
}
.markdown-img\:rounded-lg
:is(:where(img):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
border-radius: 0.5rem;
}
.markdown-video\:my-12
:is(:where(video):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
margin-top: 3rem;
margin-bottom: 3rem;
}
.markdown-hr\:border-t-2
:is(:where(hr):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
border-top-width: 2px;
}
.markdown-lead\:italic
:is(:where([class~='lead']):not(:where([class~='not-markdown'], [class~='not-markdown']
*))) {
font-style: italic;
}
`
)
})
})
test('customizing defaults with multiple values does not result in invalid css', async () => {
let config = {
plugins: [typographyPlugin()],
content: [
{
raw: html`<div class="prose"></div>`,
},
],
theme: {
typography: {
DEFAULT: {
css: {
textAlign: ['-webkit-match-parent', 'match-parent'],
},
},
},
},
}
return run(config).then((result) => {
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 {
color: #000;
max-width: 65ch;
}
.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'] *))) {
`)
expect(result.css).toIncludeCss(css`
.prose :where(a):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
color: #888;
text-decoration: underline;
font-weight: 500;
}
.markdown-lead\:italic :is(:where([class~='lead']):not(:where([class~='not-markdown'] *))) {
font-style: italic;
`)
expect(result.css).toIncludeCss(css`
.prose :where(a):not(:where([class~='not-prose'], [class~='not-prose'] *)):hover {
color: #ff0000;
}
.markdown-h1\:text-3xl :is(:where(h1):not(:where([class~='not-markdown'] *))) {
font-size: 1.875rem;
line-height: 2.25rem;
`)
})
})
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'], [class~='not-prose'] *))) {
font-size: 0.875rem;
line-height: 1.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'] *))) {
.prose-h6\:text-xl :is(:where(h6):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
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;
`)
})
})
it('should not break with multiple selectors with pseudo elements using variants', () => {
let config = {
darkMode: 'class',
plugins: [typographyPlugin()],
content: [
{
raw: html`<div class="dark:prose"></div>`,
},
],
theme: {
typography: {
DEFAULT: {
css: {
'ol li::before, ul li::before': {
color: 'red',
},
},
},
},
},
}
return run(config).then((result) => {
expect(result.css).toIncludeCss(css`
.dark
.dark\:prose
:where(ol li, ul li):not(:where([class~='not-prose'], [class~='not-prose'] *))::before {
color: red;
}
.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));
`)
})
})
it('lifts all common, trailing pseudo elements when the same across all selectors', () => {
let config = {
darkMode: 'class',
plugins: [typographyPlugin()],
content: [
{
raw: html`<div class="prose dark:prose"></div>`,
},
],
theme: {
typography: {
DEFAULT: {
css: {
'ol li::marker::before, ul li::marker::before': {
color: 'red',
},
},
},
},
},
}
return run(config).then((result) => {
expect(result.css).toIncludeCss(css`
.prose
:where(ol li, ul li):not(:where([class~='not-prose'], [class~='not-prose']
*))::marker::before {
color: red;
}
.markdown-a\:font-bold :is(:where(a):not(:where([class~='not-markdown'] *))) {
font-weight: 700;
`)
// TODO: The output here is a bug in tailwindcss variant selector rewriting
// IT should be ::marker::before
expect(result.css).toIncludeCss(css`
.dark
.dark\:prose
:where(ol li, ul li):not(:where([class~='not-prose'], [class~='not-prose']
*))::before::marker {
color: red;
}
.markdown-blockquote\:italic :is(:where(blockquote):not(:where([class~='not-markdown'] *))) {
font-style: italic;
`)
})
})
it('does not modify selectors with differing pseudo elements', () => {
let config = {
darkMode: 'class',
plugins: [typographyPlugin()],
content: [
{
raw: html`<div class="prose dark:prose"></div>`,
},
],
theme: {
typography: {
DEFAULT: {
css: {
'ol li::before, ul li::after': {
color: 'red',
},
},
},
},
},
}
return run(config).then((result) => {
expect(result.css).toIncludeCss(css`
.prose
:where(ol li::before, ul li::after):not(:where([class~='not-prose'], [class~='not-prose']
*)) {
color: red;
}
.markdown-figure\:mx-auto :is(:where(figure):not(:where([class~='not-markdown'] *))) {
margin-left: auto;
margin-right: auto;
`)
// TODO: The output here is a bug in tailwindcss variant selector rewriting
expect(result.css).toIncludeCss(css`
.dark
.dark\:prose
:where(ol li, ul li):not(:where([class~='not-prose'], [class~='not-prose'] *))::before,
::after {
color: red;
}
.markdown-figcaption\:opacity-75
:is(:where(figcaption):not(:where([class~='not-markdown'] *))) {
opacity: 0.75;
`)
})
})
it('lifts only the common, trailing pseudo elements from selectors', () => {
let config = {
darkMode: 'class',
plugins: [typographyPlugin()],
content: [
{
raw: html`<div class="prose dark:prose"></div>`,
},
],
theme: {
typography: {
DEFAULT: {
css: {
'ol li::scroll-thumb::before, ul li::scroll-track::before': {
color: 'red',
},
},
},
},
},
}
return run(config).then((result) => {
expect(result.css).toIncludeCss(css`
.prose
:where(ol li::scroll-thumb, ul
li::scroll-track):not(:where([class~='not-prose'], [class~='not-prose'] *))::before {
color: red;
}
.markdown-strong\:font-medium :is(:where(strong):not(:where([class~='not-markdown'] *))) {
font-weight: 500;
`)
// TODO: The output here is a bug in tailwindcss variant selector rewriting
expect(result.css).toIncludeCss(css`
.dark
.dark\:prose
:where(ol li, ul li):not(:where([class~='not-prose'], [class~='not-prose']
*))::scroll-thumb,
::scroll-track,
::before {
color: red;
}
.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;
}
`)

@@ -816,8 +1352,9 @@ })

test('customizing defaults with multiple values does not result in invalid css', async () => {
it('ignores common non-trailing pseudo-elements in selectors', () => {
let config = {
darkMode: 'class',
plugins: [typographyPlugin()],
content: [
{
raw: html`<div class="prose"></div>`,
raw: html`<div class="prose dark:prose"></div>`,
},

@@ -829,3 +1366,5 @@ ],

css: {
textAlign: ['-webkit-match-parent', 'match-parent'],
'ol li::before::scroll-thumb, ul li::before::scroll-track': {
color: 'red',
},
},

@@ -836,10 +1375,51 @@ },

}
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`
.prose {
text-align: match-parent;
expect(result.css).toIncludeCss(css`
.prose
:where(ol li::before::scroll-thumb, ul
li::before::scroll-track):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
color: red;
}
`)
// TODO: The output here is a bug in tailwindcss variant selector rewriting
expect(result.css).toIncludeCss(css`
.dark
.dark\:prose
:where(ol li::scroll-thumb, ul
li::scroll-track):not(:where([class~='not-prose'], [class~='not-prose'] *))::before,
::before {
color: red;
}
`)
})
})
test('lead styles are inserted after paragraph styles', async () => {
let config = {
content: [{ raw: html`<div class="prose"></div>` }],
}
return run(config).then((result) => {
expect(result.css).toIncludeCss(
css`
.prose {
color: var(--tw-prose-body);
max-width: 65ch;
}
.prose :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
margin-top: 1.25em;
margin-bottom: 1.25em;
}
.prose :where([class~='lead']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
color: var(--tw-prose-lead);
font-size: 1.25em;
line-height: 1.6;
margin-top: 1.2em;
margin-bottom: 1.2em;
}
`
)
})
})

306

src/styles.js

@@ -59,18 +59,13 @@ const colors = require('tailwindcss/colors')

},
video: {
picture: {
marginTop: em(24, 14),
marginBottom: em(24, 14),
},
figure: {
marginTop: em(24, 14),
marginBottom: em(24, 14),
},
'figure > *': {
'picture > img': {
marginTop: '0',
marginBottom: '0',
},
figcaption: {
fontSize: em(12, 14),
lineHeight: round(16 / 12),
marginTop: em(8, 12),
video: {
marginTop: em(24, 14),
marginBottom: em(24, 14),
},

@@ -100,2 +95,3 @@ code: {

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

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

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

@@ -111,11 +108,5 @@ li: {

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

@@ -175,3 +166,3 @@ paddingLeft: em(6, 14),

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

@@ -182,8 +173,21 @@ 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',
},
figure: {
marginTop: em(24, 14),
marginBottom: em(24, 14),
},
'figure > *': {
marginTop: '0',
marginBottom: '0',
},
figcaption: {
fontSize: em(12, 14),
lineHeight: round(16 / 12),
marginTop: em(8, 12),
},
},

@@ -247,18 +251,13 @@ {

},
video: {
picture: {
marginTop: em(32, 16),
marginBottom: em(32, 16),
},
figure: {
marginTop: em(32, 16),
marginBottom: em(32, 16),
},
'figure > *': {
'picture > img': {
marginTop: '0',
marginBottom: '0',
},
figcaption: {
fontSize: em(14, 16),
lineHeight: round(20 / 14),
marginTop: em(12, 14),
video: {
marginTop: em(32, 16),
marginBottom: em(32, 16),
},

@@ -288,2 +287,3 @@ code: {

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

@@ -293,2 +293,3 @@ ul: {

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

@@ -299,11 +300,5 @@ li: {

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

@@ -363,3 +358,3 @@ paddingLeft: em(6, 16),

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

@@ -370,8 +365,21 @@ 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',
},
figure: {
marginTop: em(32, 16),
marginBottom: em(32, 16),
},
'figure > *': {
marginTop: '0',
marginBottom: '0',
},
figcaption: {
fontSize: em(14, 16),
lineHeight: round(20 / 14),
marginTop: em(12, 14),
},
},

@@ -435,18 +443,13 @@ {

},
video: {
picture: {
marginTop: em(32, 18),
marginBottom: em(32, 18),
},
figure: {
marginTop: em(32, 18),
marginBottom: em(32, 18),
},
'figure > *': {
'picture > img': {
marginTop: '0',
marginBottom: '0',
},
figcaption: {
fontSize: em(16, 18),
lineHeight: round(24 / 16),
marginTop: em(16, 16),
video: {
marginTop: em(32, 18),
marginBottom: em(32, 18),
},

@@ -476,2 +479,3 @@ code: {

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

@@ -481,2 +485,3 @@ ul: {

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

@@ -487,11 +492,5 @@ li: {

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

@@ -551,3 +550,3 @@ paddingLeft: em(8, 18),

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

@@ -558,8 +557,21 @@ 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',
},
figure: {
marginTop: em(32, 18),
marginBottom: em(32, 18),
},
'figure > *': {
marginTop: '0',
marginBottom: '0',
},
figcaption: {
fontSize: em(16, 18),
lineHeight: round(24 / 16),
marginTop: em(16, 16),
},
},

@@ -623,18 +635,13 @@ {

},
video: {
picture: {
marginTop: em(40, 20),
marginBottom: em(40, 20),
},
figure: {
marginTop: em(40, 20),
marginBottom: em(40, 20),
},
'figure > *': {
'picture > img': {
marginTop: '0',
marginBottom: '0',
},
figcaption: {
fontSize: em(18, 20),
lineHeight: round(28 / 18),
marginTop: em(18, 18),
video: {
marginTop: em(40, 20),
marginBottom: em(40, 20),
},

@@ -664,2 +671,3 @@ code: {

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

@@ -669,2 +677,3 @@ ul: {

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

@@ -675,11 +684,5 @@ li: {

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

@@ -739,3 +742,3 @@ paddingLeft: em(8, 20),

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

@@ -746,8 +749,21 @@ 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',
},
figure: {
marginTop: em(40, 20),
marginBottom: em(40, 20),
},
'figure > *': {
marginTop: '0',
marginBottom: '0',
},
figcaption: {
fontSize: em(18, 20),
lineHeight: round(28 / 18),
marginTop: em(18, 18),
},
},

@@ -811,18 +827,13 @@ {

},
video: {
picture: {
marginTop: em(48, 24),
marginBottom: em(48, 24),
},
figure: {
marginTop: em(48, 24),
marginBottom: em(48, 24),
},
'figure > *': {
'picture > img': {
marginTop: '0',
marginBottom: '0',
},
figcaption: {
fontSize: em(20, 24),
lineHeight: round(32 / 20),
marginTop: em(20, 20),
video: {
marginTop: em(48, 24),
marginBottom: em(48, 24),
},

@@ -852,2 +863,3 @@ code: {

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

@@ -857,2 +869,3 @@ ul: {

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

@@ -863,11 +876,5 @@ li: {

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

@@ -927,3 +934,3 @@ paddingLeft: em(10, 24),

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

@@ -934,8 +941,21 @@ 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',
},
figure: {
marginTop: em(48, 24),
marginBottom: em(48, 24),
},
'figure > *': {
marginTop: '0',
marginBottom: '0',
},
figcaption: {
fontSize: em(20, 24),
lineHeight: round(32 / 20),
marginTop: em(20, 20),
},
},

@@ -953,24 +973,2 @@ {

// Invert (for dark mode)
invert: {
css: {
'--tw-prose-body': 'var(--tw-prose-invert-body)',
'--tw-prose-headings': 'var(--tw-prose-invert-headings)',
'--tw-prose-lead': 'var(--tw-prose-invert-lead)',
'--tw-prose-links': 'var(--tw-prose-invert-links)',
'--tw-prose-bold': 'var(--tw-prose-invert-bold)',
'--tw-prose-counters': 'var(--tw-prose-invert-counters)',
'--tw-prose-bullets': 'var(--tw-prose-invert-bullets)',
'--tw-prose-hr': 'var(--tw-prose-invert-hr)',
'--tw-prose-quotes': 'var(--tw-prose-invert-quotes)',
'--tw-prose-quote-borders': 'var(--tw-prose-invert-quote-borders)',
'--tw-prose-captions': 'var(--tw-prose-invert-captions)',
'--tw-prose-code': 'var(--tw-prose-invert-code)',
'--tw-prose-pre-code': 'var(--tw-prose-invert-pre-code)',
'--tw-prose-pre-bg': 'var(--tw-prose-invert-pre-bg)',
'--tw-prose-th-borders': 'var(--tw-prose-invert-th-borders)',
'--tw-prose-td-borders': 'var(--tw-prose-invert-td-borders)',
},
},
// Gray color themes

@@ -1283,2 +1281,24 @@

},
// Invert (for dark mode)
invert: {
css: {
'--tw-prose-body': 'var(--tw-prose-invert-body)',
'--tw-prose-headings': 'var(--tw-prose-invert-headings)',
'--tw-prose-lead': 'var(--tw-prose-invert-lead)',
'--tw-prose-links': 'var(--tw-prose-invert-links)',
'--tw-prose-bold': 'var(--tw-prose-invert-bold)',
'--tw-prose-counters': 'var(--tw-prose-invert-counters)',
'--tw-prose-bullets': 'var(--tw-prose-invert-bullets)',
'--tw-prose-hr': 'var(--tw-prose-invert-hr)',
'--tw-prose-quotes': 'var(--tw-prose-invert-quotes)',
'--tw-prose-quote-borders': 'var(--tw-prose-invert-quote-borders)',
'--tw-prose-captions': 'var(--tw-prose-invert-captions)',
'--tw-prose-code': 'var(--tw-prose-invert-code)',
'--tw-prose-pre-code': 'var(--tw-prose-invert-pre-code)',
'--tw-prose-pre-bg': 'var(--tw-prose-invert-pre-bg)',
'--tw-prose-th-borders': 'var(--tw-prose-invert-th-borders)',
'--tw-prose-td-borders': 'var(--tw-prose-invert-td-borders)',
},
},
}

@@ -1292,2 +1312,3 @@

maxWidth: '65ch',
p: {}, // Required to maintain correct order when merging
'[class~="lead"]': {

@@ -1305,2 +1326,11 @@ color: 'var(--tw-prose-lead)',

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

@@ -1370,2 +1400,3 @@ listStyleType: 'decimal',

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

@@ -1378,2 +1409,3 @@ h2: {

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

@@ -1386,2 +1418,3 @@ h3: {

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

@@ -1394,7 +1427,7 @@ h4: {

fontWeight: '700',
color: 'inherit',
},
// TODO: Figure out how to not need this, it's a merging issue
'figure > *': {},
figcaption: {
color: 'var(--tw-prose-captions)',
img: {}, // Required to maintain correct order when merging
picture: {
display: 'block',
},

@@ -1412,4 +1445,22 @@ code: {

'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: {

@@ -1464,2 +1515,13 @@ color: 'var(--tw-prose-pre-code)',

},
tfoot: {
borderTopWidth: '1px',
borderTopColor: 'var(--tw-prose-th-borders)',
},
'tfoot td': {
verticalAlign: 'top',
},
'figure > *': {}, // Required to maintain correct order when merging
figcaption: {
color: 'var(--tw-prose-captions)',
},
},

@@ -1466,0 +1528,0 @@ defaultModifiers.gray.css,

55

src/utils.js
const isPlainObject = require('lodash.isplainobject')
const parser = require('postcss-selector-parser')
const parseSelector = parser()
module.exports = {

@@ -7,2 +10,54 @@ isUsableColor(color, values) {

},
/**
* @param {string} selector
*/
commonTrailingPseudos(selector) {
let ast = parseSelector.astSync(selector)
/** @type {import('postcss-selector-parser').Pseudo[][]} */
let matrix = []
// Put the pseudo elements in reverse order in a sparse, column-major 2D array
for (let [i, sel] of ast.nodes.entries()) {
for (const [j, child] of [...sel.nodes].reverse().entries()) {
// We only care about pseudo elements
if (child.type !== 'pseudo' || !child.value.startsWith('::')) {
break
}
matrix[j] = matrix[j] || []
matrix[j][i] = child
}
}
let trailingPseudos = parser.selector()
// At this point the pseudo elements are in a column-major 2D array
// This means each row contains one "column" of pseudo elements from each selector
// We can compare all the pseudo elements in a row to see if they are the same
for (const pseudos of matrix) {
// It's a sparse 2D array so there are going to be holes in the rows
// We skip those
if (!pseudos) {
continue
}
let values = new Set([...pseudos.map((p) => p.value)])
// The pseudo elements are not the same
if (values.size > 1) {
break
}
pseudos.forEach((pseudo) => pseudo.remove())
trailingPseudos.prepend(pseudos[0])
}
if (trailingPseudos.nodes.length) {
return [trailingPseudos.toString(), ast.toString()]
}
return [null, selector]
},
}
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