Merge pull request #656 from tailwindcss/rename-plugins

Rename core plugins to closer mirror CSS properties and modules

Author: adamwathan

__tests__/fixtures/tailwind-output-important.css

@@ -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'],

__tests__/fixtures/tailwind-output.css

@@ -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',
     },
   }

defaultConfig.stub.js

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

defaultTheme.js

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

plugins/backgroundColor.js

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