Merge pull request #761 from tailwindcss/list-utilities

Rework list utilities

__tests__/fixtures/tailwind-output-important.css

@@ -414,7 +414,9 @@ fieldset {
 
 ol,
 ul {
+  list-style: none;
   margin: 0;
+  padding: 0;
 }
 
 /**
@@ -579,11 +581,6 @@ samp {
   }
 }
 
-.list-reset {
-  list-style: none !important;
-  padding: 0 !important;
-}
-
 .appearance-none {
   appearance: none !important;
 }
@@ -3190,6 +3187,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;
 }
@@ -6612,11 +6629,6 @@ samp {
 }
 
 @media (min-width: 640px) {
-  .sm\:list-reset {
-    list-style: none !important;
-    padding: 0 !important;
-  }
-
   .sm\:appearance-none {
     appearance: none !important;
   }
@@ -9215,6 +9227,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;
   }
@@ -12622,11 +12654,6 @@ samp {
 }
 
 @media (min-width: 768px) {
-  .md\:list-reset {
-    list-style: none !important;
-    padding: 0 !important;
-  }
-
   .md\:appearance-none {
     appearance: none !important;
   }
@@ -15225,6 +15252,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;
   }
@@ -18632,11 +18679,6 @@ samp {
 }
 
 @media (min-width: 1024px) {
-  .lg\:list-reset {
-    list-style: none !important;
-    padding: 0 !important;
-  }
-
   .lg\:appearance-none {
     appearance: none !important;
   }
@@ -21235,6 +21277,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;
   }
@@ -24642,11 +24704,6 @@ samp {
 }
 
 @media (min-width: 1280px) {
-  .xl\:list-reset {
-    list-style: none !important;
-    padding: 0 !important;
-  }
-
   .xl\:appearance-none {
     appearance: none !important;
   }
@@ -27245,6 +27302,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;
   }

__tests__/fixtures/tailwind-output.css

@@ -414,7 +414,9 @@ fieldset {
 
 ol,
 ul {
+  list-style: none;
   margin: 0;
+  padding: 0;
 }
 
 /**
@@ -579,11 +581,6 @@ samp {
   }
 }
 
-.list-reset {
-  list-style: none;
-  padding: 0;
-}
-
 .appearance-none {
   appearance: none;
 }
@@ -3190,6 +3187,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;
 }
@@ -6612,11 +6629,6 @@ samp {
 }
 
 @media (min-width: 640px) {
-  .sm\:list-reset {
-    list-style: none;
-    padding: 0;
-  }
-
   .sm\:appearance-none {
     appearance: none;
   }
@@ -9215,6 +9227,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;
   }
@@ -12622,11 +12654,6 @@ samp {
 }
 
 @media (min-width: 768px) {
-  .md\:list-reset {
-    list-style: none;
-    padding: 0;
-  }
-
   .md\:appearance-none {
     appearance: none;
   }
@@ -15225,6 +15252,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;
   }
@@ -18632,11 +18679,6 @@ samp {
 }
 
 @media (min-width: 1024px) {
-  .lg\:list-reset {
-    list-style: none;
-    padding: 0;
-  }
-
   .lg\:appearance-none {
     appearance: none;
   }
@@ -21235,6 +21277,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;
   }
@@ -24642,11 +24704,6 @@ samp {
 }
 
 @media (min-width: 1280px) {
-  .xl\:list-reset {
-    list-style: none;
-    padding: 0;
-  }
-
   .xl\:appearance-none {
     appearance: none;
   }
@@ -27245,6 +27302,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;
   }

defaultConfig.stub.js

@@ -33,7 +33,8 @@ module.exports = {
     fontWeight: ['responsive', 'hover', 'focus'],
     height: ['responsive'],
     lineHeight: ['responsive'],
-    listStyle: ['responsive'],
+    listStylePosition: ['responsive'],
+    listStyleType: ['responsive'],
     margin: ['responsive'],
     maxHeight: ['responsive'],
     maxWidth: ['responsive'],

defaultTheme.js

@@ -329,5 +329,10 @@ module.exports = function() {
       '0': 0,
       default: 1,
     },
+    listStyleType: {
+      none: 'none',
+      disc: 'disc',
+      decimal: 'decimal',
+    },
   }
 }

src/corePlugins.js

@@ -1,5 +1,4 @@
 import preflight from './plugins/preflight'
-import listStyle from './plugins/listStyle'
 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,
-    listStyle,
     appearance,
     backgroundAttachment,
     backgroundColor,
@@ -94,6 +94,8 @@ export default function({ corePlugins: corePluginConfig }) {
     fontWeight,
     height,
     lineHeight,
+    listStylePosition,
+    listStyleType,
     margin,
     maxHeight,
     maxWidth,

src/plugins/css/preflight.css

@@ -62,7 +62,9 @@ fieldset {
 
 ol,
 ul {
+  list-style: none;
   margin: 0;
+  padding: 0;
 }
 
 /**

src/plugins/listStyle.js

@@ -1,13 +0,0 @@
-export default function() {
-  return function({ addUtilities, config }) {
-    addUtilities(
-      {
-        '.list-reset': {
-          'list-style': 'none',
-          padding: '0',
-        },
-      },
-      config('variants.listStyle')
-    )
-  }
-}

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')
+    )
+  }
+}

src/plugins/listStyleType.js

@@ -0,0 +1,18 @@
+import _ from 'lodash'
+
+export default function() {
+  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'))
+  }
+}