@tailwindcss/typography - npm Package Compare versions

Comparing version 0.4.1 to 0.5.0-alpha.1

package.json

 {
   "name": "@tailwindcss/typography",
-  "version": "0.4.1",
+  "version": "0.5.0-alpha.1",
   "description": "A Tailwind CSS plugin for automatically styling plain HTML content with beautiful typographic defaults.",
@@ -27,7 +27,6 @@ "main": "src/index.js",
     "deploy": "npm run build && npm run export",
-    "start": "next start demo",
-    "prepublishOnly": "node scripts/build.js"
+    "start": "next start demo"
   },
   "peerDependencies": {
-    "tailwindcss": ">=2.0.0"
+    "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
   },
@@ -44,9 +43,9 @@ "devDependencies": {
     "jest": "^26.6.1",
-    "next": "10",
+    "next": "^11.1.2",
     "postcss": "^8.2.3",
     "prettier": "^2.1.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "snapshot-diff": "^0.8.1",
-    "tailwindcss": "^2.0.2"
+    "tailwindcss": "next"
   },
@@ -53,0 +52,0 @@ "dependencies": {

README.md

@@ -52,3 +52,3 @@ <p>
   rel="stylesheet"
-  href="https://unpkg.com/@tailwindcss/typography@0.2.x/dist/typography.min.css"
+  href="https://unpkg.com/@tailwindcss/typography@0.4.x/dist/typography.min.css"
 />
@@ -59,3 +59,3 @@
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@tailwindcss/typography@0.2.x/dist/typography.min.css"
+  href="https://cdn.jsdelivr.net/npm/@tailwindcss/typography@0.4.x/dist/typography.min.css"
 />
@@ -352,1 +352,27 @@ ```
 ```
+
+
+### Changing the default class name
+
+If you need to use a class name other than `prose` for any reason, you can do so using the `className` option when registering the plugin:
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    // ...
+  },
+  plugins: [
+    require('@tailwindcss/typography')({
+        className: 'markdown',
+    }),
+  ]
+  ...
+}
+```
+
+```html
+<article class="markdown md:markdown-lg">
+  {{ markdown }}
+</article>
+```

src/index.js

@@ -13,9 +13,37 @@ const plugin = require('tailwindcss/plugin')
 
-function configToCss(config = {}) {
-  return merge(
-    {},
-    ...Object.keys(config)
-      .filter((key) => computed[key])
-      .map((key) => computed[key](config[key])),
-    ...castArray(config.css || {})
+function inWhere(selector, { className, prefix }) {
+  let prefixedNot = prefix(`.not-${className}`).slice(1)
+
+  if (selector.endsWith('::before')) {
+    return `:where(${selector.slice(0, -8)}):not(:where([class~="${prefixedNot}"] *))::before`
+  }
+
+  if (selector.endsWith('::after')) {
+    return `:where(${selector.slice(0, -7)}):not(:where([class~="${prefixedNot}"] *))::after`
+  }
+
+  return `:where(${selector}):not(:where([class~="${prefixedNot}"] *))`
+}
+
+function configToCss(config = {}, { target, className, prefix }) {
+  return Object.fromEntries(
+    Object.entries(
+      merge(
+        {},
+        ...Object.keys(config)
+          .filter((key) => computed[key])
+          .map((key) => computed[key](config[key])),
+        ...castArray(config.css || {})
+      )
+    ).map(([k, v]) => {
+      if (target === 'legacy') {
+        return [k, v]
+      }
+
+      if (typeof v == 'object' && v.constructor == Object) {
+        return [inWhere(k, { className, prefix }), v]
+      }
+
+      return [k, v]
+    })
   )
@@ -25,4 +53,4 @@ }
 module.exports = plugin.withOptions(
-  ({ modifiers, className = 'prose' } = {}) => {
-    return function ({ addComponents, theme, variants }) {
+  ({ modifiers, className = 'prose', target = 'modern' } = {}) => {
+    return function ({ addComponents, theme, variants, prefix }) {
       const DEFAULT_MODIFIERS = [
@@ -52,3 +80,4 @@ 'DEFAULT',
           [modifier === 'DEFAULT' ? `.${className}` : `.${className}-${modifier}`]: configToCss(
-            config[modifier]
+            config[modifier],
+            { target, className, prefix }
           ),
@@ -55,0 +84,0 @@ })),

src/styles.js

@@ -1,2 +0,2 @@
-const defaultTheme = require('tailwindcss/defaultTheme')
+const colors = require('tailwindcss/colors')
 const { isUsableColor } = require('./utils')
@@ -16,9 +16,9 @@
       {
-        color: theme('colors.gray.700', defaultTheme.colors.gray[700]),
+        color: theme('colors.gray.700', colors.gray[700]),
         maxWidth: '65ch',
         '[class~="lead"]': {
-          color: theme('colors.gray.600', defaultTheme.colors.gray[600]),
+          color: theme('colors.gray.600', colors.gray[600]),
         },
         a: {
-          color: theme('colors.gray.900', defaultTheme.colors.gray[900]),
+          color: theme('colors.gray.900', colors.gray[900]),
           textDecoration: 'underline',
@@ -28,3 +28,3 @@ fontWeight: '500',
         strong: {
-          color: theme('colors.gray.900', defaultTheme.colors.gray[900]),
+          color: theme('colors.gray.900', colors.gray[900]),
           fontWeight: '600',
@@ -66,3 +66,3 @@ },
           fontWeight: '400',
-          color: theme('colors.gray.500', defaultTheme.colors.gray[500]),
+          color: theme('colors.gray.500', colors.gray[500]),
         },
@@ -75,7 +75,7 @@ 'ul > li': {
           position: 'absolute',
-          backgroundColor: theme('colors.gray.300', defaultTheme.colors.gray[300]),
+          backgroundColor: theme('colors.gray.300', colors.gray[300]),
           borderRadius: '50%',
         },
         hr: {
-          borderColor: theme('colors.gray.200', defaultTheme.colors.gray[200]),
+          borderColor: theme('colors.gray.200', colors.gray[200]),
           borderTopWidth: 1,
@@ -86,5 +86,5 @@ },
           fontStyle: 'italic',
-          color: theme('colors.gray.900', defaultTheme.colors.gray[900]),
+          color: theme('colors.gray.900', colors.gray[900]),
           borderLeftWidth: '0.25rem',
-          borderLeftColor: theme('colors.gray.200', defaultTheme.colors.gray[200]),
+          borderLeftColor: theme('colors.gray.200', colors.gray[200]),
           quotes: '"\\201C""\\201D""\\2018""\\2019"',
@@ -99,22 +99,34 @@ },
         h1: {
-          color: theme('colors.gray.900', defaultTheme.colors.gray[900]),
+          color: theme('colors.gray.900', colors.gray[900]),
           fontWeight: '800',
         },
+        'h1 strong': {
+          fontWeight: '900',
+        },
         h2: {
-          color: theme('colors.gray.900', defaultTheme.colors.gray[900]),
+          color: theme('colors.gray.900', colors.gray[900]),
           fontWeight: '700',
         },
+        'h2 strong': {
+          fontWeight: '800',
+        },
         h3: {
-          color: theme('colors.gray.900', defaultTheme.colors.gray[900]),
+          color: theme('colors.gray.900', colors.gray[900]),
           fontWeight: '600',
         },
+        'h3 strong': {
+          fontWeight: '700',
+        },
         h4: {
-          color: theme('colors.gray.900', defaultTheme.colors.gray[900]),
+          color: theme('colors.gray.900', colors.gray[900]),
           fontWeight: '600',
         },
+        'h4 strong': {
+          fontWeight: '700',
+        },
         'figure figcaption': {
-          color: theme('colors.gray.500', defaultTheme.colors.gray[500]),
+          color: theme('colors.gray.500', colors.gray[500]),
         },
         code: {
-          color: theme('colors.gray.900', defaultTheme.colors.gray[900]),
+          color: theme('colors.gray.900', colors.gray[900]),
           fontWeight: '600',
@@ -129,7 +141,7 @@ },
         'a code': {
-          color: theme('colors.gray.900', defaultTheme.colors.gray[900]),
+          color: theme('colors.gray.900', colors.gray[900]),
         },
         pre: {
-          color: theme('colors.gray.200', defaultTheme.colors.gray[200]),
-          backgroundColor: theme('colors.gray.800', defaultTheme.colors.gray[800]),
+          color: theme('colors.gray.200', colors.gray[200]),
+          backgroundColor: theme('colors.gray.800', colors.gray[800]),
           overflowX: 'auto',
@@ -162,6 +174,6 @@ },
         thead: {
-          color: theme('colors.gray.900', defaultTheme.colors.gray[900]),
+          color: theme('colors.gray.900', colors.gray[900]),
           fontWeight: '600',
           borderBottomWidth: '1px',
-          borderBottomColor: theme('colors.gray.300', defaultTheme.colors.gray[300]),
+          borderBottomColor: theme('colors.gray.300', colors.gray[300]),
         },
@@ -173,3 +185,3 @@ 'thead th': {
           borderBottomWidth: '1px',
-          borderBottomColor: theme('colors.gray.200', defaultTheme.colors.gray[200]),
+          borderBottomColor: theme('colors.gray.200', colors.gray[200]),
         },
@@ -176,0 +188,0 @@ 'tbody tr:last-child': {

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

2264490

increased by184.77%

Lines of code

47536

increased by83.57%

Number of lines in readme file

376

increased by7.43%

No dependency changes