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

@tailwindcss/typography

Package Overview
Dependencies
Maintainers
5
Versions
134
Alerts
File Explorer

Advanced tools

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.8bab710 to 0.0.0-insiders.901bf98

src/index.d.ts

41

CHANGELOG.md

@@ -10,11 +10,41 @@ # Changelog

- Nothing yet!
## [0.5.7] - 2022-09-02
### Fixed
- Update TypeScript types ([#284](https://github.com/tailwindlabs/tailwindcss-typography/pull/284/files))
## [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
### 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 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))

@@ -126,3 +156,8 @@ ## [0.5.2] - 2022-02-14

[unreleased]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.2...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

@@ -129,0 +164,0 @@ [0.5.1]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.0...v0.5.1

7

package.json
{
"name": "@tailwindcss/typography",
"version": "0.0.0-insiders.8bab710",
"version": "0.0.0-insiders.901bf98",
"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/"

@@ -49,3 +51,4 @@ ],

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

@@ -52,0 +55,0 @@ "jest": {

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

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

@@ -14,29 +15,12 @@ const computed = {

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

@@ -95,3 +79,3 @@

for (let [name, ...selectors] of [
['headings', 'h1', 'h2', 'h3', 'h4', 'th'],
['headings', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'th'],
['h1'],

@@ -101,2 +85,4 @@ ['h2'],

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

@@ -126,7 +112,9 @@ ['a'],

let selector = target === 'legacy'
? selectors.map(selector => `& ${selector}`)
: selectors.join(', ')
let selector =
target === 'legacy' ? selectors.map((selector) => `& ${selector}`) : selectors.join(', ')
addVariant(`${className}-${name}`, target === 'legacy' ? selector : `& :is(${inWhere(selector, options)})`)
addVariant(
`${className}-${name}`,
target === 'legacy' ? selector : `& :is(${inWhere(selector, options)})`
)
}

@@ -133,0 +121,0 @@

@@ -161,3 +161,3 @@ const path = require('path')

}
.prose > :where(ul > li p):not(:where([class~='not-prose'] *)) {
.prose :where(.prose > ul > li p):not(:where([class~='not-prose'] *)) {
margin-top: 16px;

@@ -339,3 +339,5 @@ margin-bottom: 16px;

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

@@ -440,2 +442,8 @@ typography: {

}
.prose-headings\:text-ellipsis h5 {
text-overflow: ellipsis;
}
.prose-headings\:text-ellipsis h6 {
text-overflow: ellipsis;
}
.prose-headings\:text-ellipsis th {

@@ -627,3 +635,3 @@ text-overflow: ellipsis;

.prose-headings\:underline
:is(:where(h1, h2, h3, h4, th):not(:where([class~='not-prose'] *))) {
:is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~='not-prose'] *))) {
text-decoration-line: underline;

@@ -713,3 +721,3 @@ }

}
.prose-lead\:italic :is(:where([class~="lead"]):not(:where([class~="not-prose"] *))) {
.prose-lead\:italic :is(:where([class~='lead']):not(:where([class~='not-prose'] *))) {
font-style: italic;

@@ -801,3 +809,3 @@ }

.markdown-headings\:underline
:is(:where(h1, h2, h3, h4, th):not(:where([class~='not-markdown'] *))) {
:is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~='not-markdown'] *))) {
text-decoration-line: underline;

@@ -889,3 +897,3 @@ }

}
.markdown-lead\:italic :is(:where([class~="lead"]):not(:where([class~="not-markdown"] *))) {
.markdown-lead\:italic :is(:where([class~='lead']):not(:where([class~='not-markdown'] *))) {
font-style: italic;

@@ -980,1 +988,220 @@ }

})
it('should be possible to specify custom h5 and h6 styles', () => {
let config = {
plugins: [typographyPlugin()],
content: [
{
raw: html`<div class="prose prose-h5:text-sm prose-h6:text-xl"></div>`,
},
],
}
return run(config).then((result) => {
expect(result.css).toIncludeCss(css`
.prose-h5\:text-sm :is(:where(h5):not(:where([class~='not-prose'] *))) {
font-size: 0.875rem;
line-height: 1.25rem;
}
.prose-h6\:text-xl :is(:where(h6):not(:where([class~='not-prose'] *))) {
font-size: 1.25rem;
line-height: 1.75rem;
}
`)
})
})
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'] *))::before {
color: red;
}
`)
})
})
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'] *))::marker::before {
color: red;
}
`)
// 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'] *))::before::marker {
color: red;
}
`)
})
})
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'] *)) {
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, ul li):not(:where([class~='not-prose'] *))::before,
::after {
color: red;
}
`)
})
})
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']
*))::before {
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, ul li):not(:where([class~='not-prose'] *))::scroll-thumb,
::scroll-track,
::before {
color: red;
}
`)
})
})
it('ignores common non-trailing pseudo-elements in selectors', () => {
let config = {
darkMode: 'class',
plugins: [typographyPlugin()],
content: [
{
raw: html`<div class="prose dark:prose"></div>`,
},
],
theme: {
typography: {
DEFAULT: {
css: {
'ol li::before::scroll-thumb, ul li::before::scroll-track': {
color: 'red',
},
},
},
},
},
}
return run(config).then((result) => {
expect(result.css).toIncludeCss(css`
.prose
:where(ol li::before::scroll-thumb, ul
li::before::scroll-track):not(:where([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']
*))::before,
::before {
color: red;
}
`)
})
})

@@ -1252,2 +1252,11 @@ const colors = require('tailwindcss/colors')

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

@@ -1317,2 +1326,3 @@ listStyleType: 'decimal',

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

@@ -1325,2 +1335,3 @@ h2: {

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

@@ -1333,2 +1344,3 @@ h3: {

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

@@ -1341,2 +1353,3 @@ h4: {

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

@@ -1360,4 +1373,22 @@ // TODO: Figure out how to not need these, it's a merging issue

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

@@ -1364,0 +1395,0 @@ color: 'var(--tw-prose-pre-code)',

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]
},
}
SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc