fix: gradients triggering color rules

data/features.js

@@ -30,8 +30,8 @@ import cssClipPath from './features/css-clip-path.js';
 import cssColorAdjust from './features/css-color-adjust.js';
 import cssColorFunction from './features/css-color-function.js';
 import cssConicGradients from './features/css-conic-gradients.js';
-import cssContainerQueriesStyle from './features/css-container-queries-style.js';
 import cssContainerQueries from './features/css-container-queries.js';
+import cssContainerQueriesStyle from './features/css-container-queries-style.js';
 import cssContainerQueryUnits from './features/css-container-query-units.js';
 import cssContainment from './features/css-containment.js';
 import cssContentVisibility from './features/css-content-visibility.js';
@@ -60,8 +60,8 @@ import cssFontRenderingControls from './features/css-font-rendering-controls.js'
 import cssFontStretch from './features/css-font-stretch.js';
 import cssGencontent from './features/css-gencontent.js';
 import cssGradients from './features/css-gradients.js';
-import cssGridAnimation from './features/css-grid-animation.js';
 import cssGrid from './features/css-grid.js';
+import cssGridAnimation from './features/css-grid-animation.js';
 import cssHangingPunctuation from './features/css-hanging-punctuation.js';
 import cssHas from './features/css-has.js';
 import cssHyphens from './features/css-hyphens.js';
@@ -92,15 +92,15 @@ import cssNotSelList from './features/css-not-sel-list.js';
 import cssNthChildOf from './features/css-nth-child-of.js';
 import cssOpacity from './features/css-opacity.js';
 import cssOptionalPseudo from './features/css-optional-pseudo.js';
+import cssOverflow from './features/css-overflow.js';
 import cssOverflowAnchor from './features/css-overflow-anchor.js';
 import cssOverflowOverlay from './features/css-overflow-overlay.js';
-import cssOverflow from './features/css-overflow.js';
 import cssOverscrollBehavior from './features/css-overscroll-behavior.js';
 import cssPageBreak from './features/css-page-break.js';
 import cssPagedMedia from './features/css-paged-media.js';
 import cssPaintApi from './features/css-paint-api.js';
-import cssPlaceholderShown from './features/css-placeholder-shown.js';
 import cssPlaceholder from './features/css-placeholder.js';
+import cssPlaceholderShown from './features/css-placeholder-shown.js';
 import cssPrintColorAdjust from './features/css-print-color-adjust.js';
 import cssReadOnlyWrite from './features/css-read-only-write.js';
 import cssRebeccapurple from './features/css-rebeccapurple.js';
@@ -143,15 +143,15 @@ import cssZoom from './features/css-zoom.js';
 import css3Attr from './features/css3-attr.js';
 import css3Boxsizing from './features/css3-boxsizing.js';
 import css3Colors from './features/css3-colors.js';
+import css3Cursors from './features/css3-cursors.js';
 import css3CursorsGrab from './features/css3-cursors-grab.js';
 import css3CursorsNewer from './features/css3-cursors-newer.js';
-import css3Cursors from './features/css3-cursors.js';
 import css3Tabsize from './features/css3-tabsize.js';
 import currentcolor from './features/currentcolor.js';
 import devicepixelratio from './features/devicepixelratio.js';
 import extendedSystemFonts from './features/extended-system-fonts.js';
-import flexboxGap from './features/flexbox-gap.js';
 import flexbox from './features/flexbox.js';
+import flexboxGap from './features/flexbox-gap.js';
 import flowRoot from './features/flow-root.js';
 import fontFamilySystemUi from './features/font-family-system-ui.js';
 import fontFeature from './features/font-feature.js';
@@ -163,13 +163,14 @@ import fontUnicodeRange from './features/font-unicode-range.js';
 import fontVariantAlternates from './features/font-variant-alternates.js';
 import fontVariantNumeric from './features/font-variant-numeric.js';
 import fontface from './features/fontface.js';
+import fullscreen from './features/fullscreen.js';
 import getcomputedstyle from './features/getcomputedstyle.js';
 import inlineBlock from './features/inline-block.js';
 import intrinsicWidth from './features/intrinsic-width.js';
 import justifyContentSpaceEvenly from './features/justify-content-space-evenly.js';
 import kerningPairsLigatures from './features/kerning-pairs-ligatures.js';
