diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 6d0285e02..1869495d3 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import borderRadius from './plugins/borderRadius' import borderStyle from './plugins/borderStyle' import borderWidths from './plugins/borderWidths' import cursor from './plugins/cursor' @@ -41,6 +42,7 @@ import zIndex from './plugins/zIndex' export default function (config) { return [ + config.modules.borderRadius === false ? () => {} : borderRadius(), config.modules.borderStyle === false ? () => {} : borderStyle(), config.modules.borderWidths === false ? () => {} : borderWidths(), config.modules.cursor === false ? () => {} : cursor(), diff --git a/src/generators/borderRadius.js b/src/generators/borderRadius.js deleted file mode 100644 index ba40d09aa..000000000 --- a/src/generators/borderRadius.js +++ /dev/null @@ -1,57 +0,0 @@ -import _ from 'lodash' -import defineClasses from '../util/defineClasses' - -function defineBorderRadiusUtilities(borderRadiuses) { - const generators = [ - (radius, modifier) => - defineClasses({ - [`rounded${modifier}`]: { - 'border-radius': `${radius}`, - }, - }), - (radius, modifier) => - defineClasses({ - [`rounded-t${modifier}`]: { - 'border-top-left-radius': `${radius}`, - 'border-top-right-radius': `${radius}`, - }, - [`rounded-r${modifier}`]: { - 'border-top-right-radius': `${radius}`, - 'border-bottom-right-radius': `${radius}`, - }, - [`rounded-b${modifier}`]: { - 'border-bottom-right-radius': `${radius}`, - 'border-bottom-left-radius': `${radius}`, - }, - [`rounded-l${modifier}`]: { - 'border-top-left-radius': `${radius}`, - 'border-bottom-left-radius': `${radius}`, - }, - }), - (radius, modifier) => - defineClasses({ - [`rounded-tl${modifier}`]: { - 'border-top-left-radius': `${radius}`, - }, - [`rounded-tr${modifier}`]: { - 'border-top-right-radius': `${radius}`, - }, - [`rounded-br${modifier}`]: { - 'border-bottom-right-radius': `${radius}`, - }, - [`rounded-bl${modifier}`]: { - 'border-bottom-left-radius': `${radius}`, - }, - }), - ] - - return _.flatMap(generators, generator => { - return _.flatMap(borderRadiuses, (radius, modifier) => { - return generator(radius, modifier === 'default' ? '' : `-${modifier}`) - }) - }) -} - -module.exports = function({ borderRadius }) { - return defineBorderRadiusUtilities(borderRadius) -} diff --git a/src/plugins/borderRadius.js b/src/plugins/borderRadius.js new file mode 100644 index 000000000..ebee3b689 --- /dev/null +++ b/src/plugins/borderRadius.js @@ -0,0 +1,43 @@ +import _ from 'lodash' + +export default function () { + return function ({ addUtilities, config, e }) { + const generators = [ + (value, modifier) => ({ + [`.${e(`rounded${modifier}`)}`]: { borderRadius: `${value}` }, + }), + (value, modifier) => ({ + [`.${e(`rounded-t${modifier}`)}`]: { + borderTopLeftRadius: `${value}`, + borderTopRightRadius: `${value}`, + }, + [`.${e(`rounded-r${modifier}`)}`]: { + borderTopRightRadius: `${value}`, + borderBottomRightRadius: `${value}`, + }, + [`.${e(`rounded-b${modifier}`)}`]: { + borderBottomRightRadius: `${value}`, + borderBottomLeftRadius: `${value}`, + }, + [`.${e(`rounded-l${modifier}`)}`]: { + borderTopLeftRadius: `${value}`, + borderBottomLeftRadius: `${value}`, + }, + }), + (value, modifier) => ({ + [`.${e(`rounded-tl${modifier}`)}`]: { borderTopLeftRadius: `${value}` }, + [`.${e(`rounded-tr${modifier}`)}`]: { borderTopRightRadius: `${value}` }, + [`.${e(`rounded-br${modifier}`)}`]: { borderBottomRightRadius: `${value}` }, + [`.${e(`rounded-bl${modifier}`)}`]: { borderBottomLeftRadius: `${value}` }, + }), + ] + + const utilities = _.flatMap(generators, generator => { + return _.flatMap(config('borderRadius'), (value, modifier) => { + return generator(value, modifier === 'default' ? '' : `-${modifier}`) + }) + }) + + addUtilities(utilities, config('modules.borderRadius')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 302cba240..89213282f 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -7,7 +7,6 @@ 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' export default [ { name: 'lists', generator: lists }, @@ -19,5 +18,4 @@ export default [ { name: 'backgroundSize', generator: backgroundSize }, { name: 'borderCollapse', generator: borderCollapse }, { name: 'borderColors', generator: borderColors }, - { name: 'borderRadius', generator: borderRadius }, ]