Merge branch 'master' into skew

__tests__/plugins/strokeWidth.test.js

@@ -0,0 +1,57 @@
+import _ from 'lodash'
+import escapeClassName from '../../src/util/escapeClassName'
+import plugin from '../../src/plugins/strokeWidth'
+
+test('the width of the stroke to be applied to the shape', () => {
+  const addedUtilities = []
+
+  const config = {
+    theme: {
+      strokeWidth: {
+        '0': '0',
+        '1': '1px',
+        '2': '2px',
+        '3': '3px',
+        '4': '4px',
+      },
+    },
+    variants: {
+      strokeWidth: ['responsive'],
+    },
+  }
+
+  const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue)
+  const pluginApi = {
+    config: getConfigValue,
+    e: escapeClassName,
+    theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue),
+    variants: (path, defaultValue) => {
+      if (_.isArray(config.variants)) {
+        return config.variants
+      }
+
+      return getConfigValue(`variants.${path}`, defaultValue)
+    },
+    addUtilities(utilities, variants) {
+      addedUtilities.push({
+        utilities,
+        variants,
+      })
+    },
+  }
+
+  plugin()(pluginApi)
+
+  expect(addedUtilities).toEqual([
+    {
+      utilities: {
+        '.stroke-w-0': { 'stroke-width': '0' },
+        '.stroke-w-1': { 'stroke-width': '1px' },
+        '.stroke-w-2': { 'stroke-width': '2px' },
+        '.stroke-w-3': { 'stroke-width': '3px' },
+        '.stroke-w-4': { 'stroke-width': '4px' },
+      },
+      variants: ['responsive'],
+    },
+  ])
+})

src/corePlugins.js

@@ -52,6 +52,7 @@ import resize from './plugins/resize'
 import boxShadow from './plugins/boxShadow'
 import fill from './plugins/fill'
 import stroke from './plugins/stroke'
+import strokeWidth from './plugins/strokeWidth'
 import tableLayout from './plugins/tableLayout'
 import textAlign from './plugins/textAlign'
 import textColor from './plugins/textColor'
@@ -74,6 +75,18 @@ import scale from './plugins/scale'
 import rotate from './plugins/rotate'
 import translate from './plugins/translate'
 import skew from './plugins/skew'
+import gap from './plugins/gap'
+import columnGap from './plugins/columnGap'
+import rowGap from './plugins/rowGap'
+import gridAutoFlow from './plugins/gridAutoFlow'
+import gridTemplateColumns from './plugins/gridTemplateColumns'
+import gridColumn from './plugins/gridColumn'
+import gridColumnStart from './plugins/gridColumnStart'
+import gridColumnEnd from './plugins/gridColumnEnd'
+import gridTemplateRows from './plugins/gridTemplateRows'
+import gridRow from './plugins/gridRow'
+import gridRowStart from './plugins/gridRowStart'
+import gridRowEnd from './plugins/gridRowEnd'
 
 import configurePlugins from './util/configurePlugins'
 
@@ -133,6 +146,7 @@ export default function({ corePlugins: corePluginConfig }) {
     boxShadow,
     fill,
     stroke,
+    strokeWidth,
     tableLayout,
     textAlign,
     textColor,
@@ -149,6 +163,18 @@ export default function({ corePlugins: corePluginConfig }) {
     wordBreak,
     width,
     zIndex,
+    gap,
+    columnGap,
+    rowGap,
+    gridAutoFlow,
+    gridTemplateColumns,
+    gridColumn,
+    gridColumnStart,
+    gridColumnEnd,
+    gridTemplateRows,
+    gridRow,
+    gridRowStart,
+    gridRowEnd,
     transform,
     transformOrigin,
     scale,

src/plugins/boxSizing.js

@@ -2,8 +2,8 @@ export default function() {
   return function({ addUtilities, variants }) {
     addUtilities(
       {
-        '.box-border': { 'box-sizing': 'border' },
-        '.box-content': { 'box-sizing': 'content' },
+        '.box-border': { 'box-sizing': 'border-box' },
+        '.box-content': { 'box-sizing': 'content-box' },
       },
       variants('boxSizing')
     )

src/plugins/columnGap.js

@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function() {
+  return createUtilityPlugin('columnGap', [['col-gap', ['gridColumnGap', 'columnGap']]])
+}

src/plugins/display.js

@@ -17,6 +17,9 @@ export default function() {
         '.inline-flex': {
           display: 'inline-flex',
         },
+        '.grid': {
+          display: 'grid',
+        },
         '.table': {
           display: 'table',
         },

src/plugins/gap.js

@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function() {
+  return createUtilityPlugin('gap', [['gap', ['gridGap', 'gap']]])
+}

src/plugins/gridAutoFlow.js

@@ -0,0 +1,13 @@
+export default function() {
+  return function({ addUtilities, variants }) {
+    addUtilities(
+      {
+        '.grid-flow-row': { gridAutoFlow: 'row' },
+        '.grid-flow-col': { gridAutoFlow: 'column' },
+        '.grid-flow-row-dense': { gridAutoFlow: 'row dense' },
+        '.grid-flow-col-dense': { gridAutoFlow: 'column dense' },
+      },
+      variants('gridAutoFlow')
+    )
+  }
+}

src/plugins/gridColumn.js

@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function() {
+  return createUtilityPlugin('gridColumn', [['col', ['gridColumn']]])
+}

src/plugins/gridColumnEnd.js

@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function() {
+  return createUtilityPlugin('gridColumnEnd', [['col-end', ['gridColumnEnd']]])
+}

src/plugins/gridColumnStart.js

@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function() {
+  return createUtilityPlugin('gridColumnStart', [['col-start', ['gridColumnStart']]])
+}

src/plugins/gridRow.js

@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function() {
+  return createUtilityPlugin('gridRow', [['row', ['gridRow']]])
+}

src/plugins/gridRowEnd.js

@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function() {
+  return createUtilityPlugin('gridRowEnd', [['row-end', ['gridRowEnd']]])
+}

src/plugins/gridRowStart.js

@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function() {
+  return createUtilityPlugin('gridRowStart', [['row-start', ['gridRowStart']]])
+}

src/plugins/gridTemplateColumns.js

@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function() {
+  return createUtilityPlugin('gridTemplateColumns', [['grid-cols', ['gridTemplateColumns']]])
+}

src/plugins/gridTemplateRows.js

@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function() {
+  return createUtilityPlugin('gridTemplateRows', [['grid-rows', ['gridTemplateRows']]])
+}

src/plugins/rowGap.js

@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function() {
+  return createUtilityPlugin('rowGap', [['row-gap', ['gridRowGap', 'rowGap']]])
+}

src/plugins/strokeWidth.js

@@ -0,0 +1,18 @@
+import _ from 'lodash'
+
+export default function() {
+  return function({ addUtilities, e, theme, variants }) {
+    const utilities = _.fromPairs(
+      _.map(theme('strokeWidth'), (value, modifier) => {
+        return [
+          `.${e(`stroke-${modifier}`)}`,
+          {
+            strokeWidth: value,
+          },
+        ]
+      })
+    )
+
+    addUtilities(utilities, variants('strokeWidth'))
+  }
+}

stubs/defaultConfig.stub.js

@@ -368,6 +368,11 @@ module.exports = {
     stroke: {
       current: 'currentColor',
     },
+    strokeWidth: {
+      '0': '0',
+      '1': '1',
+      '2': '2',
+    },
     textColor: theme => theme('colors'),
     width: theme => ({
       auto: 'auto',
@@ -410,6 +415,75 @@ module.exports = {
       '40': '40',
       '50': '50',
     },
+    gap: theme => theme('spacing'),
+    rowGap: {},
+    columnGap: {},
+    gridTemplateColumns: {
+      none: 'none',
+      '1': 'repeat(1, minmax(0, 1fr))',
+      '2': 'repeat(2, minmax(0, 1fr))',
+      '3': 'repeat(3, minmax(0, 1fr))',
+      '4': 'repeat(4, minmax(0, 1fr))',
+      '5': 'repeat(5, minmax(0, 1fr))',
+      '6': 'repeat(6, minmax(0, 1fr))',
+      '7': 'repeat(7, minmax(0, 1fr))',
+      '8': 'repeat(8, minmax(0, 1fr))',
+      '9': 'repeat(9, minmax(0, 1fr))',
+      '10': 'repeat(10, minmax(0, 1fr))',
+      '11': 'repeat(11, minmax(0, 1fr))',
+      '12': 'repeat(12, minmax(0, 1fr))',
+    },
+    gridColumn: {
+      auto: 'auto',
+      'span-1': 'span 1 / span 1',
+      'span-2': 'span 2 / span 2',
+      'span-3': 'span 3 / span 3',
+      'span-4': 'span 4 / span 4',
+      'span-5': 'span 5 / span 5',
+      'span-6': 'span 6 / span 6',
+      'span-7': 'span 7 / span 7',
+      'span-8': 'span 8 / span 8',
+      'span-9': 'span 9 / span 9',
+      'span-10': 'span 10 / span 10',
+      'span-11': 'span 11 / span 11',
+      'span-12': 'span 12 / span 12',
+    },
+    gridColumnStart: {
+      auto: 'auto',
+      '1': '1',
+      '2': '2',
+      '3': '3',
+      '4': '4',
+      '5': '5',
+      '6': '6',
+      '7': '7',
+      '8': '8',
+      '9': '9',
+      '10': '10',
+      '11': '11',
+      '12': '12',
+      '13': '13',
+    },
+    gridColumnEnd: {
+      auto: 'auto',
+      '1': '1',
+      '2': '2',
+      '3': '3',
+      '4': '4',
+      '5': '5',
+      '6': '6',
+      '7': '7',
+      '8': '8',
+      '9': '9',
+      '10': '10',
+      '11': '11',
+      '12': '12',
+      '13': '13',
+    },
+    gridTemplateRows: {},
+    gridRow: {},
+    gridRowStart: {},
+    gridRowEnd: {},
     transformOrigin: {
       center: 'center',
       top: 'top',
@@ -509,6 +583,7 @@ module.exports = {
     position: ['responsive'],
     resize: ['responsive'],
     stroke: ['responsive'],
+    strokeWidth: ['responsive'],
     tableLayout: ['responsive'],
     textAlign: ['responsive'],
     textColor: ['responsive', 'hover', 'focus'],
@@ -521,6 +596,18 @@ module.exports = {
     width: ['responsive'],
     wordBreak: ['responsive'],
     zIndex: ['responsive'],
+    gap: ['responsive'],
+    columnGap: ['responsive'],
+    rowGap: ['responsive'],
+    gridAutoFlow: ['responsive'],
+    gridTemplateColumns: ['responsive'],
+    gridColumn: ['responsive'],
+    gridColumnStart: ['responsive'],
+    gridColumnEnd: ['responsive'],
+    gridTemplateRows: ['responsive'],
+    gridRow: ['responsive'],
+    gridRowStart: ['responsive'],
+    gridRowEnd: ['responsive'],
     transform: ['responsive'],
     transformOrigin: ['responsive'],
     scale: ['responsive', 'hover', 'focus'],

yarn.lock

@@ -1822,9 +1822,9 @@ eslint-config-postcss@^2.0.2:
   integrity sha1-yuHGCTzteFCJSluF++HR4jK3Kvs=
 
 eslint-config-prettier@^6.0.0:
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.8.0.tgz#36bd7559dcef9f97d7596779b38e6a879abb89d3"
-  integrity sha512-aq4M7mjjVregZ2l45O9qz6Mv6f5zVMl/IqfmUL8hNOoDAzVKYMhYPJytbqE/lPIVO1iMDXIFqjiEE59BfJZpZw==
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.9.0.tgz#430d24822e82f7deb1e22a435bfa3999fae4ad64"
+  integrity sha512-k4E14HBtcLv0uqThaI6I/n1LEqROp8XaPu6SO9Z32u5NlGRC07Enu1Bh2KEFw4FNHbekH8yzbIU9kUGxbiGmCA==
   dependencies:
     get-stdin "^6.0.0"