diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 2ec9a8662..22ab5d864 100644 --- a/src/defaultPlugins.js +++ b/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(), diff --git a/src/generators/textSizes.js b/src/generators/textSizes.js deleted file mode 100644 index 447e0db7c..000000000 --- a/src/generators/textSizes.js +++ /dev/null @@ -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}`, - }) - }) -} diff --git a/src/generators/textStyle.js b/src/generators/textStyle.js deleted file mode 100644 index f411e84ab..000000000 --- a/src/generators/textStyle.js +++ /dev/null @@ -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', - }, - }) -} diff --git a/src/plugins/textSizes.js b/src/plugins/textSizes.js new file mode 100644 index 000000000..a09715070 --- /dev/null +++ b/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')) + } +} diff --git a/src/plugins/textStyle.js b/src/plugins/textStyle.js new file mode 100644 index 000000000..f83eb6703 --- /dev/null +++ b/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')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index e4622f20b..560e038bc 100644 --- a/src/utilityModules.js +++ b/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 }, ]