add supports/plugin data for gradient interpolation and color-mix (#285)

* add supports data for gradient interpolation and color-mix

* change log and bundled with updates

* populatedb

* Update CHANGELOG.md

* Update CHANGELOG.md

Author: romainmenke

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changes to cssdb
 
+### Unreleased (patch)
+
+- Updated support data for `color-mix`
+- Updated support data for `gradients-interpolation-method`
+
 ### 7.5.1 (March 24, 2023)
 
 - Fixed potentially old generated files (patch)

cssdb.json

@@ -321,11 +321,18 @@
       "android": "111",
       "chrome": "111",
       "edge": "111",
-      "opera": "97"
+      "opera": "97",
+      "ios_saf": "16.2",
+      "safari": "16.2"
     },
     "example": "p {\n  color: color-mix(in lch, purple 50%, plum 50%);\n}",
-    "polyfills": [],
-    "vendors_implementations": 1
+    "polyfills": [
+      {
+        "type": "PostCSS Plugin",
+        "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-mix-function"
+      }
+    ],
+    "vendors_implementations": 2
   },
   {
     "id": "color-mod-function",
@@ -758,10 +765,22 @@
     "description": "Define the interpolation method for gradients",
     "specification": "https://www.w3.org/TR/css-images-4/#color-interpolation",
     "stage": 2,
-    "browser_support": {},
+    "browser_support": {
+      "and_chr": "111",
+      "android": "111",
+      "chrome": "111",
+      "edge": "111",
+      "ios_saf": "16.2",
+      "safari": "16.2"
+    },
     "example": ".pie_chart {\n  background-image: conic-gradient(in oklch, yellowgreen 40%, gold 0deg 75%, #f06 0deg);\n}",
-    "polyfills": [],
-    "vendors_implementations": 0
+    "polyfills": [
+      {
+        "type": "PostCSS Plugin",
+        "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gradients-interpolation-method"
+      }
+    ],
+    "vendors_implementations": 2
   },
   {
     "id": "gray-function",
@@ -840,10 +859,6 @@
       {
         "type": "PostCSS Plugin",
         "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo"
-      },
-      {
-        "type": "Experimental Library",
-        "link": "https://github.com/csstools/postcss-plugins/tree/main/experimental/css-has-pseudo"
       }
     ],
     "vendors_implementations": 2

cssdb.mjs

@@ -321,11 +321,18 @@ export default [
       "android": "111",
       "chrome": "111",
       "edge": "111",
-      "opera": "97"
+      "opera": "97",
+      "ios_saf": "16.2",
+      "safari": "16.2"
     },
     "example": "p {\n  color: color-mix(in lch, purple 50%, plum 50%);\n}",
