Partially revert tuple syntax PR for screens: #6104 (#6289)

* partially revert tuple syntax PR for `screens`: #6104

* update changelog

Author: RobinMalfait

CHANGELOG.md

@@ -29,6 +29,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Deprecate `decoration-slice` and `decoration-break` in favor `box-decoration-slice` and `box-decoration-break` _(non-breaking)_ ([#6004](https://github.com/tailwindlabs/tailwindcss/pull/6004))
+- Removed tuple syntax for `screens` ([#6289](https://github.com/tailwindlabs/tailwindcss/pull/6289))
 
 ## [3.0.0-alpha.2] - 2021-11-08
 

src/util/normalizeScreens.js

@@ -7,14 +7,17 @@
  *   - { sm: '100px', md: '200px' } // Object with string values
  *   - { sm: { min: '100px' }, md: { max: '100px' } } // Object with object values
  *   - { sm: [{ min: '100px' }, { max: '200px' }] } // Object with object array (multiple values)
- *   - [['sm', '100px'], ['md', '200px']] // Tuple object
  *
  * Output(s):
  *   - [{ name: 'sm', values: [{ min: '100px', max: '200px' }] }] // List of objects, that contains multiple values
  */
-export function normalizeScreens(screens) {
+export function normalizeScreens(screens, root = true) {
   if (Array.isArray(screens)) {
     return screens.map((screen) => {
+      if (root && Array.isArray(screen)) {
+        throw new Error('The tuple syntax is not supported for `screens`.')
+      }
+
       if (typeof screen === 'string') {
         return { name: screen.toString(), values: [{ min: screen, max: undefined }] }
       }
@@ -34,7 +37,7 @@ export function normalizeScreens(screens) {
     })
   }
 
-  return normalizeScreens(Object.entries(screens ?? {}))
+  return normalizeScreens(Object.entries(screens ?? {}), false)
 }
 
 function resolveValue({ 'min-width': _minWidth, min = _minWidth, max, raw } = {}) {

tests/containerPlugin.test.js

@@ -343,39 +343,3 @@ test('container can use variants', () => {
     `)
   })
 })
-
-test('container can use screens with tuple syntax', () => {
-  let config = {
-    content: [{ raw: html`<div class="container"></div>` }],
-    theme: {
-      screens: [
-        [1800, { min: '1800px' }],
-        [1200, { min: '1200px' }],
-        [768, { min: '768px' }],
-      ],
-    },
-  }
-
-  return run('@tailwind components', config).then((result) => {
-    expect(result.css).toMatchFormattedCss(css`
-      .container {
-        width: 100%;
-      }
-      @media (min-width: 768px) {
-        .container {
-          max-width: 768px;
-        }
-      }
-      @media (min-width: 1200px) {
-        .container {
-          max-width: 1200px;
-        }
-      }
-      @media (min-width: 1800px) {
-        .container {
-          max-width: 1800px;
-        }
-      }
-    `)
-  })
-})

tests/normalize-screens.test.js

@@ -60,39 +60,3 @@ it('should normalize an object with object values (min-width normalized to width
     { name: 'b', values: [{ min: undefined, max: '1200px' }] },
   ])
 })
-
-it('should normalize a tuple with string values', () => {
-  let screens = [
-    ['a', '768px'],
-    ['b', '1200px'],
-  ]
-
-  expect(normalizeScreens(screens)).toEqual([
-    { name: 'a', values: [{ min: '768px', max: undefined }] },
-    { name: 'b', values: [{ min: '1200px', max: undefined }] },
-  ])
-})
-
-it('should normalize a tuple with object values', () => {
-  let screens = [
-    ['a', { min: '768px' }],
-    ['b', { max: '1200px' }],
-  ]
-
-  expect(normalizeScreens(screens)).toEqual([
-    { name: 'a', values: [{ min: '768px', max: undefined }] },
-    { name: 'b', values: [{ min: undefined, max: '1200px' }] },
-  ])
-})
-
-it('should normalize a tuple with object values (min-width normalized to width)', () => {
-  let screens = [
-    ['a', { 'min-width': '768px' }],
-    ['b', { max: '1200px' }],
-  ]
-
-  expect(normalizeScreens(screens)).toEqual([
-    { name: 'a', values: [{ min: '768px', max: undefined }] },
-    { name: 'b', values: [{ min: undefined, max: '1200px' }] },
-  ])
-})

tests/tailwind-screens.test.js

@@ -65,51 +65,3 @@ test('`@tailwind screens` works as an alias for `@tailwind variants`', async ()
     `)
   })
 })
-
-test('screen names are in the correct order', () => {
-  // Using custom css function here, because otherwise with String.raw, we run
-  // into an issue with `\31 ` escapes. If we use `\31 ` then JS complains
-  // about strict mode. But `\\31 ` is not what it expected.
-  function css(templates) {
-    return templates.join('')
-  }
-
-  let config = {
-    content: [
-      {
-        raw: html`<div
-          class="768:font-light 1200:font-normal 1800:font-bold max-w-768 container"
-        ></div>`,
-      },
-    ],
-    theme: {
-      screens: [
-        [1800, { max: '1800px' }],
-        [1200, { max: '1200px' }],
-        [768, { max: '768px' }],
-      ],
-    },
-  }
-
-  return run('@tailwind utilities;', config).then((result) => {
-    return expect(result.css).toMatchFormattedCss(css`
-      @media (max-width: 1800px) {
-        .\\31 800\\:font-bold {
-          font-weight: 700;
-        }
-      }
-
-      @media (max-width: 1200px) {
-        .\\31 200\\:font-normal {
-          font-weight: 400;
-        }
-      }
-
-      @media (max-width: 768px) {
-        .\\37 68\\:font-light {
-          font-weight: 300;
-        }
-      }
-    `)
-  })
-})