cssdb - npm Package Compare versions

Comparing version 1.6.0 to 2.0.0

CHANGELOG.md

 # Changes to cssdb
 
+### 2.0.0 (April 7th, 2018)
+
+- Renamed: GitHub repository from `css-db` to `cssdb`, now aligning with npm.
+- Renamed: All feature IDs.
+- Updated: Documentation.
+
+Notes: The old feature IDs were problematic because they attempted to follow
+specification section IDs, but some specifications weren’t aren’t always
+covered by a single section, and many sections were inconsistently named.
+Because there was no pattern one could predict for any of the headings, a new
+system was created; to **name** the feature and provide **context**. This meant
+a feature ID like `css-cascade-all-shorthand` became `all-property`, and `css-fonts-propdef-font-variant` became `font-variant-property`, etc. This
+greatly simplified all of the feature IDs and allowed for more predictive
+naming moving forward.
+
 ### 1.6.0 (February 18th, 2018)
@@ -4,0 +19,0 @@

cssdb.json

 [
   {
-    "title": "Break Properties",
-    "description": "Properties for defining the break behavior between and within boxes",
-    "specification": "https://www.w3.org/TR/css-break-3/#breaking-controls",
-    "specificationId": "break-properties",
-    "stage": 4,
-    "caniuse": "multicolumn",
-    "example": "a {\n  break-inside: avoid;\n  break-before: avoid-column;\n  break-after: always;\n}",
-    "polyfills": [
-      {
-        "type": "PostCSS Plugin",
-        "link": "https://github.com/shrpne/postcss-page-break"
-      }
-    ]
-  },
-  {
-    "title": "Cascade `all` Property",
+    "id": "all-property",
+    "title": "`all` Property",
     "description": "A property for defining the reset of all properties of an element",
     "specification": "https://www.w3.org/TR/css-cascade-3/#all-shorthand",
-    "specificationId": "css-cascade-all-shorthand",
     "stage": 4,
@@ -33,21 +18,13 @@ "caniuse": "css-all",
   {
-    "title": "Color Functional Notation",
-    "description": "A space and slash separated notation specifying colors",
-    "specification": "https://drafts.csswg.org/css-color/#ref-for-funcdef-rgb%E2%91%A1%E2%91%A0",
-    "specificationId": "css-color-functional-notation",
-    "stage": 2,
-    "example": "em {\n  background-color: hsl(120deg 100% 25%);\n  box-shadow: 0 0 0 10px hwb(120deg 100% 25% / 80%);\n  color: rgb(0 255 0);\n}"
-  },
-  {
-    "title": "Color `#RRGGBBAA` Notation",
-    "description": "A 4 & 8 character hex notation for color to include the opacity level",
-    "specification": "https://www.w3.org/TR/css-color-4/#hex-notation",
-    "specificationId": "css-color-hex-notation",
+    "id": "any-link-pseudo-class",
+    "title": "`:any-link` Hyperlink Pseudo-Class",
+    "description": "A pseudo-class for matching anchor elements independent of whether they have been visited",
+    "specification": "https://www.w3.org/TR/selectors4/#any-link-pseudo",
     "stage": 3,
-    "caniuse": "css-rrggbbaa",
-    "example": "section {\n  background-color: #f3f3f3f3;\n  color: #0003;\n}",
+    "caniuse": "css-any-link",
+    "example": "nav :any-link > span {\n  background-color: yellow;\n}",
     "polyfills": [
       {
         "type": "PostCSS Plugin",
-        "link": "https://github.com/postcss/postcss-color-hex-alpha"
+        "link": "https://github.com/jonathantneal/postcss-pseudo-class-any-link"
       }
@@ -57,12 +34,27 @@ ]
   {
-    "title": "Color `color-mod()` Function",
-    "description": "A function used to modify a color",
-    "specification": "https://www.w3.org/TR/css-color-4/#modifying-colors",
-    "specificationId": "css-color-modifying-colors",
-    "stage": 3,
-    "example": "p {\n  color: color-mod(black alpha(50%));\n}",
+    "id": "aspect-ratio-property",
+    "title": "`aspect-ratio` Property",
+    "description": "A property for defining the aspect ratio of an element",
+    "specification": "https://tomhodgins.github.io/aspect-ratio-spec/aspect-ratio.html",
+    "stage": 0,
+    "example": "div {\n  aspect-ratio: 16/9;\n  width: 200px;\n}",
     "polyfills": [
       {
+        "type": "JavaScript Library",
+        "link": "https://github.com/tomhodgins/aspect-ratio-spec"
+      }
+    ]
+  },
+  {
+    "id": "break-properties",
+    "title": "Break Properties",
+    "description": "Properties for defining the break behavior between and within boxes",
+    "specification": "https://www.w3.org/TR/css-break-3/#breaking-controls",
+    "stage": 4,
+    "caniuse": "multicolumn",
+    "example": "a {\n  break-inside: avoid;\n  break-before: avoid-column;\n  break-after: always;\n}",
+    "polyfills": [
+      {
         "type": "PostCSS Plugin",
-        "link": "https://github.com/jonathantneal/postcss-color-mod-function"
+        "link": "https://github.com/shrpne/postcss-page-break"
       }
@@ -72,12 +64,13 @@ ]
   {
-    "title": "Color `gray()` Function",
-    "description": "A function used to create fully desaturated colors",
-    "specification": "https://www.w3.org/TR/css-color-4/#grays",
-    "specificationId": "css-color-grays",
+    "id": "case-insensitive-attributes",
+    "title": "Case-Insensitive Attributes",
+    "description": "An attribute selector matching attribute values case-insensitively",
+    "specification": "https://www.w3.org/TR/selectors4/#attribute-case",
     "stage": 3,
-    "example": "p {\n  color: gray(red);\n}",
+    "caniuse": "css-case-insensitive",
+    "example": "[frame=hsides i] {\n  border-style: solid none;\n}",
     "polyfills": [
       {
         "type": "PostCSS Plugin",
-        "link": "https://github.com/postcss/postcss-color-gray"
+        "link": "https://github.com/Semigradsky/postcss-attribute-case-insensitive"
       }
@@ -87,12 +80,20 @@ ]
   {
-    "title": "Color `hwb()` Function",
-    "description": "A function used to specify colors, similar to HSL, but often even easier for humans to work with",
-    "specification": "https://www.w3.org/TR/css-color-4/#the-hwb-notation",
-    "specificationId": "css-color-hwb-notation",
+    "id": "color-functional-notation",
+    "title": "Color Functional Notation",
+    "description": "A space and slash separated notation for specifying colors",
+    "specification": "https://drafts.csswg.org/css-color/#ref-for-funcdef-rgb%E2%91%A1%E2%91%A0",
+    "stage": 2,
+    "example": "em {\n  background-color: hsl(120deg 100% 25%);\n  box-shadow: 0 0 0 10px hwb(120deg 100% 25% / 80%);\n  color: rgb(0 255 0);\n}"
+  },
+  {
+    "id": "color-mod-function",
+    "title": "`color-mod()` Function",
+    "description": "A function for modifying colors",
+    "specification": "https://www.w3.org/TR/css-color-4/#funcdef-color-mod",
     "stage": 3,
-    "example": "p {\n  color: hwb(120, 44%, 50%);\n}",
+    "example": "p {\n  color: color-mod(black alpha(50%));\n}",
     "polyfills": [
       {
         "type": "PostCSS Plugin",
-        "link": "https://github.com/postcss/postcss-color-hwb"
+        "link": "https://github.com/jonathantneal/postcss-color-mod-function"
       }
@@ -102,13 +103,12 @@ ]
   {
-    "title": "Color `rebeccapurple`",
-    "description": "A particularly lovely shade of purple in memory of Rebecca Alison Meyer",
-    "specification": "https://www.w3.org/TR/css-color-4/#valdef-color-rebeccapurple",
-    "specificationId": "css-color-valdef-color-rebeccapurple",
-    "stage": 3,
-    "caniuse": "css-rebeccapurple",
-    "example": "html {\n  color: rebeccapurple;\n}",
+    "id": "custom-media-queries",
+    "title": "Custom Media Queries",
+    "description": "An at-rule for defining aliases that represent media queries",
+    "specification": "https://drafts.csswg.org/mediaqueries-5/#at-ruledef-custom-media",
+    "stage": 2,
+    "example": "@custom-media --narrow-window (max-width: 30em);\n\n@media (--narrow-window) {}",
     "polyfills": [
       {
         "type": "PostCSS Plugin",
-        "link": "https://github.com/postcss/postcss-color-rebeccapurple"
+        "link": "https://github.com/postcss/postcss-custom-media"
       }
@@ -118,6 +118,6 @@ ]
   {
+    "id": "custom-properties",
     "title": "Custom Properties",
     "description": "A syntax for defining custom values accepted by all CSS properties",
     "specification": "https://www.w3.org/TR/css-variables-1/",
-    "specificationId": "css-variables",
     "stage": 4,
@@ -134,6 +134,6 @@ "caniuse": "css-variables",
   {
+    "id": "custom-property-sets",
     "title": "Custom Property Sets",
-    "description": "A syntax for storing properties in a named variable, referenceable in other style rules",
+    "description": "A syntax for storing properties in named variables, referenceable in other style rules",
     "specification": "https://tabatkins.github.io/specs/css-apply-rule/",
-    "specificationId": "css-apply-rule",
     "stage": -1,
@@ -150,6 +150,6 @@ "caniuse": "css-apply-rule",
   {
+    "id": "custom-selectors",
     "title": "Custom Selectors",
-    "description": "An at-rule defining aliases representing selectors",
+    "description": "An at-rule for defining aliases that represent selectors",
     "specification": "https://drafts.csswg.org/css-extensions/#custom-selectors",
-    "specificationId": "css-extensions-custom-selectors",
     "stage": 2,
@@ -165,6 +165,21 @@ "example": "@custom-selector :--heading h1, h2, h3, h4, h5, h6;\n\narticle :--heading + p {}",
   {
+    "id": "dir-pseudo-class",
+    "title": "`:dir` Directionality Pseudo-Class",
+    "description": "A pseudo-class for matching elements based on their directionality",
+    "specification": "https://www.w3.org/TR/selectors4/#dir-pseudo",
+    "stage": 3,
+    "caniuse": "css-dir-pseudo",
+    "example": ".example:dir(rtl) {\n  margin-right: 10px;\n}\n\n.example:dir(ltr) {\n  margin-left: 10px;\n}",
+    "polyfills": [
+      {
+        "type": "PostCSS Plugin",
+        "link": "https://github.com/jonathantneal/postcss-dir-pseudo-class"
+      }
+    ]
+  },
+  {
+    "id": "element-queries",
     "title": "Element Queries",
     "description": "A syntax for container-style element queries",
     "specification": "https://tomhodgins.github.io/element-queries-spec/element-queries.html",
-    "specificationId": "elementqueries",
     "stage": 0,
@@ -180,13 +195,17 @@ "example": "@element html and (min-width: 500px) {\n  body {\n    background: lime;\n  }\n}",
   {
-    "title": "Font `font-variant` Property",
-    "description": "A property defining the usage of alternate glyphs in a font",
-    "specification": "https://www.w3.org/TR/css-fonts-3/#propdef-font-variant",
-    "specificationId": "css-fonts-propdef-font-variant",
-    "stage": 4,
-    "caniuse": "font-variant-alternates",
-    "example": "h2 {\n  font-variant-caps: small-caps;\n}",
+    "id": "focus-visible-pseudo-class",
+    "title": "`:focus-visible` Focus-Indicated Pseudo-Class",
+    "description": "A pseudo-class for matching focused elements that indicate that focus to a user",
+    "specification": "https://www.w3.org/TR/selectors-4/#focus-visible-pseudo",
+    "stage": 3,
+    "caniuse": "css-focus-visible",
+    "example": ":focus:not(:focus-visible) {\n  outline: 0;\n}",
     "polyfills": [
       {
+        "type": "JavaScript Library",
+        "link": "https://github.com/WICG/focus-visible"
+      },
+      {
         "type": "PostCSS Plugin",
-        "link": "https://github.com/postcss/postcss-font-variant"
+        "link": "https://github.com/jonathantneal/postcss-focus-visible"
       }
@@ -196,13 +215,17 @@ ]
   {
-    "title": "Font `system-ui` Family",
-    "description": "A generic font intended to match the default user interface",
-    "specification": "https://www.w3.org/TR/css-fonts-4/#system-ui-def",
-    "specificationId": "css-fonts-system-ui-def",
+    "id": "focus-within-pseudo-class",
+    "title": "`:focus-within` Focus Container Pseudo-Class",
+    "description": "A pseudo-class for matching elements that are either focused or that have focused descendants",
+    "specification": "https://www.w3.org/TR/selectors-4/#focus-within-pseudo",
     "stage": 3,
-    "caniuse": "font-family-system-ui",
-    "example": "body {\n  font-family: system-ui;\n}",
+    "caniuse": "css-focus-within",
+    "example": "form:focus-within {\n  background: rgba(0, 0, 0, 0.3);\n}",
     "polyfills": [
       {
+        "type": "JavaScript Library",
+        "link": "https://github.com/jonathantneal/focus-within"
+      },
+      {
         "type": "PostCSS Plugin",
-        "link": "https://github.com/JLHwung/postcss-font-family-system-ui"
+        "link": "https://github.com/jonathantneal/postcss-focus-within"
       }
@@ -212,22 +235,13 @@ ]
   {
-    "title": "Grid Layout",
-    "description": "A syntax for using a grid concept to lay out content",
-    "specification": "https://www.w3.org/TR/css-grid-1/",
-    "specificationId": "css-grid",
+    "id": "font-variant-property",
+    "title": "`font-variant` Property",
+    "description": "A property for defining the usage of alternate glyphs in a font",
+    "specification": "https://www.w3.org/TR/css-fonts-3/#propdef-font-variant",
     "stage": 4,
-    "caniuse": "css-grid",
-    "example": "section {\n  display: grid;\n  grid-template-columns: 100px 100px 100px;\n  grid-gap: 10px;\n}"
-  },
-  {
-    "title": "Image `image-set()` Function",
-    "description": "A function for delivering the most appropriate image for a user’s device",
-    "specification": "https://www.w3.org/TR/css-images-4/#image-set-notation",
-    "specificationId": "css-images-image-set-notation",
-    "stage": 3,
-    "caniuse": "css-image-set",
-    "example": "p {\n  background-image: image-set(\n    \"foo.png\" 1x,\n    \"foo-2x.png\" 2x,\n    \"foo-print.png\" 600dpi\n  );\n}",
+    "caniuse": "font-variant-alternates",
+    "example": "h2 {\n  font-variant-caps: small-caps;\n}",
     "polyfills": [
       {
         "type": "PostCSS Plugin",
-        "link": "https://github.com/SuperOl3g/postcss-image-set-polyfill"
+        "link": "https://github.com/postcss/postcss-font-variant"
       }
@@ -237,13 +251,12 @@ ]
   {
-    "title": "Logical Properties and Values",
-    "description": "Flow-relative (LTR or RTL) properties and values",
-    "specification": "https://www.w3.org/TR/css-logical/",
-    "specificationId": "css-logical",
+    "id": "gray-function",
+    "title": "`gray()` Function",
+    "description": "A function for specifying fully desaturated colors",
+    "specification": "https://www.w3.org/TR/css-color-4/#funcdef-gray",
     "stage": 3,
-    "caniuse": "css-logical-props",
-    "example": "span:first-child {\n  float: inline-start;\n  margin-inline-start: 10px;\n}",
+    "example": "p {\n  color: gray(50);\n}",
     "polyfills": [
       {
         "type": "PostCSS Plugin",
-        "link": "https://github.com/jonathantneal/postcss-logical-properties"
+        "link": "https://github.com/postcss/postcss-color-gray"
       }
@@ -253,12 +266,13 @@ ]
   {
-    "title": "Media Queries Custom Media Queries",
-    "description": "An at-rule defining aliases representing media queries",
-    "specification": "https://drafts.csswg.org/mediaqueries-5/#custom-mq",
-    "specificationId": "mediaqueries-custom-mq",
-    "stage": 2,
-    "example": "@custom-media --narrow-window (max-width: 30em);\n\n@media (--narrow-window) {}",
+    "id": "grid-layout",
+    "title": "Grid Layout",
+    "description": "A syntax for using a grid concept to lay out content",
+    "specification": "https://www.w3.org/TR/css-grid-1/",
+    "stage": 4,
+    "caniuse": "css-grid",
+    "example": "section {\n  display: grid;\n  grid-template-columns: 100px 100px 100px;\n  grid-gap: 10px;\n}",
     "polyfills": [
       {
         "type": "PostCSS Plugin",
-        "link": "https://github.com/postcss/postcss-custom-media"
+        "link": "https://github.com/postcss/autoprefixer"
       }
@@ -268,12 +282,21 @@ ]
   {
-    "title": "Media Queries Ranges",
-    "description": "A syntax defining media query ranges using ordinary mathematical comparison operators",
-    "specification": "https://www.w3.org/TR/mediaqueries-4/#mq-ranges",
-    "specificationId": "mediaqueries-mq-ranges",
+    "id": "has-pseudo-class",
+    "title": "`:has()` Relational Pseudo-Class",
+    "description": "A pseudo-class for matching ancestor and sibling elements",
+    "specification": "https://www.w3.org/TR/selectors-4/#has-pseudo",
     "stage": 3,
-    "example": "@media (width < 480px) {}\n\n@media (480px <= width < 768px) {}\n\n@media (width >= 768px) {}",
+    "example": "a:has(> img) {\n  display: block;\n}"
+  },
+  {
+    "id": "hexadecimal-alpha-notation",
+    "title": "Hexadecimal Alpha Notation",
+    "description": "A 4 & 8 character hex color notation for specifying the opacity level",
+    "specification": "https://www.w3.org/TR/css-color-4/#hex-notation",
+    "stage": 3,
+    "caniuse": "css-rrggbbaa",
+    "example": "section {\n  background-color: #f3f3f3f3;\n  color: #0003;\n}",
     "polyfills": [
       {
         "type": "PostCSS Plugin",
-        "link": "https://github.com/postcss/postcss-media-minmax"
+        "link": "https://github.com/postcss/postcss-color-hex-alpha"
       }
@@ -283,12 +306,12 @@ ]
   {
-    "title": "Media Queries `media()` Function",
-    "description": "A function matching media queries within values",
-    "specification": "https://jonathantneal.github.io/media-expressions-spec/",
-    "specificationId": "media-expressions",
-    "stage": 0,
-    "example": "p {\n  font-size: media(\n    16px,\n    (min-width:  600px) 20px,\n    (min-width: 1000px) 40px,\n    (min-width: 1400px) 60px\n  );\n}",
+    "id": "hwb-function",
+    "title": "`hwb()` Function",
+    "description": "A function for specifying colors by hue and then a degree of whiteness and blackness to mix into it",
+    "specification": "https://www.w3.org/TR/css-color-4/#funcdef-hwb",
+    "stage": 3,
+    "example": "p {\n  color: hwb(120 44% 50%);\n}",
     "polyfills": [
       {
         "type": "PostCSS Plugin",
-        "link": "https://github.com/jonathantneal/postcss-media-fn"
+        "link": "https://github.com/postcss/postcss-color-hwb"
       }
@@ -298,12 +321,13 @@ ]
   {
-    "title": "Nesting",
-    "description": "A syntax for nesting relative rules inside another",
-    "specification": "https://tabatkins.github.io/specs/css-nesting/",
-    "specificationId": "css-nesting",
-    "stage": 1,
-    "example": "article {\n  & p {\n    color: #333;\n  }\n}",
+    "id": "image-set-function",
+    "title": "`image-set()` Function",
+    "description": "A function for specifying image sources based on the user’s resolution",
+    "specification": "https://www.w3.org/TR/css-images-4/#image-set-notation",
+    "stage": 3,
+    "caniuse": "css-image-set",
+    "example": "p {\n  background-image: image-set(\n    \"foo.png\" 1x,\n    \"foo-2x.png\" 2x,\n    \"foo-print.png\" 600dpi\n  );\n}",
     "polyfills": [
       {
         "type": "PostCSS Plugin",
-        "link": "https://github.com/jonathantneal/postcss-nesting"
+        "link": "https://github.com/jonathantneal/postcss-image-set-function"
       }
@@ -313,13 +337,29 @@ ]
   {
-    "title": "Selector Attribute Case-Sensitivity",
-    "description": "An attribute selector matching attribute values case-insensitively",
-    "specification": "https://www.w3.org/TR/selectors4/#attribute-case",
-    "specificationId": "selectors-attribute-case",
+    "id": "lab-function",
+    "title": "`lab()` Function",
+    "description": "A function for specifying colors expressed in the CIE Lab color space",
+    "specification": "https://www.w3.org/TR/css-color-4/#funcdef-lab",
     "stage": 3,
-    "caniuse": "css-case-insensitive",
-    "example": "[frame=hsides i] {\n  border-style: solid none;\n}",
+    "example": "example {\n  color: lab(240 50 20)\n}"
+  },
+  {
+    "id": "lch-function",
+    "title": "`lch()` Function",
+    "description": "A function for specifying colors expressed in the CIE Lab color space with chroma and hue",
+    "specification": "https://www.w3.org/TR/css-color-4/#funcdef-lch",
+    "stage": 3,
+    "example": "example {\n  color: lch(53 105 40)\n}"
+  },
+  {
+    "id": "logical-properties-and-values",
+    "title": "Logical Properties and Values",
+    "description": "Flow-relative (left-to-right or right-to-left) properties and values",
+    "specification": "https://www.w3.org/TR/css-logical/",
+    "stage": 3,
+    "caniuse": "css-logical-props",
+    "example": "span:first-child {\n  float: inline-start;\n  margin-inline-start: 10px;\n}",
     "polyfills": [
       {
         "type": "PostCSS Plugin",
-        "link": "https://github.com/Semigradsky/postcss-attribute-case-insensitive"
+        "link": "https://github.com/jonathantneal/postcss-logical-properties"
       }
@@ -329,13 +369,13 @@ ]
   {
-    "title": "Selector `:any-link` Pseudo-Class",
-    "description": "A pseudo-class matching anchor elements independent of whether they have been visited",
-    "specification": "https://www.w3.org/TR/selectors4/#the-any-link-pseudo",
-    "specificationId": "selectors-any-link-pseudo",
+    "id": "matches-pseudo-class",
+    "title": "`:matches()` Matches-Any Pseudo-Class",
+    "description": "A pseudo-class for matching elements in a selector list",
+    "specification": "https://www.w3.org/TR/selectors4/#matches-pseudo",
     "stage": 3,
-    "caniuse": "css-any-link",
-    "example": "nav :any-link > span {\n  background-color: yellow;\n}",
+    "caniuse": "css-matches-pseudo",
+    "example": "p:matches(:first-child, .special) {\n  margin-top: 1em;\n}",
     "polyfills": [
       {
         "type": "PostCSS Plugin",
-        "link": "https://github.com/jonathantneal/postcss-pseudo-class-any-link"
+        "link": "https://github.com/postcss/postcss-selector-matches"
       }
@@ -345,13 +385,12 @@ ]
   {
-    "title": "Selector `:dir` Pseudo-Class",
-    "description": "A pseudo-class matching elements based on their directionality",
-    "specification": "https://www.w3.org/TR/selectors4/#the-dir-pseudo",
-    "specificationId": "selectors-dir-pseudo",
-    "stage": 3,
-    "caniuse": "css-dir-pseudo",
-    "example": ".example:dir(rtl) {\n  margin-right: 10px;\n}\n\n.example:dir(ltr) {\n  margin-left: 10px;\n}",
+    "id": "media-function",
+    "title": "`media()` Function",
+    "description": "A function for specifying media queries within values",
+    "specification": "https://jonathantneal.github.io/media-expressions-spec/",
+    "stage": 0,
+    "example": "p {\n  font-size: media(\n    16px,\n    (min-width:  600px) 20px,\n    (min-width: 1000px) 40px,\n    (min-width: 1400px) 60px\n  );\n}",
     "polyfills": [
       {
         "type": "PostCSS Plugin",
-        "link": "https://github.com/jonathantneal/postcss-dir-pseudo-class"
+        "link": "https://github.com/jonathantneal/postcss-media-fn"
       }
@@ -361,17 +400,12 @@ ]
   {
-    "title": "Selector `:focus-visible` Focus-Indicated Pseudo-Class",
-    "description": "A pseudo-class matching elements with `:focus` that would also make focus evident",
-    "specification": "https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo",
-    "specificationId": "selectors-focus-visible-pseudo",
+    "id": "media-query-ranges",
+    "title": "Media Query Ranges",
+    "description": "A syntax for defining media query ranges using ordinary comparison operators",
+    "specification": "https://www.w3.org/TR/mediaqueries-4/#range-context",
     "stage": 3,
-    "caniuse": "css-focus-visible",
-    "example": ":focus:not(:focus-visible) {\n  outline: 0;\n}",
+    "example": "@media (width < 480px) {}\n\n@media (480px <= width < 768px) {}\n\n@media (width >= 768px) {}",
     "polyfills": [
       {
-        "type": "JavaScript Library",
-        "link": "https://github.com/WICG/focus-visible"
-      },
-      {
         "type": "PostCSS Plugin",
-        "link": "https://github.com/jonathantneal/postcss-focus-visible"
+        "link": "https://github.com/postcss/postcss-media-minmax"
       }
@@ -381,17 +415,12 @@ ]
   {
-    "title": "Selector `:focus-within` Focus Container Pseudo-Class",
-    "description": "A pseudo-class matching elements that either themselves match `:focus` or that have descendants which match `:focus`",
-    "specification": "https://www.w3.org/TR/selectors-4/#the-focus-within-pseudo",
-    "specificationId": "selectors-focus-within-pseudo",
-    "stage": 3,
-    "caniuse": "css-focus-within",
-    "example": "form:focus-within {\n  background: rgba(0, 0, 0, 0.3);\n}",
+    "id": "nesting-rules",
+    "title": "Nesting Rules",
+    "description": "A syntax for nesting relative rules within rules",
+    "specification": "https://tabatkins.github.io/specs/css-nesting/",
+    "stage": 1,
+    "example": "article {\n  & p {\n    color: #333;\n  }\n}",
     "polyfills": [
       {
-        "type": "JavaScript Library",
-        "link": "https://github.com/jonathantneal/focus-within"
-      },
-      {
         "type": "PostCSS Plugin",
-        "link": "https://github.com/jonathantneal/postcss-focus-within"
+        "link": "https://github.com/jonathantneal/postcss-nesting"
       }
@@ -401,13 +430,13 @@ ]
   {
-    "title": "Selector `:matches()` Matches-Any Pseudo-Class",
-    "description": "A pseudo-class matching elements in a selector list",
-    "specification": "https://www.w3.org/TR/selectors4/#matches",
-    "specificationId": "selectors-matches-pseudo",
+    "id": "not-pseudo-class",
+    "title": "`:not()` Negation Pseudo-Class",
+    "description": "A pseudo-class for ignoring elements in a selector list",
+    "specification": "https://www.w3.org/TR/selectors4/#negation-pseudo",
     "stage": 3,
-    "caniuse": "css-matches-pseudo",
-    "example": "p:matches(:first-child, .special) {\n  margin-top: 1em;\n}",
+    "caniuse": "css-not-sel-list",
+    "example": "p:not(:first-child, .special) {\n  margin-top: 1em;\n}",
     "polyfills": [
       {
         "type": "PostCSS Plugin",
-        "link": "https://github.com/postcss/postcss-selector-matches"
+        "link": "https://github.com/postcss/postcss-selector-not"
       }
@@ -417,13 +446,13 @@ ]
   {
-    "title": "Selector `:not()` Selector List Negation Pseudo-Class",
-    "description": "A pseudo-class ignoring elements in a selector list",
-    "specification": "https://www.w3.org/TR/selectors4/#negation",
-    "specificationId": "selectors-negation-pseudo",
+    "id": "overflow-wrap-property",
+    "title": "`overflow-wrap` Property",
+    "description": "A property for defining whether to insert line breaks within words to prevent overflowing",
+    "specification": "https://www.w3.org/TR/css-text-3/#overflow-wrap-property",
     "stage": 3,
-    "caniuse": "css-not-sel-list",
-    "example": "p:not(:first-child, .special) {\n  margin-top: 1em;\n}",
+    "caniuse": "wordwrap",
+    "example": "p {\n  overflow-wrap: break-word;\n}",
     "polyfills": [
       {
         "type": "PostCSS Plugin",
-        "link": "https://github.com/postcss/postcss-selector-not"
+        "link": "https://github.com/mattdimu/postcss-replace-overflow-wrap"
       }
@@ -433,12 +462,13 @@ ]
   {
-    "title": "Sizing `aspect-ratio` Property",
-    "description": "A property for defining the aspect ratio of an element",
-    "specification": "https://tomhodgins.github.io/aspect-ratio-spec/aspect-ratio.html",
-    "specificationId": "aspect-ratio",
-    "stage": 0,
-    "example": "div {\n  aspect-ratio: 16/9;\n  width: 200px;\n}",
+    "id": "rebeccapurple-color",
+    "title": "`rebeccapurple` Color",
+    "description": "A particularly lovely shade of purple in memory of Rebecca Alison Meyer",
+    "specification": "https://www.w3.org/TR/css-color-4/#valdef-color-rebeccapurple",
+    "stage": 3,
+    "caniuse": "css-rebeccapurple",
+    "example": "html {\n  color: rebeccapurple;\n}",
     "polyfills": [
       {
-        "type": "JavaScript Library",
-        "link": "https://github.com/tomhodgins/aspect-ratio-spec"
+        "type": "PostCSS Plugin",
+        "link": "https://github.com/postcss/postcss-color-rebeccapurple"
       }
@@ -448,13 +478,21 @@ ]
   {
-    "title": "Text `overflow-wrap` Property",
-    "description": "A property for defining whether to insert line breaks within words to prevent overflowing",
-    "specification": "https://www.w3.org/TR/css-text-3/#overflow-wrap-property",
-    "specificationId": "css-text-overflow-wrap-property",
+    "id": "something-pseudo-class",
+    "title": "`:something()` Zero-Specificity Pseudo-Class",
+    "description": "A pseudo-class for matching elements in a selector list without contributing specificity",
+    "specification": "https://www.w3.org/TR/selectors-4/#something-pseudo",
     "stage": 3,
-    "caniuse": "wordwrap",
-    "example": "p {\n  overflow-wrap: break-word;\n}",
+    "example": "a:something(:not(:hover)) {\n  text-decoration: none;\n}"
+  },
+  {
+    "id": "system-ui-font-family",
+    "title": "`system-ui` Font Family",
+    "description": "A generic font used to match the user’s interface",
+    "specification": "https://www.w3.org/TR/css-fonts-4/#system-ui-def",
+    "stage": 3,
+    "caniuse": "font-family-system-ui",
+    "example": "body {\n  font-family: system-ui;\n}",
     "polyfills": [
       {
         "type": "PostCSS Plugin",
-        "link": "https://github.com/mattdimu/postcss-replace-overflow-wrap"
+        "link": "https://github.com/JLHwung/postcss-font-family-system-ui"
       }
@@ -464,6 +502,6 @@ ]
   {
+    "id": "when-else-rules",
     "title": "When/Else Rules",
-    "description": "At-rules defining conditional rules and unifying the disparate conditional rules into a single grammar",
+    "description": "At-rules for specifying media queries and support queries in a single grammar",
     "specification": "https://tabatkins.github.io/specs/css-when-else/",
-    "specificationId": "css-when-else",
     "stage": 1,
@@ -470,0 +508,0 @@ "example": "@when media(width >= 640px) and (supports(display: flex) or supports(display: grid)) {\n  /* A */\n} @else media(pointer: coarse) {\n  /* B */\n} @else {\n  /* C */\n}"

package.json

 {
   "name": "cssdb",
-  "version": "1.6.0",
+  "version": "2.0.0",
   "description": "A comprehensive list of CSS features and their positions in the process of becoming implemented web standards",
   "author": "Jonathan Neal <[e-mail]>",
   "license": "CC0-1.0",
-  "repository": "jonathantneal/css-db",
-  "homepage": "https://github.com/jonathantneal/css-db#readme",
-  "bugs": "https://github.com/jonathantneal/css-db/issues",
+  "repository": "jonathantneal/cssdb",
+  "homepage": "https://github.com/jonathantneal/cssdb#readme",
+  "bugs": "https://github.com/jonathantneal/cssdb/issues",
   "main": "cssdb.json",
@@ -19,9 +19,9 @@ "files": [
   "devDependencies": {
-    "browserslist": "^3.1.0",
-    "caniuse-lite": "^1.0.30000809",
+    "browserslist": "^3.2.4",
+    "caniuse-lite": "^1.0.30000824",
     "eslit": "^5.0.0",
     "fse": "^4.0.0",
-    "marked": "^0.3.14",
-    "node-fetch": "^2.0.0",
-    "postcss": "^6.0.19",
+    "marked": "^0.3.19",
+    "node-fetch": "^2.1.2",
+    "postcss": "^6.0.21",
     "pre-commit": "^1.2.2"
@@ -28,0 +28,0 @@ },

README.md

@@ -1,6 +0,5 @@
-# cssdb [<img src="https://jonathantneal.github.io/css-db/cssdb.svg" alt="cssdb logo" width="90" height="90" align="right">][cssdb]
+# cssdb [<img src="https://jonathantneal.github.io/cssdb/cssdb.svg" alt="cssdb logo" width="90" height="90" align="right">][cssdb]
 
 [![NPM Version][npm-img]][npm-url]
 [![Build Status][cli-img]][cli-url]
-[![Licensing][lic-img]][lic-url]
 
@@ -10,2 +9,4 @@ [cssdb] is a comprehensive list of CSS features and their positions in
 
+---
+
 Did you come here to update the status of a CSS feature or add a new one?
@@ -16,11 +17,21 @@ Quick, read [CONTRIBUTING.md](CONTRIBUTING.md).
 
-[cssdb]: https://github.com/jonathantneal/css-db
+---
 
+[cssdb] ranks CSS features by stages that reflect the real-life stability of
+new CSS features.
+
+You can read an [inside view of the CSSWG] to learn about the official
+(and unofficial) development stages of CSS specifications. In reality,
+specifications and browser implementations happen out of sync. For example,
+there are stable CSS features missing in all browsers, while other CSS features
+developed outside the [CSSWG] have appeared in browsers behind flags. This is
+too ambiguous for the web development community, and a more accountable process
+is desired.
+
+[cli-img]: https://img.shields.io/travis/jonathantneal/cssdb.svg
+[cli-url]: https://travis-ci.org/jonathantneal/cssdb
+[cssdb]: https://github.com/jonathantneal/cssdb
+[CSSWG]: https://wiki.csswg.org/spec
+[inside view of the CSSWG]: http://fantasai.inkedblade.net/weblog/2011/inside-csswg/process
+[npm-img]: https://img.shields.io/npm/v/cssdb.svg
 [npm-url]: https://www.npmjs.com/package/cssdb
-[npm-img]: https://img.shields.io/npm/v/cssdb.svg
-[cli-url]: https://travis-ci.org/jonathantneal/css-db
-[cli-img]: https://img.shields.io/travis/jonathantneal/css-db.svg
-[lic-url]: LICENSE.md
-[lic-img]: https://img.shields.io/badge/license-CC0--1.0-blue.svg
-[git-url]: https://gitter.im/postcss/postcss
-[git-img]: https://img.shields.io/badge/chat-gitter-blue.svg

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28700

increased by7.94%

Lines of code

483

increased by8.54%

Number of lines in readme file

36

increased by44%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes