@tailwindcss/typography - npm Package Compare versions

Comparing version 0.0.0-insiders.94b5a5b to 0.0.0-insiders.a9b4266

CHANGELOG.md

@@ -10,4 +10,10 @@ # Changelog
 
-### Added
+### Fixed
 
+- Ensure nested selectors using `&:hover` work ([#246](https://github.com/tailwindlabs/tailwindcss-typography/pull/246))
+
+## [0.5.1] - 2022-01-28
+
+### Removed
+
 - Remove `dist` folder and related dependencies ([#226](https://github.com/tailwindlabs/tailwindcss-typography/pull/226))
@@ -36,3 +42,3 @@
 
-### Fixed 
+### Fixed
 
@@ -109,3 +115,4 @@ - Fix list-style modifier selectors ([#137](https://github.com/tailwindlabs/tailwindcss-typography/pull/137))
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.0...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.1...HEAD
+[0.5.1]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.0...v0.5.1
 [0.5.0]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.0-alpha.3...v0.5.0
@@ -112,0 +119,0 @@ [0.5.0-alpha.3]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.0-alpha.2...v0.5.0-alpha.3

package.json

 {
   "name": "@tailwindcss/typography",
-  "version": "0.0.0-insiders.94b5a5b",
+  "version": "0.0.0-insiders.a9b4266",
   "description": "A Tailwind CSS plugin for automatically styling plain HTML content with beautiful typographic defaults.",
@@ -5,0 +5,0 @@ "main": "src/index.js",

src/index.js

@@ -59,3 +59,7 @@ const plugin = require('tailwindcss/plugin')
       if (nested) {
-        return [k, Object.fromEntries(Object.entries(v).map(([k, v]) => updateSelector(k, v)))]
+        return [
+          inWhere(k, { className, prefix }),
+          v,
+          Object.fromEntries(Object.entries(v).map(([k, v]) => updateSelector(k, v))),
+        ]
       }
@@ -62,0 +66,0 @@

src/index.test.js

@@ -8,3 +8,2 @@ const path = require('path')
 let css = String.raw
-let javascript = String.raw
 
@@ -835,1 +834,52 @@ function run(config, plugin = tailwind) {
 })
+
+it('should be possible to use nested syntax (&) when extending the config', () => {
+  let config = {
+    plugins: [typographyPlugin()],
+    content: [
+      {
+        raw: html`<div class="prose"></div>`,
+      },
+    ],
+    theme: {
+      extend: {
+        typography: {
+          DEFAULT: {
+            css: {
+              color: '#000',
+              a: {
+                color: '#888',
+                '&:hover': {
+                  color: '#ff0000',
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  }
+
+  return run(config).then((result) => {
+    expect(result.css).toIncludeCss(css`
+      .prose {
+        color: #000;
+        max-width: 65ch;
+      }
+    `)
+
+    expect(result.css).toIncludeCss(css`
+      .prose :where(a):not(:where([class~='not-prose'] *)) {
+        color: #888;
+        text-decoration: underline;
+        font-weight: 500;
+      }
+    `)
+
+    expect(result.css).toIncludeCss(css`
+      .prose :where(a):not(:where([class~='not-prose'] *)):hover {
+        color: #ff0000;
+      }
+    `)
+  })
+})

No alert changes

Improved metrics

Total package byte prevSize

78111

increased by1.78%

Lines of code

2398

increased by2.13%

No dependency changes