Bump lightningcss dependency (tailwindlabs#11388)

* bump `lightningcss`

* allow for non-standard selector combinators such as `::deep`

* just use Prettier when comparing CSS results

We were using 2 different engines where the stable one was not using
Lightning CSS and the Oxide one was using Lightning CSS.

To ensure that we didn't have to rewrite every single test expectation,
the `toMatchFormattedCss` parsed both the actual and expected value
using Lightning CSS (to make the result similar), then it used Prettier
to make it... pretty.

Right now we _only_ use Lightning CSS, which means that we can drop the
additional lightningcss format step and just use Prettier on both the
actual and expected values.

Pretty also only prettifies the CSS, it doesn't rewrite it. E.g.:
`@media (min-width: 768px)` will not be optimized to `@media (width >=
768px)`, that's something that Lightning CSS does for us.

This will require some changes in our test output, but it will be
consistent afterwards because there won't be hidden transformation steps
anymore. Because up until now it could be that the actual result was
`color: black` but the tests showed `color: #000` (because it is
shorter).

This change will reflect reality.

* update tests based on previous commit

* only use `toMatchFormattedCss` instead of `toMatchCss`

They both do the exact same thing right now. While `toMatchCss` is
shorter, `toMatchFormattedCss` makes a bit more sense since we are
comparing the Prettier results.

* update integration tests

Author: RobinMalfait

integrations/content-resolution/tests/content.test.js

@@ -60,7 +60,7 @@ it('looks in the CWD by default', async () => {
 
   let result = await build({ cwd: path.resolve(__dirname, '..') })
 
-  expect(result.css).toMatchCss(css`
+  expect(result.css).toMatchFormattedCss(css`
     .content-\[real-static-positive\] {
       --tw-content: real-static-positive;
       content: var(--tw-content);
@@ -69,7 +69,7 @@ it('looks in the CWD by default', async () => {
 
   result = await build({ cwd: path.resolve(__dirname, '../src') })
 
-  expect(result.css).toMatchCss(``)
+  expect(result.css).toMatchFormattedCss(``)
 })
 
 it('looks in the CWD for non-config-relative paths', async () => {
@@ -88,7 +88,7 @@ it('looks in the CWD for non-config-relative paths', async () => {
 
   let result = await build({ cwd: path.resolve(__dirname, '..') })
 
-  expect(result.css).toMatchCss(css`
+  expect(result.css).toMatchFormattedCss(css`
     .content-\[real-static-positive\] {
       --tw-content: real-static-positive;
       content: var(--tw-content);
@@ -97,7 +97,7 @@ it('looks in the CWD for non-config-relative paths', async () => {
 
   result = await build({ cwd: path.resolve(__dirname, '../src') })
 
-  expect(result.css).toMatchCss(``)
+  expect(result.css).toMatchFormattedCss(``)
 })
 
 it('can look for content files relative to the config', async () => {
@@ -113,12 +113,12 @@ it('can look for content files relative to the config', async () => {
   // Here `./real` doesn't exist next to the config in the root directory
   let result = await build({ cwd: path.resolve(__dirname, '..') })
 
-  expect(result.css).toMatchCss(css``)
+  expect(result.css).toMatchFormattedCss(css``)
 
   // But here it `./real` does exist next to the config in the `./src` directory!
   result = await build({ cwd: path.resolve(__dirname, '../src') })
 
-  expect(result.css).toMatchCss(css`
+  expect(result.css).toMatchFormattedCss(css`
     .content-\[real-static-positive\] {
       --tw-content: real-static-positive;
       content: var(--tw-content);
@@ -143,7 +143,7 @@ it('it handles ignored globs correctly when not relative to the config', async (
 
   let result = await build({ cwd: path.resolve(__dirname, '..') })
 
-  expect(result.css).toMatchCss(css`
+  expect(result.css).toMatchFormattedCss(css`
     .content-\[real-dynamic-positive\] {
       --tw-content: real-dynamic-positive;
       content: var(--tw-content);
@@ -157,7 +157,7 @@ it('it handles ignored globs correctly when not relative to the config', async (
   // But here it `./real` does exist next to the config in the `./src` directory!
   result = await build({ cwd: path.resolve(__dirname, '../src') })
 
-  expect(result.css).toMatchCss(``)
+  expect(result.css).toMatchFormattedCss(``)
 })
 
 it('it handles ignored globs correctly when relative to the config', async () => {
@@ -177,12 +177,12 @@ it('it handles ignored globs correctly when relative to the config', async () =>
 
   let result = await build({ cwd: path.resolve(__dirname, '..') })
 
-  expect(result.css).toMatchCss(``)
+  expect(result.css).toMatchFormattedCss(``)
 
   // But here it `./real` does exist next to the config in the `./src` directory!
   result = await build({ cwd: path.resolve(__dirname, '../src') })
 
-  expect(result.css).toMatchCss(css`
+  expect(result.css).toMatchFormattedCss(css`
     .content-\[real-dynamic-positive\] {
       --tw-content: real-dynamic-positive;
       content: var(--tw-content);
@@ -215,7 +215,7 @@ it('it can resolve symlinks for files when not relative to the config', async ()
 
   let result = await build({ cwd: path.resolve(__dirname, '..') })
 
-  expect(result.css).toMatchCss(css`
+  expect(result.css).toMatchFormattedCss(css`
     .content-\[real-dynamic-positive\] {
       --tw-content: real-dynamic-positive;
       content: var(--tw-content);
@@ -237,7 +237,7 @@ it('it can resolve symlinks for files when not relative to the config', async ()
   // But here it `./real` does exist next to the config in the `./src` directory!
   result = await build({ cwd: path.resolve(__dirname, '../src') })
 
-  expect(result.css).toMatchCss(``)
+  expect(result.css).toMatchFormattedCss(``)
 })
 
 it('it can resolve symlinks for files when relative to the config', async () => {
@@ -261,12 +261,12 @@ it('it can resolve symlinks for files when relative to the config', async () =>
 
   let result = await build({ cwd: path.resolve(__dirname, '..') })
 
-  expect(result.css).toMatchCss(``)
+  expect(result.css).toMatchFormattedCss(``)
 
   // But here it `./real` does exist next to the config in the `./src` directory!
   result = await build({ cwd: path.resolve(__dirname, '../src') })
 
-  expect(result.css).toMatchCss(css`
+  expect(result.css).toMatchFormattedCss(css`
     .content-\[real-dynamic-positive\] {
       --tw-content: real-dynamic-positive;
       content: var(--tw-content);

integrations/parcel/tests/integration.test.js

@@ -263,7 +263,7 @@ describe('watcher', () => {
         .font-bold {
           font-weight: 700;
         }
-        @media (min-width: 768px) {
+        @media (width >= 768px) {
           .md\:font-medium {
             font-weight: 500;
           }
@@ -301,7 +301,7 @@ describe('watcher', () => {
         .font-bold {
           font-weight: bold;
         }
-        @media (min-width: 800px) {
+        @media (width >= 800px) {
           .md\:font-medium {
             font-weight: 500;
           }
@@ -352,11 +352,11 @@ describe('watcher', () => {
 
     expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(
       css`
-        /* prettier-ignore */
         .btn {
-          border-radius: .25rem;
-          padding: .25rem .5rem;
+          border-radius: 0.25rem;
+          padding: 0.25rem 0.5rem;
         }
+
         .font-bold {
           font-weight: 700;
         }

integrations/postcss-cli/tests/integration.test.js

@@ -137,7 +137,7 @@ describe('watcher', () => {
         .font-bold {
           font-weight: 700;
         }
-        @media (min-width: 768px) {
+        @media (width >= 768px) {
           .md\:font-medium {
             font-weight: 500;
           }
@@ -174,7 +174,7 @@ describe('watcher', () => {
         .font-bold {
           font-weight: bold;
         }
-        @media (min-width: 800px) {
+        @media (width >= 800px) {
           .md\:font-medium {
             font-weight: 500;
           }
@@ -247,12 +247,11 @@ describe('watcher', () => {
 
     expect(await readOutputFile('main.css')).toIncludeCss(
       css`
-        /* prettier-ignore */
         .btn {
-            border-radius: 0.25rem;
-            z-index: 0;
-            padding: 0.25rem 0.5rem;
-          }
+          z-index: 0;
+          border-radius: 0.25rem;
+          padding: 0.25rem 0.5rem;
+        }
         .font-bold {
           font-weight: 700;
         }

integrations/rollup-sass/tests/integration.test.js

@@ -136,7 +136,7 @@ describe('watcher', () => {
         .font-bold {
           font-weight: 700;
         }
-        @media (min-width: 768px) {
+        @media (width >= 768px) {
           .md\:font-medium {
             font-weight: 500;
           }
@@ -173,7 +173,7 @@ describe('watcher', () => {
         .font-bold {
           font-weight: bold;
         }
-        @media (min-width: 800px) {
+        @media (width >= 800px) {
           .md\:font-medium {
             font-weight: 500;
           }

integrations/rollup/tests/integration.test.js

@@ -224,7 +224,7 @@ describe('watcher', () => {
         .font-bold {
           font-weight: 700;
         }
-        @media (min-width: 768px) {
+        @media (width >= 768px) {
           .md\:font-medium {
             font-weight: 500;
           }
@@ -261,7 +261,7 @@ describe('watcher', () => {
         .font-bold {
           font-weight: bold;
         }
-        @media (min-width: 800px) {
+        @media (width >= 800px) {
           .md\:font-medium {
             font-weight: 500;
           }
@@ -334,8 +334,8 @@ describe('watcher', () => {
     expect(await readOutputFile('index.css')).toIncludeCss(
       css`
         .btn {
-          border-radius: 0.25rem;
           z-index: 0;
+          border-radius: 0.25rem;
           padding: 0.25rem 0.5rem;
         }
         .font-bold {

integrations/tailwindcss-cli/tests/cli.test.js

@@ -150,7 +150,7 @@ describe('Build command', () => {
         theme: {
           extend: {
             fontWeight: {
-              bold: 'BOLD',
+              bold: 'bold',
             },
           },
         },
@@ -171,7 +171,7 @@ describe('Build command', () => {
     expect(await readOutputFile('main.css')).toIncludeCss(
       css`
         .font-bold {
-          font-weight: BOLD;
+          font-weight: bold;
         }
       `
     )
@@ -231,11 +231,8 @@ describe('Build command', () => {
         }
 
         .btn-after {
+          padding: 0.25rem 0.5rem;
           display: flex;
-          padding-left: 0.5rem;
-          padding-right: 0.5rem;
-          padding-top: 0.25rem;
-          padding-bottom: 0.25rem;
         }
       `
     )
@@ -281,11 +278,8 @@ describe('Build command', () => {
         }
 
         .btn-after {
+          padding: 0.25rem 0.5rem;
           display: flex;
-          padding-left: 0.5rem;
-          padding-right: 0.5rem;
-          padding-top: 0.25rem;
-          padding-bottom: 0.25rem;
         }
       `
     )
@@ -437,7 +431,7 @@ describe('Build command', () => {
       css`
         @media (min-width: 768px) {
           .md\:something-cool {
-            color: blue;
+            color: #00f;
           }
         }
       `

integrations/tailwindcss-cli/tests/integration.test.js

@@ -884,7 +884,6 @@ describe('watcher', () => {
       expect(await readOutputFile('main.css')).not.toIncludeCss(
         css`
           .underline {
-            -webkit-text-decoration-line: underline;
             text-decoration-line: underline;
           }
         `
@@ -898,7 +897,6 @@ describe('watcher', () => {
       expect(await readOutputFile('main.css')).toIncludeCss(
         css`
           .underline {
-            -webkit-text-decoration-line: underline;
             text-decoration-line: underline;
           }
         `
@@ -938,7 +936,6 @@ describe('watcher', () => {
       expect(await readOutputFile('main.css')).not.toIncludeCss(
         css`
           .underline {
-            -webkit-text-decoration-line: underline;
             text-decoration-line: underline;
           }
         `
@@ -952,7 +949,6 @@ describe('watcher', () => {
       expect(await readOutputFile('main.css')).toIncludeCss(
         css`
           .underline {
-            -webkit-text-decoration-line: underline;
             text-decoration-line: underline;
           }
         `
@@ -1037,7 +1033,6 @@ describe('watcher', () => {
           }
 
           .underline {
-            -webkit-text-decoration-line: underline;
             text-decoration-line: underline;
           }
         `
@@ -1082,7 +1077,6 @@ describe('watcher', () => {
           }
 
           .underline {
-            -webkit-text-decoration-line: underline;
             text-decoration-line: underline;
           }
         `

integrations/vite/tests/integration.test.js

@@ -255,7 +255,7 @@ describe('watcher', () => {
         .font-bold {
           font-weight: 700;
         }
-        @media (min-width: 768px) {
+        @media (width >= 768px) {
           .md\:font-medium {
             font-weight: 500;
           }
@@ -292,7 +292,7 @@ describe('watcher', () => {
         .font-bold {
           font-weight: bold;
         }
-        @media (min-width: 800px) {
+        @media (width >= 800px) {
           .md\:font-medium {
             font-weight: 500;
           }
@@ -373,12 +373,9 @@ describe('watcher', () => {
     expect(await fetchCSS()).toIncludeCss(
       css`
         .btn {
-          border-radius: 0.25rem;
           z-index: 0;
-          padding-left: 0.5rem;
-          padding-right: 0.5rem;
-          padding-top: 0.25rem;
-          padding-bottom: 0.25rem;
+          border-radius: 0.25rem;
+          padding: 0.25rem 0.5rem;
         }
         .font-bold {
           font-weight: 700;

integrations/webpack-4/tests/integration.test.js

@@ -225,7 +225,7 @@ describe('watcher', () => {
         .font-bold {
           font-weight: 700;
         }
-        @media (min-width: 768px) {
+        @media (width >= 768px) {
           .md\:font-medium {
             font-weight: 500;
           }
@@ -263,7 +263,7 @@ describe('watcher', () => {
         .font-bold {
           font-weight: bold;
         }
-        @media (min-width: 800px) {
+        @media (width >= 800px) {
           .md\:font-medium {
             font-weight: 500;
           }