Port width and whitespace modules to plugins

src/defaultPlugins.js

@@ -1,103 +1,9 @@
-// import lists from './generators/lists'
-// import appearance from './generators/appearance'
-// import backgroundAttachment from './generators/backgroundAttachment'
-// import backgroundColors from './generators/backgroundColors'
-// import backgroundPosition from './generators/backgroundPosition'
-// import backgroundRepeat from './generators/backgroundRepeat'
-// import backgroundSize from './generators/backgroundSize'
-// import borderCollapse from './generators/borderCollapse'
-// import borderColors from './generators/borderColors'
-// import borderRadius from './generators/borderRadius'
-// import borderStyle from './generators/borderStyle'
-// import borderWidths from './generators/borderWidths'
-// import cursor from './generators/cursor'
-// import display from './generators/display'
-// import flexbox from './generators/flexbox'
-// import float from './generators/float'
-// import fonts from './generators/fonts'
-// import fontWeights from './generators/fontWeights'
-// import height from './generators/height'
-// import leading from './generators/leading'
-// import margin from './generators/margin'
-// import maxHeight from './generators/maxHeight'
-// import maxWidth from './generators/maxWidth'
-// import minHeight from './generators/minHeight'
-// import minWidth from './generators/minWidth'
-// import negativeMargin from './generators/negativeMargin'
-// import objectFit from './generators/objectFit'
-// import objectPosition from './generators/objectPosition'
-// import opacity from './generators/opacity'
-// import outline from './generators/outline'
-// import overflow from './generators/overflow'
-// import padding from './generators/padding'
-// import pointerEvents from './generators/pointerEvents'
-// import position from './generators/position'
-// import resize from './generators/resize'
-// import shadows from './generators/shadows'
-// import svgFill from './generators/svgFill'
-// 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'
-// import tracking from './generators/tracking'
-// import userSelect from './generators/userSelect'
-// import verticalAlign from './generators/verticalAlign'
-// import visibility from './generators/visibility'
-// import whitespace from './generators/whitespace'
-// import width from './generators/width'
+import whitespace from './plugins/whitespace'
+import width from './plugins/width'
 import zIndex from './plugins/zIndex'
 
 export default [
-  // { name: 'lists', generator: lists },
-  // { name: 'appearance', generator: appearance },
-  // { name: 'backgroundAttachment', generator: backgroundAttachment },
-  // { name: 'backgroundColors', generator: backgroundColors },
-  // { name: 'backgroundPosition', generator: backgroundPosition },
-  // { name: 'backgroundRepeat', generator: backgroundRepeat },
-  // { name: 'backgroundSize', generator: backgroundSize },
-  // { name: 'borderCollapse', generator: borderCollapse },
-  // { name: 'borderColors', generator: borderColors },
-  // { name: 'borderRadius', generator: borderRadius },
-  // { name: 'borderStyle', generator: borderStyle },
-  // { name: 'borderWidths', generator: borderWidths },
-  // { name: 'cursor', generator: cursor },
-  // { name: 'display', generator: display },
-  // { name: 'flexbox', generator: flexbox },
-  // { name: 'float', generator: float },
-  // { name: 'fonts', generator: fonts },
-  // { name: 'fontWeights', generator: fontWeights },
-  // { name: 'height', generator: height },
-  // { name: 'leading', generator: leading },
-  // { name: 'margin', generator: margin },
-  // { name: 'maxHeight', generator: maxHeight },
-  // { name: 'maxWidth', generator: maxWidth },
-  // { name: 'minHeight', generator: minHeight },
-  // { name: 'minWidth', generator: minWidth },
-  // { name: 'negativeMargin', generator: negativeMargin },
-  // { name: 'objectFit', generator: objectFit },
-  // { name: 'objectPosition', generator: objectPosition },
-  // { name: 'opacity', generator: opacity },
-  // { name: 'outline', generator: outline },
-  // { name: 'overflow', generator: overflow },
-  // { name: 'padding', generator: padding },
-  // { name: 'pointerEvents', generator: pointerEvents },
-  // { name: 'position', generator: position },
-  // { name: 'resize', generator: resize },
-  // { name: 'shadows', generator: shadows },
-  // { name: 'svgFill', generator: svgFill },
-  // { name: 'svgStroke', generator: svgStroke },
-  // { name: 'tableLayout', generator: tableLayout },
-  // { name: 'textAlign', generator: textAlign },
-  // { name: 'textColors', generator: textColors },
-  // { name: 'textSizes', generator: textSizes },
-  // { name: 'textStyle', generator: textStyle },
-  // { name: 'tracking', generator: tracking },
-  // { name: 'userSelect', generator: userSelect },
-  // { name: 'verticalAlign', generator: verticalAlign },
-  // { name: 'visibility', generator: visibility },
-  // { name: 'whitespace', generator: whitespace },
-  // { name: 'width', generator: width },
-  zIndex,
+  whitespace(),
+  width(),
+  zIndex(),
 ]