-    "polyfills": [],
-    "vendors_implementations": 1
+    "polyfills": [
+      {
+        "type": "PostCSS Plugin",
+        "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-mix-function"
+      }
+    ],
+    "vendors_implementations": 2
   },
   {
     "id": "color-mod-function",
@@ -758,10 +765,22 @@ export default [
     "description": "Define the interpolation method for gradients",
     "specification": "https://www.w3.org/TR/css-images-4/#color-interpolation",
     "stage": 2,
-    "browser_support": {},
+    "browser_support": {
+      "and_chr": "111",
+      "android": "111",
+      "chrome": "111",
+      "edge": "111",
+      "ios_saf": "16.2",
+      "safari": "16.2"
+    },
     "example": ".pie_chart {\n  background-image: conic-gradient(in oklch, yellowgreen 40%, gold 0deg 75%, #f06 0deg);\n}",
-    "polyfills": [],
-    "vendors_implementations": 0
+    "polyfills": [
+      {
+        "type": "PostCSS Plugin",
+        "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gradients-interpolation-method"
+      }
+    ],
+    "vendors_implementations": 2
   },
   {
     "id": "gray-function",
@@ -840,10 +859,6 @@ export default [
       {
         "type": "PostCSS Plugin",
         "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo"
-      },
-      {
-        "type": "Experimental Library",
-        "link": "https://github.com/csstools/postcss-plugins/tree/main/experimental/css-has-pseudo"
       }
     ],
     "vendors_implementations": 2

cssdb.settings.json

@@ -232,8 +232,25 @@
       "css.types.color['color-mix']"
     ],
     "browser_support": {},
+    "browser_support_overrides": {
+      "ios_saf": {
+        "from": null,
+        "to": "16.2",
+        "bug": "https://github.com/mdn/browser-compat-data/pull/19245"
+      },
+      "safari": {
+        "from": null,
+        "to": "16.2",
+        "bug": "https://github.com/mdn/browser-compat-data/pull/19245"
+      }
+    },
     "example": "p {\n  color: color-mix(in lch, purple 50%, plum 50%);\n}",
-    "polyfills": []
+    "polyfills": [
+      {
+        "type": "PostCSS Plugin",
+        "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-mix-function"
+      }
+    ]
   },
   {
     "id": "color-mod-function",
@@ -586,8 +603,45 @@
     "specification": "https://www.w3.org/TR/css-images-4/#color-interpolation",
     "stage": 2,
     "browser_support": {},
+    "browser_support_overrides": {
+      "and_chr": {
+        "from": null,
+        "to": "111",
+        "bug": "https://github.com/mdn/browser-compat-data/pull/19244"
+      },
+      "android": {
+        "from": null,
+        "to": "111",
+        "bug": "https://github.com/mdn/browser-compat-data/pull/19244"
+      },
+      "chrome": {
+        "from": null,
+        "to": "111",
+        "bug": "https://github.com/mdn/browser-compat-data/pull/19244"
+      },
+      "edge": {
+        "from": null,
+        "to": "111",
+        "bug": "https://github.com/mdn/browser-compat-data/pull/19244"
+      },
+      "ios_saf": {
+        "from": null,
+        "to": "16.2",
+        "bug": "https://github.com/mdn/browser-compat-data/pull/19244"
+      },
+      "safari": {
+        "from": null,
+        "to": "16.2",
+        "bug": "https://github.com/mdn/browser-compat-data/pull/19244"
+      }
+    },
     "example": ".pie_chart {\n  background-image: conic-gradient(in oklch, yellowgreen 40%, gold 0deg 75%, #f06 0deg);\n}",
-    "polyfills": []
+    "polyfills": [
+      {
+        "type": "PostCSS Plugin",
+        "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gradients-interpolation-method"
+      }
+    ]
   },
   {
     "id": "gray-function",
@@ -643,10 +697,6 @@
       {
         "type": "PostCSS Plugin",
         "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo"
-      },
-      {
-        "type": "Experimental Library",
-        "link": "https://github.com/csstools/postcss-plugins/tree/main/experimental/css-has-pseudo"
       }
     ]
   },

src/components/feature-polyfill.mjs

@@ -10,18 +10,21 @@ const presetEnvPlugins = [
 	'clamp',
 	'color-function',
 	'color-functional-notation',
+	'color-mix',
 	'custom-media-queries',
 	'custom-properties',
 	'custom-selectors',
 	'dir-pseudo-class',
 	'display-two-values',
 	'double-position-gradients',
 	'environment-variables',
+	'float-clear-logical-values',
 	'focus-visible-pseudo-class',
 	'focus-within-pseudo-class',
 	'font-format-keywords',
 	'font-variant-property',
 	'gap-properties',
+	'gradients-interpolation-method',
 	'has-pseudo-class',
 	'hexadecimal-alpha-notation',
 	'hwb-function',
@@ -30,6 +33,9 @@ const presetEnvPlugins = [
 	'is-pseudo-class',
 	'lab-function',
 	'logical-properties-and-values',
+	'logical-resize',
+	'logical-viewport-units',
+	'media-queries-aspect-ratio-number-values',
 	'media-query-ranges',
 	'nested-calc',
 	'nesting-rules',
@@ -41,6 +47,7 @@ const presetEnvPlugins = [
 	'place-properties',
 	'prefers-color-scheme-query',
 	'rebeccapurple-color',
+	'scope-pseudo-class',
 	'stepped-value-functions',
 	'system-ui-font-family',
 	'text-decoration-shorthand',