Port text sizes and text style modules to plugins

src/defaultPlugins.js

@@ -1,3 +1,5 @@
+import textSizes from './plugins/textSizes'
+import textStyle from './plugins/textStyle'
 import tracking from './plugins/tracking'
 import userSelect from './plugins/userSelect'
 import verticalAlign from './plugins/verticalAlign'
@@ -7,6 +9,8 @@ import width from './plugins/width'
 import zIndex from './plugins/zIndex'
 
 export default [
+  textSizes(),
+  textStyle(),
   tracking(),
   userSelect(),
   verticalAlign(),

src/generators/textSizes.js

@@ -1,10 +0,0 @@
-import _ from 'lodash'
-import defineClass from '../util/defineClass'
-
-export default function({ textSizes }) {
-  return _.map(textSizes, (size, modifier) => {
-    return defineClass(`text-${modifier}`, {
-      'font-size': `${size}`,
-    })
-  })
-}

src/generators/textStyle.js

@@ -1,26 +0,0 @@
-import defineClasses from '../util/defineClasses'
-
-export default function() {
-  return defineClasses({
-    italic: { 'font-style': 'italic' },
-    roman: { 'font-style': 'normal' },
-
-    uppercase: { 'text-transform': 'uppercase' },
-    lowercase: { 'text-transform': 'lowercase' },
-    capitalize: { 'text-transform': 'capitalize' },
-    'normal-case': { 'text-transform': 'none' },
-
-    underline: { 'text-decoration': 'underline' },
-    'line-through': { 'text-decoration': 'line-through' },
-    'no-underline': { 'text-decoration': 'none' },
-
-    antialiased: {
-      '-webkit-font-smoothing': 'antialiased',
-      '-moz-osx-font-smoothing': 'grayscale',
-    },
-    'subpixel-antialiased': {
-      '-webkit-font-smoothing': 'auto',
-      '-moz-osx-font-smoothing': 'auto',
-    },
-  })
-}

src/plugins/textSizes.js

@@ -0,0 +1,13 @@
+import _ from 'lodash'
+
+export default function () {
+  return function ({ addUtilities, config, e }) {
+    const utilities = _.fromPairs(_.map(config('textSizes'), (value, modifier) => {
+      return [`.${e(`text-${modifier}`)}`, {
+        'font-size': value,
+      }]
+    }))
+
+    addUtilities(utilities, config('modules.textSizes'))
+  }
+}

src/plugins/textStyle.js

@@ -0,0 +1,26 @@
+export default function () {
+  return function ({ addUtilities, config }) {
+    addUtilities({
+      '.italic': { 'font-style': 'italic' },
+      '.roman': { 'font-style': 'normal' },
+
+      '.uppercase': { 'text-transform': 'uppercase' },
+      '.lowercase': { 'text-transform': 'lowercase' },
+      '.capitalize': { 'text-transform': 'capitalize' },
+      '.normal-case': { 'text-transform': 'none' },
+
+      '.underline': { 'text-decoration': 'underline' },
+      '.line-through': { 'text-decoration': 'line-through' },
+      '.no-underline': { 'text-decoration': 'none' },
+
+      '.antialiased': {
+        '-webkit-font-smoothing': 'antialiased',
+        '-moz-osx-font-smoothing': 'grayscale',
+      },
+      '.subpixel-antialiased': {
+        '-webkit-font-smoothing': 'auto',
+        '-moz-osx-font-smoothing': 'auto',
+      },
+    }, config('modules.textStyle'))
+  }
+}

src/utilityModules.js

@@ -39,8 +39,6 @@ import svgStroke from './generators/svgStroke'
 import tableLayout from './generators/tableLayout'
 import textAlign from './generators/textAlign'
 import textColors from './generators/textColors'
-import textSizes from './generators/textSizes'
-import textStyle from './generators/textStyle'
 
 export default [
   { name: 'lists', generator: lists },
@@ -84,6 +82,4 @@ export default [
   { name: 'tableLayout', generator: tableLayout },
   { name: 'textAlign', generator: textAlign },
   { name: 'textColors', generator: textColors },
-  { name: 'textSizes', generator: textSizes },
-  { name: 'textStyle', generator: textStyle },
 ]