Merge branch 'Larissagilliane-iss1074'

Author: adamwathan

__tests__/fixtures/tailwind-output-important.css

@@ -6865,6 +6865,18 @@ video {
   stroke: currentColor !important;
 }
 
+.stroke-0 {
+  stroke-width: 0 !important;
+}
+
+.stroke-1 {
+  stroke-width: 1 !important;
+}
+
+.stroke-2 {
+  stroke-width: 2 !important;
+}
+
 .table-auto {
   table-layout: auto !important;
 }
@@ -16546,6 +16558,18 @@ video {
     stroke: currentColor !important;
   }
 
+  .sm\:stroke-0 {
+    stroke-width: 0 !important;
+  }
+
+  .sm\:stroke-1 {
+    stroke-width: 1 !important;
+  }
+
+  .sm\:stroke-2 {
+    stroke-width: 2 !important;
+  }
+
   .sm\:table-auto {
     table-layout: auto !important;
   }
@@ -26228,6 +26252,18 @@ video {
     stroke: currentColor !important;
   }
 
+  .md\:stroke-0 {
+    stroke-width: 0 !important;
+  }
+
+  .md\:stroke-1 {
+    stroke-width: 1 !important;
+  }
+
+  .md\:stroke-2 {
+    stroke-width: 2 !important;
+  }
+
   .md\:table-auto {
     table-layout: auto !important;
   }
@@ -35910,6 +35946,18 @@ video {
     stroke: currentColor !important;
   }
 
+  .lg\:stroke-0 {
+    stroke-width: 0 !important;
+  }
+
+  .lg\:stroke-1 {
+    stroke-width: 1 !important;
+  }
+
+  .lg\:stroke-2 {
+    stroke-width: 2 !important;
+  }
+
   .lg\:table-auto {
     table-layout: auto !important;
   }
@@ -45592,6 +45640,18 @@ video {
     stroke: currentColor !important;
   }
 
+  .xl\:stroke-0 {
+    stroke-width: 0 !important;
+  }
+
+  .xl\:stroke-1 {
+    stroke-width: 1 !important;
+  }
+
+  .xl\:stroke-2 {
+    stroke-width: 2 !important;
+  }
+
   .xl\:table-auto {
     table-layout: auto !important;
   }

__tests__/fixtures/tailwind-output.css

@@ -6865,6 +6865,18 @@ video {
   stroke: currentColor;
 }
 
+.stroke-0 {
+  stroke-width: 0;
+}
+
+.stroke-1 {
+  stroke-width: 1;
+}
+
+.stroke-2 {
+  stroke-width: 2;
+}
+
 .table-auto {
   table-layout: auto;
 }
@@ -16546,6 +16558,18 @@ video {
     stroke: currentColor;
   }
 
+  .sm\:stroke-0 {
+    stroke-width: 0;
+  }
+
+  .sm\:stroke-1 {
+    stroke-width: 1;
+  }
+
+  .sm\:stroke-2 {
+    stroke-width: 2;
+  }
+
   .sm\:table-auto {
     table-layout: auto;
   }
@@ -26228,6 +26252,18 @@ video {
     stroke: currentColor;
   }
 
+  .md\:stroke-0 {
+    stroke-width: 0;
+  }
+
+  .md\:stroke-1 {
+    stroke-width: 1;
+  }
+
+  .md\:stroke-2 {
+    stroke-width: 2;
+  }
+
   .md\:table-auto {
     table-layout: auto;
   }
@@ -35910,6 +35946,18 @@ video {
     stroke: currentColor;
   }
 
+  .lg\:stroke-0 {
+    stroke-width: 0;
+  }
+
+  .lg\:stroke-1 {
+    stroke-width: 1;
+  }
+
+  .lg\:stroke-2 {
+    stroke-width: 2;
+  }
+
   .lg\:table-auto {
     table-layout: auto;
   }
@@ -45592,6 +45640,18 @@ video {
     stroke: currentColor;
   }
 
+  .xl\:stroke-0 {
+    stroke-width: 0;
+  }
+
+  .xl\:stroke-1 {
+    stroke-width: 1;
+  }
+
+  .xl\:stroke-2 {
+    stroke-width: 2;
+  }
+
   .xl\:table-auto {
     table-layout: auto;
   }

__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'
@@ -144,6 +145,7 @@ export default function({ corePlugins: corePluginConfig }) {
     boxShadow,
     fill,
     stroke,
+    strokeWidth,
     tableLayout,
     textAlign,
     textColor,

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',
@@ -577,6 +582,7 @@ module.exports = {
     position: ['responsive'],
     resize: ['responsive'],
     stroke: ['responsive'],
+    strokeWidth: ['responsive'],
     tableLayout: ['responsive'],
     textAlign: ['responsive'],
     textColor: ['responsive', 'hover', 'focus'],