From 36357786bf8bd154aaa61e4cf99a8267592bd444 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 7 Dec 2021 18:49:40 +0100 Subject: [PATCH] Partially revert tuple syntax PR for `screens`: #6104 (#6289) * partially revert tuple syntax PR for `screens`: #6104 * update changelog --- CHANGELOG.md | 1 + src/util/normalizeScreens.js | 9 ++++--- tests/containerPlugin.test.js | 36 ------------------------- tests/normalize-screens.test.js | 36 ------------------------- tests/tailwind-screens.test.js | 48 --------------------------------- 5 files changed, 7 insertions(+), 123 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ac40c6b3b..020862170 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/util/normalizeScreens.js b/src/util/normalizeScreens.js index e7bcefe6b..8f2ff7093 100644 --- a/src/util/normalizeScreens.js +++ b/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 } = {}) { diff --git a/tests/containerPlugin.test.js b/tests/containerPlugin.test.js index 7dfc73521..51b7093b9 100644 --- a/tests/containerPlugin.test.js +++ b/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`
` }], - 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; - } - } - `) - }) -}) diff --git a/tests/normalize-screens.test.js b/tests/normalize-screens.test.js index 1a5b4a886..98fc22c57 100644 --- a/tests/normalize-screens.test.js +++ b/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' }] }, - ]) -}) diff --git a/tests/tailwind-screens.test.js b/tests/tailwind-screens.test.js index 232ae0113..784bf40c7 100644 --- a/tests/tailwind-screens.test.js +++ b/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`
`, - }, - ], - 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; - } - } - `) - }) -})