Change special keyword 'default' to 'DEFAULT', make negative prefixes work across all plugins

__tests__/containerPlugin.test.js

@@ -217,7 +217,7 @@ test('responsive horizontal padding can be included by default', () => {
         },
         container: {
           padding: {
-            default: '1rem',
+            DEFAULT: '1rem',
             sm: '2rem',
             lg: '4rem',
             xl: '5rem',

__tests__/flattenColorPalette.test.js

@@ -8,7 +8,7 @@ test('it flattens nested color objects', () => {
         25: 'rgba(255,255,255,.25)',
         50: 'rgba(255,255,255,.5)',
         75: 'rgba(255,255,255,.75)',
-        default: '#fff',
+        DEFAULT: '#fff',
       },
       red: {
         1: 'rgb(33,0,0)',

__tests__/plugins/boxShadow.test.js

@@ -2,13 +2,13 @@ import _ from 'lodash'
 import escapeClassName from '../../src/util/escapeClassName'
 import plugin from '../../src/plugins/boxShadow'
 
-test('box shadow can use default keyword and negative prefix syntax', () => {
+test('box shadow can use DEFAULT keyword and negative prefix syntax', () => {
   const addedUtilities = []
 
   const config = {
     theme: {
       boxShadow: {
-        default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+        DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
         md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
         '-': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
         '-md': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',

__tests__/plugins/divideWidth.test.js

@@ -5,7 +5,7 @@ test('generating divide width utilities', () => {
   const config = {
     theme: {
       divideWidth: {
-        default: '1px',
+        DEFAULT: '1px',
         '0': '0',
         '2': '2px',
         '4': '4px',

__tests__/plugins/letterSpacing.test.js

@@ -41,10 +41,12 @@ test('letter spacing can use negative prefix syntax', () => {
 
   expect(addedUtilities).toEqual([
     {
-      utilities: {
-        '.-tracking-1': { 'letter-spacing': '-0.025em' },
-        '.tracking-1': { 'letter-spacing': '0.025em' },
-      },
+      utilities: [
+        {
+          '.-tracking-1': { letterSpacing: '-0.025em' },
+          '.tracking-1': { letterSpacing: '0.025em' },
+        },
+      ],
       variants: ['responsive'],
     },
   ])

__tests__/plugins/zIndex.test.js

@@ -43,12 +43,14 @@ test('z index can use negative prefix syntax', () => {
 
   expect(addedUtilities).toEqual([
     {
-      utilities: {
-        '.-z-20': { 'z-index': '-20' },
-        '.-z-10': { 'z-index': '-10' },
-        '.z-10': { 'z-index': '10' },
-        '.z-20': { 'z-index': '20' },
-      },
+      utilities: [
+        {
+          '.-z-20': { zIndex: '-20' },
+          '.-z-10': { zIndex: '-10' },
+          '.z-10': { zIndex: '10' },
+          '.z-20': { zIndex: '20' },
+        },
+      ],
       variants: ['responsive'],
     },
   ])

__tests__/sanity.test.js

@@ -4,7 +4,7 @@ import postcss from 'postcss'
 import tailwind from '../src/index'
 import config from '../stubs/defaultConfig.stub.js'
 
-it('generates the right CSS', () => {
+it('generates the right CSS using the default settings', () => {
   const inputPath = path.resolve(`${__dirname}/fixtures/tailwind-input.css`)
   const input = fs.readFileSync(inputPath, 'utf8')
 

__tests__/variantsAtRule.test.js

@@ -648,7 +648,7 @@ test('the built-in variant pseudo-selectors are appended before any pseudo-eleme
 
 test('the default variant can be generated in a specified position', () => {
   const input = `
-    @variants focus, active, default, hover {
+    @variants focus, active, DEFAULT, hover {
       .banana { color: yellow; }
       .chocolate { color: brown; }
     }

src/lib/substituteVariantsAtRules.js

@@ -19,11 +19,11 @@ function generatePseudoClassVariant(pseudoClass, selectorPrefix = pseudoClass) {
 }
 
 function ensureIncludesDefault(variants) {
-  return variants.includes('default') ? variants : ['default', ...variants]
+  return variants.includes('DEFAULT') ? variants : ['DEFAULT', ...variants]
 }
 
 const defaultVariantGenerators = config => ({
-  default: generateVariantFunction(() => {}),
+  DEFAULT: generateVariantFunction(() => {}),
   'motion-safe': generateVariantFunction(
     ({ container, separator, modifySelectors }) => {
       const modified = modifySelectors(({ selector }) => {

src/plugins/animation.js

@@ -1,7 +1,8 @@
 import _ from 'lodash'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     const keyframesConfig = theme('keyframes')
     const keyframesStyles = _.fromPairs(
       _.toPairs(keyframesConfig).map(([name, keyframes]) => {
@@ -14,7 +15,7 @@ export default function() {
     const utilities = _.fromPairs(
       _.toPairs(animationConfig).map(([suffix, animation]) => {
         return [
-          `.${e(`animate-${suffix}`)}`,
+          nameClass('animate', suffix),
           {
             animation,
           },

src/plugins/backgroundColor.js

@@ -2,9 +2,10 @@ import _ from 'lodash'
 import flattenColorPalette from '../util/flattenColorPalette'
 import withAlphaVariable from '../util/withAlphaVariable'
 import toColorValue from '../util/toColorValue'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants, corePlugins }) {
+  return function({ addUtilities, theme, variants, corePlugins }) {
     const colors = flattenColorPalette(theme('backgroundColor'))
 
     const getProperties = value => {
@@ -21,7 +22,7 @@ export default function() {
 
     const utilities = _.fromPairs(
       _.map(colors, (value, modifier) => {
-        return [`.${e(`bg-${modifier}`)}`, getProperties(value)]
+        return [nameClass('bg', modifier), getProperties(value)]
       })
     )
 

src/plugins/backgroundImage.js

@@ -1,11 +1,12 @@
 import _ from 'lodash'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     const utilities = _.fromPairs(
       _.map(theme('backgroundImage'), (value, modifier) => {
         return [
-          `.${e(`bg-${modifier}`)}`,
+          nameClass('bg', modifier),
           {
             'background-image': value,
           },

src/plugins/backgroundPosition.js

@@ -1,11 +1,12 @@
 import _ from 'lodash'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     const utilities = _.fromPairs(
       _.map(theme('backgroundPosition'), (value, modifier) => {
         return [
-          `.${e(`bg-${modifier}`)}`,
+          nameClass('bg', modifier),
           {
             'background-position': value,
           },

src/plugins/backgroundSize.js

@@ -1,11 +1,12 @@
 import _ from 'lodash'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     const utilities = _.fromPairs(
       _.map(theme('backgroundSize'), (value, modifier) => {
         return [
-          `.${e(`bg-${modifier}`)}`,
+          nameClass('bg', modifier),
           {
             'background-size': value,
           },

src/plugins/borderColor.js

@@ -1,10 +1,11 @@
 import _ from 'lodash'
 import flattenColorPalette from '../util/flattenColorPalette'
+import nameClass from '../util/nameClass'
 import toColorValue from '../util/toColorValue'
 import withAlphaVariable from '../util/withAlphaVariable'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants, corePlugins }) {
+  return function({ addUtilities, theme, variants, corePlugins }) {
     const colors = flattenColorPalette(theme('borderColor'))
 
     const getProperties = value => {
@@ -20,8 +21,8 @@ export default function() {
     }
 
     const utilities = _.fromPairs(
-      _.map(_.omit(colors, 'default'), (value, modifier) => {
-        return [`.${e(`border-${modifier}`)}`, getProperties(value)]
+      _.map(_.omit(colors, 'DEFAULT'), (value, modifier) => {
+        return [nameClass('border', modifier), getProperties(value)]
       })
     )
 

src/plugins/borderRadius.js

@@ -1,40 +1,41 @@
 import _ from 'lodash'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     const generators = [
       (value, modifier) => ({
-        [`.${e(`rounded${modifier}`)}`]: { borderRadius: `${value}` },
+        [nameClass('rounded', modifier)]: { borderRadius: `${value}` },
       }),
       (value, modifier) => ({
-        [`.${e(`rounded-t${modifier}`)}`]: {
+        [nameClass('rounded-t', modifier)]: {
           borderTopLeftRadius: `${value}`,
           borderTopRightRadius: `${value}`,
         },
-        [`.${e(`rounded-r${modifier}`)}`]: {
+        [nameClass('rounded-r', modifier)]: {
           borderTopRightRadius: `${value}`,
           borderBottomRightRadius: `${value}`,
         },
-        [`.${e(`rounded-b${modifier}`)}`]: {
+        [nameClass('rounded-b', modifier)]: {
           borderBottomRightRadius: `${value}`,
           borderBottomLeftRadius: `${value}`,
         },
-        [`.${e(`rounded-l${modifier}`)}`]: {
+        [nameClass('rounded-l', modifier)]: {
           borderTopLeftRadius: `${value}`,
           borderBottomLeftRadius: `${value}`,
         },
       }),
       (value, modifier) => ({
-        [`.${e(`rounded-tl${modifier}`)}`]: { borderTopLeftRadius: `${value}` },
-        [`.${e(`rounded-tr${modifier}`)}`]: { borderTopRightRadius: `${value}` },
-        [`.${e(`rounded-br${modifier}`)}`]: { borderBottomRightRadius: `${value}` },
-        [`.${e(`rounded-bl${modifier}`)}`]: { borderBottomLeftRadius: `${value}` },
+        [nameClass('rounded-tl', modifier)]: { borderTopLeftRadius: `${value}` },
+        [nameClass('rounded-tr', modifier)]: { borderTopRightRadius: `${value}` },
+        [nameClass('rounded-br', modifier)]: { borderBottomRightRadius: `${value}` },
+        [nameClass('rounded-bl', modifier)]: { borderBottomLeftRadius: `${value}` },
       }),
     ]
 
     const utilities = _.flatMap(generators, generator => {
       return _.flatMap(theme('borderRadius'), (value, modifier) => {
-        return generator(value, modifier === 'default' ? '' : `-${modifier}`)
+        return generator(value, modifier)
       })
     })
 

src/plugins/borderWidth.js

@@ -1,22 +1,23 @@
 import _ from 'lodash'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     const generators = [
       (value, modifier) => ({
-        [`.${e(`border${modifier}`)}`]: { borderWidth: `${value}` },
+        [nameClass('border', modifier)]: { borderWidth: `${value}` },
       }),
       (value, modifier) => ({
-        [`.${e(`border-t${modifier}`)}`]: { borderTopWidth: `${value}` },
-        [`.${e(`border-r${modifier}`)}`]: { borderRightWidth: `${value}` },
-        [`.${e(`border-b${modifier}`)}`]: { borderBottomWidth: `${value}` },
-        [`.${e(`border-l${modifier}`)}`]: { borderLeftWidth: `${value}` },
+        [nameClass('border-t', modifier)]: { borderTopWidth: `${value}` },
+        [nameClass('border-r', modifier)]: { borderRightWidth: `${value}` },
+        [nameClass('border-b', modifier)]: { borderBottomWidth: `${value}` },
+        [nameClass('border-l', modifier)]: { borderLeftWidth: `${value}` },
       }),
     ]
 
     const utilities = _.flatMap(generators, generator => {
       return _.flatMap(theme('borderWidth'), (value, modifier) => {
-        return generator(value, modifier === 'default' ? '' : `-${modifier}`)
+        return generator(value, modifier)
       })
     })
 

src/plugins/boxShadow.js

@@ -1,14 +1,12 @@
 import _ from 'lodash'
-import prefixNegativeModifiers from '../util/prefixNegativeModifiers'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     const utilities = _.fromPairs(
       _.map(theme('boxShadow'), (value, modifier) => {
-        const className =
-          modifier === 'default' ? 'shadow' : `${e(prefixNegativeModifiers('shadow', modifier))}`
         return [
-          `.${className}`,
+          nameClass('shadow', modifier),
           {
             'box-shadow': value,
           },

src/plugins/container.js

@@ -30,7 +30,7 @@ function mapMinWidthsToPadding(minWidths, screens, paddings) {
   if (!_.isObject(paddings)) {
     return [
       {
-        screen: 'default',
+        screen: 'DEFAULT',
         minWidth: 0,
         padding: paddings,
       },
@@ -39,11 +39,11 @@ function mapMinWidthsToPadding(minWidths, screens, paddings) {
 
   const mapping = []
 
-  if (paddings.default) {
+  if (paddings.DEFAULT) {
     mapping.push({
-      screen: 'default',
+      screen: 'DEFAULT',
       minWidth: 0,
-      padding: paddings.default,
+      padding: paddings.DEFAULT,
     })
   }
 

src/plugins/css/preflight.css

@@ -99,7 +99,7 @@ html {
   box-sizing: border-box; /* 1 */
   border-width: 0; /* 2 */
   border-style: solid; /* 2 */
-  border-color: theme('borderColor.default', currentColor); /* 2 */
+  border-color: theme('borderColor.DEFAULT', currentColor); /* 2 */
 }
 
 /*

src/plugins/cursor.js

@@ -1,11 +1,12 @@
 import _ from 'lodash'
+import nameClass from '../util/nameClass'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, theme, variants }) {
     const utilities = _.fromPairs(
       _.map(theme('cursor'), (value, modifier) => {
         return [
-          `.${e(`cursor-${modifier}`)}`,
+          nameClass('cursor', modifier),
           {
             cursor: value,
           },

src/plugins/divideColor.js

@@ -1,10 +1,11 @@
 import _ from 'lodash'
 import flattenColorPalette from '../util/flattenColorPalette'
+import nameClass from '../util/nameClass'
 import toColorValue from '../util/toColorValue'
 import withAlphaVariable from '../util/withAlphaVariable'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants, corePlugins }) {
+  return function({ addUtilities, theme, variants, corePlugins }) {
     const colors = flattenColorPalette(theme('divideColor'))
 
     const getProperties = value => {
@@ -20,9 +21,9 @@ export default function() {
     }
 
     const utilities = _.fromPairs(
-      _.map(_.omit(colors, 'default'), (value, modifier) => {
+      _.map(_.omit(colors, 'DEFAULT'), (value, modifier) => {
         return [
-          `.${e(`divide-${modifier}`)} > :not(template) ~ :not(template)`,
+          `${nameClass('divide', modifier)} > :not(template) ~ :not(template)`,
           getProperties(value),
         ]
       })