tailwindcss-typography - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0-beta.1

CHANGELOG.md

@@ -8,2 +8,11 @@ # Changelog
 
+## [2.0.0-beta.1] - 2019-04-04
+
+### Added
+- Tailwind 1.0.0 compatibility
+
+### Changed
+- The plugin doesn’t accept a config object anymore; instead it finds what it needs in the `theme` and `variants` keys of your config (see `README` for more info)
+- Responsive variants are now generated by default
+
 ## [1.1.0] - 2019-03-22
@@ -31,5 +40,6 @@
 
-[Unreleased]: https://github.com/benface/tailwindcss-typography/compare/v1.1.0...HEAD
+[Unreleased]: https://github.com/benface/tailwindcss-typography/compare/v2.0.0-beta.1...HEAD
+[2.0.0-beta.1]: https://github.com/benface/tailwindcss-typography/compare/v1.1.0...v2.0.0-beta.1
 [1.1.0]: https://github.com/benface/tailwindcss-typography/compare/v1.0.2...v1.1.0
 [1.0.2]: https://github.com/benface/tailwindcss-typography/compare/v1.0.1...v1.0.2
 [1.0.1]: https://github.com/benface/tailwindcss-typography/compare/v1.0.0...v1.0.1

index.js

 const _ = require('lodash');
 
-module.exports = ({
-  indents = {},
-  textShadows = {},
-  variants = [],
-} = {}) => ({ e, addUtilities }) => {
-  addUtilities(
-    {
-      '.ellipsis': { textOverflow: 'ellipsis' },
-      '.hyphens-none': { hyphens: 'none' },
-      '.hyphens-manual': { hyphens: 'manual' },
-      '.hyphens-auto': { hyphens: 'auto' },
-      ...Object.assign(
-        {},
-        ..._.map(indents, (value, name) => ({
-          [`.${e(`indent-${name}`)}`]: { textIndent: value },
-        })),
-        ..._.map(textShadows, (value, name) => ({
-          [`.${e(`text-shadow${name === 'default' ? '' : `-${name}`}`)}`]: { textShadow: value },
-        })),
-      ),
-    },
-    variants,
-  );
+module.exports = function() {
+  return ({ config, e, addUtilities }) => {
+    const defaultEllipsisVariants = ['responsive'];
+    const defaultHyphensVariants = ['responsive'];
+    const defaultTextIndentVariants = ['responsive'];
+    const defaultTextShadowVariants = ['responsive'];
+
+    const ellipsisUtilities = {
+      '.ellipsis': {
+        textOverflow: 'ellipsis',
+      },
+    };
+
+    const hyphensUtilities = {
+      '.hyphens-none': {
+        hyphens: 'none',
+      },
+      '.hyphens-manual': {
+        hyphens: 'manual',
+      },
+      '.hyphens-auto': {
+        hyphens: 'auto',
+      },
+    };
+
+    const textIndentUtilities = _.fromPairs(
+      _.map(config('theme.textIndent'), (value, modifier) => {
+        return [
+          `.${e(`indent-${modifier}`)}`,
+          {
+            textIndent: value,
+          },
+        ];
+      })
+    );
+
+    const textShadowUtilities = _.fromPairs(
+      _.map(config('theme.textShadow'), (value, modifier) => {
+        return [
+          `.${e(`text-shadow${modifier === 'default' ? '' : `-${modifier}`}`)}`,
+          {
+            textShadow: value,
+          },
+        ];
+      })
+    );
+
+    addUtilities(ellipsisUtilities, config('variants.ellipsis', defaultEllipsisVariants));
+    addUtilities(hyphensUtilities, config('variants.hyphens', defaultHyphensVariants));
+    addUtilities(textIndentUtilities, config('variants.textIndent', defaultTextIndentVariants));
+    addUtilities(textShadowUtilities, config('variants.textShadow', defaultTextShadowVariants));
+  };
 };

package.json

 {
   "name": "tailwindcss-typography",
-  "version": "1.1.0",
+  "version": "2.0.0-beta.1",
   "description": "Tailwind CSS plugin to generate typography utilities",
@@ -22,8 +22,8 @@ "author": "Benoît Rouleau <[e-mail]>",
     "github-release-from-changelog": "^1.3.2",
-    "jest": "^24.5.0",
+    "jest": "^24.7.1",
     "jest-matcher-css": "^1.0.3",
     "postcss": "^7.0.14",
-    "release-it": "^10.3.1",
-    "tailwindcss": "0.7.4"
+    "release-it": "^10.4.0",
+    "tailwindcss": "1.0.0-beta.4"
   }
 }

README.md

@@ -14,14 +14,20 @@ # Typography Plugin for Tailwind CSS
 {
+  theme: {
+    textIndent: {
+      '1': '0.25rem',
+      '2': '0.5rem',
+    },
+    textShadow: {
+      'default': '0 2px 5px rgba(0, 0, 0, 0.5)',
+      'lg': '0 2px 10px rgba(0, 0, 0, 0.5)',
+    },
+  },
+  variants: {
+    ellipsis: ['responsive'], // defaults to ['responsive']
+    hyphens: ['responsive'], // defaults to ['responsive']
+    textIndent: ['responsive'], // defaults to ['responsive']
+    textShadow: ['responsive', 'hover'], // defaults to ['responsive']
+  },
   plugins: [
-    require('tailwindcss-typography')({
-      indents: {
-        '1': '1px',
-        '2': '2px',
-      },
-      textShadows: {
-        'default': '0 2px 5px rgba(0, 0, 0, 0.5)',
-        'lg': '0 2px 10px rgba(0, 0, 0, 0.5)',
-      },
-      variants: ['responsive'],
-    }),
+    require('tailwindcss-typography')(),
   ],
@@ -50,9 +56,9 @@ }
 
