Cleanup custom properties (#2771)

* prefix custom properties with tw-

* prefix custom properties with tw- in tests

* prefix gradient values in the defaultConfig

* inline gradient-via-color

* simplify --tw-tailwind-empty to --tw-empty

* replace the long --tw-font-variant-numeric-... to the way shorter --tw-fvn-...

* Rename --tw-box-shadow to --tw-shadow

To match class name.

* Rename font-variant-numeric variables

* Remove 'transform' from transform variables

* Shorten gradient variables

* Fix style

Co-authored-by: Adam Wathan <[email protected]>

Author: RobinMalfait

__tests__/applyAtRule.test.js

@@ -634,8 +634,8 @@ test('adjacent rules are collapsed after being applied', () => {
   `
   const expected = `
     .foo:hover {
-      --bg-opacity: 1;
-      background-color: rgba(255, 255, 255, var(--bg-opacity));
+      --tw-bg-opacity: 1;
+      background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
       opacity: 0.5;
     }
     .foo {
@@ -1055,8 +1055,8 @@ test('you can apply classes in a nested rule', () => {
   const expected = `
     .selector {
       &:hover {
-        --text-opacity: 1;
-        color: rgba(255, 255, 255, var(--text-opacity));
+        --tw-text-opacity: 1;
+        color: rgba(255, 255, 255, var(--tw-text-opacity));
       }
     }
   `