New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@tailwindcss/typography

Package Overview
Dependencies
Maintainers
4
Versions
138
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-cbfeb47 to 0.0.0-insiders.19f79cb

CHANGELOG.md
dist/.gitignore
dist/.npmignore
LICENSE
src/utils.js

38

package.json
{
"name": "@tailwindcss/typography",
"version": "0.0.0-cbfeb47",
"version": "0.0.0-insiders.19f79cb",
"description": "A Tailwind CSS plugin for automatically styling plain HTML content with beautiful typographic defaults.",
"main": "src/index.js",
"files": [
"src/*.js",
"dist/"
],
"repository": "https://github.com/tailwindcss/typography",

@@ -22,8 +26,6 @@ "license": "MIT",

"export": "next export demo",
"deploy": "npm run build && npm run export",
"start": "next start demo",
"prepublishOnly": "node scripts/build.js"
"start": "next start demo"
},
"peerDependencies": {
"tailwindcss": "^1.5.0"
"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || insiders"
},

@@ -34,16 +36,28 @@ "devDependencies": {

"@next/mdx": "^8.1.0",
"autoprefixer": "^9.6.1",
"autoprefixer": "^10.2.1",
"clean-css": "^4.2.1",
"cssnano": "^4.1.10",
"dedent": "^0.7.0",
"highlight.js": "^9.15.6",
"highlight.js": "^10.4.1",
"jest": "^26.6.1",
"next": "^9.4.4",
"postcss": "^7.0.17",
"jest-diff": "^27.3.1",
"next": "^12.0.1",
"postcss": "^8.2.3",
"prettier": "^2.1.2",
"react-dom": "^16.8.6",
"react": "^16.8.6",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"snapshot-diff": "^0.8.1",
"tailwindcss": "^2.0.0-alpha.1"
"tailwindcss": "^3.0.0-alpha.2"
},
"dependencies": {
"lodash.castarray": "^4.4.0",
"lodash.isplainobject": "^4.0.6",
"lodash.merge": "^4.6.2",
"lodash.uniq": "^4.5.0"
},
"jest": {
"setupFilesAfterEnv": [
"<rootDir>/jest/customMatchers.js"
]
}
}

174

README.md

@@ -5,5 +5,7 @@ <p>

