archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #214 from tailwindcss/reorder-border-widths

Browse Source 
[0.2] Sort border width utilities from most general to most specific
This commit is contained in:
Adam Wathan 2017-11-17 09:33:43 -05:00 committed by GitHub
commit 436f485897
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 109 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
__tests__/fixtures/tailwind-output.css
View File

@ -1642,6 +1642,22 @@ button,
border-width: 0;
}
.border-2 {
border-width: 2px;
}
.border-4 {
border-width: 4px;
}
.border-8 {
border-width: 8px;
}
.border {
border-width: 1px;
}
.border-t-0 {
border-top-width: 0;
}
@ -1658,10 +1674,6 @@ button,
border-left-width: 0;
}
.border-2 {
border-width: 2px;
}
.border-t-2 {
border-top-width: 2px;
}
@ -1678,10 +1690,6 @@ button,
border-left-width: 2px;
}
.border-4 {
border-width: 4px;
}
.border-t-4 {
border-top-width: 4px;
}
@ -1698,10 +1706,6 @@ button,
border-left-width: 4px;
}
.border-8 {
border-width: 8px;
}
.border-t-8 {
border-top-width: 8px;
}
@ -1718,10 +1722,6 @@ button,
border-left-width: 8px;
}
.border {
border-width: 1px;
}
.border-t {
border-top-width: 1px;
}
@ -4762,6 +4762,22 @@ button,
border-width: 0;
}
.sm\:border-2 {
border-width: 2px;
}
.sm\:border-4 {
border-width: 4px;
}
.sm\:border-8 {
border-width: 8px;
}
.sm\:border {
border-width: 1px;
}
.sm\:border-t-0 {
border-top-width: 0;
}
@ -4778,10 +4794,6 @@ button,
border-left-width: 0;
}
.sm\:border-2 {
border-width: 2px;
}
.sm\:border-t-2 {
border-top-width: 2px;
}
@ -4798,10 +4810,6 @@ button,
border-left-width: 2px;
}
.sm\:border-4 {
border-width: 4px;
}
.sm\:border-t-4 {
border-top-width: 4px;
}
@ -4818,10 +4826,6 @@ button,
border-left-width: 4px;
}
.sm\:border-8 {
border-width: 8px;
}
.sm\:border-t-8 {
border-top-width: 8px;
}
@ -4838,10 +4842,6 @@ button,
border-left-width: 8px;
}
.sm\:border {
border-width: 1px;
}
.sm\:border-t {
border-top-width: 1px;
}
@ -7883,6 +7883,22 @@ button,
border-width: 0;
}
.md\:border-2 {
border-width: 2px;
}
.md\:border-4 {
border-width: 4px;
}
.md\:border-8 {
border-width: 8px;
}
.md\:border {
border-width: 1px;
}
.md\:border-t-0 {
border-top-width: 0;
}
@ -7899,10 +7915,6 @@ button,
border-left-width: 0;
}
.md\:border-2 {
border-width: 2px;
}
.md\:border-t-2 {
border-top-width: 2px;
}
@ -7919,10 +7931,6 @@ button,
border-left-width: 2px;
}
.md\:border-4 {
border-width: 4px;
}
.md\:border-t-4 {
border-top-width: 4px;
}
@ -7939,10 +7947,6 @@ button,
border-left-width: 4px;
}
.md\:border-8 {
border-width: 8px;
}
.md\:border-t-8 {
border-top-width: 8px;
}
@ -7959,10 +7963,6 @@ button,
border-left-width: 8px;
}
.md\:border {
border-width: 1px;
}
.md\:border-t {
border-top-width: 1px;
}
@ -11004,6 +11004,22 @@ button,
border-width: 0;
}
.lg\:border-2 {
border-width: 2px;
}
.lg\:border-4 {
border-width: 4px;
}
.lg\:border-8 {
border-width: 8px;
}
.lg\:border {
border-width: 1px;
}
.lg\:border-t-0 {
border-top-width: 0;
}
@ -11020,10 +11036,6 @@ button,
border-left-width: 0;
}
.lg\:border-2 {
border-width: 2px;
}
.lg\:border-t-2 {
border-top-width: 2px;
}
@ -11040,10 +11052,6 @@ button,
border-left-width: 2px;
}
.lg\:border-4 {
border-width: 4px;
}
.lg\:border-t-4 {
border-top-width: 4px;
}
@ -11060,10 +11068,6 @@ button,
border-left-width: 4px;
}
.lg\:border-8 {
border-width: 8px;
}
.lg\:border-t-8 {
border-top-width: 8px;
}
@ -11080,10 +11084,6 @@ button,
border-left-width: 8px;
}
.lg\:border {
border-width: 1px;
}
.lg\:border-t {
border-top-width: 1px;
}
@ -14125,6 +14125,22 @@ button,
border-width: 0;
}
.xl\:border-2 {
border-width: 2px;
}
.xl\:border-4 {
border-width: 4px;
}
.xl\:border-8 {
border-width: 8px;
}
.xl\:border {
border-width: 1px;
}
.xl\:border-t-0 {
border-top-width: 0;
}
@ -14141,10 +14157,6 @@ button,
border-left-width: 0;
}
.xl\:border-2 {
border-width: 2px;
}
.xl\:border-t-2 {
border-top-width: 2px;
}
@ -14161,10 +14173,6 @@ button,
border-left-width: 2px;
}
.xl\:border-4 {
border-width: 4px;
}
.xl\:border-t-4 {
border-top-width: 4px;
}
@ -14181,10 +14189,6 @@ button,
border-left-width: 4px;
}
.xl\:border-8 {
border-width: 8px;
}
.xl\:border-t-8 {
border-top-width: 8px;
}
@ -14201,10 +14205,6 @@ button,
border-left-width: 8px;
}
.xl\:border {
border-width: 1px;
}
.xl\:border-t {
border-top-width: 1px;
}

48
src/generators/borderWidths.js
View File

@ -1,28 +1,38 @@
import _ from 'lodash'
import defineClasses from '../util/defineClasses'
function sizedBorder(width, modifier) {
modifier = modifier === 'default' ? '' : `-${modifier}`
function defineBorderWidthUtilities(borderWidths) {
const generators = [
(width, modifier) =>
defineClasses({
[`border${modifier}`]: {
'border-width': `${width}`,
},
}),
(width, modifier) =>
defineClasses({
[`border-t${modifier}`]: {
'border-top-width': `${width}`,
},
[`border-r${modifier}`]: {
'border-right-width': `${width}`,
},
[`border-b${modifier}`]: {
'border-bottom-width': `${width}`,
},
[`border-l${modifier}`]: {
'border-left-width': `${width}`,
},
}),
]
return defineClasses({
[`border${modifier}`]: {
'border-width': `${width}`,
},
[`border-t${modifier}`]: {
'border-top-width': `${width}`,
},
[`border-r${modifier}`]: {
'border-right-width': `${width}`,
},
[`border-b${modifier}`]: {
'border-bottom-width': `${width}`,
},
[`border-l${modifier}`]: {
'border-left-width': `${width}`,
},
return _.flatMap(generators, generator => {
return _.flatMap(borderWidths, (width, modifier) => {
return generator(width, modifier === 'default' ? '' : `-${modifier}`)
})
})
}
module.exports = function({ borderWidths }) {
return _.flatMap(borderWidths, sizedBorder)
return defineBorderWidthUtilities(borderWidths)
}