From 137159aaa9432ce0f19d75d186932f4ffd87e676 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 13 Mar 2019 14:17:37 -0400 Subject: [PATCH 1/5] Rename list-reset to list-none, remove padding declaration --- .../fixtures/tailwind-output-important.css | 25 ++++++++----------- __tests__/fixtures/tailwind-output.css | 25 ++++++++----------- defaultConfig.stub.js | 2 +- src/corePlugins.js | 4 +-- .../{listStyle.js => listStyleType.js} | 7 +++--- 5 files changed, 26 insertions(+), 37 deletions(-) rename src/plugins/{listStyle.js => listStyleType.js} (53%) diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index c23f8657fb04..6690d5d2de0b 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -569,9 +569,8 @@ samp { } } -.list-reset { - list-style: none !important; - padding: 0 !important; +.list-none { + list-style-type: none !important; } .appearance-none { @@ -6602,9 +6601,8 @@ samp { } @media (min-width: 640px) { - .sm\:list-reset { - list-style: none !important; - padding: 0 !important; + .sm\:list-none { + list-style-type: none !important; } .sm\:appearance-none { @@ -12612,9 +12610,8 @@ samp { } @media (min-width: 768px) { - .md\:list-reset { - list-style: none !important; - padding: 0 !important; + .md\:list-none { + list-style-type: none !important; } .md\:appearance-none { @@ -18622,9 +18619,8 @@ samp { } @media (min-width: 1024px) { - .lg\:list-reset { - list-style: none !important; - padding: 0 !important; + .lg\:list-none { + list-style-type: none !important; } .lg\:appearance-none { @@ -24632,9 +24628,8 @@ samp { } @media (min-width: 1280px) { - .xl\:list-reset { - list-style: none !important; - padding: 0 !important; + .xl\:list-none { + list-style-type: none !important; } .xl\:appearance-none { diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index d8b5cdfc0fbe..d1fc51dd4f2a 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -569,9 +569,8 @@ samp { } } -.list-reset { - list-style: none; - padding: 0; +.list-none { + list-style-type: none; } .appearance-none { @@ -6602,9 +6601,8 @@ samp { } @media (min-width: 640px) { - .sm\:list-reset { - list-style: none; - padding: 0; + .sm\:list-none { + list-style-type: none; } .sm\:appearance-none { @@ -12612,9 +12610,8 @@ samp { } @media (min-width: 768px) { - .md\:list-reset { - list-style: none; - padding: 0; + .md\:list-none { + list-style-type: none; } .md\:appearance-none { @@ -18622,9 +18619,8 @@ samp { } @media (min-width: 1024px) { - .lg\:list-reset { - list-style: none; - padding: 0; + .lg\:list-none { + list-style-type: none; } .lg\:appearance-none { @@ -24632,9 +24628,8 @@ samp { } @media (min-width: 1280px) { - .xl\:list-reset { - list-style: none; - padding: 0; + .xl\:list-none { + list-style-type: none; } .xl\:appearance-none { diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index 48104ae6ccb3..52e5e1d73d2e 100644 --- a/defaultConfig.stub.js +++ b/defaultConfig.stub.js @@ -33,7 +33,7 @@ module.exports = { fontWeight: ['responsive', 'hover', 'focus'], height: ['responsive'], lineHeight: ['responsive'], - listStyle: ['responsive'], + listStyleType: ['responsive'], margin: ['responsive'], maxHeight: ['responsive'], maxWidth: ['responsive'], diff --git a/src/corePlugins.js b/src/corePlugins.js index 7711076af1ef..570829303a1b 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -1,5 +1,5 @@ import preflight from './plugins/preflight' -import listStyle from './plugins/listStyle' +import listStyleType from './plugins/listStyleType' import appearance from './plugins/appearance' import backgroundAttachment from './plugins/backgroundAttachment' import backgroundColor from './plugins/backgroundColor' @@ -66,7 +66,7 @@ import configurePlugins from './util/configurePlugins' export default function({ corePlugins: corePluginConfig }) { return configurePlugins(corePluginConfig, { preflight, - listStyle, + listStyleType, appearance, backgroundAttachment, backgroundColor, diff --git a/src/plugins/listStyle.js b/src/plugins/listStyleType.js similarity index 53% rename from src/plugins/listStyle.js rename to src/plugins/listStyleType.js index 13a3f5cd258f..ed609fe14ba7 100644 --- a/src/plugins/listStyle.js +++ b/src/plugins/listStyleType.js @@ -2,12 +2,11 @@ export default function() { return function({ addUtilities, config }) { addUtilities( { - '.list-reset': { - 'list-style': 'none', - padding: '0', + '.list-none': { + 'list-style-type': 'none', }, }, - config('variants.listStyle') + config('variants.listStyleType') ) } } From 7b8ebc525e6d68d67f815b66898577f4ab60b3f6 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 13 Mar 2019 14:19:29 -0400 Subject: [PATCH 2/5] Make listStyleType customizable --- defaultTheme.js | 3 +++ src/plugins/listStyleType.js | 22 ++++++++++++++-------- 2 files changed, 17 insertions(+), 8 deletions(-) diff --git a/defaultTheme.js b/defaultTheme.js index 2d35ec952a67..68528cca4c1c 100644 --- a/defaultTheme.js +++ b/defaultTheme.js @@ -329,5 +329,8 @@ module.exports = function() { '0': 0, default: 1, }, + listStyleType: { + none: 'none', + }, } } diff --git a/src/plugins/listStyleType.js b/src/plugins/listStyleType.js index ed609fe14ba7..224a42e341df 100644 --- a/src/plugins/listStyleType.js +++ b/src/plugins/listStyleType.js @@ -1,12 +1,18 @@ +import _ from 'lodash' + export default function() { - return function({ addUtilities, config }) { - addUtilities( - { - '.list-none': { - 'list-style-type': 'none', - }, - }, - config('variants.listStyleType') + return function({ addUtilities, e, config }) { + const utilities = _.fromPairs( + _.map(config('theme.listStyleType'), (value, modifier) => { + return [ + `.${e(`list-${modifier}`)}`, + { + 'list-style-type': value, + }, + ] + }) ) + + addUtilities(utilities, config('variants.listStyleType')) } } From 7178c43d2c55b39aa269bf435b9ceebdb8ddeab0 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 13 Mar 2019 14:23:06 -0400 Subject: [PATCH 3/5] Add list-disc and list-decimal by default --- .../fixtures/tailwind-output-important.css | 40 +++++++++++++++++++ __tests__/fixtures/tailwind-output.css | 40 +++++++++++++++++++ defaultTheme.js | 2 + 3 files changed, 82 insertions(+) diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 6690d5d2de0b..970004678a91 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -573,6 +573,14 @@ samp { list-style-type: none !important; } +.list-disc { + list-style-type: disc !important; +} + +.list-decimal { + list-style-type: decimal !important; +} + .appearance-none { appearance: none !important; } @@ -6605,6 +6613,14 @@ samp { list-style-type: none !important; } + .sm\:list-disc { + list-style-type: disc !important; + } + + .sm\:list-decimal { + list-style-type: decimal !important; + } + .sm\:appearance-none { appearance: none !important; } @@ -12614,6 +12630,14 @@ samp { list-style-type: none !important; } + .md\:list-disc { + list-style-type: disc !important; + } + + .md\:list-decimal { + list-style-type: decimal !important; + } + .md\:appearance-none { appearance: none !important; } @@ -18623,6 +18647,14 @@ samp { list-style-type: none !important; } + .lg\:list-disc { + list-style-type: disc !important; + } + + .lg\:list-decimal { + list-style-type: decimal !important; + } + .lg\:appearance-none { appearance: none !important; } @@ -24632,6 +24664,14 @@ samp { list-style-type: none !important; } + .xl\:list-disc { + list-style-type: disc !important; + } + + .xl\:list-decimal { + list-style-type: decimal !important; + } + .xl\:appearance-none { appearance: none !important; } diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index d1fc51dd4f2a..bc38891219d0 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -573,6 +573,14 @@ samp { list-style-type: none; } +.list-disc { + list-style-type: disc; +} + +.list-decimal { + list-style-type: decimal; +} + .appearance-none { appearance: none; } @@ -6605,6 +6613,14 @@ samp { list-style-type: none; } + .sm\:list-disc { + list-style-type: disc; + } + + .sm\:list-decimal { + list-style-type: decimal; + } + .sm\:appearance-none { appearance: none; } @@ -12614,6 +12630,14 @@ samp { list-style-type: none; } + .md\:list-disc { + list-style-type: disc; + } + + .md\:list-decimal { + list-style-type: decimal; + } + .md\:appearance-none { appearance: none; } @@ -18623,6 +18647,14 @@ samp { list-style-type: none; } + .lg\:list-disc { + list-style-type: disc; + } + + .lg\:list-decimal { + list-style-type: decimal; + } + .lg\:appearance-none { appearance: none; } @@ -24632,6 +24664,14 @@ samp { list-style-type: none; } + .xl\:list-disc { + list-style-type: disc; + } + + .xl\:list-decimal { + list-style-type: decimal; + } + .xl\:appearance-none { appearance: none; } diff --git a/defaultTheme.js b/defaultTheme.js index 68528cca4c1c..5da60f9adeb5 100644 --- a/defaultTheme.js +++ b/defaultTheme.js @@ -331,6 +331,8 @@ module.exports = function() { }, listStyleType: { none: 'none', + disc: 'disc', + decimal: 'decimal', }, } } From e13413153f150b9e39abee12d53df945a57e010d Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 13 Mar 2019 14:26:07 -0400 Subject: [PATCH 4/5] Add list-inside and list-outside utilities --- .../fixtures/tailwind-output-important.css | 160 +++++++++++------- __tests__/fixtures/tailwind-output.css | 160 +++++++++++------- defaultConfig.stub.js | 1 + src/corePlugins.js | 6 +- src/plugins/listStylePosition.js | 11 ++ 5 files changed, 216 insertions(+), 122 deletions(-) create mode 100644 src/plugins/listStylePosition.js diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 970004678a91..c2fcf8faf53a 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -569,18 +569,6 @@ samp { } } -.list-none { - list-style-type: none !important; -} - -.list-disc { - list-style-type: disc !important; -} - -.list-decimal { - list-style-type: decimal !important; -} - .appearance-none { appearance: none !important; } @@ -3187,6 +3175,26 @@ samp { line-height: 2 !important; } +.list-inside { + list-style-position: inside !important; +} + +.list-outside { + list-style-position: outside !important; +} + +.list-none { + list-style-type: none !important; +} + +.list-disc { + list-style-type: disc !important; +} + +.list-decimal { + list-style-type: decimal !important; +} + .m-0 { margin: 0 !important; } @@ -6609,18 +6617,6 @@ samp { } @media (min-width: 640px) { - .sm\:list-none { - list-style-type: none !important; - } - - .sm\:list-disc { - list-style-type: disc !important; - } - - .sm\:list-decimal { - list-style-type: decimal !important; - } - .sm\:appearance-none { appearance: none !important; } @@ -9219,6 +9215,26 @@ samp { line-height: 2 !important; } + .sm\:list-inside { + list-style-position: inside !important; + } + + .sm\:list-outside { + list-style-position: outside !important; + } + + .sm\:list-none { + list-style-type: none !important; + } + + .sm\:list-disc { + list-style-type: disc !important; + } + + .sm\:list-decimal { + list-style-type: decimal !important; + } + .sm\:m-0 { margin: 0 !important; } @@ -12626,18 +12642,6 @@ samp { } @media (min-width: 768px) { - .md\:list-none { - list-style-type: none !important; - } - - .md\:list-disc { - list-style-type: disc !important; - } - - .md\:list-decimal { - list-style-type: decimal !important; - } - .md\:appearance-none { appearance: none !important; } @@ -15236,6 +15240,26 @@ samp { line-height: 2 !important; } + .md\:list-inside { + list-style-position: inside !important; + } + + .md\:list-outside { + list-style-position: outside !important; + } + + .md\:list-none { + list-style-type: none !important; + } + + .md\:list-disc { + list-style-type: disc !important; + } + + .md\:list-decimal { + list-style-type: decimal !important; + } + .md\:m-0 { margin: 0 !important; } @@ -18643,18 +18667,6 @@ samp { } @media (min-width: 1024px) { - .lg\:list-none { - list-style-type: none !important; - } - - .lg\:list-disc { - list-style-type: disc !important; - } - - .lg\:list-decimal { - list-style-type: decimal !important; - } - .lg\:appearance-none { appearance: none !important; } @@ -21253,6 +21265,26 @@ samp { line-height: 2 !important; } + .lg\:list-inside { + list-style-position: inside !important; + } + + .lg\:list-outside { + list-style-position: outside !important; + } + + .lg\:list-none { + list-style-type: none !important; + } + + .lg\:list-disc { + list-style-type: disc !important; + } + + .lg\:list-decimal { + list-style-type: decimal !important; + } + .lg\:m-0 { margin: 0 !important; } @@ -24660,18 +24692,6 @@ samp { } @media (min-width: 1280px) { - .xl\:list-none { - list-style-type: none !important; - } - - .xl\:list-disc { - list-style-type: disc !important; - } - - .xl\:list-decimal { - list-style-type: decimal !important; - } - .xl\:appearance-none { appearance: none !important; } @@ -27270,6 +27290,26 @@ samp { line-height: 2 !important; } + .xl\:list-inside { + list-style-position: inside !important; + } + + .xl\:list-outside { + list-style-position: outside !important; + } + + .xl\:list-none { + list-style-type: none !important; + } + + .xl\:list-disc { + list-style-type: disc !important; + } + + .xl\:list-decimal { + list-style-type: decimal !important; + } + .xl\:m-0 { margin: 0 !important; } diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index bc38891219d0..dae08ed04fab 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -569,18 +569,6 @@ samp { } } -.list-none { - list-style-type: none; -} - -.list-disc { - list-style-type: disc; -} - -.list-decimal { - list-style-type: decimal; -} - .appearance-none { appearance: none; } @@ -3187,6 +3175,26 @@ samp { line-height: 2; } +.list-inside { + list-style-position: inside; +} + +.list-outside { + list-style-position: outside; +} + +.list-none { + list-style-type: none; +} + +.list-disc { + list-style-type: disc; +} + +.list-decimal { + list-style-type: decimal; +} + .m-0 { margin: 0; } @@ -6609,18 +6617,6 @@ samp { } @media (min-width: 640px) { - .sm\:list-none { - list-style-type: none; - } - - .sm\:list-disc { - list-style-type: disc; - } - - .sm\:list-decimal { - list-style-type: decimal; - } - .sm\:appearance-none { appearance: none; } @@ -9219,6 +9215,26 @@ samp { line-height: 2; } + .sm\:list-inside { + list-style-position: inside; + } + + .sm\:list-outside { + list-style-position: outside; + } + + .sm\:list-none { + list-style-type: none; + } + + .sm\:list-disc { + list-style-type: disc; + } + + .sm\:list-decimal { + list-style-type: decimal; + } + .sm\:m-0 { margin: 0; } @@ -12626,18 +12642,6 @@ samp { } @media (min-width: 768px) { - .md\:list-none { - list-style-type: none; - } - - .md\:list-disc { - list-style-type: disc; - } - - .md\:list-decimal { - list-style-type: decimal; - } - .md\:appearance-none { appearance: none; } @@ -15236,6 +15240,26 @@ samp { line-height: 2; } + .md\:list-inside { + list-style-position: inside; + } + + .md\:list-outside { + list-style-position: outside; + } + + .md\:list-none { + list-style-type: none; + } + + .md\:list-disc { + list-style-type: disc; + } + + .md\:list-decimal { + list-style-type: decimal; + } + .md\:m-0 { margin: 0; } @@ -18643,18 +18667,6 @@ samp { } @media (min-width: 1024px) { - .lg\:list-none { - list-style-type: none; - } - - .lg\:list-disc { - list-style-type: disc; - } - - .lg\:list-decimal { - list-style-type: decimal; - } - .lg\:appearance-none { appearance: none; } @@ -21253,6 +21265,26 @@ samp { line-height: 2; } + .lg\:list-inside { + list-style-position: inside; + } + + .lg\:list-outside { + list-style-position: outside; + } + + .lg\:list-none { + list-style-type: none; + } + + .lg\:list-disc { + list-style-type: disc; + } + + .lg\:list-decimal { + list-style-type: decimal; + } + .lg\:m-0 { margin: 0; } @@ -24660,18 +24692,6 @@ samp { } @media (min-width: 1280px) { - .xl\:list-none { - list-style-type: none; - } - - .xl\:list-disc { - list-style-type: disc; - } - - .xl\:list-decimal { - list-style-type: decimal; - } - .xl\:appearance-none { appearance: none; } @@ -27270,6 +27290,26 @@ samp { line-height: 2; } + .xl\:list-inside { + list-style-position: inside; + } + + .xl\:list-outside { + list-style-position: outside; + } + + .xl\:list-none { + list-style-type: none; + } + + .xl\:list-disc { + list-style-type: disc; + } + + .xl\:list-decimal { + list-style-type: decimal; + } + .xl\:m-0 { margin: 0; } diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index 52e5e1d73d2e..044b2555a6e6 100644 --- a/defaultConfig.stub.js +++ b/defaultConfig.stub.js @@ -33,6 +33,7 @@ module.exports = { fontWeight: ['responsive', 'hover', 'focus'], height: ['responsive'], lineHeight: ['responsive'], + listStylePosition: ['responsive'], listStyleType: ['responsive'], margin: ['responsive'], maxHeight: ['responsive'], diff --git a/src/corePlugins.js b/src/corePlugins.js index 570829303a1b..b26d6dfe067e 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -1,5 +1,4 @@ import preflight from './plugins/preflight' -import listStyleType from './plugins/listStyleType' import appearance from './plugins/appearance' import backgroundAttachment from './plugins/backgroundAttachment' import backgroundColor from './plugins/backgroundColor' @@ -27,6 +26,8 @@ import fontFamily from './plugins/fontFamily' import fontWeight from './plugins/fontWeight' import height from './plugins/height' import lineHeight from './plugins/lineHeight' +import listStylePosition from './plugins/listStylePosition' +import listStyleType from './plugins/listStyleType' import margin from './plugins/margin' import maxHeight from './plugins/maxHeight' import maxWidth from './plugins/maxWidth' @@ -66,7 +67,6 @@ import configurePlugins from './util/configurePlugins' export default function({ corePlugins: corePluginConfig }) { return configurePlugins(corePluginConfig, { preflight, - listStyleType, appearance, backgroundAttachment, backgroundColor, @@ -94,6 +94,8 @@ export default function({ corePlugins: corePluginConfig }) { fontWeight, height, lineHeight, + listStylePosition, + listStyleType, margin, maxHeight, maxWidth, diff --git a/src/plugins/listStylePosition.js b/src/plugins/listStylePosition.js new file mode 100644 index 000000000000..230dd94211d4 --- /dev/null +++ b/src/plugins/listStylePosition.js @@ -0,0 +1,11 @@ +export default function() { + return function({ addUtilities, config }) { + addUtilities( + { + '.list-inside': { 'list-style-position': 'inside' }, + '.list-outside': { 'list-style-position': 'outside' }, + }, + config('variants.listStylePosition') + ) + } +} From 4be5af28ff6c05c74e3589eba3c4a558b3ec2dc1 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 13 Mar 2019 19:42:57 -0400 Subject: [PATCH 5/5] Unstyle lists by default --- __tests__/fixtures/tailwind-output-important.css | 2 ++ __tests__/fixtures/tailwind-output.css | 2 ++ src/plugins/css/preflight.css | 2 ++ 3 files changed, 6 insertions(+) diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index c2fcf8faf53a..e50e8b5b9ebc 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -414,7 +414,9 @@ fieldset { ol, ul { + list-style: none; margin: 0; + padding: 0; } /** diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index dae08ed04fab..a0eee25a23dd 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -414,7 +414,9 @@ fieldset { ol, ul { + list-style: none; margin: 0; + padding: 0; } /** diff --git a/src/plugins/css/preflight.css b/src/plugins/css/preflight.css index c6e9bfc5497a..f9beeefb3dcf 100644 --- a/src/plugins/css/preflight.css +++ b/src/plugins/css/preflight.css @@ -62,7 +62,9 @@ fieldset { ol, ul { + list-style: none; margin: 0; + padding: 0; } /**