Merge pull request #15 from mapgrid/feat/kerning-next

Add kerning utility

Author: benface

index.js

@@ -4,6 +4,7 @@ const _ = require('lodash');
 const defaultOptions = {
   ellipsis: true,
   hyphens: true,
+  kerning: true,
   textUnset: true,
   componentPrefix: 'c-',
 };
@@ -62,6 +63,18 @@ module.exports = plugin.withOptions(function(options = {}) {
       },
     } : {};
 
+    const kerningUtilities = options.kerning ? {
+      '.kerning': {
+        fontKerning: 'normal',
+      },
+      '.kerning-none': {
+        fontKerning: 'none',
+      },
+      '.kerning-auto': {
+        fontKerning: 'auto',
+      },
+    } : {};
+
     const textUnsetUtilities = options.textUnset ? {
       '.font-family-unset': {
         fontFamily: 'inherit',
@@ -164,6 +177,7 @@ module.exports = plugin.withOptions(function(options = {}) {
     addUtilities(textShadowUtilities, variants('textShadow'));
     addUtilities(ellipsisUtilities, variants('ellipsis'));
     addUtilities(hyphensUtilities, variants('hyphens'));
+    addUtilities(kerningUtilities, variants('kerning'));
     addUtilities(textUnsetUtilities, variants('textUnset'));
     addUtilities(fontVariantCapsUtilities, variants('fontVariantCaps'));
     addUtilities(fontVariantNumericUtilities, variants('fontVariantNumeric'));
@@ -213,6 +227,7 @@ module.exports = plugin.withOptions(function(options = {}) {
       textShadow: ['responsive'],
       ellipsis: ['responsive'],
       hyphens: ['responsive'],
+      kerning: ['responsive'],
       textUnset: ['responsive'],
       fontVariantCaps: ['responsive'],
       fontVariantNumeric: ['responsive'],

test.js

@@ -50,6 +50,15 @@ test('the plugin generates some utilities and responsive variants by default', (
       .hyphens-auto {
         hyphens: auto;
       }
+      .kerning {
+        font-kerning: normal;
+      }
+      .kerning-none {
+        font-kerning: none;
+      }
+      .kerning-auto {
+        font-kerning: auto;
+      }
       .font-family-unset {
         font-family: inherit;
       }
@@ -168,6 +177,15 @@ test('the plugin generates some utilities and responsive variants by default', (
         .sm\\:hyphens-auto {
           hyphens: auto;
         }
+        .sm\\:kerning {
+          font-kerning: normal;
+        }
+        .sm\\:kerning-none {
+          font-kerning: none;
+        }
+        .sm\\:kerning-auto {
+          font-kerning: auto;
+        }
         .sm\\:font-family-unset {
           font-family: inherit;
         }
@@ -285,6 +303,7 @@ test('the font variant utilities can be disabled', () => {
     variants: {
       ellipsis: [],
       hyphens: [],
+      kerning: [],
       textUnset: [],
     },
   }).then(css => {
@@ -304,6 +323,15 @@ test('the font variant utilities can be disabled', () => {
       .hyphens-auto {
         hyphens: auto;
       }
+      .kerning {
+        font-kerning: normal;
+      }
+      .kerning-none {
+        font-kerning: none;
+      }
+      .kerning-auto {
+        font-kerning: auto;
+      }
       .font-family-unset {
         font-family: inherit;
       }
@@ -345,6 +373,7 @@ test('the ellipsis, hyphens, and text unset utilities can be disabled', () => {
   }, {
     ellipsis: false,
     hyphens: false,
+    kerning: false,
     textUnset: false,
   }).then(css => {
     expect(css).toMatchCss(``);
@@ -373,6 +402,7 @@ test('the text indent and text shadow utilities can be customized', () => {
   }, {
     ellipsis: false,
     hyphens: false,
+    kerning: false,
     textUnset: false,
   }).then(css => {
     expect(css).toMatchCss(`
@@ -415,6 +445,7 @@ test('the font variant utilities can be extended', () => {
   }, {
     ellipsis: false,
     hyphens: false,
+    kerning: false,
     textUnset: false,
   }).then(css => {
     expect(css).toMatchCss(`
@@ -540,6 +571,7 @@ test('text style components can be generated', () => {
   }, {
     ellipsis: false,
     hyphens: false,
+    kerning: false,
     textUnset: false,
   }).then(css => {
     expect(css).toMatchCss(`
@@ -580,6 +612,7 @@ test('the component prefix can be customized', () => {
   }, {
     ellipsis: false,
     hyphens: false,
+    kerning: false,
     textUnset: false,
     componentPrefix: '',
   }).then(css => {
@@ -634,6 +667,7 @@ test('text styles can extend other text styles', () => {
   }, {
     ellipsis: false,
     hyphens: false,
+    kerning: false,
     textUnset: false,
   }).then(css => {
     expect(css).toMatchCss(`
@@ -712,6 +746,7 @@ test('text styles can extend more than one other text style', () => {
   }, {
     ellipsis: false,
     hyphens: false,
+    kerning: false,
     textUnset: false,
   }).then(css => {
     expect(css).toMatchCss(`
@@ -807,6 +842,7 @@ test('text style components can style their children', () => {
   }, {
     ellipsis: false,
     hyphens: false,
+    kerning: false,
     textUnset: false,
   }).then(css => {
     expect(css).toMatchCss(`
@@ -905,6 +941,7 @@ test('text styles can be responsive', () => {
   }, {
     ellipsis: false,
     hyphens: false,
+    kerning: false,
     textUnset: false,
   }).then(css => {
     expect(css).toMatchCss(`
@@ -983,6 +1020,7 @@ test('text styles can be set to not be output', () => {
   }, {
     ellipsis: false,
     hyphens: false,
+    kerning: false,
     textUnset: false,
   }).then(css => {
     expect(css).toMatchCss(`
@@ -1098,6 +1136,7 @@ test('all these options can be used to generate a full-featured rich text compon
   }, {
     ellipsis: false,
     hyphens: false,
+    kerning: false,
     textUnset: false,
   }).then(css => {
     expect(css).toMatchCss(`
@@ -1175,6 +1214,7 @@ test('variants can be customized', () => {
     variants: {
       ellipsis: ['hover'],
       hyphens: ['active'],
+      kerning: ['focus'],
       textUnset: [],
       fontVariantCaps: ['focus', 'responsive'],
       fontVariantNumeric: ['group-hover'],
@@ -1212,6 +1252,24 @@ test('variants can be customized', () => {
       .active\\:hyphens-auto:active {
         hyphens: auto;
       }
+      .kerning {
+        font-kerning: normal;
+      }
+      .kerning-none {
+        font-kerning: none;
+      }
+      .kerning-auto {
+        font-kerning: auto;
+      }
+      .focus\\:kerning:focus {
+        font-kerning: normal;
+      }
+      .focus\\:kerning-none:focus {
+        font-kerning: none;
+      }
+      .focus\\:kerning-auto:focus {
+        font-kerning: auto;
+      }
       .font-family-unset {
         font-family: inherit;
       }