-import mdnCssUnicodeBidiIsolateOverride from './features/mdn-css-unicode-bidi-isolate-override.js';
 import mdnCssUnicodeBidiIsolate from './features/mdn-css-unicode-bidi-isolate.js';
+import mdnCssUnicodeBidiIsolateOverride from './features/mdn-css-unicode-bidi-isolate-override.js';
 import mdnCssUnicodeBidiPlaintext from './features/mdn-css-unicode-bidi-plaintext.js';
 import mdnTextDecorationColor from './features/mdn-text-decoration-color.js';
 import mdnTextDecorationLine from './features/mdn-text-decoration-line.js';
@@ -180,6 +181,7 @@ import multibackgrounds from './features/multibackgrounds.js';
 import multicolumn from './features/multicolumn.js';
 import objectFit from './features/object-fit.js';
 import outline from './features/outline.js';
+import pointer from './features/pointer.js';
 import pointerEvents from './features/pointer-events.js';
 import prefersColorScheme from './features/prefers-color-scheme.js';
 import prefersReducedMotion from './features/prefers-reduced-motion.js';
@@ -203,8 +205,6 @@ import webkitUserDrag from './features/webkit-user-drag.js';
 import willChange from './features/will-change.js';
 import wordBreak from './features/word-break.js';
 import wordwrap from './features/wordwrap.js';
-import fullscreen from './features/fullscreen.js';
-import pointer from './features/pointer.js';
 
 /** @typedef {RegExp|string|((value:string) => boolean)} FeatureCheck */
 
