Bump lightningcss dependency (#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
tailwindlabs · Jun 7, 2023 · e572dc6 · e572dc6
1 parent 571c27e
commit e572dc6
Show file tree

Hide file tree

Showing 60 changed files with 908 additions and 936 deletions.
diff --git a/integrations/content-resolution/tests/content.test.js b/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);

diff --git a/integrations/parcel/tests/integration.test.js b/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;
         }

diff --git a/integrations/postcss-cli/tests/integration.test.js b/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;
         }

diff --git a/integrations/rollup-sass/tests/integration.test.js b/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;
           }

diff --git a/integrations/rollup/tests/integration.test.js b/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 {

diff --git a/integrations/tailwindcss-cli/tests/cli.test.js b/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;
           }
         }
       `

diff --git a/integrations/tailwindcss-cli/tests/integration.test.js b/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;
           }
         `

diff --git a/integrations/vite/tests/integration.test.js b/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;

diff --git a/integrations/webpack-4/tests/integration.test.js b/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;
           }