@tailwindcss/typography - npm Package Compare versions

Comparing version 0.0.0-insiders.c4c3853 to 0.0.0-insiders.c4e2178

CHANGELOG.md

@@ -10,2 +10,10 @@ # Changelog
 
+- Nothing yet!
+
+## [0.5.2] - 2022-02-14
+
+### Fixed
+
+- Ensure nested selectors using `&:hover` work ([#246](https://github.com/tailwindlabs/tailwindcss-typography/pull/246))
+
 ## [0.5.1] - 2022-01-28
@@ -110,3 +118,4 @@
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.1...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.2...HEAD
+[0.5.2]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.1...v0.5.2
 [0.5.1]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.0...v0.5.1
@@ -113,0 +122,0 @@ [0.5.0]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.0-alpha.3...v0.5.0

package.json

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

78240

increased by1.79%

Lines of code

2398

increased by2.13%

No dependency changes