Add support for all CSS features

data/features/alternate-stylesheet.js

@@ -0,0 +1,12 @@
+/**
+ * No description available.
+ *
+ * See: This feature comes from MDN: https://developer.mozilla.org/en-US/search?q=Alternate+stylesheet
+ */
+
+// This feature is only in HTML, so we don't lint it
+
+/**
+ * @type {import('../features').Feature}
+ */
+export default {};

data/features/background-attachment.js

@@ -0,0 +1,15 @@
+/**
+ * Method of defining how a background image is attached to a scrollable element. Values include `scroll` (default), `fixed` and `local`.
+ *
+ * See: https://caniuse.com/background-attachment
+ */
+
+/**
+ * @type {import('../features').Feature}
+ */
+export default {
+  'background-attachment': [
+    'fixed',
+    'local',
+  ],
+};

data/features/background-clip-text.js

@@ -0,0 +1,13 @@
+/**
+ * Non-standard method of clipping a background image to the foreground text.
+ *
+ * See: https://caniuse.com/background-clip-text
+ */
+
+/**
+ * @type {import('../features').Feature}
+ */
+export default {
+  'background-clip': 'text',
+  '-webkit-background-clip': 'text',
+};

data/features/background-repeat-round-space.js

@@ -0,0 +1,12 @@
+/**
+ * Allows CSS background images to be repeated without clipping.
+ *
+ * See: https://caniuse.com/background-repeat-round-space
+ */
+
+/**
+ * @type {import('../features').Feature}
+ */
+export default {
+  'background-repeat': ['round', 'space'],
+};

data/features/border-image.js

@@ -1,3 +1,9 @@
 export default {
   'border-image': true,
+  'border-image-outset': true,
+  'border-image-repeat': true,
+  'border-image-slice': true,
+  'border-image-source': true,
+  'border-image-width': true,
+
 };

data/features/ch-unit.js

@@ -0,0 +1,12 @@
+/**
+ * Unit representing the width of the character "0" in the current font, of particular use in combination with monospace fonts.
+ *
+ * See: https://caniuse.com/ch-unit
+ */
+
+/**
+ * @type {import('../features').Feature}
+ */
+export default {
+  '': 'ch',
+};

data/features/css-animation.js

@@ -8,5 +8,7 @@ export default {
   'animation-play-state': true,
   'animation-delay': true,
   'animation-fill-mode': true,
-  '@keyframes': true,
 };
+
+// @keyframes isn't checked for, but if you try to use it,
+// you'll still get a warning anyway because of the 'animation' property

data/features/css-any-link.js

@@ -1,3 +1,3 @@
 import { checkSelector } from '../../utils/util.js';
 
-export default checkSelector(':any-link');
+export default checkSelector([':any-link', ':-webkit-any-link']);

data/features/css-appearance.js

@@ -1,3 +1,5 @@
 export default {
   'appearance': true,
+  '-webkit-appearance': true,
+  '-moz-appearance': true,
 };

data/features/css-autofill.js

@@ -1,3 +1,3 @@
 import { checkSelector } from '../../utils/util.js';
 
-export default checkSelector(':autofill');
+export default checkSelector([':autofill', ':-webkit-autofill']);

data/features/css-background-offsets.js

@@ -7,5 +7,5 @@ import { list } from 'postcss';
 export default (rule) => {
   if (rule.type !== 'decl') return false;
   if (rule.prop !== 'background-position') return false;
-  return list.space(rule.value).length > 3;
+  return list.space(rule.value).length > 2;
 };

data/features/css-boxdecorationbreak.js

@@ -0,0 +1,13 @@
+/**
+ * Controls whether the box's margins, borders, padding, and other decorations wrap the broken edges of the box fragments (when the box is split by a break (page/column/region/line).
+ *
+ * See: https://caniuse.com/css-boxdecorationbreak
+ */
+
+/**
+ * @type {import('../features').Feature}
+ */
+export default {
+  'box-decoration-break': true,
+  '-webkit-box-decoration-break': true,
+};

data/features/css-caret-color.js

@@ -0,0 +1,12 @@
+/**
+ * The `caret-color` property allows the color to be set of the caret (blinking text insertion pointer) in an editable text area.
+ *
+ * See: https://caniuse.com/css-caret-color
+ */
+
+/**
+ * @type {import('../features').Feature}
+ */
+export default {
+  'caret-color': true,
+};

