@tailwindcss/typography - npm Package Compare versions

Comparing version 0.0.0-insiders.a54c1a8 to 0.0.0-insiders.a5d0bc2

CHANGELOG.md

@@ -12,2 +12,18 @@ # Changelog
 
+## [0.5.8] - 2022-11-07
+
+### Fixed
+
+- Fix selector when using a non-default class (e.g. `prose-sm`) ([#289](https://github.com/tailwindlabs/tailwindcss-typography/pull/289))
+
+## [0.5.7] - 2022-09-02
+
+### Fixed
+
+- Update TypeScript types ([#284](https://github.com/tailwindlabs/tailwindcss-typography/pull/284))
+
+## [0.5.6] - 2022-09-01
+
+- Actually publish types ([a54c1a8](https://github.com/tailwindlabs/tailwindcss-typography/commit/a54c1a82a64efdf23aab57e62edaa369d1a857f1))
+
 ## [0.5.5] - 2022-09-01
@@ -146,3 +162,5 @@
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.5...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
@@ -149,0 +167,0 @@ [0.5.4]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.3...v0.5.4

package.json

 {
   "name": "@tailwindcss/typography",
-  "version": "0.0.0-insiders.a54c1a8",
+  "version": "0.0.0-insiders.a5d0bc2",
   "description": "A Tailwind CSS plugin for automatically styling plain HTML content with beautiful typographic defaults.",
@@ -46,3 +46,3 @@ "main": "src/index.js",
     "react-dom": "^17.0.2",
-    "tailwindcss": "^3.0.0-alpha.2"
+    "tailwindcss": "^3.2.2"
   },
@@ -49,0 +49,0 @@ "dependencies": {

src/index.d.ts

@@ -1,2 +0,9 @@
-declare function plugin(options?: { className?: string, target?: 'modern' | 'legacy' }): Function
+declare function plugin(options?: Partial<{ className: string; target: 'modern' | 'legacy' }>): {
+  handler: () => void
+}
+
+declare namespace plugin {
+  const __isOptionsFunction: true
+}
+
 export = plugin

src/index.js

@@ -12,5 +12,7 @@ const plugin = require('tailwindcss/plugin')
 
-function inWhere(selector, { className, prefix }) {
+function inWhere(selector, { className, modifier, prefix }) {
   let prefixedNot = prefix(`.not-${className}`).slice(1)
-  let selectorPrefix = selector.startsWith('>') ? `.${className} ` : ''
+  let selectorPrefix = selector.startsWith('>')
+    ? `${modifier === 'DEFAULT' ? `.${className}` : `.${className}-${modifier}`} `
+    : ''
 
@@ -31,3 +33,3 @@ // Parse the selector, if every component ends in the same pseudo element(s) then move it to the end
 
-function configToCss(config = {}, { target, className, prefix }) {
+function configToCss(config = {}, { target, className, modifier, prefix }) {
   function updateSelector(k, v) {
@@ -46,3 +48,3 @@ if (target === 'legacy') {
         return [
-          inWhere(k, { className, prefix }),
+          inWhere(k, { className, modifier, prefix }),
           v,
@@ -53,3 +55,3 @@ Object.fromEntries(Object.entries(v).map(([k, v]) => updateSelector(k, v))),
 
-      return [inWhere(k, { className, prefix }), v]
+      return [inWhere(k, { className, modifier, prefix }), v]
     }
@@ -128,2 +130,3 @@
               className,
+              modifier,
               prefix,
@@ -130,0 +133,0 @@ }

src/index.test.js

@@ -9,2 +9,48 @@ const path = require('path')
 
+let vars = `
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x: ;
+  --tw-pan-y: ;
+  --tw-pinch-zoom: ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal: ;
+  --tw-slashed-zero: ;
+  --tw-numeric-figure: ;
+  --tw-numeric-spacing: ;
+  --tw-numeric-fraction: ;
+  --tw-ring-inset: ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur: ;
+  --tw-brightness: ;
+  --tw-contrast: ;
+  --tw-grayscale: ;
+  --tw-hue-rotate: ;
+  --tw-invert: ;
+  --tw-saturate: ;
+  --tw-sepia: ;
+  --tw-drop-shadow: ;
+  --tw-backdrop-blur: ;
+  --tw-backdrop-brightness: ;
+  --tw-backdrop-contrast: ;
+  --tw-backdrop-grayscale: ;
+  --tw-backdrop-hue-rotate: ;
+  --tw-backdrop-invert: ;
+  --tw-backdrop-opacity: ;
+  --tw-backdrop-saturate: ;
+  --tw-backdrop-sepia: ;
+`
 let defaults = css`
@@ -14,45 +60,7 @@ *,
   ::after {
-    --tw-translate-x: 0;
-    --tw-translate-y: 0;
-    --tw-rotate: 0;
-    --tw-skew-x: 0;
-    --tw-skew-y: 0;
-    --tw-scale-x: 1;
-    --tw-scale-y: 1;
-    --tw-pan-x: ;
-    --tw-pan-y: ;
-    --tw-pinch-zoom: ;
-    --tw-scroll-snap-strictness: proximity;
-    --tw-ordinal: ;
-    --tw-slashed-zero: ;
-    --tw-numeric-figure: ;
-    --tw-numeric-spacing: ;
-    --tw-numeric-fraction: ;
-    --tw-ring-inset: ;
-    --tw-ring-offset-width: 0px;
-    --tw-ring-offset-color: #fff;
-    --tw-ring-color: rgb(59 130 246 / 0.5);
-    --tw-ring-offset-shadow: 0 0 #0000;
-    --tw-ring-shadow: 0 0 #0000;
-    --tw-shadow: 0 0 #0000;
-    --tw-shadow-colored: 0 0 #0000;
-    --tw-blur: ;
-    --tw-brightness: ;
-    --tw-contrast: ;
-    --tw-grayscale: ;
-    --tw-hue-rotate: ;
-    --tw-invert: ;
-    --tw-saturate: ;
-    --tw-sepia: ;
-    --tw-drop-shadow: ;
-    --tw-backdrop-blur: ;
-    --tw-backdrop-brightness: ;
-    --tw-backdrop-contrast: ;
-    --tw-backdrop-grayscale: ;
-    --tw-backdrop-hue-rotate: ;
-    --tw-backdrop-invert: ;
-    --tw-backdrop-opacity: ;
-    --tw-backdrop-saturate: ;
-    --tw-backdrop-sepia: ;
+    ${vars}
   }
+  ::backdrop {
+    ${vars}
+  }
 `
@@ -178,2 +186,85 @@
 
+test('variants', async () => {
+  let config = {
+    content: [{ raw: html`<div class="sm:prose hover:prose-lg lg:prose-lg"></div>` }],
+    theme: {
+      typography: {
+        DEFAULT: {
+          css: [
+            {
+              color: 'red',
+              p: {
+                color: 'lime',
+              },
+              '> ul > li': {
+                color: 'purple',
+              },
+            },
+          ],
+        },
+        lg: {
+          css: {
+            color: 'green',
+            p: {
+              color: 'tomato',
+            },
+            '> ul > li': {
+              color: 'blue',
+            },
+          },
+        },
+        xl: {
+          css: {
+            color: 'yellow',
+            '> ul > li': {
+              color: 'hotpink',
+            },
+          },
+        },
+      },
+    },
+  }
+
+  return run(config).then((result) => {
+    expect(result.css).toMatchFormattedCss(
+      css`
+        ${defaults}
+
+        .hover\:prose-lg:hover {
+          color: green;
+        }
+        .hover\:prose-lg:hover :where(p):not(:where([class~='not-prose'] *)) {
+          color: tomato;
+        }
+        .hover\:prose-lg:hover
+          :where(.hover\:prose-lg:hover > ul > li):not(:where([class~='not-prose'] *)) {
+          color: blue;
+        }
+        @media (min-width: 640px) {
+          .sm\:prose {
+            color: red;
+          }
+          .sm\:prose :where(p):not(:where([class~='not-prose'] *)) {
+            color: lime;
+          }
+          .sm\:prose :where(.sm\:prose > ul > li):not(:where([class~='not-prose'] *)) {
+            color: purple;
+          }
+        }
+        @media (min-width: 1024px) {
+          .lg\:prose-lg {
+            color: green;
+          }
+          .lg\:prose-lg :where(p):not(:where([class~='not-prose'] *)) {
+            color: tomato;
+          }
+          .lg\:prose-lg :where(.lg\:prose-lg > ul > li):not(:where([class~='not-prose'] *)) {
+            color: blue;
+          }
+        }
+      `
+    )
+  })
+})
+
 test('modifiers', async () => {
@@ -240,2 +331,5 @@ let config = {
               },
+              '> ul > li': {
+                paddingLeft: '12px',
+              },
               h1: {
@@ -319,2 +413,5 @@ fontSize: '48px',
         }
+        .prose-lg :where(.prose-lg > ul > li):not(:where([class~='not-prose'] *)) {
+          padding-left: 12px;
+        }
         .prose-lg :where(h1):not(:where([class~='not-prose'] *)) {
@@ -1205,1 +1302,29 @@ font-size: 48px;
 })
+
+test('lead styles are inserted after paragraph styles', async () => {
+  let config = {
+    content: [{ raw: html`<div class="prose"></div>` }],
+  }
+
+  return run(config).then((result) => {
+    expect(result.css).toIncludeCss(
+      css`
+        .prose {
+          color: var(--tw-prose-body);
+          max-width: 65ch;
+        }
+        .prose :where(p):not(:where([class~='not-prose'] *)) {
+          margin-top: 1.25em;
+          margin-bottom: 1.25em;
+        }
+        .prose :where([class~='lead']):not(:where([class~='not-prose'] *)) {
+          color: var(--tw-prose-lead);
+          font-size: 1.25em;
+          line-height: 1.6;
+          margin-top: 1.2em;
+          margin-bottom: 1.2em;
+        }
+      `
+    )
+  })
+})

src/styles.js

@@ -1240,2 +1240,4 @@ const colors = require('tailwindcss/colors')
         maxWidth: '65ch',
+        // TODO: Figure out how to not need this, it's a merging issue
+        p: {},
         '[class~="lead"]': {
@@ -1242,0 +1244,0 @@ color: 'var(--tw-prose-lead)',

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

94045

increased by4.34%

Lines of code

2878

increased by4.73%

No dependency changes