From 54f07e2a9bb85c3e05047c7e6648c5e8ab796140 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 15 Jul 2020 10:44:17 -0400 Subject: [PATCH] Update tests to account for new `layer` at-rule --- __tests__/containerPlugin.test.js | 234 +++++----- __tests__/processPlugins.test.js | 669 +++++++++++++++++------------ __tests__/responsiveAtRule.test.js | 192 ++++++--- __tests__/targetMode.test.js | 62 +-- 4 files changed, 692 insertions(+), 465 deletions(-) diff --git a/__tests__/containerPlugin.test.js b/__tests__/containerPlugin.test.js index 8f1ae2dbc..ece318e29 100644 --- a/__tests__/containerPlugin.test.js +++ b/__tests__/containerPlugin.test.js @@ -25,18 +25,22 @@ test.only('options are not required', () => { const { components } = processPlugins([container()], config()) expect(css(components)).toMatchCss(` - .container { width: 100% } - @media (min-width: 576px) { - .container { max-width: 576px } - } - @media (min-width: 768px) { - .container { max-width: 768px } - } - @media (min-width: 992px) { - .container { max-width: 992px } - } - @media (min-width: 1200px) { - .container { max-width: 1200px } + @layer components { + @variants { + .container { width: 100% } + @media (min-width: 576px) { + .container { max-width: 576px } + } + @media (min-width: 768px) { + .container { max-width: 768px } + } + @media (min-width: 992px) { + .container { max-width: 992px } + } + @media (min-width: 1200px) { + .container { max-width: 1200px } + } + } } `) }) @@ -54,12 +58,16 @@ test.only('screens can be passed explicitly', () => { ) expect(css(components)).toMatchCss(` - .container { width: 100% } - @media (min-width: 400px) { - .container { max-width: 400px } - } - @media (min-width: 500px) { - .container { max-width: 500px } + @layer components { + @variants { + .container { width: 100% } + @media (min-width: 400px) { + .container { max-width: 400px } + } + @media (min-width: 500px) { + .container { max-width: 500px } + } + } } `) }) @@ -77,12 +85,16 @@ test.only('screens are ordered ascending by min-width', () => { ) expect(css(components)).toMatchCss(` - .container { width: 100% } - @media (min-width: 400px) { - .container { max-width: 400px } - } - @media (min-width: 500px) { - .container { max-width: 500px } + @layer components { + @variants { + .container { width: 100% } + @media (min-width: 400px) { + .container { max-width: 400px } + } + @media (min-width: 500px) { + .container { max-width: 500px } + } + } } `) }) @@ -104,12 +116,16 @@ test.only('screens are deduplicated by min-width', () => { ) expect(css(components)).toMatchCss(` - .container { width: 100% } - @media (min-width: 576px) { - .container { max-width: 576px } - } - @media (min-width: 768px) { - .container { max-width: 768px } + @layer components { + @variants { + .container { width: 100% } + @media (min-width: 576px) { + .container { max-width: 576px } + } + @media (min-width: 768px) { + .container { max-width: 768px } + } + } } `) }) @@ -127,22 +143,26 @@ test.only('the container can be centered by default', () => { ) expect(css(components)).toMatchCss(` - .container { - width: 100%; - margin-right: auto; - margin-left: auto - } - @media (min-width: 576px) { - .container { max-width: 576px } - } - @media (min-width: 768px) { - .container { max-width: 768px } - } - @media (min-width: 992px) { - .container { max-width: 992px } - } - @media (min-width: 1200px) { - .container { max-width: 1200px } + @layer components { + @variants { + .container { + width: 100%; + margin-right: auto; + margin-left: auto + } + @media (min-width: 576px) { + .container { max-width: 576px } + } + @media (min-width: 768px) { + .container { max-width: 768px } + } + @media (min-width: 992px) { + .container { max-width: 992px } + } + @media (min-width: 1200px) { + .container { max-width: 1200px } + } + } } `) }) @@ -160,22 +180,26 @@ test.only('horizontal padding can be included by default', () => { ) expect(css(components)).toMatchCss(` - .container { - width: 100%; - padding-right: 2rem; - padding-left: 2rem - } - @media (min-width: 576px) { - .container { max-width: 576px } - } - @media (min-width: 768px) { - .container { max-width: 768px } - } - @media (min-width: 992px) { - .container { max-width: 992px } - } - @media (min-width: 1200px) { - .container { max-width: 1200px } + @layer components { + @variants { + .container { + width: 100%; + padding-right: 2rem; + padding-left: 2rem + } + @media (min-width: 576px) { + .container { max-width: 576px } + } + @media (min-width: 768px) { + .container { max-width: 768px } + } + @media (min-width: 992px) { + .container { max-width: 992px } + } + @media (min-width: 1200px) { + .container { max-width: 1200px } + } + } } `) }) @@ -198,33 +222,37 @@ test.only('responsive horizontal padding can be included by default', () => { ) expect(css(components)).toMatchCss(` - .container { - width: 100%; - padding-right: 1rem; - padding-left: 1rem - } - @media (min-width: 576px) { - .container { - max-width: 576px; - padding-right: 2rem; - padding-left: 2rem - } - } - @media (min-width: 768px) { - .container { max-width: 768px } - } - @media (min-width: 992px) { - .container { - max-width: 992px; - padding-right: 4rem; - padding-left: 4rem - } - } - @media (min-width: 1200px) { - .container { - max-width: 1200px; - padding-right: 5rem; - padding-left: 5rem + @layer components { + @variants { + .container { + width: 100%; + padding-right: 1rem; + padding-left: 1rem + } + @media (min-width: 576px) { + .container { + max-width: 576px; + padding-right: 2rem; + padding-left: 2rem + } + } + @media (min-width: 768px) { + .container { max-width: 768px } + } + @media (min-width: 992px) { + .container { + max-width: 992px; + padding-right: 4rem; + padding-left: 4rem + } + } + @media (min-width: 1200px) { + .container { + max-width: 1200px; + padding-right: 5rem; + padding-left: 5rem + } + } } } `) @@ -245,18 +273,22 @@ test.only('setting all options at once', () => { ) expect(css(components)).toMatchCss(` - .container { - width: 100%; - margin-right: auto; - margin-left: auto; - padding-right: 2rem; - padding-left: 2rem - } - @media (min-width: 400px) { - .container { max-width: 400px } - } - @media (min-width: 500px) { - .container { max-width: 500px } + @layer components { + @variants { + .container { + width: 100%; + margin-right: auto; + margin-left: auto; + padding-right: 2rem; + padding-left: 2rem + } + @media (min-width: 400px) { + .container { max-width: 400px } + } + @media (min-width: 500px) { + .container { max-width: 500px } + } + } } `) }) diff --git a/__tests__/processPlugins.test.js b/__tests__/processPlugins.test.js index b68fda381..ff3bf7d8d 100644 --- a/__tests__/processPlugins.test.js +++ b/__tests__/processPlugins.test.js @@ -38,15 +38,17 @@ test('plugins can create utilities with object syntax', () => { expect(components.length).toBe(0) expect(css(utilities)).toMatchCss(` - @variants { - .object-fill { - object-fit: fill - } - .object-contain { - object-fit: contain - } - .object-cover { - object-fit: cover + @layer utilities { + @variants { + .object-fill { + object-fit: fill + } + .object-contain { + object-fit: contain + } + .object-cover { + object-fit: cover + } } } `) @@ -80,18 +82,20 @@ test('plugins can create utilities with arrays of objects', () => { expect(components.length).toBe(0) expect(css(utilities)).toMatchCss(` - @variants { - .object-fill { - object-fit: fill - } - .object-contain { - object-fit: contain - } - .object-cover { - object-fit: cover + @layer utilities { + @variants { + .object-fill { + object-fit: fill + } + .object-contain { + object-fit: contain + } + .object-cover { + object-fit: cover + } } } - `) + `) }) test('plugins can create utilities with raw PostCSS nodes', () => { @@ -125,18 +129,20 @@ test('plugins can create utilities with raw PostCSS nodes', () => { expect(components.length).toBe(0) expect(css(utilities)).toMatchCss(` - @variants { - .object-fill { - object-fit: fill - } - .object-contain { - object-fit: contain - } - .object-cover { - object-fit: cover + @layer utilities { + @variants { + .object-fill { + object-fit: fill + } + .object-contain { + object-fit: contain + } + .object-cover { + object-fit: cover + } } } - `) + `) }) test('plugins can create utilities with mixed object styles and PostCSS nodes', () => { @@ -169,18 +175,20 @@ test('plugins can create utilities with mixed object styles and PostCSS nodes', expect(components.length).toBe(0) expect(css(utilities)).toMatchCss(` - @variants { - .object-fill { - object-fit: fill - } - .object-contain { - object-fit: contain - } - .object-cover { - object-fit: cover + @layer utilities { + @variants { + .object-fill { + object-fit: fill + } + .object-contain { + object-fit: contain + } + .object-cover { + object-fit: cover + } } } - `) + `) }) test('plugins can create utilities with variants', () => { @@ -208,18 +216,20 @@ test('plugins can create utilities with variants', () => { expect(components.length).toBe(0) expect(css(utilities)).toMatchCss(` - @variants responsive, hover, group-hover, focus { - .object-fill { - object-fit: fill - } - .object-contain { - object-fit: contain - } - .object-cover { - object-fit: cover + @layer utilities { + @variants responsive, hover, group-hover, focus { + .object-fill { + object-fit: fill + } + .object-contain { + object-fit: contain + } + .object-cover { + object-fit: cover + } } } - `) + `) }) test('plugins can create components with object syntax', () => { @@ -244,16 +254,20 @@ test('plugins can create components with object syntax', () => { expect(utilities.length).toBe(0) expect(css(components)).toMatchCss(` - .btn-blue { - background-color: blue; - color: white; - padding: .5rem 1rem; - border-radius: .25rem + @layer components { + @variants { + .btn-blue { + background-color: blue; + color: white; + padding: .5rem 1rem; + border-radius: .25rem + } + .btn-blue:hover { + background-color: darkblue + } + } } - .btn-blue:hover { - background-color: darkblue - } - `) + `) }) test('plugins can add base styles with object syntax', () => { @@ -280,7 +294,7 @@ test('plugins can add base styles with object syntax', () => { button { font-family: inherit } - `) + `) }) test('plugins can add base styles with raw PostCSS nodes', () => { @@ -313,7 +327,7 @@ test('plugins can add base styles with raw PostCSS nodes', () => { button { font-family: inherit } - `) + `) }) test('plugins can create components with raw PostCSS nodes', () => { @@ -353,16 +367,20 @@ test('plugins can create components with raw PostCSS nodes', () => { expect(utilities.length).toBe(0) expect(css(components)).toMatchCss(` - .btn-blue { - background-color: blue; - color: white; - padding: .5rem 1rem; - border-radius: .25rem + @layer components { + @variants { + .btn-blue { + background-color: blue; + color: white; + padding: .5rem 1rem; + border-radius: .25rem + } + .btn-blue:hover { + background-color: darkblue + } + } } - .btn-blue:hover { - background-color: darkblue - } - `) + `) }) test('plugins can create components with mixed object styles and raw PostCSS nodes', () => { @@ -401,16 +419,20 @@ test('plugins can create components with mixed object styles and raw PostCSS nod expect(utilities.length).toBe(0) expect(css(components)).toMatchCss(` - .btn-blue { - background-color: blue; - color: white; - padding: .5rem 1rem; - border-radius: .25rem + @layer components { + @variants { + .btn-blue { + background-color: blue; + color: white; + padding: .5rem 1rem; + border-radius: .25rem + } + .btn-blue:hover { + background-color: darkblue + } + } } - .btn-blue:hover { - background-color: darkblue - } - `) + `) }) test('plugins can create components with media queries with object syntax', () => { @@ -444,25 +466,29 @@ test('plugins can create components with media queries with object syntax', () = expect(utilities.length).toBe(0) expect(css(components)).toMatchCss(` - .container { - width: 100% - } - @media (min-width: 100px) { - .container { - max-width: 100px + @layer components { + @variants { + .container { + width: 100% + } + @media (min-width: 100px) { + .container { + max-width: 100px + } + } + @media (min-width: 200px) { + .container { + max-width: 200px + } + } + @media (min-width: 300px) { + .container { + max-width: 300px + } + } } } - @media (min-width: 200px) { - .container { - max-width: 200px - } - } - @media (min-width: 300px) { - .container { - max-width: 300px - } - } - `) + `) }) test('media queries can be defined multiple times using objects-in-array syntax', () => { @@ -499,24 +525,28 @@ test('media queries can be defined multiple times using objects-in-array syntax' expect(utilities.length).toBe(0) expect(css(components)).toMatchCss(` - .container { - width: 100% - } - @media (min-width: 100px) { - .container { - max-width: 100px + @layer components { + @variants { + .container { + width: 100% + } + @media (min-width: 100px) { + .container { + max-width: 100px + } + } + .btn { + padding: 1rem .5rem; + display: block + } + @media (min-width: 100px) { + .btn { + display: inline-block + } + } } } - .btn { - padding: 1rem .5rem; - display: block - } - @media (min-width: 100px) { - .btn { - display: inline-block - } - } - `) + `) }) test('plugins can create nested rules', () => { @@ -552,27 +582,31 @@ test('plugins can create nested rules', () => { expect(utilities.length).toBe(0) expect(css(components)).toMatchCss(` - .btn-blue { - background-color: blue; - color: white; - padding: .5rem 1rem; - border-radius: .25rem; - } - .btn-blue:hover { - background-color: darkblue; - } - @media (min-width: 500px) { - .btn-blue:hover { - background-color: orange; + @layer components { + @variants { + .btn-blue { + background-color: blue; + color: white; + padding: .5rem 1rem; + border-radius: .25rem; + } + .btn-blue:hover { + background-color: darkblue; + } + @media (min-width: 500px) { + .btn-blue:hover { + background-color: orange; + } + } + .btn-blue > a { + color: red; + } + h1 .btn-blue { + color: purple; + } } } - .btn-blue > a { - color: red; - } - h1 .btn-blue { - color: purple; - } - `) + `) }) test('plugins can create rules with escaped selectors', () => { @@ -591,12 +625,14 @@ test('plugins can create rules with escaped selectors', () => { expect(components.length).toBe(0) expect(css(utilities)).toMatchCss(` - @variants { - .top-1\\/4 { - top: 25% + @layer utilities { + @variants { + .top-1\\/4 { + top: 25% + } } } - `) + `) }) test('plugins can access the current config', () => { @@ -633,30 +669,34 @@ test('plugins can access the current config', () => { expect(utilities.length).toBe(0) expect(css(components)).toMatchCss(` - .container { - width: 100% - } - @media (min-width: 576px) { - .container { - max-width: 576px + @layer components { + @variants { + .container { + width: 100% + } + @media (min-width: 576px) { + .container { + max-width: 576px + } + } + @media (min-width: 768px) { + .container { + max-width: 768px + } + } + @media (min-width: 992px) { + .container { + max-width: 992px + } + } + @media (min-width: 1200px) { + .container { + max-width: 1200px + } + } } } - @media (min-width: 768px) { - .container { - max-width: 768px - } - } - @media (min-width: 992px) { - .container { - max-width: 992px - } - } - @media (min-width: 1200px) { - .container { - max-width: 1200px - } - } - `) + `) }) test('plugins can access the variants config directly', () => { @@ -688,18 +728,20 @@ test('plugins can access the variants config directly', () => { expect(components.length).toBe(0) expect(css(utilities)).toMatchCss(` - @variants responsive, focus, hover { - .object-fill { - object-fit: fill - } - .object-contain { - object-fit: contain - } - .object-cover { - object-fit: cover + @layer utilities { + @variants responsive, focus, hover { + .object-fill { + object-fit: fill + } + .object-contain { + object-fit: contain + } + .object-cover { + object-fit: cover + } } } - `) + `) }) test('plugins apply all global variants when variants are configured globally', () => { @@ -731,17 +773,21 @@ test('plugins apply all global variants when variants are configured globally', expect(components.length).toBe(0) expect(css(utilities)).toMatchCss(` - @variants responsive, focus, hover { - .object-fill { - object-fit: fill + @layer utilities { + @variants responsive, focus, hover { + .object-fill { + object-fit: fill + } } } - @variants responsive, focus, hover { - .rotate-90deg { - transform: rotate(90deg) + @layer utilities { + @variants responsive, focus, hover { + .rotate-90deg { + transform: rotate(90deg) + } } } - `) + `) }) test('plugins can check if corePlugins are enabled', () => { @@ -763,13 +809,15 @@ test('plugins can check if corePlugins are enabled', () => { expect(components.length).toBe(0) expect(css(utilities)).toMatchCss(` - @variants { - .test { - text-color: false; - opacity: true + @layer utilities { + @variants { + .test { + text-color: false; + opacity: true + } } } - `) + `) }) test('plugins can check if corePlugins are enabled when using array white-listing', () => { @@ -791,13 +839,15 @@ test('plugins can check if corePlugins are enabled when using array white-listin expect(components.length).toBe(0) expect(css(utilities)).toMatchCss(` - @variants { - .test { - text-color: true; - opacity: false + @layer utilities { + @variants { + .test { + text-color: true; + opacity: false + } } } - `) + `) }) test('plugins can provide fallbacks to keys missing from the config', () => { @@ -823,10 +873,14 @@ test('plugins can provide fallbacks to keys missing from the config', () => { expect(utilities.length).toBe(0) expect(css(components)).toMatchCss(` - .btn { - border-radius: .25rem + @layer components { + @variants { + .btn { + border-radius: .25rem + } + } } - `) + `) }) test('variants are optional when adding utilities', () => { @@ -844,11 +898,14 @@ test('variants are optional when adding utilities', () => { ) expect(css(utilities)).toMatchCss(` - @variants { - .border-collapse { - border-collapse: collapse + @layer utilities { + @variants { + .border-collapse { + border-collapse: collapse + } } - }`) + } + `) }) test('plugins can add multiple sets of utilities and components', () => { @@ -886,27 +943,39 @@ test('plugins can add multiple sets of utilities and components', () => { ) expect(css(utilities)).toMatchCss(` - @variants { - .skew-12deg { - transform: skewY(-12deg) + @layer utilities { + @variants { + .skew-12deg { + transform: skewY(-12deg) + } } } - @variants { - .border-collapse { - border-collapse: collapse + @layer utilities { + @variants { + .border-collapse { + border-collapse: collapse + } } } - `) + `) expect(css(components)).toMatchCss(` - .card { - padding: 1rem; - border-radius: .25rem + @layer components { + @variants { + .card { + padding: 1rem; + border-radius: .25rem + } + } } - .btn { - padding: 1rem .5rem; - display: inline-block + @layer components { + @variants { + .btn { + padding: 1rem .5rem; + display: inline-block + } + } } - `) + `) }) test('plugins respect prefix and important options by default when adding utilities', () => { @@ -927,12 +996,14 @@ test('plugins respect prefix and important options by default when adding utilit ) expect(css(utilities)).toMatchCss(` - @variants { - .tw-rotate-90 { - transform: rotate(90deg) !important + @layer utilities { + @variants { + .tw-rotate-90 { + transform: rotate(90deg) !important + } } } - `) + `) }) test('when important is a selector it is used to scope utilities instead of adding !important', () => { @@ -952,12 +1023,14 @@ test('when important is a selector it is used to scope utilities instead of addi ) expect(css(utilities)).toMatchCss(` - @variants { - #app .rotate-90 { - transform: rotate(90deg) + @layer utilities { + @variants { + #app .rotate-90 { + transform: rotate(90deg) + } } } - `) + `) }) test('when important contains a class an error is thrown', () => { @@ -996,12 +1069,14 @@ test('when important is a selector it scopes all selectors in a rule, even thoug ) expect(css(utilities)).toMatchCss(` - @variants { - #app .rotate-90, #app .rotate-1\\/4 { - transform: rotate(90deg) + @layer utilities { + @variants { + #app .rotate-90, #app .rotate-1\\/4 { + transform: rotate(90deg) + } } } - `) + `) }) test('important utilities are not made double important when important option is used', () => { @@ -1021,12 +1096,14 @@ test('important utilities are not made double important when important option is ) expect(css(utilities)).toMatchCss(` - @variants { - .rotate-90 { - transform: rotate(90deg) !important + @layer utilities { + @variants { + .rotate-90 { + transform: rotate(90deg) !important + } } } - `) + `) }) test("component declarations respect the 'prefix' option by default", () => { @@ -1046,10 +1123,14 @@ test("component declarations respect the 'prefix' option by default", () => { ) expect(css(components)).toMatchCss(` - .tw-btn-blue { - background-color: blue + @layer components { + @variants { + .tw-btn-blue { + background-color: blue + } + } } - `) + `) }) test('all selectors in a rule are prefixed', () => { @@ -1074,18 +1155,24 @@ test('all selectors in a rule are prefixed', () => { ) expect(css(utilities)).toMatchCss(` - @variants { - .tw-rotate-90, .tw-rotate-1\\/4 { - transform: rotate(90deg) + @layer utilities { + @variants { + .tw-rotate-90, .tw-rotate-1\\/4 { + transform: rotate(90deg) + } } } - `) + `) expect(css(components)).toMatchCss(` - .tw-btn-blue, .tw-btn-red { - padding: 10px + @layer components { + @variants { + .tw-btn-blue, .tw-btn-red { + padding: 10px + } + } } - `) + `) }) test("component declarations can optionally ignore 'prefix' option", () => { @@ -1108,10 +1195,14 @@ test("component declarations can optionally ignore 'prefix' option", () => { ) expect(css(components)).toMatchCss(` - .btn-blue { - background-color: blue + @layer components { + @variants { + .btn-blue { + background-color: blue + } + } } - `) + `) }) test('plugins can create components with variants', () => { @@ -1132,14 +1223,14 @@ test('plugins can create components with variants', () => { ) expect(css(components)).toMatchCss(` - @responsive { - @variants { + @layer components { + @variants responsive { .btn-blue { background-color: blue } } } - `) + `) }) test('plugins can use the array shorthand to add variants to components', () => { @@ -1160,14 +1251,14 @@ test('plugins can use the array shorthand to add variants to components', () => ) expect(css(components)).toMatchCss(` - @responsive { - @variants hover { + @layer components { + @variants responsive, hover { .btn-blue { background-color: blue } } } - `) + `) }) test("component declarations are not affected by the 'important' option", () => { @@ -1187,10 +1278,14 @@ test("component declarations are not affected by the 'important' option", () => ) expect(css(components)).toMatchCss(` - .btn-blue { - background-color: blue + @layer components { + @variants { + .btn-blue { + background-color: blue + } + } } - `) + `) }) test("plugins can apply the user's chosen prefix to components manually", () => { @@ -1213,10 +1308,14 @@ test("plugins can apply the user's chosen prefix to components manually", () => ) expect(css(components)).toMatchCss(` - .tw-btn-blue { - background-color: blue + @layer components { + @variants { + .tw-btn-blue { + background-color: blue + } + } } - `) + `) }) test('prefix can optionally be ignored for utilities', () => { @@ -1242,12 +1341,14 @@ test('prefix can optionally be ignored for utilities', () => { ) expect(css(utilities)).toMatchCss(` - @variants { - .rotate-90 { - transform: rotate(90deg) !important + @layer utilities { + @variants { + .rotate-90 { + transform: rotate(90deg) !important + } } } - `) + `) }) test('important can optionally be ignored for utilities', () => { @@ -1273,12 +1374,14 @@ test('important can optionally be ignored for utilities', () => { ) expect(css(utilities)).toMatchCss(` - @variants { - .tw-rotate-90 { - transform: rotate(90deg) + @layer utilities { + @variants { + .tw-rotate-90 { + transform: rotate(90deg) + } } } - `) + `) }) test('variants can still be specified when ignoring prefix and important options', () => { @@ -1306,12 +1409,14 @@ test('variants can still be specified when ignoring prefix and important options ) expect(css(utilities)).toMatchCss(` - @variants responsive, hover, focus { - .rotate-90 { - transform: rotate(90deg) + @layer utilities { + @variants responsive, hover, focus { + .rotate-90 { + transform: rotate(90deg) + } } } - `) + `) }) test('prefix will prefix all classes in a selector', () => { @@ -1334,10 +1439,14 @@ test('prefix will prefix all classes in a selector', () => { ) expect(css(components)).toMatchCss(` - .tw-btn-blue .tw-w-1\\/4 > h1.tw-text-xl + a .tw-bar { - background-color: blue + @layer components { + @variants { + .tw-btn-blue .tw-w-1\\/4 > h1.tw-text-xl + a .tw-bar { + background-color: blue + } + } } - `) + `) }) test('plugins can be provided as an object with a handler function', () => { @@ -1364,15 +1473,17 @@ test('plugins can be provided as an object with a handler function', () => { expect(components.length).toBe(0) expect(css(utilities)).toMatchCss(` - @variants { - .object-fill { - object-fit: fill - } - .object-contain { - object-fit: contain - } - .object-cover { - object-fit: cover + @layer utilities { + @variants { + .object-fill { + object-fit: fill + } + .object-contain { + object-fit: contain + } + .object-cover { + object-fit: cover + } } } `) @@ -1407,15 +1518,17 @@ test('plugins can provide a config but no handler', () => { expect(components.length).toBe(0) expect(css(utilities)).toMatchCss(` - @variants { - .object-fill { - object-fit: fill - } - .object-contain { - object-fit: contain - } - .object-cover { - object-fit: cover + @layer utilities { + @variants { + .object-fill { + object-fit: fill + } + .object-contain { + object-fit: contain + } + .object-cover { + object-fit: cover + } } } `) diff --git a/__tests__/responsiveAtRule.test.js b/__tests__/responsiveAtRule.test.js index a59dff31f..a3d05efe9 100644 --- a/__tests__/responsiveAtRule.test.js +++ b/__tests__/responsiveAtRule.test.js @@ -17,20 +17,28 @@ test('it can generate responsive variants', () => { ` const output = ` + @layer utilities { .banana { color: yellow; } .chocolate { color: brown; } - @media (min-width: 500px) { + } + @media (min-width: 500px) { + @layer utilities { .sm\\:banana { color: yellow; } .sm\\:chocolate { color: brown; } } - @media (min-width: 750px) { + } + @media (min-width: 750px) { + @layer utilities { .md\\:banana { color: yellow; } .md\\:chocolate { color: brown; } } - @media (min-width: 1000px) { + } + @media (min-width: 1000px) { + @layer utilities { .lg\\:banana { color: yellow; } .lg\\:chocolate { color: brown; } } + } ` return run(input, { @@ -59,20 +67,28 @@ test('it can generate responsive variants with a custom separator', () => { ` const output = ` + @layer utilities { .banana { color: yellow; } .chocolate { color: brown; } - @media (min-width: 500px) { + } + @media (min-width: 500px) { + @layer utilities { .sm__banana { color: yellow; } .sm__chocolate { color: brown; } } - @media (min-width: 750px) { + } + @media (min-width: 750px) { + @layer utilities { .md__banana { color: yellow; } .md__chocolate { color: brown; } } - @media (min-width: 1000px) { + } + @media (min-width: 1000px) { + @layer utilities { .lg__banana { color: yellow; } .lg__chocolate { color: brown; } } + } ` return run(input, { @@ -101,20 +117,28 @@ test('it can generate responsive variants when classes have non-standard charact ` const output = ` + @layer utilities { .hover\\:banana { color: yellow; } .chocolate-2\\.5 { color: brown; } - @media (min-width: 500px) { + } + @media (min-width: 500px) { + @layer utilities { .sm\\:hover\\:banana { color: yellow; } .sm\\:chocolate-2\\.5 { color: brown; } } - @media (min-width: 750px) { + } + @media (min-width: 750px) { + @layer utilities { .md\\:hover\\:banana { color: yellow; } .md\\:chocolate-2\\.5 { color: brown; } } - @media (min-width: 1000px) { + } + @media (min-width: 1000px) { + @layer utilities { .lg\\:hover\\:banana { color: yellow; } .lg\\:chocolate-2\\.5 { color: brown; } } + } ` return run(input, { @@ -148,21 +172,37 @@ test('responsive variants are grouped', () => { ` const output = ` + @layer utilities { .banana { color: yellow; } - .apple { color: red; } + } + .apple { color: red; } + @layer utilities { .chocolate { color: brown; } - @media (min-width: 500px) { + } + @media (min-width: 500px) { + @layer utilities { .sm\\:banana { color: yellow; } + } + @layer utilities { .sm\\:chocolate { color: brown; } } - @media (min-width: 750px) { + } + @media (min-width: 750px) { + @layer utilities { .md\\:banana { color: yellow; } + } + @layer utilities { .md\\:chocolate { color: brown; } } - @media (min-width: 1000px) { + } + @media (min-width: 1000px) { + @layer utilities { .lg\\:banana { color: yellow; } + } + @layer utilities { .lg\\:chocolate { color: brown; } } + } ` return run(input, { @@ -194,36 +234,42 @@ test('it can generate responsive variants for nested at-rules', () => { ` const output = ` - .banana { - color: yellow; - } - - @supports(display: grid) { - .grid\\:banana { - color: blue; - } - } - - @media (min-width: 500px) { - .sm\\:banana { + @layer utilities { + .banana { color: yellow; } @supports(display: grid) { - .sm\\:grid\\:banana { + .grid\\:banana { color: blue; } } } - @media (min-width: 1000px) { - .lg\\:banana { - color: yellow; - } + @media (min-width: 500px) { + @layer utilities { + .sm\\:banana { + color: yellow; + } - @supports(display: grid) { - .lg\\:grid\\:banana { - color: blue; + @supports(display: grid) { + .sm\\:grid\\:banana { + color: blue; + } + } + } + } + + @media (min-width: 1000px) { + @layer utilities { + .lg\\:banana { + color: yellow; + } + + @supports(display: grid) { + .lg\\:grid\\:banana { + color: blue; + } } } } @@ -259,41 +305,47 @@ test('it can generate responsive variants for deeply nested at-rules', () => { ` const output = ` - .banana { - color: yellow; - } - - @supports(display: grid) { - @supports(display: flex) { - .flex-grid\\:banana { - color: blue; - } - } - } - - @media (min-width: 500px) { - .sm\\:banana { + @layer utilities { + .banana { color: yellow; } @supports(display: grid) { @supports(display: flex) { - .sm\\:flex-grid\\:banana { + .flex-grid\\:banana { color: blue; } } } } - @media (min-width: 1000px) { - .lg\\:banana { - color: yellow; - } + @media (min-width: 500px) { + @layer utilities { + .sm\\:banana { + color: yellow; + } - @supports(display: grid) { - @supports(display: flex) { - .lg\\:flex-grid\\:banana { - color: blue; + @supports(display: grid) { + @supports(display: flex) { + .sm\\:flex-grid\\:banana { + color: blue; + } + } + } + } + } + + @media (min-width: 1000px) { + @layer utilities { + .lg\\:banana { + color: yellow; + } + + @supports(display: grid) { + @supports(display: flex) { + .lg\\:flex-grid\\:banana { + color: blue; + } } } } @@ -324,16 +376,24 @@ test('screen prefix is only applied to the last class in a selector', () => { ` const output = ` + @layer utilities { .banana li * .sandwich #foo > div { color: yellow; } - @media (min-width: 500px) { + } + @media (min-width: 500px) { + @layer utilities { .banana li * .sm\\:sandwich #foo > div { color: yellow; } } - @media (min-width: 750px) { + } + @media (min-width: 750px) { + @layer utilities { .banana li * .md\\:sandwich #foo > div { color: yellow; } } - @media (min-width: 1000px) { + } + @media (min-width: 1000px) { + @layer utilities { .banana li * .lg\\:sandwich #foo > div { color: yellow; } } + } ` return run(input, { @@ -361,16 +421,24 @@ test('responsive variants are generated for all selectors in a rule', () => { ` const output = ` + @layer utilities { .foo, .bar { color: yellow; } - @media (min-width: 500px) { + } + @media (min-width: 500px) { + @layer utilities { .sm\\:foo, .sm\\:bar { color: yellow; } } - @media (min-width: 750px) { + } + @media (min-width: 750px) { + @layer utilities { .md\\:foo, .md\\:bar { color: yellow; } } - @media (min-width: 1000px) { + } + @media (min-width: 1000px) { + @layer utilities { .lg\\:foo, .lg\\:bar { color: yellow; } } + } ` return run(input, { diff --git a/__tests__/targetMode.test.js b/__tests__/targetMode.test.js index 3120dbf6a..0ee722751 100644 --- a/__tests__/targetMode.test.js +++ b/__tests__/targetMode.test.js @@ -64,22 +64,28 @@ test('plugins can request the target for a specific plugin key', () => { ) expect(css(utilities)).toMatchCss(` - @variants { - .testA { - target: modern + @layer utilities { + @variants { + .testA { + target: modern + } } } - @variants { - .testB { - target: relaxed + @layer utilities { + @variants { + .testB { + target: relaxed + } } } - @variants { - .testC { - target: ie11 + @layer utilities { + @variants { + .testC { + target: ie11 + } } } - `) + `) }) test('browserslist target is translated to a target preset', () => { @@ -108,9 +114,11 @@ test('browserslist target is translated to a target preset', () => { ) expect(css(utilities)).toMatchCss(` - @variants { - .test { - target: ie11 + @layer utilities { + @variants { + .test { + target: ie11 + } } } `) @@ -165,21 +173,27 @@ test('browserslist target is translated to a target preset with overrides', () = ) expect(css(utilities)).toMatchCss(` - @variants { - .testA { - target: modern - } + @layer utilities { + @variants { + .testA { + target: modern } - @variants { - .testB { - target: relaxed - } + } + } + @layer utilities { + @variants { + .testB { + target: relaxed } + } + } + @layer utilities { @variants { - .testC { - target: ie11 - } + .testC { + target: ie11 } + } + } `) return Promise.resolve()