-/* configurable with the "indents" option */
-.indent-[name] {
+/* configurable with the "textIndent" theme key */
+.indent-[key] {
   text-indent: [value];
 }
 
-/* configurable with the "textShadows" option */
-.text-shadow-[name] {
+/* configurable with the "textShadow" theme key */
+.text-shadow-[key] {
   text-shadow: [value];
@@ -62,2 +68,2 @@ }
 
-Note: The `textShadows` option accepts a `default` key which generates a simple `.text-shadow` class (instead of `.text-shadow-default`).
+Note: The `textShadow` theme key accepts a `default` key which generates a simple `.text-shadow` class (instead of `.text-shadow-default`).

test.js

@@ -5,17 +5,31 @@ const _ = require('lodash');
 const tailwindcss = require('tailwindcss');
-const defaultConfig = require('tailwindcss/defaultConfig')();
+const defaultConfig = require('tailwindcss/defaultConfig');
 const typographyPlugin = require('./index.js');
 
-const disabledModules = {};
-Object.keys(defaultConfig.modules).forEach(module => {
-  disabledModules[module] = false;
-});
-
-const generatePluginCss = (options = {}) => {
-  return postcss(tailwindcss({
-    modules: disabledModules,
-    plugins: [typographyPlugin(options)],
-  })).process('@tailwind utilities;', {
+const generatePluginCss = (config) => {
+  return postcss(
+    tailwindcss(
+      _.merge({
+        theme: {
+          screens: {
+            'sm': '640px',
+          },
+        },
+        corePlugins: (function() {
+          let disabledCorePlugins = {};
+          Object.keys(defaultConfig.variants).forEach(corePlugin => {
+            disabledCorePlugins[corePlugin] = false;
+          });
+          return disabledCorePlugins;
+        })(),
+        plugins: [
+          typographyPlugin(),
+        ],
+      }, config)
+    )
+  )
+  .process('@tailwind utilities;', {
     from: undefined,
-  }).then(result => {
+  })
+  .then(result => {
     return result.css;
@@ -29,3 +43,3 @@ });
 
-test('options are not required', () => {
+test('the plugin generates some responsive utilities by default', () => {
   return generatePluginCss().then(css => {
@@ -45,2 +59,16 @@ expect(css).toMatchCss(`
       }
+      @media (min-width: 640px) {
+        .sm\\:ellipsis {
+          text-overflow: ellipsis;
+        }
+        .sm\\:hyphens-none {
+          hyphens: none;
+        }
+        .sm\\:hyphens-manual {
+          hyphens: manual;
+        }
+        .sm\\:hyphens-auto {
+          hyphens: auto;
+        }
+      }
     `);
@@ -50,11 +78,19 @@ });
 
-test('all the options are working as they should', () => {
+test('text indent and text shadow utilities can be generated by adding keys to the theme', () => {
   return generatePluginCss({
-    indents: {
-      '1': '1px',
-      '2': '2px',
+    theme: {
+      textIndent: {
+        '1': '0.25rem',
+        '2': '0.5rem',
+      },
+      textShadow: {
+        'default': '0 2px 5px rgba(0, 0, 0, .5)',
+        'lg': '0 2px 10px rgba(0, 0, 0, .5)',
+      },
     },
-    textShadows: {
-      'default': '0 2px 5px rgba(0, 0, 0, .5)',
-      'lg': '0 2px 10px rgba(0, 0, 0, .5)',
+    variants: {
+      ellipsis: [],
+      hyphens: [],
+      textIndent: [],
+      textShadow: [],
     },
@@ -76,6 +112,6 @@ }).then(css => {
       .indent-1 {
-        text-indent: 1px;
+        text-indent: .25rem;
       }
       .indent-2 {
-        text-indent: 2px;
+        text-indent: .5rem;
       }
@@ -92,5 +128,8 @@ .text-shadow {
 
-test('variants are supported', () => {
+test('variants can be customized', () => {
   return generatePluginCss({
-    variants: ['hover', 'active'],
+    variants: {
+      ellipsis: ['hover'],
+      hyphens: ['active'],
+    },
   }).then(css => {
@@ -101,2 +140,5 @@ expect(css).toMatchCss(`
       }
+      .hover\\:ellipsis:hover {
+        text-overflow: ellipsis;
+      }
       .hyphens-none {
@@ -111,17 +153,2 @@ hyphens: none;
       }
-      .hover\\:ellipsis:hover {
-        text-overflow: ellipsis;
-      }
-      .hover\\:hyphens-none:hover {
-        hyphens: none;
-      }
-      .hover\\:hyphens-manual:hover {
-        hyphens: manual;
-      }
-      .hover\\:hyphens-auto:hover {
-        hyphens: auto;
-      }
-      .active\\:ellipsis:active {
-        text-overflow: ellipsis;
-      }
       .active\\:hyphens-none:active {
@@ -128,0 +155,0 @@ hyphens: none;

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14585

increased by16.7%

Lines of code

206

increased by33.77%

Number of lines in readme file

67

increased by9.84%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes