Port borderRadius module to plugin

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(),

src/generators/borderRadius.js

@@ -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)
-}

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'))
+  }
+}

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 },
 ]