@@ -243,8 +243,8 @@ const FEATURES = {
   'css-color-adjust': cssColorAdjust,
   'css-color-function': cssColorFunction,
   'css-conic-gradients': cssConicGradients,
-  'css-container-queries-style': cssContainerQueriesStyle,
   'css-container-queries': cssContainerQueries,
+  'css-container-queries-style': cssContainerQueriesStyle,
   'css-container-query-units': cssContainerQueryUnits,
   'css-containment': cssContainment,
   'css-content-visibility': cssContentVisibility,
@@ -273,8 +273,8 @@ const FEATURES = {
   'css-font-stretch': cssFontStretch,
   'css-gencontent': cssGencontent,
   'css-gradients': cssGradients,
-  'css-grid-animation': cssGridAnimation,
   'css-grid': cssGrid,
+  'css-grid-animation': cssGridAnimation,
   'css-hanging-punctuation': cssHangingPunctuation,
   'css-has': cssHas,
   'css-hyphens': cssHyphens,
@@ -305,15 +305,15 @@ const FEATURES = {
   'css-nth-child-of': cssNthChildOf,
   'css-opacity': cssOpacity,
   'css-optional-pseudo': cssOptionalPseudo,
+  'css-overflow': cssOverflow,
   'css-overflow-anchor': cssOverflowAnchor,
   'css-overflow-overlay': cssOverflowOverlay,
-  'css-overflow': cssOverflow,
   'css-overscroll-behavior': cssOverscrollBehavior,
   'css-page-break': cssPageBreak,
   'css-paged-media': cssPagedMedia,
   'css-paint-api': cssPaintApi,
-  'css-placeholder-shown': cssPlaceholderShown,
   'css-placeholder': cssPlaceholder,
+  'css-placeholder-shown': cssPlaceholderShown,
   'css-print-color-adjust': cssPrintColorAdjust,
   'css-read-only-write': cssReadOnlyWrite,
   'css-rebeccapurple': cssRebeccapurple,
@@ -356,15 +356,15 @@ const FEATURES = {
   'css3-attr': css3Attr,
   'css3-boxsizing': css3Boxsizing,
   'css3-colors': css3Colors,
+  'css3-cursors': css3Cursors,
   'css3-cursors-grab': css3CursorsGrab,
   'css3-cursors-newer': css3CursorsNewer,
-  'css3-cursors': css3Cursors,
   'css3-tabsize': css3Tabsize,
   'currentcolor': currentcolor,
   'devicepixelratio': devicepixelratio,
   'extended-system-fonts': extendedSystemFonts,
-  'flexbox-gap': flexboxGap,
   'flexbox': flexbox,
+  'flexbox-gap': flexboxGap,
   'flow-root': flowRoot,
   'font-family-system-ui': fontFamilySystemUi,
   'font-feature': fontFeature,
@@ -376,13 +376,14 @@ const FEATURES = {
   'font-variant-alternates': fontVariantAlternates,
   'font-variant-numeric': fontVariantNumeric,
   'fontface': fontface,
+  'fullscreen': fullscreen,
   'getcomputedstyle': getcomputedstyle,
   'inline-block': inlineBlock,
   'intrinsic-width': intrinsicWidth,
   'justify-content-space-evenly': justifyContentSpaceEvenly,
   'kerning-pairs-ligatures': kerningPairsLigatures,
-  'mdn-css-unicode-bidi-isolate-override': mdnCssUnicodeBidiIsolateOverride,
   'mdn-css-unicode-bidi-isolate': mdnCssUnicodeBidiIsolate,
+  'mdn-css-unicode-bidi-isolate-override': mdnCssUnicodeBidiIsolateOverride,
   'mdn-css-unicode-bidi-plaintext': mdnCssUnicodeBidiPlaintext,
   'mdn-text-decoration-color': mdnTextDecorationColor,
   'mdn-text-decoration-line': mdnTextDecorationLine,
@@ -393,6 +394,7 @@ const FEATURES = {
   'multicolumn': multicolumn,
   'object-fit': objectFit,
   'outline': outline,
+  'pointer': pointer,
   'pointer-events': pointerEvents,
   'prefers-color-scheme': prefersColorScheme,
   'prefers-reduced-motion': prefersReducedMotion,
@@ -416,8 +418,6 @@ const FEATURES = {
   'will-change': willChange,
   'word-break': wordBreak,
   'wordwrap': wordwrap,
-  'fullscreen': fullscreen,
-  'pointer': pointer,
 };
 
 /** @typedef {keyof typeof FEATURES} FeatureKeys */

data/features/css-relative-colors.js

@@ -7,13 +7,6 @@
 /**
  * @type {import('../features').Feature}
  */
-export default (rule) => {
-  if (rule.type !== 'decl') {
-    return false;
-  }
-
-  const colorSpaces = ['rgb', 'rgba', 'hsl', 'hsla', 'hwb'];
-
-  return rule.value.match(/(from|calc\()/)
-  && colorSpaces.some((colorSpace) => rule.value.includes(colorSpace));
+export default {
+  '': /((rgb)|(rgba)|(hsl)|(hsla)|(hwb))\(\s*from/,
 };

scripts/update-features.js

@@ -97,7 +97,7 @@ await Promise.all(
     }),
 );
 
-const allFeatures = [...cssFeatures, ...notCSS];
+const allFeatures = [...cssFeatures, ...notCSS].sort(([a], [b]) => a.localeCompare(b));
 
 // update the data/features.js file with all the features
 const template = await fs.readFile('scripts/features.template.js', 'utf8');

test/cases/features/css-relative-colors.css

@@ -12,11 +12,6 @@ expect:
 css-relative-colors: 5
 */
 
-.selector {
-  /* Dynamically change individual channels */
-  color: hsl(var(--color-h), calc(var(--color-s) - 10%), var(--color-l));
-}
-
 .selector {
   /* change the transparency */
   color: hsl(from var(--color) h s l / 0.5);
@@ -32,4 +27,18 @@ css-relative-colors: 5
     from var(--color) calc(h + 10deg) calc(s + 5%) calc(l - 10%) /
       calc(alpha - 15%)
   );
+
+  /* Dynamically change individual channels with from */
+  color: hsl(from var(--color-h), calc(var(--color-s) - 10%), var(--color-l));
+
+  /* should not trigger */
+  background: conic-gradient(
+    from 0deg at 50% 50%,
+    rgb(0 0 0 / 35%) -24.66deg,
+    rgb(255 255 255 / 35%) 0.25deg
+  );
+
+  /* should not trigger */
+  /* Dynamically change individual channels without from */
+  color: hsl(var(--color-h), calc(var(--color-s) - 10%), var(--color-l));
 }