Rename core plugins to closer mirror CSS properties and modules

defaultConfig.stub.js

@@ -8,24 +8,24 @@ module.exports = {
   variants: {
     appearance: ['responsive'],
     backgroundAttachment: ['responsive'],
-    backgroundColors: ['responsive', 'hover', 'focus'],
+    backgroundColor: ['responsive', 'hover', 'focus'],
     backgroundPosition: ['responsive'],
     backgroundRepeat: ['responsive'],
     backgroundSize: ['responsive'],
     borderCollapse: [],
-    borderColors: ['responsive', 'hover', 'focus'],
+    borderColor: ['responsive', 'hover', 'focus'],
     borderRadius: ['responsive'],
     borderStyle: ['responsive'],
-    borderWidths: ['responsive'],
+    borderWidth: ['responsive'],
     cursor: ['responsive'],
     display: ['responsive'],
     flexbox: ['responsive'],
     float: ['responsive'],
-    fonts: ['responsive'],
-    fontWeights: ['responsive', 'hover', 'focus'],
+    fontFamily: ['responsive'],
+    fontWeight: ['responsive', 'hover', 'focus'],
     height: ['responsive'],
     leading: ['responsive'],
-    lists: ['responsive'],
+    listStyle: ['responsive'],
     margin: ['responsive'],
     maxHeight: ['responsive'],
     maxWidth: ['responsive'],
@@ -41,14 +41,17 @@ module.exports = {
     pointerEvents: ['responsive'],
     position: ['responsive'],
     resize: ['responsive'],
-    shadows: ['responsive', 'hover', 'focus'],
-    svgFill: [],
-    svgStroke: [],
+    boxShadow: ['responsive', 'hover', 'focus'],
+    fill: [],
+    stroke: [],
     tableLayout: ['responsive'],
     textAlign: ['responsive'],
-    textColors: ['responsive', 'hover', 'focus'],
-    textSizes: ['responsive'],
-    textStyle: ['responsive', 'hover', 'focus'],
+    textColor: ['responsive', 'hover', 'focus'],
+    fontSize: ['responsive'],
+    fontStyle: ['responsive', 'hover', 'focus'],
+    textTransform: ['responsive', 'hover', 'focus'],
+    textDecoration: ['responsive', 'hover', 'focus'],
+    fontSmoothing: ['responsive', 'hover', 'focus'],
     tracking: ['responsive'],
     userSelect: ['responsive'],
     verticalAlign: ['responsive'],

defaultTheme.js

@@ -108,7 +108,7 @@ module.exports = function() {
       lg: '992px',
       xl: '1200px',
     },
-    fonts: {
+    fontFamily: {
       sans: [
         'system-ui',
         'BlinkMacSystemFont',
@@ -137,7 +137,7 @@ module.exports = function() {
       ],
       mono: ['Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'],
     },
-    textSizes: {
+    fontSize: {
       xs: '.75rem', // 12px
       sm: '.875rem', // 14px
       base: '1rem', // 16px
@@ -148,7 +148,7 @@ module.exports = function() {
       '4xl': '2.25rem', // 36px
       '5xl': '3rem', // 48px
     },
-    fontWeights: {
+    fontWeight: {
       hairline: 100,
       thin: 200,
       light: 300,
@@ -170,8 +170,8 @@ module.exports = function() {
       normal: '0',
       wide: '0.05em',
     },
-    textColors: theme => theme.colors,
-    backgroundColors: theme => theme.colors,
+    textColor: theme => theme.colors,
+    backgroundColor: theme => theme.colors,
     backgroundPosition: {
       bottom: 'bottom',
       center: 'center',
@@ -188,14 +188,14 @@ module.exports = function() {
       cover: 'cover',
       contain: 'contain',
     },
-    borderWidths: {
+    borderWidth: {
       default: '1px',
       '0': '0',
       '2': '2px',
       '4': '4px',
       '8': '8px',
     },
-    borderColors: theme => {
+    borderColor: theme => {
       return global.Object.assign({ default: theme.colors['grey-light'] }, theme.colors)
     },
     borderRadius: {
@@ -260,7 +260,7 @@ module.exports = function() {
     padding: theme => theme.spacing,
     margin: theme => ({ auto: 'auto', ...theme.spacing }),
     negativeMargin: theme => theme.spacing,
-    shadows: {
+    boxShadow: {
       default: '0 2px 4px 0 rgba(0,0,0,0.10)',
       md: '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
       lg: '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
@@ -284,10 +284,10 @@ module.exports = function() {
       '75': '.75',
       '100': '1',
     },
-    svgFill: {
+    fill: {
       current: 'currentColor',
     },
-    svgStroke: {
+    stroke: {
       current: 'currentColor',
     },
   }

plugins/backgroundColor.js

@@ -0,0 +1 @@
+module.exports = require('../lib/plugins/backgroundColor').default

plugins/borderColor.js

@@ -0,0 +1 @@
+module.exports = require('../lib/plugins/borderColor').default

plugins/borderWidth.js

@@ -0,0 +1 @@
+module.exports = require('../lib/plugins/borderWidth').default

plugins/boxShadow.js

@@ -0,0 +1 @@
+module.exports = require('../lib/plugins/boxShadow').default

plugins/fill.js

@@ -0,0 +1 @@
+module.exports = require('../lib/plugins/fill').default

plugins/fontFamily.js

@@ -0,0 +1 @@
+module.exports = require('../lib/plugins/fontFamily').default

plugins/fontSize.js

@@ -0,0 +1 @@
+module.exports = require('../lib/plugins/fontSize').default

plugins/fontSmoothing.js

@@ -0,0 +1 @@
+module.exports = require('../lib/plugins/fontSmoothing').default

plugins/fontStyle.js

@@ -0,0 +1 @@
+module.exports = require('../lib/plugins/fontStyle').default

plugins/fontWeight.js

@@ -0,0 +1 @@
+module.exports = require('../lib/plugins/fontWeight').default

plugins/listStyle.js

@@ -0,0 +1 @@
+module.exports = require('../lib/plugins/listStyle').default

plugins/stroke.js

@@ -0,0 +1 @@
+module.exports = require('../lib/plugins/stroke').default

plugins/textColor.js

@@ -0,0 +1 @@
+module.exports = require('../lib/plugins/textColor').default

plugins/textDecoration.js

@@ -0,0 +1 @@
+module.exports = require('../lib/plugins/textDecoration').default

plugins/textTransform.js

@@ -0,0 +1 @@
+module.exports = require('../lib/plugins/textTransform').default

src/corePlugins.js

@@ -1,22 +1,22 @@
 import preflight from './plugins/preflight'
-import lists from './plugins/lists'
+import listStyle from './plugins/listStyle'
 import appearance from './plugins/appearance'
 import backgroundAttachment from './plugins/backgroundAttachment'
-import backgroundColors from './plugins/backgroundColors'
+import backgroundColor from './plugins/backgroundColor'
 import backgroundPosition from './plugins/backgroundPosition'
 import backgroundRepeat from './plugins/backgroundRepeat'
 import backgroundSize from './plugins/backgroundSize'
 import borderCollapse from './plugins/borderCollapse'
-import borderColors from './plugins/borderColors'
+import borderColor from './plugins/borderColor'
 import borderRadius from './plugins/borderRadius'
 import borderStyle from './plugins/borderStyle'
-import borderWidths from './plugins/borderWidths'
+import borderWidth from './plugins/borderWidth'
 import cursor from './plugins/cursor'
 import display from './plugins/display'
 import flexbox from './plugins/flexbox'
 import float from './plugins/float'
-import fonts from './plugins/fonts'
-import fontWeights from './plugins/fontWeights'
+import fontFamily from './plugins/fontFamily'
+import fontWeight from './plugins/fontWeight'
 import height from './plugins/height'
 import leading from './plugins/leading'
 import margin from './plugins/margin'
@@ -34,14 +34,17 @@ import padding from './plugins/padding'
 import pointerEvents from './plugins/pointerEvents'
 import position from './plugins/position'
 import resize from './plugins/resize'
-import shadows from './plugins/shadows'
-import svgFill from './plugins/svgFill'
-import svgStroke from './plugins/svgStroke'
+import boxShadow from './plugins/boxShadow'
+import fill from './plugins/fill'
+import stroke from './plugins/stroke'
 import tableLayout from './plugins/tableLayout'
 import textAlign from './plugins/textAlign'
-import textColors from './plugins/textColors'
-import textSizes from './plugins/textSizes'
-import textStyle from './plugins/textStyle'
+import textColor from './plugins/textColor'
+import fontSize from './plugins/fontSize'
+import fontStyle from './plugins/fontStyle'
+import textTransform from './plugins/textTransform'
+import textDecoration from './plugins/textDecoration'
+import fontSmoothing from './plugins/fontSmoothing'
 import tracking from './plugins/tracking'
 import userSelect from './plugins/userSelect'
 import verticalAlign from './plugins/verticalAlign'
@@ -70,24 +73,24 @@ function loadPlugins({ theme, variants, corePlugins }, plugins) {
 export default function(config) {
   return loadPlugins(config, {
     preflight,
-    lists,
+    listStyle,
     appearance,
     backgroundAttachment,
-    backgroundColors,
+    backgroundColor,
     backgroundPosition,
     backgroundRepeat,
     backgroundSize,
     borderCollapse,
-    borderColors,
+    borderColor,
     borderRadius,
     borderStyle,
-    borderWidths,
+    borderWidth,
     cursor,
     display,
     flexbox,
     float,
-    fonts,
-    fontWeights,
+    fontFamily,
+    fontWeight,
     height,
     leading,
     margin,
@@ -105,14 +108,17 @@ export default function(config) {
     pointerEvents,
     position,
     resize,
-    shadows,
-    svgFill,
-    svgStroke,
+    boxShadow,
+    fill,
+    stroke,
     tableLayout,
     textAlign,
-    textColors,
-    textSizes,
-    textStyle,
+    textColor,
+    fontSize,
+    fontStyle,
+    textTransform,
+    textDecoration,
+    fontSmoothing,
     tracking,
     userSelect,
     verticalAlign,

src/plugins/css/preflight.css

@@ -89,7 +89,7 @@ ul {
 *::after {
   border-width: 0;
   border-style: solid;
-  border-color: config('theme.borderColors.default', currentColor);
+  border-color: config('theme.borderColor.default', currentColor);
 }
 
 /**

src/plugins/fontSmoothing.js

@@ -0,0 +1,17 @@
+export default function({ variants }) {
+  return function({ addUtilities }) {
+    addUtilities(
+      {
+        '.antialiased': {
+          '-webkit-font-smoothing': 'antialiased',
+          '-moz-osx-font-smoothing': 'grayscale',
+        },
+        '.subpixel-antialiased': {
+          '-webkit-font-smoothing': 'auto',
+          '-moz-osx-font-smoothing': 'auto',
+        },
+      },
+      variants
+    )
+  }
+}

src/plugins/fontStyle.js

@@ -0,0 +1,11 @@
+export default function({ variants }) {
+  return function({ addUtilities }) {
+    addUtilities(
+      {
+        '.italic': { 'font-style': 'italic' },
+        '.roman': { 'font-style': 'normal' },
+      },
+      variants
+    )
+  }
+}

src/plugins/textDecoration.js

@@ -0,0 +1,12 @@
+export default function({ variants }) {
+  return function({ addUtilities }) {
+    addUtilities(
+      {
+        '.underline': { 'text-decoration': 'underline' },
+        '.line-through': { 'text-decoration': 'line-through' },
+        '.no-underline': { 'text-decoration': 'none' },
+      },
+      variants
+    )
+  }
+}

src/plugins/textTransform.js

@@ -0,0 +1,13 @@
+export default function({ variants }) {
+  return function({ addUtilities }) {
+    addUtilities(
+      {
+        '.uppercase': { 'text-transform': 'uppercase' },
+        '.lowercase': { 'text-transform': 'lowercase' },
+        '.capitalize': { 'text-transform': 'capitalize' },
+        '.normal-case': { 'text-transform': 'none' },
+      },
+      variants
+    )
+  }
+}