Add light-dark with !important tests and documentation

Author: rtivital

README.md

@@ -186,6 +186,8 @@ Will be transformed to:
 }
 ```
 
+### light-dark with html and :root selectors
+
 Note that `light-dark` function does not work on `:root`/`html` element. Use `light-root` and `dark-root` mixins instead:
 
 ```scss
@@ -206,6 +208,43 @@ Note that `light-dark` function does not work on `:root`/`html` element. Use `li
 }
 ```
 
+### light-dark and !important
+
+`!important` at rule level:
+
+```scss
+.button {
+  color: light-dark(red, blue) !important;
+}
+
+// Is transformed to
+.button {
+  background: red !important;
+}
+
+[data-mantine-color-scheme='dark'] .button {
+  background: blue !important;
+}
+```
+
+`!important` at value level:
+
+```scss
+// !important at value level
+.button {
+  color: light-dark(red !important, blue);
+}
+
+// Is transformed to
+.button {
+  background: red !important;
+}
+
+[data-mantine-color-scheme='dark'] .button {
+  background: blue;
+}
+```
+
 ## alpha function
 
 `alpha` function can be used to add alpha channel to color. Note that it uses [color-mix](https://caniuse.com/mdn-css_types_color_color-mix) which is not supported in some older browsers.

src/tests/__snapshots__/light-dark.test.ts.snap

@@ -48,6 +48,28 @@ exports[`light-dark works when there are commas in the value 1`] = `
 "
 `;
 
+exports[`light-dark works with !important 1`] = `
+"
+.button {
+  background: red !important;
+}
+  [data-mantine-color-scheme='dark'] .button {
+  background: blue !important;
+}
+"
+`;
+
+exports[`light-dark works with !important split 1`] = `
+"
+.button {
+  background: red !important;
+}
+  [data-mantine-color-scheme='dark'] .button {
+  background: blue;
+}
+"
+`;
+
 exports[`light-dark works with base input 1`] = `
 "
 .button {

src/tests/light-dark.test.ts

@@ -6,6 +6,18 @@ const baseInput = `
 }
 `;
 
+const importantInput = `
+.button {
+  background: light-dark(red, blue) !important;
+}
+`;
+
+const importantSplitInput = `
+.button {
+  background: light-dark(red !important, blue);
+}
+`;
+
 const mediaInput = `
 @media screen and (min-width: 400px) {
   .button {
@@ -61,4 +73,14 @@ describe('light-dark', () => {
     const res = await testTransform(commasInput);
     expect(res.css).toMatchSnapshot();
   });
+
+  it('works with !important', async () => {
+    const res = await testTransform(importantInput);
+    expect(res.css).toMatchSnapshot();
+  });
+
+  it('works with !important split', async () => {
+    const res = await testTransform(importantSplitInput);
+    expect(res.css).toMatchSnapshot();
+  });
 });