diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 7b48713b2..e621809c6 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__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; } diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 69539a3cd..780cf88b0 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__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; } diff --git a/__tests__/plugins/strokeWidth.test.js b/__tests__/plugins/strokeWidth.test.js new file mode 100644 index 000000000..ade28e528 --- /dev/null +++ b/__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'], + }, + ]) +}) diff --git a/src/corePlugins.js b/src/corePlugins.js index 15bb6b864..1fe3d82c7 100644 --- a/src/corePlugins.js +++ b/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, diff --git a/src/plugins/strokeWidth.js b/src/plugins/strokeWidth.js new file mode 100644 index 000000000..79db44fcd --- /dev/null +++ b/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')) + } +} diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 59e1c86db..50e55cc4d 100644 --- a/stubs/defaultConfig.stub.js +++ b/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'],