data/features/css-cascade-layers.js

@@ -0,0 +1,12 @@
+/**
+ * The `@layer` at-rule allows authors to explicitly layer their styles in the cascade, before specificity and order of appearance are considered.
+ *
+ * See: https://caniuse.com/css-cascade-layers
+ */
+
+import { checkAtRule } from '../../utils/util.js';
+
+/**
+ * @type {import('../features').Feature}
+ */
+export default checkAtRule('layer');

data/features/css-case-insensitive.js

@@ -0,0 +1,14 @@
+/**
+ * Including an `i` before the `]` in a CSS attribute selector causes the attribute value to be matched in an ASCII-case-insensitive manner. For example, `[b="xyz" i]` would match both `<a b="xyz">` and `<a b="XYZ">`.
+ *
+ * See: https://caniuse.com/css-case-insensitive
+ */
+
+/**
+ * @type {import('../features').Feature}
+ */
+export default (rule) => {
+  if (rule.type !== 'rule') { return false; }
+  if (/\[.*i]/.test(rule.selector)) { return true; }
+  return false;
+};

data/features/css-color-adjust.js

@@ -0,0 +1,13 @@
+/**
+ * The `print-color-adjust` (or `-webkit-print-color-adjust` as prefixed in WebKit/Blink browsers) property is a CSS extension that can be used to force printing of background colors and images.
+ *
+ * See: https://caniuse.com/css-color-adjust
+ */
+
+/**
+ * @type {import('../features').Feature}
+ */
+export default {
+  'print-color-adjust': true,
+  '-webkit-print-color-adjust': true,
+};

data/features/css-color-function.js

@@ -0,0 +1,12 @@
+/**
+ * The CSS `color()` function allows the browser to display colors in any color space, such as the P3 color space which can display colors outside of the default sRGB color space.
+ *
+ * See: https://caniuse.com/css-color-function
+ */
+
+/**
+ * @type {import('../features').Feature}
+ */
+export default {
+  '': 'color(',
+};

data/features/css-conic-gradients.js

@@ -1,4 +1,4 @@
-const REGEX = /(^|[^-])conic-gradient/;
+const REGEX = /(^|[^-])(repeating-)?conic-gradient/;
 
 export default {
   'background': REGEX,

data/features/css-container-queries-style.js

@@ -1,3 +1,3 @@
 import { checkAtRule } from '../../utils/util.js';
 
-export default checkAtRule(['container']);
+export default checkAtRule('container', 'style(');

data/features/css-container-queries.js

@@ -0,0 +1,12 @@
+/**
+ * Size queries in Container Queries provide a way to query the size of a container, and conditionally apply CSS to the content of that container.
+ *
+ * See: https://caniuse.com/css-container-queries
+ */
+
+import { checkAtRule } from '../../utils/util.js';
+
+/**
+ * @type {import('../features').Feature}
+ */
+export default checkAtRule('container');

data/features/css-containment.js

@@ -0,0 +1,12 @@
+/**
+ * The CSS `contain` property lets developers limit the scope of the browser's styles, layout and paint work for faster and more efficient rendering.
+ *
+ * See: https://caniuse.com/css-containment
+ */
+
+/**
+ * @type {import('../features').Feature}
+ */
+export default {
+  'contain': true,
+};

data/features/css-content-visibility.js

@@ -0,0 +1,12 @@
+/**
+ * Provides control over when elements are rendered, so rendering can be skipped for elements not yet in the user's viewport.
+ *
+ * See: https://caniuse.com/css-content-visibility
+ */
+
+/**
+ * @type {import('../features').Feature}
+ */
+export default {
+  'content-visibility': true,
+};

data/features/css-counters.js

@@ -1,4 +1,5 @@
 export default {
   'counter-reset': true,
   'counter-increment': true,
+  '': 'counter(',
 };

data/features/css-crisp-edges.js

@@ -0,0 +1,12 @@
+/**
+ * Scales images with an algorithm that preserves edges and contrast, without smoothing colors or introducing blur. This is intended for images such as pixel art. Official values that accomplish this for the `image-rendering` property are `crisp-edges` and `pixelated`.
+ *
+ * See: https://caniuse.com/css-crisp-edges
+ */
+
+/**
+ * @type {import('../features').Feature}
+ */
+export default {
+  'image-rendering': ['crisp-edges', 'pixelated'],
+};

data/features/css-cross-fade.js

@@ -0,0 +1,15 @@
+/**
+ * Image function to create a "crossfade" between images. This allows one image to transition (fade) into another based on a percentage value.
+ *
+ * See: https://caniuse.com/css-cross-fade
+ */
+
+/**
+ * @type {import('../features').Feature}
+ */
+export default {
+  '': [
+    'cross-fade(',
+    '-webkit-cross-fade(',
+  ],
+};

data/features/css-default-pseudo.js

@@ -0,0 +1,12 @@
+/**
+ * The `:default` pseudo-class matches checkboxes and radio buttons which are checked by default, `<option>`s with the `selected` attribute, and the default submit button (if any) of a form.
+ *
+ * See: https://caniuse.com/css-default-pseudo
+ */
+
+import { checkSelector } from '../../utils/util.js';
+
+/**
+ * @type {import('../features').Feature}
+ */
+export default checkSelector(':default');

data/features/css-descendant-gtgt.js

@@ -0,0 +1,12 @@
+/**
+ * An explicit, non-whitespace spelling of the descendant combinator. `A >> B` is equivalent to `A B`.
+ *
+ * See: https://caniuse.com/css-descendant-gtgt
+ */
+
+import { checkSelector } from '../../utils/util.js';
+
+/**
+ * @type {import('../features').Feature}
+ */
+export default checkSelector('>>');

data/features/css-deviceadaptation.js

@@ -0,0 +1,12 @@
+/**
+ * Method of overriding the size of viewport in web page using the `@viewport` rule, replacing Apple's own popular `<meta>` viewport implementation. Includes the `extend-to-zoom` width value.
+ *
+ * See: https://caniuse.com/css-deviceadaptation
+ */
+
+import { checkAtRule } from '../../utils/util.js';
+
+/**
+ * @type {import('../features').Feature}
+ */
+export default checkAtRule('viewport');

data/features/css-dir-pseudo.js

@@ -0,0 +1,12 @@
+/**
+ * Matches elements based on their directionality. `:dir(ltr)` matches elements which are Left-to-Right. `:dir(rtl)` matches elements which are Right-to-Left.
+ *
+ * See: https://caniuse.com/css-dir-pseudo
+ */
+
+import { checkSelector } from '../../utils/util.js';
+
+/**
+ * @type {import('../features').Feature}
+ */
+export default checkSelector(':dir(');

data/features/css-display-contents.js

@@ -0,0 +1,12 @@
+/**
+ * `display: contents` causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques.
+ *
+ * See: https://caniuse.com/css-display-contents
+ */
+
+/**
+ * @type {import('../features').Feature}
+ */
+export default {
+  'display': 'contents',
+};

data/features/css-element-function.js

@@ -0,0 +1,12 @@
+/**
+ * This function renders a live image generated from an arbitrary HTML element
+ *
+ * See: https://caniuse.com/css-element-function
+ */
+
+/**
+ * @type {import('../features').Feature}
+ */
+export default {
+  '': 'element(',
+};

data/features/css-exclusions.js

@@ -0,0 +1,13 @@
+/**
+ * Exclusions defines how inline content flows around elements. It extends the content wrapping ability of floats to any block-level element.
+ *
+ * See: https://caniuse.com/css-exclusions
+ */
+
+/**
+ * @type {import('../features').Feature}
+ */
+export default {
+  'wrap-flow': true,
+  '-ms-wrap-flow': true,
+};

data/features/css-file-selector-button.js

@@ -0,0 +1,12 @@
+/**
+ * No description available.
+ *
+ * See: This feature comes from MDN: https://developer.mozilla.org/en-US/search?q=::file-selector-button+CSS+pseudo-element
+ */
+
+import { checkSelector } from '../../utils/util.js';
+
+/**
+ * @type {import('../features').Feature}
+ */
+export default checkSelector(':file-selector-button');

data/features/css-filter-function.js

@@ -0,0 +1,12 @@
+/**
+ * This function filters a CSS input image with a set of filter functions (like blur, grayscale or hue)
+ *
+ * See: https://caniuse.com/css-filter-function
+ */
+
+/**
+ * @type {import('../features').Feature}
+ */
+export default {
+  '': 'filter(',
+};