Merge pull request #14 from mapgrid/feat/text-rendering-next

Add text-rendering utilities

Author: benface

index.js

@@ -138,6 +138,17 @@ module.exports = plugin.withOptions(function(options = {}) {
       })
     );
 
+    const textRenderingUtilities = _.fromPairs(
+      _.map(theme('textRendering'), (value, modifier) => {
+        return [
+          `.${e(`text-${modifier}`)}`,
+          {
+            textRendering: value,
+          },
+        ];
+      })
+    );
+
     const textStylesTheme = theme('textStyles');
 
     const resolveTextStyle = function(styles) {
@@ -182,6 +193,7 @@ module.exports = plugin.withOptions(function(options = {}) {
     addUtilities(fontVariantCapsUtilities, variants('fontVariantCaps'));
     addUtilities(fontVariantNumericUtilities, variants('fontVariantNumeric'));
     addUtilities(fontVariantLigaturesUtilities, variants('fontVariantLigatures'));
+    addUtilities(textRenderingUtilities, variants('textRendering'));
     addComponents(textStyles);
   };
 }, function() {
@@ -220,6 +232,12 @@ module.exports = plugin.withOptions(function(options = {}) {
         'contextual': 'contextual',
         'no-contextual': 'no-contextual',
       },
+      textRendering: {
+        'rendering-auto': 'auto',
+        'optimize-legibility': 'optimizeLegibility',
+        'optimize-speed': 'optimizeSpeed',
+        'geometric-precision': 'geometricPrecision'
+      },
       textStyles: {},
     },
     variants: {
@@ -232,6 +250,7 @@ module.exports = plugin.withOptions(function(options = {}) {
       fontVariantCaps: ['responsive'],
       fontVariantNumeric: ['responsive'],
       fontVariantLigatures: ['responsive'],
+      textRendering: ['responsive'],
     },
   };
 });

test.js

@@ -161,6 +161,18 @@ test('the plugin generates some utilities and responsive variants by default', (
       .ligatures-no-contextual {
         font-variant-ligatures: no-contextual;
       }
+      .text-rendering-auto {
+        text-rendering: auto;
+      }
+      .text-optimize-legibility {
+        text-rendering: optimizeLegibility;
+      }
+      .text-optimize-speed {
+        text-rendering: optimizeSpeed;
+      }
+      .text-geometric-precision {
+        text-rendering: geometricPrecision;
+      }
       @media (min-width: 640px) {
         .sm\\:ellipsis {
           text-overflow: ellipsis;
@@ -288,6 +300,18 @@ test('the plugin generates some utilities and responsive variants by default', (
         .sm\\:ligatures-no-contextual {
           font-variant-ligatures: no-contextual;
         }
+        .sm\\:text-rendering-auto {
+          text-rendering: auto;
+        }
+        .sm\\:text-optimize-legibility {
+          text-rendering: optimizeLegibility;
+        }
+        .sm\\:text-optimize-speed {
+          text-rendering: optimizeSpeed;
+        }
+        .sm\\:text-geometric-precision {
+          text-rendering: geometricPrecision;
+        }
       }
     `);
   });
@@ -299,6 +323,7 @@ test('the font variant utilities can be disabled', () => {
       fontVariantCaps: {},
       fontVariantNumeric: {},
       fontVariantLigatures: {},
+      textRendering: {},
     },
     variants: {
       ellipsis: [],
@@ -369,6 +394,7 @@ test('the ellipsis, hyphens, and text unset utilities can be disabled', () => {
       fontVariantCaps: {},
       fontVariantNumeric: {},
       fontVariantLigatures: {},
+      textRendering: {},
     },
   }, {
     ellipsis: false,
@@ -394,6 +420,7 @@ test('the text indent and text shadow utilities can be customized', () => {
       fontVariantCaps: {},
       fontVariantNumeric: {},
       fontVariantLigatures: {},
+      textRendering: {},
     },
     variants: {
       textIndent: [],
@@ -441,6 +468,7 @@ test('the font variant utilities can be extended', () => {
       fontVariantCaps: [],
       fontVariantNumeric: [],
       fontVariantLigatures: [],
+      textRendering: [],
     },
   }, {
     ellipsis: false,
@@ -533,6 +561,18 @@ test('the font variant utilities can be extended', () => {
       .ligatures-revert {
         font-variant-ligatures: revert;
       }
+      .text-rendering-auto {
+        text-rendering: auto;
+      }
+      .text-optimize-legibility {
+        text-rendering: optimizeLegibility;
+      }
+      .text-optimize-speed {
+        text-rendering: optimizeSpeed;
+      }
+      .text-geometric-precision {
+        text-rendering: geometricPrecision;
+      }
     `);
   });
 });
@@ -567,6 +607,7 @@ test('text style components can be generated', () => {
       fontVariantCaps: {},
       fontVariantNumeric: {},
       fontVariantLigatures: {},
+      textRendering: {},
     },
   }, {
     ellipsis: false,
@@ -608,6 +649,7 @@ test('the component prefix can be customized', () => {
       fontVariantCaps: {},
       fontVariantNumeric: {},
       fontVariantLigatures: {},
+      textRendering: {},
     },
   }, {
     ellipsis: false,
@@ -663,6 +705,7 @@ test('text styles can extend other text styles', () => {
       fontVariantCaps: {},
       fontVariantNumeric: {},
       fontVariantLigatures: {},
+      textRendering: {},
     },
   }, {
     ellipsis: false,
@@ -742,6 +785,7 @@ test('text styles can extend more than one other text style', () => {
       fontVariantCaps: {},
       fontVariantNumeric: {},
       fontVariantLigatures: {},
+      textRendering: {},
     },
   }, {
     ellipsis: false,
@@ -838,6 +882,7 @@ test('text style components can style their children', () => {
       fontVariantCaps: {},
       fontVariantNumeric: {},
       fontVariantLigatures: {},
+      textRendering: {},
     },
   }, {
     ellipsis: false,
@@ -937,6 +982,7 @@ test('text styles can be responsive', () => {
       fontVariantCaps: {},
       fontVariantNumeric: {},
       fontVariantLigatures: {},
+      textRendering: {},
     },
   }, {
     ellipsis: false,
@@ -1016,6 +1062,7 @@ test('text styles can be set to not be output', () => {
       fontVariantCaps: {},
       fontVariantNumeric: {},
       fontVariantLigatures: {},
+      textRendering: {},
     },
   }, {
     ellipsis: false,
@@ -1132,6 +1179,7 @@ test('all these options can be used to generate a full-featured rich text compon
       fontVariantCaps: {},
       fontVariantNumeric: {},
       fontVariantLigatures: {},
+      textRendering: {},
     },
   }, {
     ellipsis: false,
@@ -1219,6 +1267,7 @@ test('variants can be customized', () => {
       fontVariantCaps: ['focus', 'responsive'],
       fontVariantNumeric: ['group-hover'],
       fontVariantLigatures: [],
+      textRendering: [],
     },
   }).then(css => {
     expect(css).toMatchCss(`
@@ -1417,6 +1466,18 @@ test('variants can be customized', () => {
       .ligatures-no-contextual {
         font-variant-ligatures: no-contextual;
       }
+      .text-rendering-auto {
+        text-rendering: auto;
+      }
+      .text-optimize-legibility {
+        text-rendering: optimizeLegibility;
+      }
+      .text-optimize-speed {
+        text-rendering: optimizeSpeed;
+      }
+      .text-geometric-precision {
+        text-rendering: geometricPrecision;
+      }
       @media (min-width: 640px) {
         .sm\\:caps-normal {
           font-variant-caps: normal;