src/generators/whitespace.js

@@ -1,20 +0,0 @@
-import defineClasses from '../util/defineClasses'
-
-export default function() {
-  return defineClasses({
-    'whitespace-normal': { 'white-space': 'normal' },
-    'whitespace-no-wrap': { 'white-space': 'nowrap' },
-    'whitespace-pre': { 'white-space': 'pre' },
-    'whitespace-pre-line': { 'white-space': 'pre-line' },
-    'whitespace-pre-wrap': { 'white-space': 'pre-wrap' },
-
-    'break-words': { 'word-wrap': 'break-word' },
-    'break-normal': { 'word-wrap': 'normal' },
-
-    truncate: {
-      overflow: 'hidden',
-      'text-overflow': 'ellipsis',
-      'white-space': 'nowrap',
-    },
-  })
-}

src/generators/width.js

@@ -1,14 +0,0 @@
-import _ from 'lodash'
-import defineClass from '../util/defineClass'
-
-function defineWidths(widths) {
-  return _.map(widths, (size, modifer) => {
-    return defineClass(`w-${modifer}`, {
-      width: `${size}`,
-    })
-  })
-}
-
-export default function(config) {
-  return _.flatten([defineWidths(config.width)])
-}

src/plugins/whitespace.js

@@ -0,0 +1,20 @@
+export default function () {
+  return function ({ addUtilities, config }) {
+    addUtilities({
+      '.whitespace-normal': { 'white-space': 'normal' },
+      '.whitespace-no-wrap': { 'white-space': 'nowrap' },
+      '.whitespace-pre': { 'white-space': 'pre' },
+      '.whitespace-pre-line': { 'white-space': 'pre-line' },
+      '.whitespace-pre-wrap': { 'white-space': 'pre-wrap' },
+
+      '.break-words': { 'word-wrap': 'break-word' },
+      '.break-normal': { 'word-wrap': 'normal' },
+
+      '.truncate': {
+        overflow: 'hidden',
+        'text-overflow': 'ellipsis',
+        'white-space': 'nowrap',
+      },
+    }, config('modules.whitespace'))
+  }
+}

src/plugins/width.js

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

src/processTailwindFeatures.js

@@ -17,7 +17,7 @@ export default function(getConfig) {
   return function(css) {
     const config = getConfig()
     const processedPlugins = processPlugins([
-      ...defaultPlugins.map(plugin => plugin()),
+      ...defaultPlugins,
       ...config.plugins
     ], config)
     const utilities = generateUtilities(config, processedPlugins.utilities)

src/utilityModules.js

@@ -45,9 +45,6 @@ import tracking from './generators/tracking'
 import userSelect from './generators/userSelect'
 import verticalAlign from './generators/verticalAlign'
 import visibility from './generators/visibility'
-import whitespace from './generators/whitespace'
-import width from './generators/width'
-import zIndex from './generators/zIndex'
 
 export default [
   { name: 'lists', generator: lists },
@@ -97,7 +94,4 @@ export default [
   { name: 'userSelect', generator: userSelect },
   { name: 'verticalAlign', generator: verticalAlign },
   { name: 'visibility', generator: visibility },
-  { name: 'whitespace', generator: whitespace },
-  { name: 'width', generator: width },
-  // { name: 'zIndex', generator: zIndex },
 ]