Add text decoration style and text decoration color utilities (fix #18)

Author: benface

.release-it.json

@@ -1,6 +1,6 @@
 {
   "git": {
-    "tagName": "v%s",
+    "tagName": "v${version}",
     "requireCleanWorkingDir": false
   }
 }

CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project mostly adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Added
+- Added `line-[style]` and `line-[color]` utilities to go with Tailwind’s text decoration utilities (`underline` and `line-through`); they can be customized with the `textDecorationStyle` and `textDecorationColor` theme keys
+
 ## [3.0.1] - 2020-02-13
 
 ### Fixed

README.md

@@ -24,6 +24,18 @@ module.exports = {
       'default': '0 2px 5px rgba(0, 0, 0, 0.5)',
       'lg': '0 2px 10px rgba(0, 0, 0, 0.5)',
     },
+    textDecorationStyle: { // defaults to these values
+      'solid': 'solid',
+      'double': 'double',
+      'dotted': 'dotted',
+      'dashed': 'dashed',
+      'wavy': 'wavy',
+    },
+    textDecorationColor: { // defaults to theme => theme('colors')
+      'red': '#f00',
+      'green': '#0f0',
+      'blue': '#00f',
+    },
     fontVariantCaps: { // defaults to these values
       'normal': 'normal',
       'small': 'small-caps',
@@ -151,6 +163,8 @@ module.exports = {
   variants: { // all the following default to ['responsive']
     textIndent: ['responsive'],
     textShadow: ['responsive'],
+    textDecorationStyle: ['responsive'],
+    textDecorationColor: ['responsive'],
     ellipsis: ['responsive'],
     hyphens: ['responsive'],
     kerning: ['responsive'],
@@ -187,6 +201,16 @@ This plugin generates the following utilities:
   text-shadow: [value];
 }
 
+/* configurable with the "textDecorationStyle" theme object */
+.line-[key] {
+  text-decoration-style: [value];
+}
+
+/* configurable with the "textDecorationColor" theme object */
+.line-[key] {
+  text-decoration-color: [value];
+}
+
 /* generated when the "ellipsis" option is set to true */
 .ellipsis {
   text-overflow: ellipsis;

index.js

@@ -13,6 +13,21 @@ const prefixNegativeModifiers = function(base, modifier) {
   return _.startsWith(modifier, '-') ? `-${base}-${modifier.slice(1)}` : `${base}-${modifier}`;
 };
 
+const flattenColorPalette = function(colors) {
+  return _(colors)
+    .flatMap((color, name) => {
+      if (!_.isPlainObject(color)) {
+        return [[name, color]];
+      }
+      return _.map(color, (value, key) => {
+        const suffix = key === 'default' ? '' : `-${key}`;
+        return [`${name}${suffix}`, value];
+      });
+    })
+    .fromPairs()
+    .value();
+};
+
 const camelCaseToKebabCase = function(string) {
   return string
     .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
@@ -46,6 +61,28 @@ module.exports = plugin.withOptions(function(options = {}) {
       })
     );
 
+    const textDecorationStyleUtilities = _.fromPairs(
+      _.map(theme('textDecorationStyle'), (value, modifier) => {
+        return [
+          `.${e(`line-${modifier}`)}`,
+          {
+            textDecorationStyle: value,
+          },
+        ];
+      })
+    );
+
+    const textDecorationColorUtilities = _.fromPairs(
+      _.map(flattenColorPalette(theme('textDecorationColor')), (value, modifier) => {
+        return [
+          `.${e(`line-${modifier}`)}`,
+          {
+            textDecorationColor: value,
+          },
+        ];
+      })
+    );
+
     const ellipsisUtilities = options.ellipsis ? {
       '.ellipsis': {
         textOverflow: 'ellipsis',
@@ -190,6 +227,8 @@ module.exports = plugin.withOptions(function(options = {}) {
 
     addUtilities(textIndentUtilities, variants('textIndent'));
     addUtilities(textShadowUtilities, variants('textShadow'));
+    addUtilities(textDecorationStyleUtilities, variants('textDecorationStyle'));
+    addUtilities(textDecorationColorUtilities, variants('textDecorationColor'));
     addUtilities(ellipsisUtilities, variants('ellipsis'));
     addUtilities(hyphensUtilities, variants('hyphens'));
     addUtilities(kerningUtilities, variants('kerning'));
@@ -205,6 +244,14 @@ module.exports = plugin.withOptions(function(options = {}) {
     theme: {
       textIndent: {},
       textShadow: {},
+      textDecorationStyle: {
+        'solid': 'solid',
+        'double': 'double',
+        'dotted': 'dotted',
+        'dashed': 'dashed',
+        'wavy': 'wavy',
+      },
+      textDecorationColor: theme => theme('colors'),
       fontVariantCaps: {
         'normal': 'normal',
         'small': 'small-caps',
@@ -247,6 +294,8 @@ module.exports = plugin.withOptions(function(options = {}) {
     variants: {
       textIndent: ['responsive'],
       textShadow: ['responsive'],
+      textDecorationStyle: ['responsive'],
+      textDecorationColor: ['responsive'],
       ellipsis: ['responsive'],
       hyphens: ['responsive'],
       kerning: ['responsive'],