@tailwindcss/typography - npm Package Compare versions

Comparing version 0.0.0-insiders.9bab555 to 0.0.0-insiders.a54c1a8

CHANGELOG.md

@@ -10,2 +10,14 @@ # Changelog
 
+- Nothing yet!
+
+## [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))
@@ -20,3 +32,3 @@
 
-## Fixed
+### Fixed
 
@@ -135,3 +147,5 @@ - Fix prose elements `legacy` mode ([#259](https://github.com/tailwindlabs/tailwindcss-typography/pull/259))
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.3...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.5...HEAD
+[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
@@ -138,0 +152,0 @@ [0.5.2]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.1...v0.5.2

package.json

 {
   "name": "@tailwindcss/typography",
-  "version": "0.0.0-insiders.9bab555",
+  "version": "0.0.0-insiders.a54c1a8",
   "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": {

src/index.js

@@ -5,2 +5,3 @@ const plugin = require('tailwindcss/plugin')
 const styles = require('./styles')
+const { commonTrailingPseudos } = require('./utils')
 
@@ -16,23 +17,9 @@ const computed = {
 
-  if (selector.endsWith('::before')) {
-    return `:where(${selectorPrefix}${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')) {
-    return `:where(${selectorPrefix}${selector.slice(
-      0,
-      -7
-    )}):not(:where([class~="${prefixedNot}"] *))::after`
+  if (trailingPseudo) {
+    return `:where(${selectorPrefix}${rebuiltSelector}):not(:where([class~="${prefixedNot}"] *))${trailingPseudo}`
   }
 
-  if (selector.endsWith('::marker')) {
-    return `:where(${selectorPrefix}${selector.slice(
-      0,
-      -8
-    )}):not(:where([class~="${prefixedNot}"] *))::marker`
-  }
-
   return `:where(${selectorPrefix}${selector}):not(:where([class~="${prefixedNot}"] *))`
@@ -123,7 +110,9 @@ }
 
-        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)})`
+        )
       }
@@ -130,0 +119,0 @@

src/index.test.js

@@ -338,3 +338,5 @@ const path = require('path')
     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: {
@@ -716,3 +718,3 @@ typography: {
         }
-        .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;
@@ -891,3 +893,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;
@@ -1006,1 +1008,196 @@ }
 })
+
+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;
+      }
+    `)
+  })
+})

src/utils.js

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

No alert changes

Improved metrics

Total package byte prevSize

90130

increased by8.03%

Number of package files

9

increased by12.5%

Lines of code

2748

increased by8.62%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Addedpostcss-selector-parser@6.0.10

• + Addedpostcss-selector-parser@6.0.10(transitive)