tailwindcss-typography - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

CHANGELOG.md

@@ -8,2 +8,7 @@ # Changelog
 
+## [2.1.0] - 2019-05-26
+
+### Added
+- Added text style components (see the `textStyles` theme object in the `README` for more info)
+
 ## [2.0.0] - 2019-05-13
@@ -60,3 +65,5 @@
 
-[Unreleased]: https://github.com/benface/tailwindcss-typography/compare/v2.0.0-beta.2...HEAD
+[Unreleased]: https://github.com/benface/tailwindcss-typography/compare/v2.1.0...HEAD
+[2.1.0]: https://github.com/benface/tailwindcss-typography/compare/v2.0.0...v2.1.0
+[2.0.0]: https://github.com/benface/tailwindcss-typography/compare/v2.0.0-beta.2...v2.0.0
 [2.0.0-beta.2]: https://github.com/benface/tailwindcss-typography/compare/v2.0.0-beta.1...v2.0.0-beta.2
@@ -63,0 +70,0 @@ [2.0.0-beta.1]: https://github.com/benface/tailwindcss-typography/compare/v1.1.0...v2.0.0-beta.1

index.js

 const _ = require('lodash');
 
+const camelCaseToKebabCase = function(string) {
+  return string
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .replace(/([A-Z])([A-Z])(?=[a-z])/g, '$1-$2')
+    .toLowerCase();
+};
+
 module.exports = function(options = {}) {
-  return ({ config, e, addUtilities, variants }) => {
+  return ({ theme, variants, e, addUtilities, addComponents }) => {
     const defaultOptions = {
@@ -9,4 +16,5 @@ ellipsis: true,
       textUnset: true,
+      componentPrefix: 'c-',
     };
-    options = _.merge({}, defaultOptions, options);
+    options = _.defaults({}, options, defaultOptions);
     
@@ -20,5 +28,15 @@ const defaultTextIndentTheme = {};
     const defaultTextUnsetVariants = ['responsive'];
+    const defaultTextStylesTheme = {};
 
+    const textIndentTheme = theme('textIndent', defaultTextIndentTheme);
+    const textIndentVariants = variants('textIndent', defaultTextIndentVariants);
+    const textShadowTheme = theme('textShadow', defaultTextShadowTheme);
+    const textShadowVariants = variants('textShadow', defaultTextShadowVariants);
+    const ellipsisVariants = variants('ellipsis', defaultEllipsisVariants);
+    const hyphensVariants = variants('hyphens', defaultHyphensVariants);
+    const textUnsetVariants = variants('textUnset', defaultTextUnsetVariants);
+    const textStylesTheme = theme('textStyles', defaultTextStylesTheme);
+
     const textIndentUtilities = _.fromPairs(
-      _.map(config('theme.textIndent', defaultTextIndentTheme), (value, modifier) => {
+      _.map(textIndentTheme, (value, modifier) => {
         return [
@@ -34,3 +52,3 @@ `.${e(`indent-${modifier}`)}`,
     const textShadowUtilities = _.fromPairs(
-      _.map(config('theme.textShadow', defaultTextShadowTheme), (value, modifier) => {
+      _.map(textShadowTheme, (value, modifier) => {
         return [
@@ -93,14 +111,48 @@ `.${e(`text-shadow${modifier === 'default' ? '' : `-${modifier}`}`)}`,
 
-    addUtilities(textIndentUtilities, variants('textIndent', defaultTextIndentVariants));
-    addUtilities(textShadowUtilities, variants('textShadow', defaultTextShadowVariants));
+    const resolveTextStyle = function(styles) {
+      if (!_.isObject(styles)) {
+        return styles;
+      }
+      return _.transform(styles, function(result, value, key) {
+        if (key === 'extends') {
+          _.forEach(_.castArray(value), function(textStyleToExtend) {
+            _.forEach(resolveTextStyle(textStylesTheme[textStyleToExtend]), function(extendedValue, extendedKey) {
+              if (extendedKey === 'output') {
+                return; // continue
+              }
+              result[extendedKey] = resolveTextStyle(extendedValue);
+            });
+          });
+          return;
+        }
+        result[key] = resolveTextStyle(value);
+      });
+    };
+
+    const textStyles = _.fromPairs(
+      _.map(textStylesTheme, (componentStyles, componentName) => {
+        componentStyles = resolveTextStyle(componentStyles);
+        if (componentStyles.output === false) {
+          return [];
+        }
+        return [
+          `.${e(`${options.componentPrefix}${camelCaseToKebabCase(componentName)}`)}`,
+          componentStyles,
+        ];
+      })
+    );
+
+    addUtilities(textIndentUtilities, textIndentVariants);
+    addUtilities(textShadowUtilities, textShadowVariants);
     if (options.ellipsis) {
-      addUtilities(ellipsisUtilities, variants('ellipsis', defaultEllipsisVariants));
+      addUtilities(ellipsisUtilities, ellipsisVariants);
     }
     if (options.hyphens) {
-      addUtilities(hyphensUtilities, variants('hyphens', defaultHyphensVariants));
+      addUtilities(hyphensUtilities, hyphensVariants);
     }
     if (options.textUnset) {
-      addUtilities(textUnsetUtilities, variants('textUnset', defaultTextUnsetVariants));
+      addUtilities(textUnsetUtilities, textUnsetVariants);
     }
+    addComponents(textStyles);
   };
 };

package.json

 {
   "name": "tailwindcss-typography",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Tailwind CSS plugin to generate typography utilities",
@@ -23,7 +23,7 @@ "author": "Benoît Rouleau <[e-mail]>",
     "jest": "^24.8.0",
-    "jest-matcher-css": "^1.0.3",
+    "jest-matcher-css": "^1.1.0",
     "postcss": "^7.0.16",
-    "release-it": "^11.0.4",
-    "tailwindcss": "1.0.0"
+    "release-it": "^12.2.1",
+    "tailwindcss": "1.0.1"
   }
 }

README.md

@@ -23,2 +23,82 @@ # Typography Plugin for Tailwind CSS
     },
+    textStyles: theme => ({ // defaults to {}
+      heading: {
+        output: false, // this means there won't be a "heading" component in the CSS, but it can be extended
+        fontWeight: theme('fontWeight.bold'),
+        lineHeight: theme('lineHeight.tight'),
+      },
+      h1: {
+        extends: 'heading', // this means all the styles in "heading" will be copied here; "extends" can also be an array to extend multiple text styles
+        fontSize: theme('fontSize.6xl'),
+      },
+      h2: {
+        extends: 'heading',
+        fontSize: theme('fontSize.5xl'),
+      },
+      h3: {
+        extends: 'heading',
+        fontSize: theme('fontSize.4xl'),
+      },
+      h4: {
+        extends: 'heading',
+        fontSize: theme('fontSize.3xl'),
+      },
+      h5: {
+        extends: 'heading',
+        fontSize: theme('fontSize.2xl'),
+      },
+      h6: {
+        extends: 'heading',
+        fontSize: theme('fontSize.xl'),
+      },
+      link: {
+        fontWeight: theme('fontWeight.bold'),
+        color: theme('colors.blue.400'),
+        '&:hover': {
+          color: theme('colors.blue.600'),
+          textDecoration: 'underline',
+        },
+      },
+      richText: {
+        fontWeight: theme('fontWeight.normal'),
+        fontSize: theme('fontSize.base'),
+        lineHeight: theme('lineHeight.relaxed'),
+        '> * + *': {
+          marginTop: '1em',
+        },
+        'h1': {
+          extends: 'h1',
+        },
+        'h2': {
+          extends: 'h2',
+        },
+        'h3': {
+          extends: 'h3',
+        },
+        'h4': {
+          extends: 'h4',
+        },
+        'h5': {
+          extends: 'h5',
+        },
+        'h6': {
+          extends: 'h6',
+        },
+        'ul': {
+          listStyleType: 'disc',
+        },
+        'ol': {
+          listStyleType: 'decimal',
+        },
+        'a': {
+          extends: 'link',
+        },
+        'b, strong': {
+          fontWeight: theme('fontWeight.bold'),
+        },
+        'i, em': {
+          fontStyle: 'italic',
+        },
+      },
+    }),
   },
@@ -34,5 +114,6 @@ variants: { // all the following default to ['responsive']
     require('tailwindcss-typography')({
-      ellipsis: true, // defaults to true
-      hyphens: true, // defaults to true
-      textUnset: true, // defaults to true
+      ellipsis: true,         // defaults to true
+      hyphens: true,          // defaults to true
+      textUnset: true,        // defaults to true
+      componentPrefix: 'c-',  // for text styles; defaults to 'c-'
     }),
@@ -52,2 +133,3 @@ ],
 /* configurable with the "textShadow" theme object */
+/* note: the "default" key generates a simple "text-shadow" class (instead of "text-shadow-default") */
 .text-shadow-[key] {
@@ -103,2 +185,103 @@ text-shadow: [value];
 
-Note: The `textShadow` theme object accepts a `default` key which generates a simple `text-shadow` class (instead of `text-shadow-default`).
+The plugin also generates components for text styles. The above config example would generate something like this:
+
+```
+.c-h1 {
+  font-weight: 700;
+  line-height: 1.25;
+  font-size: 4rem;
+}
+.c-h2 {
+  font-weight: 800;
+  line-height: 1.25;
+  font-size: 3rem;
+}
+.c-h3 {
+  font-weight: 700;
+  line-height: 1.25;
+  font-size: 2.25rem;
+}
+.c-h4 {
+  font-weight: 700;
+  line-height: 1.25;
+  font-size: 1.875rem;
+}
+.c-h5 {
+  font-weight: 700;
+  line-height: 1.25;
+  font-size: 1.5rem;
+}
+.c-h6 {
+  font-weight: 700;
+  line-height: 1.25;
+  font-size: 1.25rem;
+}
+
+.c-link {
+  font-weight: 700;
+  color: #63b3ed;
+}
+.c-link:hover {
+  color: #3182ce;
+  text-decoration: underline;
+}
+
+.c-rich-text {
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.625;
+}
+.c-rich-text > * + * {
+  margin-top: 1em;
+}
+.c-rich-text h1 {
+  font-weight: 700;
+  line-height: 1.25;
+  font-size: 4rem;
+}
+.c-rich-text h2 {
+  font-weight: 800;
+  line-height: 1.25;
+  font-size: 3rem;
+}
+.c-rich-text h3 {
+  font-weight: 700;
+  line-height: 1.25;
+  font-size: 2.25rem;
+}
+.c-rich-text h4 {
+  font-weight: 700;
+  line-height: 1.25;
+  font-size: 1.875rem;
+}
+.c-rich-text h5 {
+  font-weight: 700;
+  line-height: 1.25;
+  font-size: 1.5rem;
+}
+.c-rich-text h6 {
+  font-weight: 700;
+  line-height: 1.25;
+  font-size: 1.25rem;
+}
+.c-rich-text ul {
+  list-style-type: disc;
+}
+.c-rich-text ol {
+  list-style-type: decimal;
+}
+.c-rich-text a {
+  font-weight: 700;
+  color: #63b3ed;
+}
+.c-rich-text a:hover {
+  color: #3182ce;
+  text-decoration: underline;
+}
+.c-rich-text b, .c-rich-text strong {
+  font-weight: 700;
+}
+.c-rich-text i, .c-rich-text em {
+  font-style: italic;
+}
+```

test.js

@@ -5,3 +5,2 @@ const _ = require('lodash');
 const tailwindcss = require('tailwindcss');
-const defaultConfig = require('tailwindcss/defaultConfig');
 const typographyPlugin = require('./index.js');
@@ -25,3 +24,3 @@
   )
-  .process('@tailwind utilities', {
+  .process('@tailwind components; @tailwind utilities', {
     from: undefined,
@@ -42,79 +41,79 @@ })
       .ellipsis {
-        text-overflow: ellipsis
+        text-overflow: ellipsis;
       }
       .hyphens-none {
-        hyphens: none
+        hyphens: none;
       }
       .hyphens-manual {
-        hyphens: manual
+        hyphens: manual;
       }
       .hyphens-auto {
-        hyphens: auto
+        hyphens: auto;
       }
       .font-family-unset {
-        font-family: inherit
+        font-family: inherit;
       }
       .font-weight-unset {
-        font-weight: inherit
+        font-weight: inherit;
       }
       .font-style-unset {
-        font-style: inherit
+        font-style: inherit;
       }
       .text-size-unset {
-        font-size: inherit
+        font-size: inherit;
       }
       .text-align-unset {
-        text-align: inherit
+        text-align: inherit;
       }
       .leading-unset {
-        line-height: inherit
+        line-height: inherit;
       }
       .tracking-unset {
-        letter-spacing: inherit
+        letter-spacing: inherit;
       }
       .text-color-unset {
-        color: inherit
+        color: inherit;
       }
       .text-transform-unset {
-        text-transform: inherit
+        text-transform: inherit;
       }
       @media (min-width: 640px) {
         .sm\\:ellipsis {
-          text-overflow: ellipsis
+          text-overflow: ellipsis;
         }
         .sm\\:hyphens-none {
-          hyphens: none
+          hyphens: none;
         }
         .sm\\:hyphens-manual {
-          hyphens: manual
+          hyphens: manual;
         }
         .sm\\:hyphens-auto {
-          hyphens: auto
+          hyphens: auto;
         }
         .sm\\:font-family-unset {
-          font-family: inherit
+          font-family: inherit;
         }
         .sm\\:font-weight-unset {
-          font-weight: inherit
+          font-weight: inherit;
         }
         .sm\\:font-style-unset {
-          font-style: inherit
+          font-style: inherit;
         }
         .sm\\:text-size-unset {
-          font-size: inherit
+          font-size: inherit;
         }
         .sm\\:text-align-unset {
-          text-align: inherit
+          text-align: inherit;
         }
         .sm\\:leading-unset {
-          line-height: inherit
+          line-height: inherit;
         }
         .sm\\:tracking-unset {
-          letter-spacing: inherit
+          letter-spacing: inherit;
         }
         .sm\\:text-color-unset {
-          color: inherit
+          color: inherit;
         }
         .sm\\:text-transform-unset {
-          text-transform: inherit
+          text-transform: inherit;
         }
@@ -133,7 +132,7 @@ }
       .ellipsis {
-        text-overflow: ellipsis
+        text-overflow: ellipsis;
       }
       @media (min-width: 640px) {
         .sm\\:ellipsis {
-          text-overflow: ellipsis
+          text-overflow: ellipsis;
         }
@@ -145,3 +144,3 @@ }
 
-test('text indent and text shadow utilities can be generated by adding keys to the theme', () => {
+test('text indent and text shadow utilities can be customized', () => {
   return generatePluginCss({
@@ -169,24 +168,24 @@ theme: {
       .indent-1 {
-        text-indent: 0.25rem
+        text-indent: 0.25rem;
       }
       .indent-2 {
-        text-indent: 0.5rem
+        text-indent: 0.5rem;
       }
       .text-shadow {
-        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5)
+        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
       }
       .text-shadow-lg {
-        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5)
+        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
       }
       .ellipsis {
-        text-overflow: ellipsis
+        text-overflow: ellipsis;
       }
       .hyphens-none {
-        hyphens: none
+        hyphens: none;
       }
       .hyphens-manual {
-        hyphens: manual
+        hyphens: manual;
       }
       .hyphens-auto {
-        hyphens: auto
+        hyphens: auto;
       }
@@ -197,2 +196,644 @@ `);
 
+test('text style components can be generated', () => {
+  return generatePluginCss({
+    theme: {
+      fontSize: {
+        'heading-xs': '24px',
+        'heading-sm': '30px',
+        'heading': '36px',
+        'heading-lg': '48px',
+        'heading-xl': '64px',
+      },
+      textStyles: theme => ({
+        h1: {
+          fontSize: theme('fontSize.heading-xl'),
+        },
+        h2: {
+          fontSize: theme('fontSize.heading-lg'),
+        },
+        h3: {
+          fontSize: theme('fontSize.heading'),
+        },
+        h4: {
+          fontSize: theme('fontSize.heading-sm'),
+        },
+        h5: {
+          fontSize: theme('fontSize.heading-xs'),
+        },
+      }),
+    },
+  }, {
+    ellipsis: false,
+    hyphens: false,
+    textUnset: false,
+  }).then(css => {
+    expect(css).toMatchCss(`
+      .c-h1 {
+        font-size: 64px;
+      }
+      .c-h2 {
+        font-size: 48px;
+      }
+      .c-h3 {
+        font-size: 36px;
+      }
+      .c-h4 {
+        font-size: 30px;
+      }
+      .c-h5 {
+        font-size: 24px;
+      }
+    `);
+  });
+});
+
+test('the component prefix can be customized', () => {
+  return generatePluginCss({
+    theme: {
+      fontSize: {
+        'heading-xl': '64px',
+      },
+      textStyles: theme => ({
+        h1: {
+          fontSize: theme('fontSize.heading-xl'),
+        },
+      }),
+    },
+  }, {
+    ellipsis: false,
+    hyphens: false,
+    textUnset: false,
+    componentPrefix: '',
+  }).then(css => {
+    expect(css).toMatchCss(`
+      .h1 {
+        font-size: 64px;
+      }
+    `);
+  });
+});
+
+test('text styles can extend other text styles', () => {
+  return generatePluginCss({
+    theme: {
+      fontWeight: {
+        'bold': '700',
+      },
+      fontSize: {
+        'heading-xs': '24px',
+        'heading-sm': '30px',
+        'heading': '36px',
+        'heading-lg': '48px',
+        'heading-xl': '64px',
+      },
+      lineHeight: {
+        'none': '1',
+        'tight': '1.25',
+        'normal': '1.5',
+      },
+      textStyles: theme => ({
+        heading: {
+          fontWeight: theme('fontWeight.bold'),
+          lineHeight: theme('lineHeight.tight'),
+        },
+        h1: {
+          extends: 'heading',
+          fontSize: theme('fontSize.heading-xl'),
+        },
+        h2: {
+          extends: 'heading',
+          fontSize: theme('fontSize.heading-lg'),
+        },
+        h3: {
+          extends: 'heading',
+          fontSize: theme('fontSize.heading'),
+        },
+      }),
+    },
+  }, {
+    ellipsis: false,
+    hyphens: false,
+    textUnset: false,
+  }).then(css => {
+    expect(css).toMatchCss(`
+      .c-heading {
+        font-weight: 700;
+        line-height: 1.25;
+      }
+      .c-h1 {
+        font-weight: 700;
+        line-height: 1.25;
+        font-size: 64px;
+      }
+      .c-h2 {
+        font-weight: 700;
+        line-height: 1.25;
+        font-size: 48px;
+      }
+      .c-h3 {
+        font-weight: 700;
+        line-height: 1.25;
+        font-size: 36px;
+      }
+    `);
+  });
+});
+
+test('text styles can extend more than one other text style', () => {
+  return generatePluginCss({
+    theme: {
+      fontFamily: {
+        'default': 'sans-serif',
+        'heading': 'Helvetica',
+      },
+      fontWeight: {
+        'bold': '700',
+        'extrabold': '800',
+      },
+      fontSize: {
+        'heading-xs': '24px',
+        'heading-sm': '30px',
+        'heading': '36px',
+        'heading-lg': '48px',
+        'heading-xl': '64px',
+      },
+      lineHeight: {
+        'none': '1',
+        'tight': '1.25',
+        'normal': '1.5',
+      },
+      textStyles: theme => ({
+        heading: {
+          fontFamily: theme('fontFamily.heading'),
+          fontWeight: theme('fontWeight.bold'),
+        },
+        largeHeading: {
+          fontWeight: theme('fontWeight.extrabold'),
+          lineHeight: theme('lineHeight.tight'),
+        },
+        h1: {
+          extends: ['heading', 'largeHeading'],
+          fontSize: theme('fontSize.heading-xl'),
+        },
+        h2: {
+          extends: ['heading', 'largeHeading'],
+          fontSize: theme('fontSize.heading-lg'),
+        },
+        h3: {
+          extends: 'heading',
+          fontSize: theme('fontSize.heading'),
+        },
+      }),
+    },
+  }, {
+    ellipsis: false,
+    hyphens: false,
+    textUnset: false,
+  }).then(css => {
+    expect(css).toMatchCss(`
+      .c-heading {
+        font-family: Helvetica;
+        font-weight: 700;
+      }
+      .c-large-heading {
+        font-weight: 800;
+        line-height: 1.25;
+      }
+      .c-h1 {
+        font-family: Helvetica;
+        font-weight: 800;
+        line-height: 1.25;
+        font-size: 64px;
+      }
+      .c-h2 {
+        font-family: Helvetica;
+        font-weight: 800;
+        line-height: 1.25;
+        font-size: 48px;
+      }
+      .c-h3 {
+        font-family: Helvetica;
+        font-weight: 700;
+        font-size: 36px;
+      }
+    `);
+  });
+});
+
+test('text style components can style their children', () => {
+  return generatePluginCss({
+    theme: {
+      fontWeight: {
+        'normal': '400',
+        'bold': '700',
+      },
+      fontSize: {
+        'sm': '14px',
+        'default': '16px',
+        'lg': '18px',
+        'xl': '20px',
+        'heading-xs': '24px',
+        'heading-sm': '30px',
+        'heading': '36px',
+        'heading-lg': '48px',
+        'heading-xl': '64px',
+      },
+      lineHeight: {
+        'none': '1',
+        'tight': '1.25',
+        'normal': '1.5',
+        'loose': '2',
+      },
+      textStyles: theme => ({
+        heading: {
+          fontWeight: theme('fontWeight.bold'),
+          lineHeight: theme('lineHeight.tight'),
+        },
+        h1: {
+          extends: 'heading',
+          fontSize: theme('fontSize.heading-xl'),
+        },
+        h2: {
+          extends: 'heading',
+          fontSize: theme('fontSize.heading-lg'),
+        },
+        h3: {
+          extends: 'heading',
+          fontSize: theme('fontSize.heading'),
+        },
+        richText: {
+          fontWeight: theme('fontWeight.normal'),
+          fontSize: theme('fontSize.default'),
+          lineHeight: theme('lineHeight.loose'),
+          'h1': {
+            extends: 'h1',
+          },
+          'h2': {
+            extends: 'h2',
+          },
+          'h3': {
+            extends: 'h3',
+          },
+        },
+      }),
+    },
+  }, {
+    ellipsis: false,
+    hyphens: false,
+    textUnset: false,
+  }).then(css => {
+    expect(css).toMatchCss(`
+      .c-heading {
+        font-weight: 700;
+        line-height: 1.25;
+      }
+      .c-h1 {
+        font-weight: 700;
+        line-height: 1.25;
+        font-size: 64px;
+      }
+      .c-h2 {
+        font-weight: 700;
+        line-height: 1.25;
+        font-size: 48px;
+      }
+      .c-h3 {
+        font-weight: 700;
+        line-height: 1.25;
+        font-size: 36px;
+      }
+      .c-rich-text {
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 2;
+      }
+      .c-rich-text h1 {
+        font-weight: 700;
+        line-height: 1.25;
+        font-size: 64px;
+      }
+      .c-rich-text h2 {
+        font-weight: 700;
+        line-height: 1.25;
+        font-size: 48px;
+      }
+      .c-rich-text h3 {
+        font-weight: 700;
+        line-height: 1.25;
+        font-size: 36px;
+      }
+    `);
+  });
+});
+
+/*
+test('text styles can be responsive', () => {
+  return generatePluginCss({
+    theme: {
+      fontWeight: {
+        'bold': '700',
+      },
+      fontSize: {
+        'heading-xs': '24px',
+        'heading-sm': '30px',
+        'heading': '36px',
+        'heading-lg': '48px',
+        'heading-xl': '64px',
+      },
+      lineHeight: {
+        'none': '1',
+        'tight': '1.25',
+        'normal': '1.5',
+      },
+      textStyles: theme => ({
+        heading: {
+          fontWeight: theme('fontWeight.bold'),
+          lineHeight: theme('lineHeight.tight'),
+        },
+        h1: {
+          extends: 'heading',
+          fontSize: theme('fontSize.heading-lg'),
+          '@screen sm': {
+            fontSize: theme('fontSize.heading-xl'),
+          }
+        },
+        h2: {
+          extends: 'heading',
+          fontSize: theme('fontSize.heading'),
+          '@screen sm': {
+            fontSize: theme('fontSize.heading-lg'),
+          }
+        },
+        h3: {
+          extends: 'heading',
+          fontSize: theme('fontSize.heading-sm'),
+          '@screen sm': {
+            fontSize: theme('fontSize.heading'),
+          }
+        },
+      }),
+    },
+  }, {
+    ellipsis: false,
+    hyphens: false,
+    textUnset: false,
+  }).then(css => {
+    expect(css).toMatchCss(`
+      .c-heading {
+        font-weight: 700;
+        line-height: 1.25;
+      }
+      .c-h1 {
+        font-weight: 700;
+        line-height: 1.25;
+        font-size: 48px;
+      }
+      @media (min-width: 640px) {
+        .c-h1 {
+          font-size: 64px;
+        }
+      }
+      .c-h2 {
+        font-weight: 700;
+        line-height: 1.25;
+        font-size: 36px;
+      }
+      @media (min-width: 640px) {
+        .c-h2 {
+          font-size: 48px;
+        }
+      }
+      .c-h3 {
+        font-weight: 700;
+        line-height: 1.25;
+        font-size: 30px;
+      }
+      @media (min-width: 640px) {
+        .c-h3 {
+          font-size: 36px;
+        }
+      }
+    `);
+  });
+});
+*/
+
+test('text styles can be set to not be output', () => {
+  return generatePluginCss({
+    theme: {
+      fontWeight: {
+        'bold': '700',
+      },
+      fontSize: {
+        'heading-xs': '24px',
+        'heading-sm': '30px',
+        'heading': '36px',
+        'heading-lg': '48px',
+        'heading-xl': '64px',
+      },
+      lineHeight: {
+        'none': '1',
+        'tight': '1.25',
+        'normal': '1.5',
+      },
+      textStyles: theme => ({
+        heading: {
+          output: false,
+          fontWeight: theme('fontWeight.bold'),
+          lineHeight: theme('lineHeight.tight'),
+          fontSize: theme('fontSize.heading'),
+        },
+        h1: {
+          extends: 'heading',
+          fontSize: theme('fontSize.heading-xl'),
+        },
+      }),
+    },
+  }, {
+    ellipsis: false,
+    hyphens: false,
+    textUnset: false,
+  }).then(css => {
+    expect(css).toMatchCss(`
+      .c-h1 {
+        font-weight: 700;
+        line-height: 1.25;
+        font-size: 64px;
+      }
+    `);
+  });
+});
+
+test('all these options can be used to generate a full-featured rich text component', () => {
+  return generatePluginCss({
+    theme: {
+      colors: {
+        'link': '#2083c0',
+      },
+      fontFamily: {
+        'default': 'sans-serif',
+        'heading': 'Helvetica',
+      },
+      fontWeight: {
+        'normal': '400',
+        'bold': '700',
+      },
+      fontSize: {
+        'sm': '14px',
+        'default': '16px',
+        'lg': '18px',
+        'xl': '20px',
+        'heading-xs': '24px',
+        'heading-sm': '30px',
+        'heading': '36px',
+        'heading-lg': '48px',
+        'heading-xl': '64px',
+      },
+      lineHeight: {
+        'none': '1',
+        'tight': '1.25',
+        'normal': '1.5',
+        'loose': '2',
+      },
+      textStyles: theme => ({
+        heading: {
+          output: false,
+          fontFamily: theme('fontFamily.heading'),
+          fontWeight: theme('fontWeight.bold'),
+          lineHeight: theme('lineHeight.tight'),
+        },
+        link: {
+          output: false,
+          fontWeight: theme('fontWeight.bold'),
+          color: theme('colors.link'),
+          '&:hover': {
+            opacity: '0.5',
+            textDecoration: 'underline',
+          },
+        },
+        richText: {
+          fontFamily: theme('fontFamily.default'),
+          fontWeight: theme('fontWeight.normal'),
+          fontSize: theme('fontSize.default'),
+          lineHeight: theme('lineHeight.loose'),
+          '> * + *': {
+            marginTop: '1em',
+          },
+          'h1': {
+            extends: 'heading',
+            fontSize: theme('fontSize.heading-xl'),
+          },
+          'h2': {
+            extends: 'heading',
+            fontSize: theme('fontSize.heading-lg'),
+          },
+          'h3': {
+            extends: 'heading',
+            fontSize: theme('fontSize.heading'),
+          },
+          'h4': {
+            extends: 'heading',
+            fontSize: theme('fontSize.heading-sm'),
+          },
+          'h5': {
+            extends: 'heading',
+            fontSize: theme('fontSize.heading-xs'),
+          },
+          'h6': {
+            extends: 'heading',
+            fontSize: theme('fontSize.xl'),
+          },
+          'ul': {
+            listStyleType: 'disc',
+          },
+          'ol': {
+            listStyleType: 'decimal',
+          },
+          'a': {
+            extends: 'link',
+          },
+          'b, strong': {
+            fontWeight: theme('fontWeight.bold'),
+          },
+          'i, em': {
+            fontStyle: 'italic',
+          },
+        },
+      }),
+    },
+  }, {
+    ellipsis: false,
+    hyphens: false,
+    textUnset: false,
+  }).then(css => {
+    expect(css).toMatchCss(`
+      .c-rich-text {
+        font-family: sans-serif;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 2;
+      }
+      .c-rich-text > * + * {
+        margin-top: 1em;
+      }
+      .c-rich-text h1 {
+        font-family: Helvetica;
+        font-weight: 700;
+        line-height: 1.25;
+        font-size: 64px;
+      }
+      .c-rich-text h2 {
+        font-family: Helvetica;
+        font-weight: 700;
+        line-height: 1.25;
+        font-size: 48px;
+      }
+      .c-rich-text h3 {
+        font-family: Helvetica;
+        font-weight: 700;
+        line-height: 1.25;
+        font-size: 36px;
+      }
+      .c-rich-text h4 {
+        font-family: Helvetica;
+        font-weight: 700;
+        line-height: 1.25;
+        font-size: 30px;
+      }
+      .c-rich-text h5 {
+        font-family: Helvetica;
+        font-weight: 700;
+        line-height: 1.25;
+        font-size: 24px;
+      }
+      .c-rich-text h6 {
+        font-family: Helvetica;
+        font-weight: 700;
+        line-height: 1.25;
+        font-size: 20px;
+      }
+      .c-rich-text ul {
+        list-style-type: disc;
+      }
+      .c-rich-text ol {
+        list-style-type: decimal;
+      }
+      .c-rich-text a {
+        font-weight: 700;
+        color: #2083c0;
+      }
+      .c-rich-text a:hover {
+        opacity: 0.5;
+        text-decoration: underline;
+      }
+      .c-rich-text b, .c-rich-text strong {
+        font-weight: 700;
+      }
+      .c-rich-text i, .c-rich-text em {
+        font-style: italic;
+      }
+    `);
+  });
+});
+
 test('variants can be customized', () => {
@@ -209,24 +850,24 @@ return generatePluginCss({
       .ellipsis {
-        text-overflow: ellipsis
+        text-overflow: ellipsis;
       }
       .hover\\:ellipsis:hover {
-        text-overflow: ellipsis
+        text-overflow: ellipsis;
       }
       .hyphens-none {
-        hyphens: none
+        hyphens: none;
       }
       .hyphens-manual {
-        hyphens: manual
+        hyphens: manual;
       }
       .hyphens-auto {
-        hyphens: auto
+        hyphens: auto;
       }
       .active\\:hyphens-none:active {
-        hyphens: none
+        hyphens: none;
       }
       .active\\:hyphens-manual:active {
-        hyphens: manual
+        hyphens: manual;
       }
       .active\\:hyphens-auto:active {
-        hyphens: auto
+        hyphens: auto;
       }
@@ -233,0 +874,0 @@ `);

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38940

increased by107.7%

Lines of code

1001

increased by212.81%

Number of lines in readme file

284

increased by181.19%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes