diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 0c41ae586..4a617297d 100644 --- a/src/defaultPlugins.js +++ b/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(), ] diff --git a/src/generators/whitespace.js b/src/generators/whitespace.js deleted file mode 100644 index f869c8788..000000000 --- a/src/generators/whitespace.js +++ /dev/null @@ -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', - }, - }) -} diff --git a/src/generators/width.js b/src/generators/width.js deleted file mode 100644 index 111fa9c76..000000000 --- a/src/generators/width.js +++ /dev/null @@ -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)]) -} diff --git a/src/plugins/whitespace.js b/src/plugins/whitespace.js new file mode 100644 index 000000000..42b658836 --- /dev/null +++ b/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')) + } +} diff --git a/src/plugins/width.js b/src/plugins/width.js new file mode 100644 index 000000000..517df2340 --- /dev/null +++ b/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')) + } +} diff --git a/src/processTailwindFeatures.js b/src/processTailwindFeatures.js index cbc69ad97..e704938cf 100644 --- a/src/processTailwindFeatures.js +++ b/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) diff --git a/src/utilityModules.js b/src/utilityModules.js index 67134eb5f..4f0723f13 100644 --- a/src/utilityModules.js +++ b/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 }, ]