**As of v0.3.0, @tailwindcss/typography is designed for Tailwind CSS v2.0+.**
A plugin that provides a set of `prose` classes you can use to add beautiful typographic defaults to any vanilla HTML you don't control (like HTML rendered from Markdown, or pulled from a CMS).
[View live demo](https://tailwindcss-typography.netlify.app/)
[View live demo](https://tailwindcss-typography.vercel.app/)

@@ -51,3 +53,3 @@ ```html

rel="stylesheet"
href="https://unpkg.com/@tailwindcss/typography@0.2.x/dist/typography.min.css"
href="https://unpkg.com/@tailwindcss/typography@0.4.x/dist/typography.min.css"
/>

@@ -58,3 +60,3 @@

rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@tailwindcss/typography@0.2.x/dist/typography.min.css"
href="https://cdn.jsdelivr.net/npm/@tailwindcss/typography@0.4.x/dist/typography.min.css"
/>

@@ -131,8 +133,8 @@ ```

### Responsive variants
### Color modifiers
None of the sizes are automatically responsive, but responsive variants are provided for each size modifier so you can easily change the typography size at different breakpoints:
Color modifiers allow you to "brand" your typography sections by changing the link color. By default, modifiers are generated for every color in your color palette that include a `600` shade except for `gray` since it's the default.
```html
<article class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl">
<article class="prose prose-indigo">
{{ markdown }}

@@ -142,45 +144,27 @@ </article>

## Purging unused styles
Here are the classes that are generated using a totally default Tailwind CSS v2.0 build:
Since the typography styles are added to the `components` layer and Tailwind only purges `utilities` by default, you will notice that even with the `purge` option configured in your `tailwind.config.js` file, all of the typography styles still remain in your final CSS.
| Class | Link color |
| -------------- | ------------ |
| `prose-red` | `red.600` |
| `prose-yellow` | `yellow.600` |
| `prose-green` | `green.600` |
| `prose-blue` | `blue.600` |
| `prose-indigo` | `indigo.600` |
| `prose-purple` | `purple.600` |
| `prose-pink` | `pink.600` |
If you'd like to purge unused typography styles, you'll need to use the `mode: 'all'` option in your `purge` configuration:
For more control, use the [low-level customization API](#customization).
```js
// tailwind.config.js
module.exports = {
purge: {
mode: 'all',
content: [
// Paths to your templates here...
],
},
}
```
### Responsive variants
It's important to note that if you are using markdown for any of your source files (perhaps you're working on a blog or similar), that you need to be careful not to accidentally purge styles you actually need.
None of the sizes are automatically responsive, but responsive variants are provided for each size modifier so you can easily change the typography size at different breakpoints:
Markdown files for example contain no actual `h2`, `blockquote`, `strong`, etc. elements, so PurgeCSS will remove those styles because it doesn't think you need them.
```html
<article class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl">
{{ markdown }}
</article>
```
You have two options for solving this:
1. Safelist all of the plain HTML elements you need in your config file:
```js
// tailwind.config.js
module.exports = {
purge: {
mode: 'all',
content: [
// Paths to your templates here...
],
options: {
whitelist: ['h1', 'h2', 'h3', 'p', 'blockquote', 'strong' /* etc. */],
},
},
}
```
2. Use a custom extractor to compile your markdown files _before_ scanning them for tokens. This is more complicated but it is [what we do for the Tailwind blog](https://github.com/tailwindlabs/blog.tailwindcss.com/blob/eb2a0ff80c8e56a79f6514c8dc4253ef84ac5548/tailwind.config.js#L13) for example.
## Customization

@@ -196,14 +180,16 @@

theme: {
typography: {
default: {
css: {
color: '#333',
a: {
color: '#3182ce',
'&:hover': {
color: '#2c5282',
extend: {
typography: {
DEFAULT: {
css: {
color: '#333',
a: {
color: '#3182ce',
'&:hover': {
color: '#2c5282',
},
},
},
},
},
}
},

@@ -224,11 +210,13 @@ },

theme: {
typography: (theme) => ({
default: {
css: {
color: theme('colors.gray.800'),
extend: {
typography: (theme) => ({
DEFAULT: {
css: {
color: theme('colors.gray.800'),
// ...
// ...
},
},
},
}),
}),
}
},

@@ -242,3 +230,3 @@ plugins: [

Customizations should be applied to a specific modifier like `default` or `xl`, and must be added under the `css` property. Customizations are authored in the same [CSS-in-JS syntax](https://tailwindcss.com/docs/plugins#css-in-js-syntax) used to write Tailwind plugins.
Customizations should be applied to a specific modifier like `DEFAULT` or `xl`, and must be added under the `css` property. Customizations are authored in the same [CSS-in-JS syntax](https://tailwindcss.com/docs/plugins#css-in-js-syntax) used to write Tailwind plugins.

@@ -251,5 +239,5 @@ It's important to note that all customizations are **merged** with the defaults. If you'd like to completely override a provided size modifier, you can do so by disabling that modifier so the default styles are not included.

Many styles _(for example colors, font weight, and text decoration)_ are shared between all size modifiers, and are therefore defined only for the `default` modifier, since modifiers are designed to be used with the [multi-class modifier pattern](http://nicolasgallagher.com/about-html-semantics-front-end-architecture/#component-modifiers).
Many styles _(for example colors, font weight, and text decoration)_ are shared between all size modifiers, and are therefore defined only for the `DEFAULT` modifier, since modifiers are designed to be used with the [multi-class modifier pattern](http://nicolasgallagher.com/about-html-semantics-front-end-architecture/#component-modifiers).
If you'd like to customize these sorts of styles, do so using the `default` modifier:
If you'd like to customize these sorts of styles, do so using the `DEFAULT` modifier:

@@ -260,13 +248,15 @@ ```js

theme: {
typography: {
default: {
css: {
color: '#333',
strong: {
fontWeight: '800',
extend: {
typography: {
DEFAULT: {
css: {
color: '#333',
strong: {
fontWeight: '800',
},
// ...
},
// ...
},
},
},
}
},

@@ -288,13 +278,15 @@ plugins: [

theme: {
typography: {
'3xl': {
css: {
fontSize: '1.875rem',
h1: {
fontSize: '4rem',
extend: {
typography: {
'3xl': {
css: {
fontSize: '1.875rem',
h1: {
fontSize: '4rem',
},
// ...
},
// ...
},
},
},
}
},

@@ -348,3 +340,3 @@ plugins: [

The `default` modifier is always included and cannot be disabled.
The `DEFAULT` modifier is always included and cannot be disabled.

@@ -370,1 +362,27 @@ ### Disabling responsive variants

```
### Changing the default class name
If you need to use a class name other than `prose` for any reason, you can do so using the `className` option when registering the plugin:
```js
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('@tailwindcss/typography')({
className: 'markdown',
}),
]
...
}
```
```html
<article class="markdown md:markdown-lg">
{{ markdown }}
</article>
```

151

src/index.js
const plugin = require('tailwindcss/plugin')
const merge = require('lodash/merge')
const castArray = require('lodash/castArray')
const merge = require('lodash.merge')
const castArray = require('lodash.castarray')
const styles = require('./styles')

@@ -11,9 +11,65 @@

function configToCss(config) {
return merge(
{},
...Object.keys(config)
.filter((key) => computed[key])
.map((key) => computed[key](config[key])),
...castArray(config.css || {})
function inWhere(selector, { className, prefix }) {
let prefixedNot = prefix(`.not-${className}`).slice(1)
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`
}
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 (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}"] *))`
}
function isObject(value) {
return typeof value === 'object' && value !== null
}
function configToCss(config = {}, { target, className, prefix }) {
function updateSelector(k, v) {
if (target === 'legacy') {
return [k, v]
}
if (isObject(v)) {
let nested = Object.values(v).some(isObject)
if (nested) {
return [k, Object.fromEntries(Object.entries(v).map(([k, v]) => updateSelector(k, v)))]
}
return [inWhere(k, { className, prefix }), v]
}
return [k, v]
}
return Object.fromEntries(
Object.entries(
merge(
{},
...Object.keys(config)
.filter((key) => computed[key])
.map((key) => computed[key](config[key])),
...castArray(config.css || {})
)
).map(([k, v]) => updateSelector(k, v))
)

@@ -23,33 +79,58 @@ }

module.exports = plugin.withOptions(
({ modifiers = ['sm', 'lg', 'xl', '2xl'], className = 'prose' } = {}) => {
return function ({ addComponents, theme, variants }) {
const config = theme('typography', {})
({ className = 'prose', target = 'modern' } = {}) => {
return function ({ addVariant, addComponents, theme, prefix }) {
let modifiers = theme('typography')
let options = { className, prefix }
for (let [name, selector = name] of [
['headings', 'h1, h2, h3, h4, th'],
['lead', '[class~="lead"]'],
['h1'],
['h2'],
['h3'],
['h4'],
['p'],
['a'],
['blockquote'],
['figure'],
['figcaption'],
['strong'],
['em'],
['code'],
['pre'],
['ol'],
['ul'],
['li'],
['table'],
['thead'],
['tr'],
['th'],
['td'],
['img'],
['video'],
['hr'],
]) {
addVariant(`${className}-${name}`, `& :is(${inWhere(selector, options)})`)
}
addComponents(
[
{
[`.${className}`]: merge(
{},
...castArray(styles.DEFAULT.css),
configToCss(config.DEFAULT || {})
),
},
...modifiers.map((modifier) => ({
[`.${className}-${modifier}`]: merge(
{},
...castArray(styles[modifier].css),
configToCss(config[modifier] || {})
),
})),
...Object.keys(config)
.filter((key) => !['DEFAULT', ...modifiers].includes(key))
.map((modifier) => ({
[`.${className}-${modifier}`]: configToCss(config[modifier]),
})),
],
variants('typography')
Object.keys(modifiers).map((modifier) => ({
[modifier === 'DEFAULT' ? `.${className}` : `.${className}-${modifier}`]: configToCss(
modifiers[modifier],
{
target,
className,
prefix,
}
),
}))
)
}
},
() => ({ variants: { typography: ['responsive'] } })
() => {
return {
theme: { typography: styles },
}
}
)

2283

src/index.test.js

@@ -0,1548 +1,805 @@

const path = require('path')
const tailwind = require('tailwindcss')
const postcss = require('postcss')
const typographyPlugin = require('.')
const snapshotDiff = require('snapshot-diff')
function run(options = {}, config = {}) {
const state = { components: {}, variants: [] }
typographyPlugin(options).handler({
addComponents: (...args) => Object.assign(state.components, ...args.flat()),
variants: (...args) => state.variants.push(...args),
theme: () => config,
})
return state.components
}
let html = String.raw
let css = String.raw
let javascript = String.raw
function diffOnly(options = {}, config = {}) {
const before = run()
const after = run(options, config)
function run(config, plugin = tailwind) {
let { currentTestName } = expect.getState()
config = {
...{ plugins: [typographyPlugin], corePlugins: { preflight: false } },
...config,
}
return `\n\n${snapshotDiff(before, after, {
aAnnotation: '__REMOVE_ME__',
bAnnotation: '__REMOVE_ME__',
contextLines: 0,
})
.replace(/\n\n@@([^@@]*)@@/g, '') // Top level @@ signs
.replace(/@@([^@@]*)@@/g, '\n---\n') // In between @@ signs
.replace(/[-+] __REMOVE_ME__\n/g, '')
.replace(/Snapshot Diff:\n/g, '')
.replace(/"/g, "'")
.split('\n')
.map((line) => ` ${line}`)
.join('\n')}\n\n`
return postcss(plugin(config)).process(
['@tailwind base;', '@tailwind components;', '@tailwind utilities'].join('\n'),
{
from: `${path.resolve(__filename)}?test=${currentTestName}`,
}
)
}
it('should generate the default classes for the typography components', () => {
expect(run()).toMatchInlineSnapshot(`
Object {
".prose": Object {
"> :first-child": Object {
"marginTop": "0",
test('specificity is reduced with :where', async () => {
let config = {
content: [{ raw: html`<div class="prose"></div>` }],
theme: {
typography: {
DEFAULT: {
css: [
{
color: 'var(--tw-prose-body)',
maxWidth: '65ch',
'[class~="lead"]': {
color: 'var(--tw-prose-lead)',
},
strong: {
color: 'var(--tw-prose-bold)',
fontWeight: '600',
},
'ol[type="A"]': {
listStyleType: 'upper-alpha',
},
'blockquote p:first-of-type::before': {
content: 'open-quote',
},
'blockquote p:last-of-type::after': {
content: 'close-quote',
},
'h4 strong': {
fontWeight: '700',
},
'figure > *': {
margin: 0,
},
'ol > li::marker': {
fontWeight: '400',
color: 'var(--tw-prose-counters)',
},
'> ul > li p': {
marginTop: '16px',
marginBottom: '16px',
},
'code::before': {
content: '"&#96;"',
},
'code::after': {
content: '"&#96;"',
},
},
],
},
"> :last-child": Object {
"marginBottom": "0",
},
"> ol > li > *:first-child": Object {
"marginTop": "1.25em",
},
"> ol > li > *:last-child": Object {
"marginBottom": "1.25em",
},
"> ul > li > *:first-child": Object {
"marginTop": "1.25em",
},
"> ul > li > *:last-child": Object {
"marginBottom": "1.25em",
},
"> ul > li p": Object {
"marginBottom": "0.75em",
"marginTop": "0.75em",
},
"[class~=\\"lead\\"]": Object {
"color": "#52525b",
"fontSize": "1.25em",
"lineHeight": "1.6",
"marginBottom": "1.2em",
"marginTop": "1.2em",
},
"a": Object {
"color": "#18181b",
"textDecoration": "underline",
},
"blockquote": Object {
"borderLeftColor": "#e4e4e7",
"borderLeftWidth": "0.25rem",
"color": "#18181b",
"fontStyle": "italic",
"fontWeight": "500",
"marginBottom": "1.6em",
"marginTop": "1.6em",
"paddingLeft": "1em",
"quotes": "\\"\\\\201C\\"\\"\\\\201D\\"\\"\\\\2018\\"\\"\\\\2019\\"",
},
"blockquote p:first-of-type::before": Object {
"content": "open-quote",
},
"blockquote p:last-of-type::after": Object {
"content": "close-quote",
},
"code": Object {
"color": "#18181b",
"fontSize": "0.875em",
"fontWeight": "600",
},
"code::after": Object {
"content": "\\"\`\\"",
},
"code::before": Object {
"content": "\\"\`\\"",
},
"color": "#3f3f46",
"figure": Object {
"marginBottom": "2em",
"marginTop": "2em",
},
"figure > *": Object {
"marginBottom": "0",
"marginTop": "0",
},
"figure figcaption": Object {
"color": "#71717a",
"fontSize": "0.875em",
"lineHeight": "1.4285714",
"marginTop": "0.8571429em",
},
"fontSize": "1rem",
"h1": Object {
"color": "#18181b",
"fontSize": "2.25em",
"fontWeight": "800",
"lineHeight": "1.1111111",
"marginBottom": "0.8888889em",
"marginTop": "0",
},
"h2": Object {
"color": "#18181b",
"fontSize": "1.5em",
"fontWeight": "700",
"lineHeight": "1.3333333",
"marginBottom": "1em",
"marginTop": "2em",
},
"h2 + *": Object {
"marginTop": "0",
},
"h2 code": Object {
"fontSize": "0.875em",
},
"h3": Object {
"color": "#18181b",
"fontSize": "1.25em",
"fontWeight": "600",
"lineHeight": "1.6",
"marginBottom": "0.6em",
"marginTop": "1.6em",
},
"h3 + *": Object {
"marginTop": "0",
},
"h3 code": Object {
"fontSize": "0.9em",
},
"h4": Object {
"color": "#18181b",
"fontWeight": "600",
"lineHeight": "1.5",
"marginBottom": "0.5em",
"marginTop": "1.5em",
},
"h4 + *": Object {
"marginTop": "0",
},
"hr": Object {
"borderColor": "#e4e4e7",
"borderTopWidth": 1,
"marginBottom": "3em",
"marginTop": "3em",
},
"hr + *": Object {
"marginTop": "0",
},
"img": Object {
"marginBottom": "2em",
"marginTop": "2em",
},
"li": Object {
"marginBottom": "0.5em",
"marginTop": "0.5em",
},
"lineHeight": "1.75",
"maxWidth": "65ch",
"ol": Object {
"counterReset": "list-counter",
"marginBottom": "1.25em",
"marginTop": "1.25em",
},
"ol > li": Object {
"counterIncrement": "list-counter",
"paddingLeft": "1.75em",
"position": "relative",
},
"ol > li::before": Object {
"color": "#71717a",
"content": "counter(list-counter) \\".\\"",
"fontWeight": "400",
"left": "0",
"position": "absolute",
},
"p": Object {
"marginBottom": "1.25em",
"marginTop": "1.25em",
},
"pre": Object {
"backgroundColor": "#27272a",
"borderRadius": "0.375rem",
"color": "#e4e4e7",
"fontSize": "0.875em",
"lineHeight": "1.7142857",
"marginBottom": "1.7142857em",
"marginTop": "1.7142857em",
"overflowX": "auto",
"paddingBottom": "0.8571429em",
"paddingLeft": "1.1428571em",
"paddingRight": "1.1428571em",
"paddingTop": "0.8571429em",
},
"pre code": Object {
"backgroundColor": "transparent",
"borderRadius": "0",
"borderWidth": "0",
"color": "inherit",
"fontFamily": "inherit",
"fontSize": "inherit",
"fontWeight": "400",
"lineHeight": "inherit",
"padding": "0",
},
"pre code::after": Object {
"content": "\\"\\"",
},
"pre code::before": Object {
"content": "\\"\\"",
},
"strong": Object {
"color": "#18181b",
"fontWeight": "600",
},
"table": Object {
"fontSize": "0.875em",
"lineHeight": "1.7142857",
"marginBottom": "2em",
"marginTop": "2em",
"tableLayout": "auto",
"textAlign": "left",
"width": "100%",
},
"tbody td": Object {
"paddingBottom": "0.5714286em",
"paddingLeft": "0.5714286em",
"paddingRight": "0.5714286em",
"paddingTop": "0.5714286em",
"verticalAlign": "top",
},
"tbody td:first-child": Object {
"paddingLeft": "0",
},
"tbody td:last-child": Object {
"paddingRight": "0",
},
"tbody tr": Object {
"borderBottomColor": "#e4e4e7",
"borderBottomWidth": "1px",
},
"tbody tr:last-child": Object {
"borderBottomWidth": "0",
},
"thead": Object {
"borderBottomColor": "#d4d4d8",
"borderBottomWidth": "1px",
"color": "#18181b",
"fontWeight": "600",
},
"thead th": Object {
"paddingBottom": "0.5714286em",
"paddingLeft": "0.5714286em",
"paddingRight": "0.5714286em",
"verticalAlign": "bottom",
},
"thead th:first-child": Object {
"paddingLeft": "0",
},
"thead th:last-child": Object {
"paddingRight": "0",
},
"ul": Object {
"marginBottom": "1.25em",
"marginTop": "1.25em",
},
"ul > li": Object {
"paddingLeft": "1.75em",
"position": "relative",
},
"ul > li::before": Object {
"backgroundColor": "#d4d4d8",
"borderRadius": "50%",
"content": "\\"\\"",
"height": "0.375em",
"left": "0.25em",
"position": "absolute",
"top": "calc(0.875em - 0.1875em)",
"width": "0.375em",
},
"ul ul, ul ol, ol ul, ol ol": Object {
"marginBottom": "0.75em",
"marginTop": "0.75em",
},
"video": Object {
"marginBottom": "2em",
"marginTop": "2em",
},
},
".prose-2xl": Object {
"> :first-child": Object {
"marginTop": "0",
},
}
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;';
}
`)
})
})
test('modifiers', async () => {
let config = {
content: [{ raw: html`<div class="prose prose-lg"></div>` }],
theme: {
typography: {
DEFAULT: {
css: [
{
color: 'var(--tw-prose-body)',
maxWidth: '65ch',
'[class~="lead"]': {
color: 'var(--tw-prose-lead)',
},
strong: {
color: 'var(--tw-prose-bold)',
fontWeight: '600',
},
'ol[type="A"]': {
listStyleType: 'upper-alpha',
},
'blockquote p:first-of-type::before': {
content: 'open-quote',
},
'blockquote p:last-of-type::after': {
content: 'close-quote',
},
'h4 strong': {
fontWeight: '700',
},
'figure > *': {
margin: 0,
},
'ol > li::marker': {
fontWeight: '400',
color: 'var(--tw-prose-counters)',
},
'code::before': {
content: '"&#96;"',
},
'code::after': {
content: '"&#96;"',
},
},
],
},
"> :last-child": Object {
"marginBottom": "0",
lg: {
css: [
{
fontSize: '18px',
lineHeight: '1.75',
p: {
marginTop: '24px',
marginBottom: '24px',
},
'[class~="lead"]': {
fontSize: '22px',
},
blockquote: {
marginTop: '40px',
marginBottom: '40px',
},
h1: {
fontSize: '48px',
marginTop: '0',
marginBottom: '40px',
},
h2: {
fontSize: '30px',
marginTop: '56px',
marginBottom: '32px',
},
h3: {
fontSize: '24px',
marginTop: '40px',
marginBottom: '16px',
},
},
],
},
"> ol > li > *:first-child": Object {
"marginTop": "1.3333333em",
},
"> ol > li > *:last-child": Object {
"marginBottom": "1.3333333em",
},
"> ul > li > *:first-child": Object {
"marginTop": "1.3333333em",
},
"> ul > li > *:last-child": Object {
"marginBottom": "1.3333333em",
},
"> ul > li p": Object {
"marginBottom": "0.8333333em",
"marginTop": "0.8333333em",
},
"[class~=\\"lead\\"]": Object {
"fontSize": "1.25em",
"lineHeight": "1.4666667",
"marginBottom": "1.0666667em",
"marginTop": "1.0666667em",
},
"blockquote": Object {
"marginBottom": "1.7777778em",
"marginTop": "1.7777778em",
"paddingLeft": "1.1111111em",
},
"code": Object {
"fontSize": "0.8333333em",
},
"figure": Object {
"marginBottom": "2em",
"marginTop": "2em",
},
"figure > *": Object {
"marginBottom": "0",
"marginTop": "0",
},
"figure figcaption": Object {
"fontSize": "0.8333333em",
"lineHeight": "1.6",
"marginTop": "1em",
},
"fontSize": "1.5rem",
"h1": Object {
"fontSize": "2.6666667em",
"lineHeight": "1",
"marginBottom": "0.875em",
"marginTop": "0",
},
"h2": Object {
"fontSize": "2em",
"lineHeight": "1.0833333",
"marginBottom": "0.8333333em",
"marginTop": "1.5em",
},
"h2 + *": Object {
"marginTop": "0",
},
"h2 code": Object {
"fontSize": "0.875em",
},
"h3": Object {
"fontSize": "1.5em",
"lineHeight": "1.2222222",
"marginBottom": "0.6666667em",
"marginTop": "1.5555556em",
},
"h3 + *": Object {
"marginTop": "0",
},
"h3 code": Object {
"fontSize": "0.8888889em",
},
"h4": Object {
"lineHeight": "1.5",
"marginBottom": "0.6666667em",
"marginTop": "1.6666667em",
},
"h4 + *": Object {
"marginTop": "0",
},
"hr": Object {
"marginBottom": "3em",
"marginTop": "3em",
},
"hr + *": Object {
"marginTop": "0",
},
"img": Object {
"marginBottom": "2em",
"marginTop": "2em",
},
"li": Object {
"marginBottom": "0.5em",
"marginTop": "0.5em",
},
"lineHeight": "1.6666667",
"ol": Object {
"marginBottom": "1.3333333em",
"marginTop": "1.3333333em",
},
"ol > li": Object {
"paddingLeft": "1.6666667em",
},
"ol > li::before": Object {
"left": "0",
},
"p": Object {
"marginBottom": "1.3333333em",
"marginTop": "1.3333333em",
},
"pre": Object {
"borderRadius": "0.5rem",
"fontSize": "0.8333333em",
"lineHeight": "1.8",
"marginBottom": "2em",
"marginTop": "2em",
"paddingBottom": "1.2em",
"paddingLeft": "1.6em",
"paddingRight": "1.6em",
"paddingTop": "1.2em",
},
"table": Object {
"fontSize": "0.8333333em",
"lineHeight": "1.4",
},
"tbody td": Object {
"paddingBottom": "0.8em",
"paddingLeft": "0.6em",
"paddingRight": "0.6em",
"paddingTop": "0.8em",
},
"tbody td:first-child": Object {
"paddingLeft": "0",
},
"tbody td:last-child": Object {
"paddingRight": "0",
},
"thead th": Object {
"paddingBottom": "0.8em",
"paddingLeft": "0.6em",
"paddingRight": "0.6em",
},
"thead th:first-child": Object {
"paddingLeft": "0",
},
"thead th:last-child": Object {
"paddingRight": "0",
},
"ul": Object {
"marginBottom": "1.3333333em",
"marginTop": "1.3333333em",
},
"ul > li": Object {
"paddingLeft": "1.6666667em",
},
"ul > li::before": Object {
"height": "0.3333333em",
"left": "0.25em",
"top": "calc(0.8333333em - 0.1666667em)",
"width": "0.3333333em",
},
"ul ul, ul ol, ol ul, ol ol": Object {
"marginBottom": "0.6666667em",
"marginTop": "0.6666667em",
},
"video": Object {
"marginBottom": "2em",
"marginTop": "2em",
},
},
".prose-lg": Object {
"> :first-child": Object {
"marginTop": "0",
},
"> :last-child": Object {
"marginBottom": "0",
},
"> ol > li > *:first-child": Object {
"marginTop": "1.3333333em",
},
"> ol > li > *:last-child": Object {
"marginBottom": "1.3333333em",
},
"> ul > li > *:first-child": Object {
"marginTop": "1.3333333em",
},
"> ul > li > *:last-child": Object {
"marginBottom": "1.3333333em",
},
"> ul > li p": Object {
"marginBottom": "0.8888889em",
"marginTop": "0.8888889em",
},
"[class~=\\"lead\\"]": Object {
"fontSize": "1.2222222em",
"lineHeight": "1.4545455",
"marginBottom": "1.0909091em",
"marginTop": "1.0909091em",
},
"blockquote": Object {
"marginBottom": "1.6666667em",
"marginTop": "1.6666667em",
"paddingLeft": "1em",
},
"code": Object {
"fontSize": "0.8888889em",
},
"figure": Object {
"marginBottom": "1.7777778em",
"marginTop": "1.7777778em",
},
"figure > *": Object {
"marginBottom": "0",
"marginTop": "0",
},
"figure figcaption": Object {
"fontSize": "0.8888889em",
"lineHeight": "1.5",
"marginTop": "1em",
},
"fontSize": "1.125rem",
"h1": Object {
"fontSize": "2.6666667em",
"lineHeight": "1",
"marginBottom": "0.8333333em",
"marginTop": "0",
},
"h2": Object {
"fontSize": "1.6666667em",
"lineHeight": "1.3333333",
"marginBottom": "1.0666667em",
"marginTop": "1.8666667em",
},
"h2 + *": Object {
"marginTop": "0",
},
"h2 code": Object {
"fontSize": "0.8666667em",
},
"h3": Object {
"fontSize": "1.3333333em",
"lineHeight": "1.5",
"marginBottom": "0.6666667em",
"marginTop": "1.6666667em",
},
"h3 + *": Object {
"marginTop": "0",
},
"h3 code": Object {
"fontSize": "0.875em",
},
"h4": Object {
"lineHeight": "1.5555556",
"marginBottom": "0.4444444em",
"marginTop": "1.7777778em",
},
"h4 + *": Object {
"marginTop": "0",
},
"hr": Object {
"marginBottom": "3.1111111em",
"marginTop": "3.1111111em",
},
"hr + *": Object {
"marginTop": "0",
},
"img": Object {
"marginBottom": "1.7777778em",
"marginTop": "1.7777778em",
},
"li": Object {
"marginBottom": "0.6666667em",
"marginTop": "0.6666667em",
},
"lineHeight": "1.7777778",
"ol": Object {
"marginBottom": "1.3333333em",
"marginTop": "1.3333333em",
},
"ol > li": Object {
"paddingLeft": "1.6666667em",
},
"ol > li::before": Object {
"left": "0",
},
"p": Object {
"marginBottom": "1.3333333em",
"marginTop": "1.3333333em",
},
"pre": Object {
"borderRadius": "0.375rem",
"fontSize": "0.8888889em",
"lineHeight": "1.75",
"marginBottom": "2em",
"marginTop": "2em",
"paddingBottom": "1em",
"paddingLeft": "1.5em",
"paddingRight": "1.5em",
"paddingTop": "1em",
},
"table": Object {
"fontSize": "0.8888889em",
"lineHeight": "1.5",
},
"tbody td": Object {
"paddingBottom": "0.75em",
"paddingLeft": "0.75em",
"paddingRight": "0.75em",
"paddingTop": "0.75em",
},
"tbody td:first-child": Object {
"paddingLeft": "0",
},
"tbody td:last-child": Object {
"paddingRight": "0",
},
"thead th": Object {
"paddingBottom": "0.75em",
"paddingLeft": "0.75em",
"paddingRight": "0.75em",
},
"thead th:first-child": Object {
"paddingLeft": "0",
},
"thead th:last-child": Object {
"paddingRight": "0",
},
"ul": Object {
"marginBottom": "1.3333333em",
"marginTop": "1.3333333em",
},
"ul > li": Object {
"paddingLeft": "1.6666667em",
},
"ul > li::before": Object {
"height": "0.3333333em",
"left": "0.2222222em",
"top": "calc(0.8888889em - 0.1666667em)",
"width": "0.3333333em",
},
"ul ul, ul ol, ol ul, ol ol": Object {
"marginBottom": "0.8888889em",
"marginTop": "0.8888889em",
},
"video": Object {
"marginBottom": "1.7777778em",
"marginTop": "1.7777778em",
},
},
".prose-sm": Object {
"> :first-child": Object {
"marginTop": "0",
},
"> :last-child": Object {
"marginBottom": "0",
},
"> ol > li > *:first-child": Object {
"marginTop": "1.1428571em",
},
"> ol > li > *:last-child": Object {
"marginBottom": "1.1428571em",
},
"> ul > li > *:first-child": Object {
"marginTop": "1.1428571em",
},
"> ul > li > *:last-child": Object {
"marginBottom": "1.1428571em",
},
"> ul > li p": Object {
"marginBottom": "0.5714286em",
"marginTop": "0.5714286em",
},
"[class~=\\"lead\\"]": Object {
"fontSize": "1.2857143em",
"lineHeight": "1.5555556",
"marginBottom": "0.8888889em",
"marginTop": "0.8888889em",
},
"blockquote": Object {
"marginBottom": "1.3333333em",
"marginTop": "1.3333333em",
"paddingLeft": "1.1111111em",
},
"code": Object {
"fontSize": "0.8571429em",
},
"figure": Object {
"marginBottom": "1.7142857em",
"marginTop": "1.7142857em",
},
"figure > *": Object {
"marginBottom": "0",
"marginTop": "0",
},
"figure figcaption": Object {
"fontSize": "0.8571429em",
"lineHeight": "1.3333333",
"marginTop": "0.6666667em",
},
"fontSize": "0.875rem",
"h1": Object {
"fontSize": "2.1428571em",
"lineHeight": "1.2",
"marginBottom": "0.8em",
"marginTop": "0",
},
"h2": Object {
"fontSize": "1.4285714em",
"lineHeight": "1.4",
"marginBottom": "0.8em",
"marginTop": "1.6em",
},
"h2 + *": Object {
"marginTop": "0",
},
"h2 code": Object {
"fontSize": "0.9em",
},
"h3": Object {
"fontSize": "1.2857143em",
"lineHeight": "1.5555556",
"marginBottom": "0.4444444em",
"marginTop": "1.5555556em",
},
"h3 + *": Object {
"marginTop": "0",
},
"h3 code": Object {
"fontSize": "0.8888889em",
},
"h4": Object {
"lineHeight": "1.4285714",
"marginBottom": "0.5714286em",
"marginTop": "1.4285714em",
},
"h4 + *": Object {
"marginTop": "0",
},
"hr": Object {
"marginBottom": "2.8571429em",
"marginTop": "2.8571429em",
},
"hr + *": Object {
"marginTop": "0",
},
"img": Object {
"marginBottom": "1.7142857em",
"marginTop": "1.7142857em",
},
"li": Object {
"marginBottom": "0.2857143em",
"marginTop": "0.2857143em",
},
"lineHeight": "1.7142857",
"ol": Object {
"marginBottom": "1.1428571em",
"marginTop": "1.1428571em",
},
"ol > li": Object {
"paddingLeft": "1.5714286em",
},
"ol > li::before": Object {
"left": "0",
},
"p": Object {
"marginBottom": "1.1428571em",
"marginTop": "1.1428571em",
},
"pre": Object {
"borderRadius": "0.25rem",
"fontSize": "0.8571429em",
"lineHeight": "1.6666667",
"marginBottom": "1.6666667em",
"marginTop": "1.6666667em",
"paddingBottom": "0.6666667em",
"paddingLeft": "1em",
"paddingRight": "1em",
"paddingTop": "0.6666667em",
},
"table": Object {
"fontSize": "0.8571429em",
"lineHeight": "1.5",
},
"tbody td": Object {
"paddingBottom": "0.6666667em",
"paddingLeft": "1em",
"paddingRight": "1em",
"paddingTop": "0.6666667em",
},
"tbody td:first-child": Object {
"paddingLeft": "0",
},
"tbody td:last-child": Object {
"paddingRight": "0",
},
"thead th": Object {
"paddingBottom": "0.6666667em",
"paddingLeft": "1em",
"paddingRight": "1em",
},
"thead th:first-child": Object {
"paddingLeft": "0",
},
"thead th:last-child": Object {
"paddingRight": "0",
},
"ul": Object {
"marginBottom": "1.1428571em",
"marginTop": "1.1428571em",
},
"ul > li": Object {
"paddingLeft": "1.5714286em",
},
"ul > li::before": Object {
"height": "0.3571429em",
"left": "0.2142857em",
"top": "calc(0.8571429em - 0.1785714em)",
"width": "0.3571429em",
},
"ul ul, ul ol, ol ul, ol ol": Object {
"marginBottom": "0.5714286em",
"marginTop": "0.5714286em",
},
"video": Object {
"marginBottom": "1.7142857em",
"marginTop": "1.7142857em",
},
},
".prose-xl": Object {
"> :first-child": Object {
"marginTop": "0",
},
"> :last-child": Object {
"marginBottom": "0",
},
"> ol > li > *:first-child": Object {
"marginTop": "1.2em",
},
"> ol > li > *:last-child": Object {
"marginBottom": "1.2em",
},
"> ul > li > *:first-child": Object {
"marginTop": "1.2em",
},
"> ul > li > *:last-child": Object {
"marginBottom": "1.2em",
},
"> ul > li p": Object {
"marginBottom": "0.8em",
"marginTop": "0.8em",
},
"[class~=\\"lead\\"]": Object {
"fontSize": "1.2em",
"lineHeight": "1.5",
"marginBottom": "1em",
"marginTop": "1em",
},
"blockquote": Object {
"marginBottom": "1.6em",
"marginTop": "1.6em",
"paddingLeft": "1.0666667em",
},
"code": Object {
"fontSize": "0.9em",
},
"figure": Object {
"marginBottom": "2em",
"marginTop": "2em",
},
"figure > *": Object {
"marginBottom": "0",
"marginTop": "0",
},
"figure figcaption": Object {
"fontSize": "0.9em",
"lineHeight": "1.5555556",
"marginTop": "1em",
},
"fontSize": "1.25rem",
"h1": Object {
"fontSize": "2.8em",
"lineHeight": "1",
"marginBottom": "0.8571429em",
"marginTop": "0",
},
"h2": Object {
"fontSize": "1.8em",
"lineHeight": "1.1111111",
"marginBottom": "0.8888889em",
"marginTop": "1.5555556em",
},
"h2 + *": Object {
"marginTop": "0",
},
"h2 code": Object {
"fontSize": "0.8611111em",
},
"h3": Object {
"fontSize": "1.5em",
"lineHeight": "1.3333333",
"marginBottom": "0.6666667em",
"marginTop": "1.6em",
},
"h3 + *": Object {
"marginTop": "0",
},
"h3 code": Object {
"fontSize": "0.9em",
},
"h4": Object {
"lineHeight": "1.6",
"marginBottom": "0.6em",
"marginTop": "1.8em",
},
"h4 + *": Object {
"marginTop": "0",
},
"hr": Object {
"marginBottom": "2.8em",
"marginTop": "2.8em",
},
"hr + *": Object {
"marginTop": "0",
},
"img": Object {
"marginBottom": "2em",
"marginTop": "2em",
},
"li": Object {
"marginBottom": "0.6em",
"marginTop": "0.6em",
},
"lineHeight": "1.8",
"ol": Object {
"marginBottom": "1.2em",
"marginTop": "1.2em",
},
"ol > li": Object {
"paddingLeft": "1.8em",
},
"ol > li::before": Object {
"left": "0",
},
"p": Object {
"marginBottom": "1.2em",
"marginTop": "1.2em",
},
"pre": Object {
"borderRadius": "0.5rem",
"fontSize": "0.9em",
"lineHeight": "1.7777778",
"marginBottom": "2em",
"marginTop": "2em",
"paddingBottom": "1.1111111em",
"paddingLeft": "1.3333333em",
"paddingRight": "1.3333333em",
"paddingTop": "1.1111111em",
},
"table": Object {
"fontSize": "0.9em",
"lineHeight": "1.5555556",
},
"tbody td": Object {
"paddingBottom": "0.8888889em",
"paddingLeft": "0.6666667em",
"paddingRight": "0.6666667em",
"paddingTop": "0.8888889em",
},
"tbody td:first-child": Object {
"paddingLeft": "0",
},
"tbody td:last-child": Object {
"paddingRight": "0",
},
"thead th": Object {
"paddingBottom": "0.8888889em",
"paddingLeft": "0.6666667em",
"paddingRight": "0.6666667em",
},
"thead th:first-child": Object {
"paddingLeft": "0",
},
"thead th:last-child": Object {
"paddingRight": "0",
},
"ul": Object {
"marginBottom": "1.2em",
"marginTop": "1.2em",
},
"ul > li": Object {
"paddingLeft": "1.8em",
},
"ul > li::before": Object {
"height": "0.35em",
"left": "0.25em",
"top": "calc(0.9em - 0.175em)",
"width": "0.35em",
},
"ul ul, ul ol, ol ul, ol ol": Object {
"marginBottom": "0.8em",
"marginTop": "0.8em",
},
"video": Object {
"marginBottom": "2em",
"marginTop": "2em",
},
},
}
`)
})
},
}
it('should be possilbe to change the default className from `prose` to `markdown`', () => {
expect(diffOnly({ className: 'markdown' })).toMatchInlineSnapshot(`
"
- '.prose': Object {
+ '.markdown': Object {
---
- '.prose-2xl': Object {
+ '.markdown-2xl': Object {
---
- '.prose-lg': Object {
+ '.markdown-lg': Object {
---
- '.prose-sm': Object {
+ '.markdown-sm': Object {
---
- '.prose-xl': Object {
+ '.markdown-xl': Object {
"
`)
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;
}
`)
})
})
it('should be possilbe to change the default modifiers', () => {
expect(diffOnly({ modifiers: ['sm', 'lg', 'xl' /**, '2xl' */] })).toMatchInlineSnapshot(`
"
test('legacy target', async () => {
let config = {
plugins: [typographyPlugin({ target: 'legacy' })],
content: [{ raw: html`<div class="prose"></div>` }],
theme: {
typography: {
DEFAULT: {
css: [
{
color: 'var(--tw-prose-body)',
maxWidth: '65ch',
'[class~="lead"]': {
color: 'var(--tw-prose-lead)',
},
strong: {
color: 'var(--tw-prose-bold)',
fontWeight: '600',
},
'ol[type="A"]': {
listStyleType: 'upper-alpha',
},
'blockquote p:first-of-type::before': {
content: 'open-quote',
},
'blockquote p:last-of-type::after': {
content: 'close-quote',
},
'h4 strong': {
fontWeight: '700',
},
'figure > *': {
margin: 0,
},
'ol > li::marker': {
fontWeight: '400',
color: 'var(--tw-prose-counters)',
},
'code::before': {
content: '"&#96;"',
},
'code::after': {
content: '"&#96;"',
},
},
],
},
},
},
}
- '.prose-2xl': Object {
- '> :first-child': Object {
- 'marginTop': '0',
- },
- '> :last-child': Object {
- 'marginBottom': '0',
- },
- '> ol > li > *:first-child': Object {
- 'marginTop': '1.3333333em',
- },
- '> ol > li > *:last-child': Object {
- 'marginBottom': '1.3333333em',
- },
- '> ul > li > *:first-child': Object {
- 'marginTop': '1.3333333em',
- },
- '> ul > li > *:last-child': Object {
- 'marginBottom': '1.3333333em',
- },
- '> ul > li p': Object {
- 'marginBottom': '0.8333333em',
- 'marginTop': '0.8333333em',
- },
- '[class~=\\\\'lead\\\\']': Object {
- 'fontSize': '1.25em',
- 'lineHeight': '1.4666667',
- 'marginBottom': '1.0666667em',
- 'marginTop': '1.0666667em',
- },
- 'blockquote': Object {
- 'marginBottom': '1.7777778em',
- 'marginTop': '1.7777778em',
- 'paddingLeft': '1.1111111em',
- },
- 'code': Object {
- 'fontSize': '0.8333333em',
- },
- 'figure': Object {
- 'marginBottom': '2em',
- 'marginTop': '2em',
- },
- 'figure > *': Object {
- 'marginBottom': '0',
- 'marginTop': '0',
- },
- 'figure figcaption': Object {
- 'fontSize': '0.8333333em',
- 'lineHeight': '1.6',
- 'marginTop': '1em',
- },
- 'fontSize': '1.5rem',
- 'h1': Object {
- 'fontSize': '2.6666667em',
- 'lineHeight': '1',
- 'marginBottom': '0.875em',
- 'marginTop': '0',
- },
- 'h2': Object {
- 'fontSize': '2em',
- 'lineHeight': '1.0833333',
- 'marginBottom': '0.8333333em',
- 'marginTop': '1.5em',
- },
- 'h2 + *': Object {
- 'marginTop': '0',
- },
- 'h2 code': Object {
- 'fontSize': '0.875em',
- },
- 'h3': Object {
- 'fontSize': '1.5em',
- 'lineHeight': '1.2222222',
- 'marginBottom': '0.6666667em',
- 'marginTop': '1.5555556em',
- },
- 'h3 + *': Object {
- 'marginTop': '0',
- },
- 'h3 code': Object {
- 'fontSize': '0.8888889em',
- },
- 'h4': Object {
- 'lineHeight': '1.5',
- 'marginBottom': '0.6666667em',
- 'marginTop': '1.6666667em',
- },
- 'h4 + *': Object {
- 'marginTop': '0',
- },
- 'hr': Object {
- 'marginBottom': '3em',
- 'marginTop': '3em',
- },
- 'hr + *': Object {
- 'marginTop': '0',
- },
- 'img': Object {
- 'marginBottom': '2em',
- 'marginTop': '2em',
- },
- 'li': Object {
- 'marginBottom': '0.5em',
- 'marginTop': '0.5em',
- },
- 'lineHeight': '1.6666667',
- 'ol': Object {
- 'marginBottom': '1.3333333em',
- 'marginTop': '1.3333333em',
- },
- 'ol > li': Object {
- 'paddingLeft': '1.6666667em',
- },
- 'ol > li::before': Object {
- 'left': '0',
- },
- 'p': Object {
- 'marginBottom': '1.3333333em',
- 'marginTop': '1.3333333em',
- },
- 'pre': Object {
- 'borderRadius': '0.5rem',
- 'fontSize': '0.8333333em',
- 'lineHeight': '1.8',
- 'marginBottom': '2em',
- 'marginTop': '2em',
- 'paddingBottom': '1.2em',
- 'paddingLeft': '1.6em',
- 'paddingRight': '1.6em',
- 'paddingTop': '1.2em',
- },
- 'table': Object {
- 'fontSize': '0.8333333em',
- 'lineHeight': '1.4',
- },
- 'tbody td': Object {
- 'paddingBottom': '0.8em',
- 'paddingLeft': '0.6em',
- 'paddingRight': '0.6em',
- 'paddingTop': '0.8em',
- },
- 'tbody td:first-child': Object {
- 'paddingLeft': '0',
- },
- 'tbody td:last-child': Object {
- 'paddingRight': '0',
- },
- 'thead th': Object {
- 'paddingBottom': '0.8em',
- 'paddingLeft': '0.6em',
- 'paddingRight': '0.6em',
- },
- 'thead th:first-child': Object {
- 'paddingLeft': '0',
- },
- 'thead th:last-child': Object {
- 'paddingRight': '0',
- },
- 'ul': Object {
- 'marginBottom': '1.3333333em',
- 'marginTop': '1.3333333em',
- },
- 'ul > li': Object {
- 'paddingLeft': '1.6666667em',
- },
- 'ul > li::before': Object {
- 'height': '0.3333333em',
- 'left': '0.25em',
- 'top': 'calc(0.8333333em - 0.1666667em)',
- 'width': '0.3333333em',
- },
- 'ul ul, ul ol, ol ul, ol ol': Object {
- 'marginBottom': '0.6666667em',
- 'marginTop': '0.6666667em',
- },
- 'video': Object {
- 'marginBottom': '2em',
- 'marginTop': '2em',
- },
- },
"
`)
})
it('should be possilbe to change the default modifiers and change the className', () => {
expect(diffOnly({ modifiers: [, /** 'sm', */ 'lg', 'xl', '2xl'], className: 'markdown' }))
.toMatchInlineSnapshot(`
"
- '.prose': Object {
+ '.markdown': Object {
---
- '.prose-2xl': Object {
+ '.markdown-2xl': Object {
---
- '.prose-lg': Object {
+ '.markdown-lg': Object {
---
- },
- },
- '.prose-sm': Object {
- '> :first-child': Object {
- 'marginTop': '0',
- },
- '> :last-child': Object {
- 'marginBottom': '0',
- },
- '> ol > li > *:first-child': Object {
- 'marginTop': '1.1428571em',
- },
- '> ol > li > *:last-child': Object {
- 'marginBottom': '1.1428571em',
- },
- '> ul > li > *:first-child': Object {
- 'marginTop': '1.1428571em',
- },
- '> ul > li > *:last-child': Object {
- 'marginBottom': '1.1428571em',
- },
- '> ul > li p': Object {
- 'marginBottom': '0.5714286em',
- 'marginTop': '0.5714286em',
- },
- '[class~=\\\\'lead\\\\']': Object {
- 'fontSize': '1.2857143em',
- 'lineHeight': '1.5555556',
- 'marginBottom': '0.8888889em',
- 'marginTop': '0.8888889em',
---
- 'blockquote': Object {
- 'marginBottom': '1.3333333em',
- 'marginTop': '1.3333333em',
- 'paddingLeft': '1.1111111em',
- },
- 'code': Object {
- 'fontSize': '0.8571429em',
---
- 'figure': Object {
- 'marginBottom': '1.7142857em',
- 'marginTop': '1.7142857em',
- },
- 'figure > *': Object {
- 'marginBottom': '0',
- 'marginTop': '0',
- },
- 'figure figcaption': Object {
- 'fontSize': '0.8571429em',
- 'lineHeight': '1.3333333',
- 'marginTop': '0.6666667em',
- },
- 'fontSize': '0.875rem',
- 'h1': Object {
- 'fontSize': '2.1428571em',
- 'lineHeight': '1.2',
- 'marginBottom': '0.8em',
- 'marginTop': '0',
- },
- 'h2': Object {
- 'fontSize': '1.4285714em',
- 'lineHeight': '1.4',
- 'marginBottom': '0.8em',
- 'marginTop': '1.6em',
- },
- 'h2 + *': Object {
- 'marginTop': '0',
- },
- 'h2 code': Object {
- 'fontSize': '0.9em',
- },
- 'h3': Object {
- 'fontSize': '1.2857143em',
- 'lineHeight': '1.5555556',
- 'marginBottom': '0.4444444em',
- 'marginTop': '1.5555556em',
- },
- 'h3 + *': Object {
- 'marginTop': '0',
- },
- 'h3 code': Object {
- 'fontSize': '0.8888889em',
- },
- 'h4': Object {
- 'lineHeight': '1.4285714',
- 'marginBottom': '0.5714286em',
- 'marginTop': '1.4285714em',
- },
- 'h4 + *': Object {
- 'marginTop': '0',
- },
- 'hr': Object {
- 'marginBottom': '2.8571429em',
- 'marginTop': '2.8571429em',
- },
- 'hr + *': Object {
- 'marginTop': '0',
- },
- 'img': Object {
- 'marginBottom': '1.7142857em',
- 'marginTop': '1.7142857em',
- },
- 'li': Object {
- 'marginBottom': '0.2857143em',
- 'marginTop': '0.2857143em',
- },
- 'lineHeight': '1.7142857',
- 'ol': Object {
- 'marginBottom': '1.1428571em',
- 'marginTop': '1.1428571em',
- },
- 'ol > li': Object {
- 'paddingLeft': '1.5714286em',
- },
- 'ol > li::before': Object {
- 'left': '0',
- },
- 'p': Object {
- 'marginBottom': '1.1428571em',
- 'marginTop': '1.1428571em',
- },
- 'pre': Object {
- 'borderRadius': '0.25rem',
- 'fontSize': '0.8571429em',
- 'lineHeight': '1.6666667',
- 'marginBottom': '1.6666667em',
- 'marginTop': '1.6666667em',
- 'paddingBottom': '0.6666667em',
- 'paddingLeft': '1em',
- 'paddingRight': '1em',
- 'paddingTop': '0.6666667em',
- },
- 'table': Object {
- 'fontSize': '0.8571429em',
- 'lineHeight': '1.5',
- },
- 'tbody td': Object {
- 'paddingBottom': '0.6666667em',
- 'paddingLeft': '1em',
- 'paddingRight': '1em',
- 'paddingTop': '0.6666667em',
- },
- 'tbody td:first-child': Object {
- 'paddingLeft': '0',
- },
- 'tbody td:last-child': Object {
- 'paddingRight': '0',
- },
- 'thead th': Object {
- 'paddingBottom': '0.6666667em',
- 'paddingLeft': '1em',
- 'paddingRight': '1em',
- },
- 'thead th:first-child': Object {
- 'paddingLeft': '0',
- },
- 'thead th:last-child': Object {
- 'paddingRight': '0',
- },
- 'ul': Object {
- 'marginBottom': '1.1428571em',
- 'marginTop': '1.1428571em',
- },
- 'ul > li': Object {
- 'paddingLeft': '1.5714286em',
- },
- 'ul > li::before': Object {
- 'height': '0.3571429em',
- 'left': '0.2142857em',
- 'top': 'calc(0.8571429em - 0.1785714em)',
- 'width': '0.3571429em',
- },
- 'ul ul, ul ol, ol ul, ol ol': Object {
- 'marginBottom': '0.5714286em',
- 'marginTop': '0.5714286em',
- },
- 'video': Object {
- 'marginBottom': '1.7142857em',
- 'marginTop': '1.7142857em',
- },
- },
- '.prose-xl': Object {
+ '.markdown-xl': Object {
"
`)
})
it('should be possible to add a new variant', () => {
expect(
diffOnly(
{},
{
dark: {
css: [{ color: 'black', maxWidth: '65ch' }],
},
return run(config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.prose {
color: var(--tw-prose-body);
max-width: 65ch;
}
)
).toMatchInlineSnapshot(`
"
+ '.prose-dark': Object {
+ 'color': 'black',
+ 'maxWidth': '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;';
}
`)
})
})
it('should be possible to merge values', () => {
expect(
diffOnly(
{},
{
test('custom class name', async () => {
let config = {
plugins: [typographyPlugin({ className: 'markdown' })],
content: [{ raw: html`<div class="markdown"></div>` }],
theme: {
typography: {
DEFAULT: {
css: [{ a: { backgroundColor: 'red' } }, { a: { color: 'green' } }],
css: [
{
color: 'var(--tw-prose-body)',
maxWidth: '65ch',
'[class~="lead"]': {
color: 'var(--tw-prose-lead)',
},
strong: {
color: 'var(--tw-prose-bold)',
fontWeight: '600',
},
'ol[type="A"]': {
listStyleType: 'upper-alpha',
},
'blockquote p:first-of-type::before': {
content: 'open-quote',
},
'blockquote p:last-of-type::after': {
content: 'close-quote',
},
'h4 strong': {
fontWeight: '700',
},
'figure > *': {
margin: 0,
},
'ol > li::marker': {
fontWeight: '400',
color: 'var(--tw-prose-counters)',
},
'code::before': {
content: '"&#96;"',
},
'code::after': {
content: '"&#96;"',
},
},
],
},
},
},
}
return run(config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.markdown {
color: var(--tw-prose-body);
max-width: 65ch;
}
)
).toMatchInlineSnapshot(`
"
- 'color': '#18181b',
+ 'backgroundColor': 'red',
+ 'color': 'green',
"
`)
.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;';
}
`)
})
})
it('should be possible to only update a single value from an existing definition', () => {
expect(
diffOnly(
{},
test('element variants', async () => {
let config = {
content: [
{
raw: html`<div
class="
prose
prose-headings:underline
prose-lead:italic
prose-h1:text-3xl
prose-h2:text-2xl
prose-h3:text-xl
prose-h4:text-lg
prose-p:text-gray-700
prose-a:font-bold
prose-blockquote:italic
prose-figure:mx-auto
prose-figcaption:opacity-75
prose-strong:font-medium
prose-em:italic
prose-code:font-mono
prose-pre:font-mono
prose-ol:pl-6
prose-ul:pl-8
prose-li:my-4
prose-table:my-8
prose-thead:border-red-300
prose-tr:border-red-200
prose-th:text-left
prose-td:align-center
prose-img:rounded-lg
prose-video:my-12
prose-hr:border-t-2
"
></div>`,
},
],
theme: {
typography: {
DEFAULT: {
css: {
blockquote: {
fontWeight: '600',
css: [
{
color: 'var(--tw-prose-body)',
'[class~="lead"]': {
color: 'var(--tw-prose-lead)',
},
strong: {
color: 'var(--tw-prose-bold)',
fontWeight: '600',
},
'h4 strong': {
fontWeight: '700',
},
},
},
],
},
},
},
}
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));
}
)
).toMatchInlineSnapshot(`
"
- 'fontWeight': '500',
+ 'fontWeight': '600',
"
`)
.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;
}
`)
})
})
it('should be possible to only update a single value from a different modifier', () => {
expect(
diffOnly(
{},
test('element variants with custom class name', async () => {
let config = {
plugins: [typographyPlugin({ className: 'markdown' })],
content: [
{
sm: {
css: {
blockquote: {
fontWeight: '600',
raw: html`<div
class="
markdown
markdown-headings:underline
markdown-lead:italic
markdown-h1:text-3xl
markdown-h2:text-2xl
markdown-h3:text-xl
markdown-h4:text-lg
markdown-p:text-gray-700
markdown-a:font-bold
markdown-blockquote:italic
markdown-figure:mx-auto
markdown-figcaption:opacity-75
markdown-strong:font-medium
markdown-em:italic
markdown-code:font-mono
markdown-pre:font-mono
markdown-ol:pl-6
markdown-ul:pl-8
markdown-li:my-4
markdown-table:my-8
markdown-thead:border-red-300
markdown-tr:border-red-200
markdown-th:text-left
markdown-td:align-center
markdown-img:rounded-lg
markdown-video:my-12
markdown-hr:border-t-2
"
></div>`,
},
],
theme: {
typography: {
DEFAULT: {
css: [
{
color: 'var(--tw-prose-body)',
'[class~="lead"]': {
color: 'var(--tw-prose-lead)',
},
strong: {
color: 'var(--tw-prose-bold)',
fontWeight: '600',
},
'h4 strong': {
fontWeight: '700',
},
},
},
],
},
},
},
}
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));
}
)
).toMatchInlineSnapshot(`
"
+ 'fontWeight': '600',
"
`)
.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;
}
`)
})
})

1020

src/styles.js

@@ -1,2 +0,2 @@

const defaultTheme = require('tailwindcss/defaultTheme')
const colors = require('tailwindcss/colors')

@@ -11,138 +11,188 @@ const round = (num) =>

module.exports = {
DEFAULT: {
let defaultModifiers = {
sm: {
css: [
{
color: defaultTheme.colors.gray[700],
maxWidth: '65ch',
fontSize: rem(14),
lineHeight: round(24 / 14),
p: {
marginTop: em(16, 14),
marginBottom: em(16, 14),
},
'[class~="lead"]': {
color: defaultTheme.colors.gray[600],
fontSize: em(18, 14),
lineHeight: round(28 / 18),
marginTop: em(16, 18),
marginBottom: em(16, 18),
},
a: {
color: defaultTheme.colors.gray[900],
textDecoration: 'underline',
blockquote: {
marginTop: em(24, 18),
marginBottom: em(24, 18),
paddingLeft: em(20, 18),
},
strong: {
color: defaultTheme.colors.gray[900],
fontWeight: '600',
h1: {
fontSize: em(30, 14),
marginTop: '0',
marginBottom: em(24, 30),
lineHeight: round(36 / 30),
},
ol: {
counterReset: 'list-counter',
h2: {
fontSize: em(20, 14),
marginTop: em(32, 20),
marginBottom: em(16, 20),
lineHeight: round(28 / 20),
},
'ol > li': {
position: 'relative',
counterIncrement: 'list-counter',
h3: {
fontSize: em(18, 14),
marginTop: em(28, 18),
marginBottom: em(8, 18),
lineHeight: round(28 / 18),
},
'ol > li::before': {
content: 'counter(list-counter) "."',
position: 'absolute',
fontWeight: '400',
color: defaultTheme.colors.gray[500],
h4: {
marginTop: em(20, 14),
marginBottom: em(8, 14),
lineHeight: round(20 / 14),
},
'ul > li': {
position: 'relative',
img: {
marginTop: em(24, 14),
marginBottom: em(24, 14),
},
'ul > li::before': {
content: '""',
position: 'absolute',
backgroundColor: defaultTheme.colors.gray[300],
borderRadius: '50%',
video: {
marginTop: em(24, 14),
marginBottom: em(24, 14),
},
hr: {
borderColor: defaultTheme.colors.gray[200],
borderTopWidth: 1,
figure: {
marginTop: em(24, 14),
marginBottom: em(24, 14),
},
blockquote: {
fontWeight: '500',
fontStyle: 'italic',
color: defaultTheme.colors.gray[900],
borderLeftWidth: '0.25rem',
borderLeftColor: defaultTheme.colors.gray[200],
quotes: '"\\201C""\\201D""\\2018""\\2019"',
'figure > *': {
marginTop: '0',
marginBottom: '0',
},
'blockquote p:first-of-type::before': {
content: 'open-quote',
figcaption: {
fontSize: em(12, 14),
lineHeight: round(16 / 12),
marginTop: em(8, 12),
},
'blockquote p:last-of-type::after': {
content: 'close-quote',
code: {
fontSize: em(12, 14),
},
h1: {
color: defaultTheme.colors.gray[900],
fontWeight: '800',
'h2 code': {
fontSize: em(18, 20),
},
h2: {
color: defaultTheme.colors.gray[900],
fontWeight: '700',
'h3 code': {
fontSize: em(16, 18),
},
h3: {
color: defaultTheme.colors.gray[900],
fontWeight: '600',
pre: {
fontSize: em(12, 14),
lineHeight: round(20 / 12),
marginTop: em(20, 12),
marginBottom: em(20, 12),
borderRadius: rem(4),
paddingTop: em(8, 12),
paddingRight: em(12, 12),
paddingBottom: em(8, 12),
paddingLeft: em(12, 12),
},
h4: {
color: defaultTheme.colors.gray[900],
fontWeight: '600',
ol: {
marginTop: em(16, 14),
marginBottom: em(16, 14),
},
'figure figcaption': {
color: defaultTheme.colors.gray[500],
ul: {
marginTop: em(16, 14),
marginBottom: em(16, 14),
},
code: {
color: defaultTheme.colors.gray[900],
fontWeight: '600',
li: {
marginTop: em(4, 14),
marginBottom: em(4, 14),
},
'code::before': {
content: '"`"',
ol: {
paddingLeft: em(22, 14),
},
'code::after': {
content: '"`"',
'ol > li': {
paddingLeft: em(6, 14),
},
pre: {
color: defaultTheme.colors.gray[200],
backgroundColor: defaultTheme.colors.gray[800],
overflowX: 'auto',
ul: {
paddingLeft: em(22, 14),
},
'pre code': {
backgroundColor: 'transparent',
borderWidth: '0',
borderRadius: '0',
padding: '0',
fontWeight: '400',
color: 'inherit',
fontSize: 'inherit',
fontFamily: 'inherit',
lineHeight: 'inherit',
'ul > li': {
paddingLeft: em(6, 14),
},
'pre code::before': {
content: '""',
'> ul > li p': {
marginTop: em(8, 14),
marginBottom: em(8, 14),
},
'pre code::after': {
content: '""',
'> ul > li > *:first-child': {
marginTop: em(16, 14),
},
'> ul > li > *:last-child': {
marginBottom: em(16, 14),
},
'> ol > li > *:first-child': {
marginTop: em(16, 14),
},
'> ol > li > *:last-child': {
marginBottom: em(16, 14),
},
'ul ul, ul ol, ol ul, ol ol': {
marginTop: em(8, 14),
marginBottom: em(8, 14),
},
hr: {
marginTop: em(40, 14),
marginBottom: em(40, 14),
},
'hr + *': {
marginTop: '0',
},
'h2 + *': {
marginTop: '0',
},
'h3 + *': {
marginTop: '0',
},
'h4 + *': {
marginTop: '0',
},
table: {
width: '100%',
tableLayout: 'auto',
textAlign: 'left',
marginTop: em(32, 16),
marginBottom: em(32, 16),
fontSize: em(12, 14),
lineHeight: round(18 / 12),
},
thead: {
color: defaultTheme.colors.gray[900],
fontWeight: '600',
borderBottomWidth: '1px',
borderBottomColor: defaultTheme.colors.gray[300],
},
'thead th': {
verticalAlign: 'bottom',
paddingRight: em(12, 12),
paddingBottom: em(8, 12),
paddingLeft: em(12, 12),
},
'tbody tr': {
borderBottomWidth: '1px',
borderBottomColor: defaultTheme.colors.gray[200],
'thead th:first-child': {
paddingLeft: '0',
},
'tbody tr:last-child': {
borderBottomWidth: '0',
'thead th:last-child': {
paddingRight: '0',
},
'tbody td': {
verticalAlign: 'top',
paddingTop: em(8, 12),
paddingRight: em(12, 12),
paddingBottom: em(8, 12),
paddingLeft: em(12, 12),
},
'tbody td:first-child': {
paddingLeft: '0',
},
'tbody td:last-child': {
paddingRight: '0',
},
},
{
'> :first-child': {
marginTop: '0',
},
'> :last-child': {
marginBottom: '0',
},
},
],
},
base: {
css: [
{
fontSize: rem(16),

@@ -204,3 +254,3 @@ lineHeight: round(28 / 16),

},
'figure figcaption': {
figcaption: {
fontSize: em(14, 16),

@@ -242,17 +292,14 @@ lineHeight: round(20 / 14),

},
ol: {
paddingLeft: em(26, 16),
},
'ol > li': {
paddingLeft: em(28, 16),
paddingLeft: em(6, 16),
},
'ol > li::before': {
left: '0',
ul: {
paddingLeft: em(26, 16),
},
'ul > li': {
paddingLeft: em(28, 16),
paddingLeft: em(6, 16),
},
'ul > li::before': {
width: em(6, 16),
height: em(6, 16),
top: `calc(${em(28 / 2, 16)} - ${em(3, 16)})`,
left: em(4, 16),
},
'> ul > li p': {

@@ -332,187 +379,2 @@ marginTop: em(12, 16),

},
sm: {
css: [
{
fontSize: rem(14),
lineHeight: round(24 / 14),
p: {
marginTop: em(16, 14),
marginBottom: em(16, 14),
},
'[class~="lead"]': {
fontSize: em(18, 14),
lineHeight: round(28 / 18),
marginTop: em(16, 18),
marginBottom: em(16, 18),
},
blockquote: {
marginTop: em(24, 18),
marginBottom: em(24, 18),
paddingLeft: em(20, 18),
},
h1: {
fontSize: em(30, 14),
marginTop: '0',
marginBottom: em(24, 30),
lineHeight: round(36 / 30),
},
h2: {
fontSize: em(20, 14),
marginTop: em(32, 20),
marginBottom: em(16, 20),
lineHeight: round(28 / 20),
},
h3: {
fontSize: em(18, 14),
marginTop: em(28, 18),
marginBottom: em(8, 18),
lineHeight: round(28 / 18),
},
h4: {
marginTop: em(20, 14),
marginBottom: em(8, 14),
lineHeight: round(20 / 14),
},
img: {
marginTop: em(24, 14),
marginBottom: em(24, 14),
},
video: {
marginTop: em(24, 14),
marginBottom: em(24, 14),
},
figure: {
marginTop: em(24, 14),
marginBottom: em(24, 14),
},
'figure > *': {
marginTop: '0',
marginBottom: '0',
},
'figure figcaption': {
fontSize: em(12, 14),
lineHeight: round(16 / 12),
marginTop: em(8, 12),
},
code: {
fontSize: em(12, 14),
},
'h2 code': {
fontSize: em(18, 20),
},
'h3 code': {
fontSize: em(16, 18),
},
pre: {
fontSize: em(12, 14),
lineHeight: round(20 / 12),
marginTop: em(20, 12),
marginBottom: em(20, 12),
borderRadius: rem(4),
paddingTop: em(8, 12),
paddingRight: em(12, 12),
paddingBottom: em(8, 12),
paddingLeft: em(12, 12),
},
ol: {
marginTop: em(16, 14),
marginBottom: em(16, 14),
},
ul: {
marginTop: em(16, 14),
marginBottom: em(16, 14),
},
li: {
marginTop: em(4, 14),
marginBottom: em(4, 14),
},
'ol > li': {
paddingLeft: em(22, 14),
},
'ol > li::before': {
left: '0',
},
'ul > li': {
paddingLeft: em(22, 14),
},
'ul > li::before': {
height: em(5, 14),
width: em(5, 14),
top: `calc(${em(24 / 2, 14)} - ${em(2.5, 14)})`,
left: em(3, 14),
},
'> ul > li p': {
marginTop: em(8, 14),
marginBottom: em(8, 14),
},
'> ul > li > *:first-child': {
marginTop: em(16, 14),
},
'> ul > li > *:last-child': {
marginBottom: em(16, 14),
},
'> ol > li > *:first-child': {
marginTop: em(16, 14),
},
'> ol > li > *:last-child': {
marginBottom: em(16, 14),
},
'ul ul, ul ol, ol ul, ol ol': {
marginTop: em(8, 14),
marginBottom: em(8, 14),
},
hr: {
marginTop: em(40, 14),
marginBottom: em(40, 14),
},
'hr + *': {
marginTop: '0',
},
'h2 + *': {
marginTop: '0',
},
'h3 + *': {
marginTop: '0',
},
'h4 + *': {
marginTop: '0',
},
table: {
fontSize: em(12, 14),
lineHeight: round(18 / 12),
},
'thead th': {
paddingRight: em(12, 12),
paddingBottom: em(8, 12),
paddingLeft: em(12, 12),
},
'thead th:first-child': {
paddingLeft: '0',
},
'thead th:last-child': {
paddingRight: '0',
},
'tbody td': {
paddingTop: em(8, 12),
paddingRight: em(12, 12),
paddingBottom: em(8, 12),
paddingLeft: em(12, 12),
},
'tbody td:first-child': {
paddingLeft: '0',
},
'tbody td:last-child': {
paddingRight: '0',
},
},
{
'> :first-child': {
marginTop: '0',
},
'> :last-child': {
marginBottom: '0',
},
},
],
},
lg: {

@@ -577,3 +439,3 @@ css: [

},
'figure figcaption': {
figcaption: {
fontSize: em(16, 18),

@@ -615,17 +477,14 @@ lineHeight: round(24 / 16),

},
ol: {
paddingLeft: em(28, 18),
},
'ol > li': {
paddingLeft: em(30, 18),
paddingLeft: em(8, 18),
},
'ol > li::before': {
left: '0',
ul: {
paddingLeft: em(28, 18),
},
'ul > li': {
paddingLeft: em(30, 18),
paddingLeft: em(8, 18),
},
'ul > li::before': {
width: em(6, 18),
height: em(6, 18),
top: `calc(${em(32 / 2, 18)} - ${em(3, 18)})`,
left: em(4, 18),
},
'> ul > li p': {

@@ -764,3 +623,3 @@ marginTop: em(16, 18),

},
'figure figcaption': {
figcaption: {
fontSize: em(18, 20),

@@ -802,17 +661,14 @@ lineHeight: round(28 / 18),

},
ol: {
paddingLeft: em(32, 20),
},
'ol > li': {
paddingLeft: em(36, 20),
paddingLeft: em(8, 20),
},
'ol > li::before': {
left: '0',
ul: {
paddingLeft: em(32, 20),
},
'ul > li': {
paddingLeft: em(36, 20),
paddingLeft: em(8, 20),
},
'ul > li::before': {
width: em(7, 20),
height: em(7, 20),
top: `calc(${em(36 / 2, 20)} - ${em(3.5, 20)})`,
left: em(5, 20),
},
'> ul > li p': {

@@ -951,3 +807,3 @@ marginTop: em(16, 20),

},
'figure figcaption': {
figcaption: {
fontSize: em(20, 24),

@@ -989,17 +845,14 @@ lineHeight: round(32 / 20),

},
ol: {
paddingLeft: em(38, 24),
},
'ol > li': {
paddingLeft: em(40, 24),
paddingLeft: em(10, 24),
},
'ol > li::before': {
left: '0',
ul: {
paddingLeft: em(38, 24),
},
'ul > li': {
paddingLeft: em(40, 24),
paddingLeft: em(10, 24),
},
'ul > li::before': {
width: em(8, 24),
height: em(8, 24),
top: `calc(${em(40 / 2, 24)} - ${em(4, 24)})`,
left: em(6, 24),
},
'> ul > li p': {

@@ -1079,2 +932,511 @@ marginTop: em(20, 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)',
},
},
// Gray color themes
slate: {
css: {
'--tw-prose-body': colors.slate[700],
'--tw-prose-headings': colors.slate[900],
'--tw-prose-lead': colors.slate[600],
'--tw-prose-links': colors.slate[900],
'--tw-prose-bold': colors.slate[900],
'--tw-prose-counters': colors.slate[500],
'--tw-prose-bullets': colors.slate[300],
'--tw-prose-hr': colors.slate[200],
'--tw-prose-quotes': colors.slate[900],
'--tw-prose-quote-borders': colors.slate[200],
'--tw-prose-captions': colors.slate[500],
'--tw-prose-code': colors.slate[900],
'--tw-prose-pre-code': colors.slate[200],
'--tw-prose-pre-bg': colors.slate[800],
'--tw-prose-th-borders': colors.slate[300],
'--tw-prose-td-borders': colors.slate[200],
'--tw-prose-invert-body': colors.slate[300],
'--tw-prose-invert-headings': colors.white,
'--tw-prose-invert-lead': colors.slate[400],
'--tw-prose-invert-links': colors.white,
'--tw-prose-invert-bold': colors.white,
'--tw-prose-invert-counters': colors.slate[400],
'--tw-prose-invert-bullets': colors.slate[600],
'--tw-prose-invert-hr': colors.slate[700],
'--tw-prose-invert-quotes': colors.slate[100],
'--tw-prose-invert-quote-borders': colors.slate[700],
'--tw-prose-invert-captions': colors.slate[400],
'--tw-prose-invert-code': colors.white,
'--tw-prose-invert-pre-code': colors.slate[300],
'--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
'--tw-prose-invert-th-borders': colors.slate[600],
'--tw-prose-invert-td-borders': colors.slate[700],
},
},
gray: {
css: {
'--tw-prose-body': colors.gray[700],
'--tw-prose-headings': colors.gray[900],
'--tw-prose-lead': colors.gray[600],
'--tw-prose-links': colors.gray[900],
'--tw-prose-bold': colors.gray[900],
'--tw-prose-counters': colors.gray[500],
'--tw-prose-bullets': colors.gray[300],
'--tw-prose-hr': colors.gray[200],
'--tw-prose-quotes': colors.gray[900],
'--tw-prose-quote-borders': colors.gray[200],
'--tw-prose-captions': colors.gray[500],
'--tw-prose-code': colors.gray[900],
'--tw-prose-pre-code': colors.gray[200],
'--tw-prose-pre-bg': colors.gray[800],
'--tw-prose-th-borders': colors.gray[300],
'--tw-prose-td-borders': colors.gray[200],
'--tw-prose-invert-body': colors.gray[300],
'--tw-prose-invert-headings': colors.white,
'--tw-prose-invert-lead': colors.gray[400],
'--tw-prose-invert-links': colors.white,
'--tw-prose-invert-bold': colors.white,
'--tw-prose-invert-counters': colors.gray[400],
'--tw-prose-invert-bullets': colors.gray[600],
'--tw-prose-invert-hr': colors.gray[700],
'--tw-prose-invert-quotes': colors.gray[100],
'--tw-prose-invert-quote-borders': colors.gray[700],
'--tw-prose-invert-captions': colors.gray[400],
'--tw-prose-invert-code': colors.white,
'--tw-prose-invert-pre-code': colors.gray[300],
'--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
'--tw-prose-invert-th-borders': colors.gray[600],
'--tw-prose-invert-td-borders': colors.gray[700],
},
},
zinc: {
css: {
'--tw-prose-body': colors.zinc[700],
'--tw-prose-headings': colors.zinc[900],
'--tw-prose-lead': colors.zinc[600],
'--tw-prose-links': colors.zinc[900],
'--tw-prose-bold': colors.zinc[900],
'--tw-prose-counters': colors.zinc[500],
'--tw-prose-bullets': colors.zinc[300],
'--tw-prose-hr': colors.zinc[200],
'--tw-prose-quotes': colors.zinc[900],
'--tw-prose-quote-borders': colors.zinc[200],
'--tw-prose-captions': colors.zinc[500],
'--tw-prose-code': colors.zinc[900],
'--tw-prose-pre-code': colors.zinc[200],
'--tw-prose-pre-bg': colors.zinc[800],
'--tw-prose-th-borders': colors.zinc[300],
'--tw-prose-td-borders': colors.zinc[200],
'--tw-prose-invert-body': colors.zinc[300],
'--tw-prose-invert-headings': colors.white,
'--tw-prose-invert-lead': colors.zinc[400],
'--tw-prose-invert-links': colors.white,
'--tw-prose-invert-bold': colors.white,
'--tw-prose-invert-counters': colors.zinc[400],
'--tw-prose-invert-bullets': colors.zinc[600],
'--tw-prose-invert-hr': colors.zinc[700],
'--tw-prose-invert-quotes': colors.zinc[100],
'--tw-prose-invert-quote-borders': colors.zinc[700],
'--tw-prose-invert-captions': colors.zinc[400],
'--tw-prose-invert-code': colors.white,
'--tw-prose-invert-pre-code': colors.zinc[300],
'--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
'--tw-prose-invert-th-borders': colors.zinc[600],
'--tw-prose-invert-td-borders': colors.zinc[700],
},
},
neutral: {
css: {
'--tw-prose-body': colors.neutral[700],
'--tw-prose-headings': colors.neutral[900],
'--tw-prose-lead': colors.neutral[600],
'--tw-prose-links': colors.neutral[900],
'--tw-prose-bold': colors.neutral[900],
'--tw-prose-counters': colors.neutral[500],
'--tw-prose-bullets': colors.neutral[300],
'--tw-prose-hr': colors.neutral[200],
'--tw-prose-quotes': colors.neutral[900],
'--tw-prose-quote-borders': colors.neutral[200],
'--tw-prose-captions': colors.neutral[500],
'--tw-prose-code': colors.neutral[900],
'--tw-prose-pre-code': colors.neutral[200],
'--tw-prose-pre-bg': colors.neutral[800],
'--tw-prose-th-borders': colors.neutral[300],
'--tw-prose-td-borders': colors.neutral[200],
'--tw-prose-invert-body': colors.neutral[300],
'--tw-prose-invert-headings': colors.white,
'--tw-prose-invert-lead': colors.neutral[400],
'--tw-prose-invert-links': colors.white,
'--tw-prose-invert-bold': colors.white,
'--tw-prose-invert-counters': colors.neutral[400],
'--tw-prose-invert-bullets': colors.neutral[600],
'--tw-prose-invert-hr': colors.neutral[700],
'--tw-prose-invert-quotes': colors.neutral[100],
'--tw-prose-invert-quote-borders': colors.neutral[700],
'--tw-prose-invert-captions': colors.neutral[400],
'--tw-prose-invert-code': colors.white,
'--tw-prose-invert-pre-code': colors.neutral[300],
'--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
'--tw-prose-invert-th-borders': colors.neutral[600],
'--tw-prose-invert-td-borders': colors.neutral[700],
},
},
stone: {
css: {
'--tw-prose-body': colors.stone[700],
'--tw-prose-headings': colors.stone[900],
'--tw-prose-lead': colors.stone[600],
'--tw-prose-links': colors.stone[900],
'--tw-prose-bold': colors.stone[900],
'--tw-prose-counters': colors.stone[500],
'--tw-prose-bullets': colors.stone[300],
'--tw-prose-hr': colors.stone[200],
'--tw-prose-quotes': colors.stone[900],
'--tw-prose-quote-borders': colors.stone[200],
'--tw-prose-captions': colors.stone[500],
'--tw-prose-code': colors.stone[900],
'--tw-prose-pre-code': colors.stone[200],
'--tw-prose-pre-bg': colors.stone[800],
'--tw-prose-th-borders': colors.stone[300],
'--tw-prose-td-borders': colors.stone[200],
'--tw-prose-invert-body': colors.stone[300],
'--tw-prose-invert-headings': colors.white,
'--tw-prose-invert-lead': colors.stone[400],
'--tw-prose-invert-links': colors.white,
'--tw-prose-invert-bold': colors.white,
'--tw-prose-invert-counters': colors.stone[400],
'--tw-prose-invert-bullets': colors.stone[600],
'--tw-prose-invert-hr': colors.stone[700],
'--tw-prose-invert-quotes': colors.stone[100],
'--tw-prose-invert-quote-borders': colors.stone[700],
'--tw-prose-invert-captions': colors.stone[400],
'--tw-prose-invert-code': colors.white,
'--tw-prose-invert-pre-code': colors.stone[300],
'--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
'--tw-prose-invert-th-borders': colors.stone[600],
'--tw-prose-invert-td-borders': colors.stone[700],
},
},
// Link-only themes (for backward compatibility)
red: {
css: {
'--tw-prose-links': colors.red[600],
'--tw-prose-invert-links': colors.red[500],
},
},
orange: {
css: {
'--tw-prose-links': colors.orange[600],
'--tw-prose-invert-links': colors.orange[500],
},
},
amber: {
css: {
'--tw-prose-links': colors.amber[600],
'--tw-prose-invert-links': colors.amber[500],
},
},
yellow: {
css: {
'--tw-prose-links': colors.yellow[600],
'--tw-prose-invert-links': colors.yellow[500],
},
},
lime: {
css: {
'--tw-prose-links': colors.lime[600],
'--tw-prose-invert-links': colors.lime[500],
},
},
green: {
css: {
'--tw-prose-links': colors.green[600],
'--tw-prose-invert-links': colors.green[500],
},
},
emerald: {
css: {
'--tw-prose-links': colors.emerald[600],
'--tw-prose-invert-links': colors.emerald[500],
},
},
teal: {
css: {
'--tw-prose-links': colors.teal[600],
'--tw-prose-invert-links': colors.teal[500],
},
},
cyan: {
css: {
'--tw-prose-links': colors.cyan[600],
'--tw-prose-invert-links': colors.cyan[500],
},
},
sky: {
css: {
'--tw-prose-links': colors.sky[600],
'--tw-prose-invert-links': colors.sky[500],
},
},
blue: {
css: {
'--tw-prose-links': colors.blue[600],
'--tw-prose-invert-links': colors.blue[500],
},
},
indigo: {
css: {
'--tw-prose-links': colors.indigo[600],
'--tw-prose-invert-links': colors.indigo[500],
},
},
violet: {
css: {
'--tw-prose-links': colors.violet[600],
'--tw-prose-invert-links': colors.violet[500],
},
},
purple: {
css: {
'--tw-prose-links': colors.purple[600],
'--tw-prose-invert-links': colors.purple[500],
},
},
fuchsia: {
css: {
'--tw-prose-links': colors.fuchsia[600],
'--tw-prose-invert-links': colors.fuchsia[500],
},
},
pink: {
css: {
'--tw-prose-links': colors.pink[600],
'--tw-prose-invert-links': colors.pink[500],
},
},
rose: {
css: {
'--tw-prose-links': colors.rose[600],
'--tw-prose-invert-links': colors.rose[500],
},
},
}
module.exports = {
DEFAULT: {
css: [
{
color: 'var(--tw-prose-body)',
maxWidth: '65ch',
'[class~="lead"]': {
color: 'var(--tw-prose-lead)',
},
a: {
color: 'var(--tw-prose-links)',
textDecoration: 'underline',
fontWeight: '500',
},
strong: {
color: 'var(--tw-prose-bold)',
fontWeight: '600',
},
ol: {
listStyleType: 'decimal',
},
'ol[type="A"]': {
listStyleType: 'upper-alpha',
},
'ol[type="a"]': {
listStyleType: 'lower-alpha',
},
'ol[type="A" s]': {
listStyleType: 'upper-alpha',
},
'ol[type="a" s]': {
listStyleType: 'lower-alpha',
},
'ol[type="I"]': {
listStyleType: 'upper-roman',
},
'ol[type="i"]': {
listStyleType: 'lower-roman',
},
'ol[type="I" s]': {
listStyleType: 'upper-roman',
},
'ol[type="i" s]': {
listStyleType: 'lower-roman',
},
'ol[type="1"]': {
listStyleType: 'decimal',
},
ul: {
listStyleType: 'disc',
},
'ol > li::marker': {
fontWeight: '400',
color: 'var(--tw-prose-counters)',
},
'ul > li::marker': {
color: 'var(--tw-prose-bullets)',
},
hr: {
borderColor: 'var(--tw-prose-hr)',
borderTopWidth: 1,
},
blockquote: {
fontWeight: '500',
fontStyle: 'italic',
color: 'var(--tw-prose-quotes)',
borderLeftWidth: '0.25rem',
borderLeftColor: 'var(--tw-prose-quote-borders)',
quotes: '"\\201C""\\201D""\\2018""\\2019"',
},
'blockquote p:first-of-type::before': {
content: 'open-quote',
},
'blockquote p:last-of-type::after': {
content: 'close-quote',
},
h1: {
color: 'var(--tw-prose-headings)',
fontWeight: '800',
},
'h1 strong': {
fontWeight: '900',
},
h2: {
color: 'var(--tw-prose-headings)',
fontWeight: '700',
},
'h2 strong': {
fontWeight: '800',
},
h3: {
color: 'var(--tw-prose-headings)',
fontWeight: '600',
},
'h3 strong': {
fontWeight: '700',
},
h4: {
color: 'var(--tw-prose-headings)',
fontWeight: '600',
},
'h4 strong': {
fontWeight: '700',
},
// TODO: Figure out how to not need this, it's a merging issue
'figure > *': {},
figcaption: {
color: 'var(--tw-prose-captions)',
},
code: {
color: 'var(--tw-prose-code)',
fontWeight: '600',
},
'code::before': {
content: '"`"',
},
'code::after': {
content: '"`"',
},
'a code': {
color: 'var(--tw-prose-links)',
},
pre: {
color: 'var(--tw-prose-pre-code)',
backgroundColor: 'var(--tw-prose-pre-bg)',
overflowX: 'auto',
fontWeight: '400',
},
'pre code': {
backgroundColor: 'transparent',
borderWidth: '0',
borderRadius: '0',
padding: '0',
fontWeight: 'inherit',
color: 'inherit',
fontSize: 'inherit',
fontFamily: 'inherit',
lineHeight: 'inherit',
},
'pre code::before': {
content: 'none',
},
'pre code::after': {
content: 'none',
},
table: {
width: '100%',
tableLayout: 'auto',
textAlign: 'left',
marginTop: em(32, 16),
marginBottom: em(32, 16),
},
thead: {
borderBottomWidth: '1px',
borderBottomColor: 'var(--tw-prose-th-borders)',
},
'thead th': {
color: 'var(--tw-prose-headings)',
fontWeight: '600',
verticalAlign: 'bottom',
},
'tbody tr': {
borderBottomWidth: '1px',
borderBottomColor: 'var(--tw-prose-td-borders)',
},
'tbody tr:last-child': {
borderBottomWidth: '0',
},
'tbody td': {
verticalAlign: 'baseline',
},
},
defaultModifiers.gray.css,
...defaultModifiers.base.css,
],
},
...defaultModifiers,
}
.github/logo.svg
.github/workflows/nodejs.yml
coverage/clover.xml
coverage/coverage-final.json
coverage/lcov-report/base.css
coverage/lcov-report/block-navigation.js
coverage/lcov-report/favicon.png
coverage/lcov-report/index.html
coverage/lcov-report/index.js.html
coverage/lcov-report/prettify.css
coverage/lcov-report/prettify.js
coverage/lcov-report/sort-arrow-sprite.png
coverage/lcov-report/sorter.js
coverage/lcov.info
demo/components/MarkdownSample.mdx
demo/next.config.js
demo/pages/_app.js
demo/pages/index.js
demo/postcss.config.js
demo/public/favicon-16x16.png
demo/public/favicon-32x32.png
demo/public/favicon.ico
demo/tailwind.config.js
dist/typography.css
dist/typography.min.css
scripts/build.js
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