diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 0714f376a..3f69218b9 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -2116,40 +2116,120 @@ button, border-radius: .25rem; } +.rounded-t { + border-top-right-radius: .25rem; + border-top-left-radius: .25rem; +} + +.rounded-r { + border-top-right-radius: .25rem; + border-bottom-right-radius: .25rem; +} + +.rounded-b { + border-bottom-right-radius: .25rem; + border-bottom-left-radius: .25rem; +} + +.rounded-l { + border-top-left-radius: .25rem; + border-bottom-left-radius: .25rem; +} + .rounded-sm { border-radius: .125rem; } +.rounded-t-sm { + border-top-right-radius: .125rem; + border-top-left-radius: .125rem; +} + +.rounded-r-sm { + border-top-right-radius: .125rem; + border-bottom-right-radius: .125rem; +} + +.rounded-b-sm { + border-bottom-right-radius: .125rem; + border-bottom-left-radius: .125rem; +} + +.rounded-l-sm { + border-top-left-radius: .125rem; + border-bottom-left-radius: .125rem; +} + .rounded-lg { border-radius: .5rem; } +.rounded-t-lg { + border-top-right-radius: .5rem; + border-top-left-radius: .5rem; +} + +.rounded-r-lg { + border-top-right-radius: .5rem; + border-bottom-right-radius: .5rem; +} + +.rounded-b-lg { + border-bottom-right-radius: .5rem; + border-bottom-left-radius: .5rem; +} + +.rounded-l-lg { + border-top-left-radius: .5rem; + border-bottom-left-radius: .5rem; +} + .rounded-full { border-radius: 9999px; } +.rounded-t-full { + border-top-right-radius: 9999px; + border-top-left-radius: 9999px; +} + +.rounded-r-full { + border-top-right-radius: 9999px; + border-bottom-right-radius: 9999px; +} + +.rounded-b-full { + border-bottom-right-radius: 9999px; + border-bottom-left-radius: 9999px; +} + +.rounded-l-full { + border-top-left-radius: 9999px; + border-bottom-left-radius: 9999px; +} + .rounded-none { border-radius: 0; } -.rounded-t { +.rounded-t-none { + border-top-right-radius: 0; + border-top-left-radius: 0; +} + +.rounded-r-none { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.rounded-b-none { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } -.rounded-r { +.rounded-l-none { + border-top-left-radius: 0; border-bottom-left-radius: 0; - border-top-left-radius: 0; -} - -.rounded-b { - border-top-left-radius: 0; - border-top-right-radius: 0; -} - -.rounded-l { - border-top-right-radius: 0; - border-bottom-right-radius: 0; } .block { @@ -5076,40 +5156,120 @@ button, border-radius: .25rem; } + .sm\:rounded-t { + border-top-right-radius: .25rem; + border-top-left-radius: .25rem; + } + + .sm\:rounded-r { + border-top-right-radius: .25rem; + border-bottom-right-radius: .25rem; + } + + .sm\:rounded-b { + border-bottom-right-radius: .25rem; + border-bottom-left-radius: .25rem; + } + + .sm\:rounded-l { + border-top-left-radius: .25rem; + border-bottom-left-radius: .25rem; + } + .sm\:rounded-sm { border-radius: .125rem; } + .sm\:rounded-t-sm { + border-top-right-radius: .125rem; + border-top-left-radius: .125rem; + } + + .sm\:rounded-r-sm { + border-top-right-radius: .125rem; + border-bottom-right-radius: .125rem; + } + + .sm\:rounded-b-sm { + border-bottom-right-radius: .125rem; + border-bottom-left-radius: .125rem; + } + + .sm\:rounded-l-sm { + border-top-left-radius: .125rem; + border-bottom-left-radius: .125rem; + } + .sm\:rounded-lg { border-radius: .5rem; } + .sm\:rounded-t-lg { + border-top-right-radius: .5rem; + border-top-left-radius: .5rem; + } + + .sm\:rounded-r-lg { + border-top-right-radius: .5rem; + border-bottom-right-radius: .5rem; + } + + .sm\:rounded-b-lg { + border-bottom-right-radius: .5rem; + border-bottom-left-radius: .5rem; + } + + .sm\:rounded-l-lg { + border-top-left-radius: .5rem; + border-bottom-left-radius: .5rem; + } + .sm\:rounded-full { border-radius: 9999px; } + .sm\:rounded-t-full { + border-top-right-radius: 9999px; + border-top-left-radius: 9999px; + } + + .sm\:rounded-r-full { + border-top-right-radius: 9999px; + border-bottom-right-radius: 9999px; + } + + .sm\:rounded-b-full { + border-bottom-right-radius: 9999px; + border-bottom-left-radius: 9999px; + } + + .sm\:rounded-l-full { + border-top-left-radius: 9999px; + border-bottom-left-radius: 9999px; + } + .sm\:rounded-none { border-radius: 0; } - .sm\:rounded-t { + .sm\:rounded-t-none { + border-top-right-radius: 0; + border-top-left-radius: 0; + } + + .sm\:rounded-r-none { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .sm\:rounded-b-none { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } - .sm\:rounded-r { + .sm\:rounded-l-none { + border-top-left-radius: 0; border-bottom-left-radius: 0; - border-top-left-radius: 0; - } - - .sm\:rounded-b { - border-top-left-radius: 0; - border-top-right-radius: 0; - } - - .sm\:rounded-l { - border-top-right-radius: 0; - border-bottom-right-radius: 0; } .sm\:block { @@ -8037,40 +8197,120 @@ button, border-radius: .25rem; } + .md\:rounded-t { + border-top-right-radius: .25rem; + border-top-left-radius: .25rem; + } + + .md\:rounded-r { + border-top-right-radius: .25rem; + border-bottom-right-radius: .25rem; + } + + .md\:rounded-b { + border-bottom-right-radius: .25rem; + border-bottom-left-radius: .25rem; + } + + .md\:rounded-l { + border-top-left-radius: .25rem; + border-bottom-left-radius: .25rem; + } + .md\:rounded-sm { border-radius: .125rem; } + .md\:rounded-t-sm { + border-top-right-radius: .125rem; + border-top-left-radius: .125rem; + } + + .md\:rounded-r-sm { + border-top-right-radius: .125rem; + border-bottom-right-radius: .125rem; + } + + .md\:rounded-b-sm { + border-bottom-right-radius: .125rem; + border-bottom-left-radius: .125rem; + } + + .md\:rounded-l-sm { + border-top-left-radius: .125rem; + border-bottom-left-radius: .125rem; + } + .md\:rounded-lg { border-radius: .5rem; } + .md\:rounded-t-lg { + border-top-right-radius: .5rem; + border-top-left-radius: .5rem; + } + + .md\:rounded-r-lg { + border-top-right-radius: .5rem; + border-bottom-right-radius: .5rem; + } + + .md\:rounded-b-lg { + border-bottom-right-radius: .5rem; + border-bottom-left-radius: .5rem; + } + + .md\:rounded-l-lg { + border-top-left-radius: .5rem; + border-bottom-left-radius: .5rem; + } + .md\:rounded-full { border-radius: 9999px; } + .md\:rounded-t-full { + border-top-right-radius: 9999px; + border-top-left-radius: 9999px; + } + + .md\:rounded-r-full { + border-top-right-radius: 9999px; + border-bottom-right-radius: 9999px; + } + + .md\:rounded-b-full { + border-bottom-right-radius: 9999px; + border-bottom-left-radius: 9999px; + } + + .md\:rounded-l-full { + border-top-left-radius: 9999px; + border-bottom-left-radius: 9999px; + } + .md\:rounded-none { border-radius: 0; } - .md\:rounded-t { + .md\:rounded-t-none { + border-top-right-radius: 0; + border-top-left-radius: 0; + } + + .md\:rounded-r-none { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .md\:rounded-b-none { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } - .md\:rounded-r { + .md\:rounded-l-none { + border-top-left-radius: 0; border-bottom-left-radius: 0; - border-top-left-radius: 0; - } - - .md\:rounded-b { - border-top-left-radius: 0; - border-top-right-radius: 0; - } - - .md\:rounded-l { - border-top-right-radius: 0; - border-bottom-right-radius: 0; } .md\:block { @@ -10998,40 +11238,120 @@ button, border-radius: .25rem; } + .lg\:rounded-t { + border-top-right-radius: .25rem; + border-top-left-radius: .25rem; + } + + .lg\:rounded-r { + border-top-right-radius: .25rem; + border-bottom-right-radius: .25rem; + } + + .lg\:rounded-b { + border-bottom-right-radius: .25rem; + border-bottom-left-radius: .25rem; + } + + .lg\:rounded-l { + border-top-left-radius: .25rem; + border-bottom-left-radius: .25rem; + } + .lg\:rounded-sm { border-radius: .125rem; } + .lg\:rounded-t-sm { + border-top-right-radius: .125rem; + border-top-left-radius: .125rem; + } + + .lg\:rounded-r-sm { + border-top-right-radius: .125rem; + border-bottom-right-radius: .125rem; + } + + .lg\:rounded-b-sm { + border-bottom-right-radius: .125rem; + border-bottom-left-radius: .125rem; + } + + .lg\:rounded-l-sm { + border-top-left-radius: .125rem; + border-bottom-left-radius: .125rem; + } + .lg\:rounded-lg { border-radius: .5rem; } + .lg\:rounded-t-lg { + border-top-right-radius: .5rem; + border-top-left-radius: .5rem; + } + + .lg\:rounded-r-lg { + border-top-right-radius: .5rem; + border-bottom-right-radius: .5rem; + } + + .lg\:rounded-b-lg { + border-bottom-right-radius: .5rem; + border-bottom-left-radius: .5rem; + } + + .lg\:rounded-l-lg { + border-top-left-radius: .5rem; + border-bottom-left-radius: .5rem; + } + .lg\:rounded-full { border-radius: 9999px; } + .lg\:rounded-t-full { + border-top-right-radius: 9999px; + border-top-left-radius: 9999px; + } + + .lg\:rounded-r-full { + border-top-right-radius: 9999px; + border-bottom-right-radius: 9999px; + } + + .lg\:rounded-b-full { + border-bottom-right-radius: 9999px; + border-bottom-left-radius: 9999px; + } + + .lg\:rounded-l-full { + border-top-left-radius: 9999px; + border-bottom-left-radius: 9999px; + } + .lg\:rounded-none { border-radius: 0; } - .lg\:rounded-t { + .lg\:rounded-t-none { + border-top-right-radius: 0; + border-top-left-radius: 0; + } + + .lg\:rounded-r-none { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .lg\:rounded-b-none { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } - .lg\:rounded-r { + .lg\:rounded-l-none { + border-top-left-radius: 0; border-bottom-left-radius: 0; - border-top-left-radius: 0; - } - - .lg\:rounded-b { - border-top-left-radius: 0; - border-top-right-radius: 0; - } - - .lg\:rounded-l { - border-top-right-radius: 0; - border-bottom-right-radius: 0; } .lg\:block { @@ -13959,40 +14279,120 @@ button, border-radius: .25rem; } + .xl\:rounded-t { + border-top-right-radius: .25rem; + border-top-left-radius: .25rem; + } + + .xl\:rounded-r { + border-top-right-radius: .25rem; + border-bottom-right-radius: .25rem; + } + + .xl\:rounded-b { + border-bottom-right-radius: .25rem; + border-bottom-left-radius: .25rem; + } + + .xl\:rounded-l { + border-top-left-radius: .25rem; + border-bottom-left-radius: .25rem; + } + .xl\:rounded-sm { border-radius: .125rem; } + .xl\:rounded-t-sm { + border-top-right-radius: .125rem; + border-top-left-radius: .125rem; + } + + .xl\:rounded-r-sm { + border-top-right-radius: .125rem; + border-bottom-right-radius: .125rem; + } + + .xl\:rounded-b-sm { + border-bottom-right-radius: .125rem; + border-bottom-left-radius: .125rem; + } + + .xl\:rounded-l-sm { + border-top-left-radius: .125rem; + border-bottom-left-radius: .125rem; + } + .xl\:rounded-lg { border-radius: .5rem; } + .xl\:rounded-t-lg { + border-top-right-radius: .5rem; + border-top-left-radius: .5rem; + } + + .xl\:rounded-r-lg { + border-top-right-radius: .5rem; + border-bottom-right-radius: .5rem; + } + + .xl\:rounded-b-lg { + border-bottom-right-radius: .5rem; + border-bottom-left-radius: .5rem; + } + + .xl\:rounded-l-lg { + border-top-left-radius: .5rem; + border-bottom-left-radius: .5rem; + } + .xl\:rounded-full { border-radius: 9999px; } + .xl\:rounded-t-full { + border-top-right-radius: 9999px; + border-top-left-radius: 9999px; + } + + .xl\:rounded-r-full { + border-top-right-radius: 9999px; + border-bottom-right-radius: 9999px; + } + + .xl\:rounded-b-full { + border-bottom-right-radius: 9999px; + border-bottom-left-radius: 9999px; + } + + .xl\:rounded-l-full { + border-top-left-radius: 9999px; + border-bottom-left-radius: 9999px; + } + .xl\:rounded-none { border-radius: 0; } - .xl\:rounded-t { + .xl\:rounded-t-none { + border-top-right-radius: 0; + border-top-left-radius: 0; + } + + .xl\:rounded-r-none { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .xl\:rounded-b-none { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } - .xl\:rounded-r { + .xl\:rounded-l-none { + border-top-left-radius: 0; border-bottom-left-radius: 0; - border-top-left-radius: 0; - } - - .xl\:rounded-b { - border-top-left-radius: 0; - border-top-right-radius: 0; - } - - .xl\:rounded-l { - border-top-right-radius: 0; - border-bottom-right-radius: 0; } .xl\:block { diff --git a/src/generators/rounded.js b/src/generators/rounded.js index b251725a2..f31d8031d 100644 --- a/src/generators/rounded.js +++ b/src/generators/rounded.js @@ -1,35 +1,32 @@ import _ from 'lodash' -import defineClass from '../util/defineClass' import defineClasses from '../util/defineClasses' -function sideVariants() { +function sizedBorder(radius, modifier) { + modifier = modifier === 'default' ? '' : `-${modifier}` + return defineClasses({ - 'rounded-t': { - 'border-bottom-right-radius': '0', - 'border-bottom-left-radius': '0', + [`rounded${modifier}`]: { + 'border-radius': `${radius}`, }, - 'rounded-r': { - 'border-bottom-left-radius': '0', - 'border-top-left-radius': '0', + [`rounded-t${modifier}`]: { + 'border-top-right-radius': `${radius}`, + 'border-top-left-radius': `${radius}`, }, - 'rounded-b': { - 'border-top-left-radius': '0', - 'border-top-right-radius': '0', + [`rounded-r${modifier}`]: { + 'border-top-right-radius': `${radius}`, + 'border-bottom-right-radius': `${radius}`, }, - 'rounded-l': { - 'border-top-right-radius': '0', - 'border-bottom-right-radius': '0', + [`rounded-b${modifier}`]: { + 'border-bottom-right-radius': `${radius}`, + 'border-bottom-left-radius': `${radius}`, + }, + [`rounded-l${modifier}`]: { + 'border-top-left-radius': `${radius}`, + 'border-bottom-left-radius': `${radius}`, }, }) } module.exports = function({ borderRadius }) { - return _(borderRadius) - .map((radius, modifier) => { - return defineClass(modifier === 'default' ? 'rounded' : `rounded-${modifier}`, { - 'border-radius': radius, - }) - }) - .concat(sideVariants()) - .value() + return _.flatMap(borderRadius, sizedBorder) }