Separate snapshot and version

Author: LeaVerou

index.html

@@ -112,8 +112,15 @@ <h1>Filter:</h1>
 						<option value="whatwg" title="All specifications managed by the Web Hypertext Application Technology Working Group (WHATWG)">WHATWG</option>
 						<option value="others" title="All specifications managed by other standardization groups">Others</option>
 					</optgroup>
-					<optgroup label="CSS snapshots">
-						<option value="css2.2" title="Everything included in CSS 2.2">CSS 2.2</option>
+					<optgroup label="Versions">
+						<option value="v2.2" title="Everything included in CSS 2.2">CSS 2.2</option>
+						<option value="v3" title="Everything included in CSS 3">Level 3 Specs</option>
+						<option value="v4" title="Everything included in CSS 4">Level 4 Specs</option>
+						<option value="v5" title="Everything included in CSS 5">Level 5 Specs</option>
+						<option value="v6" title="Everything included in CSS 6">Level 6 Specs</option>
+					</optgroup>
+					<optgroup label="Snapshots">
+						<!-- <option v-for="year in snapshots" :value="year" :title="`All specifications marked as official part of the CSS ${year} snapshot`">{{ year }}</option> -->
 						<option value="css2007" title="All specifications marked as official part of the CSS 2007 snapshot">CSS 2007</option>
 						<option value="css2010" title="All specifications marked as official part of the CSS 2010 snapshot">CSS 2010</option>
 						<option value="css2015" title="All specifications marked as official part of the CSS 2015 snapshot">CSS 2015</option>

src/classes/Spec.js

@@ -91,6 +91,16 @@ export default class Spec extends AbstractFeature {
 		return this.def.status;
 	}
 
+	get version () {
+		if (this.def.version) {
+			return this.def.version;
+		}
+
+		if (/\d$/.test(this.id)) {
+			return Number(this.id.match(/\d+$/)?.[0]);
+		}
+	}
+
 	get firstSnapshot () {
 		return this.def.firstSnapshot;
 	}
@@ -133,7 +143,8 @@ export default class Spec extends AbstractFeature {
 
 	matchesFilter (filter) {
 		if (!filter) {
-			return this.firstSnapshot !== 2.2;
+			// TODO this makes no sense outside CSS
+			return !this.version || this.version > 2.2;
 		}
 
 		if (filter === 'all') {
@@ -145,6 +156,10 @@ export default class Spec extends AbstractFeature {
 			return this.status === filter;
 		}
 
+		if (filter.match(/^v\d/)) {
+			return this.version === Number(filter.substring(1));
+		}
+
 		if (filter.match(/^css\d/)) {
 			if (!this.firstSnapshot) {
 				return false;

tests/css2-box.js

@@ -26,8 +26,7 @@ export default {
 		dev: 'css2/',
 	},
 	status: 'stable',
-	firstSnapshot: 2.2,
-	lastSnapshot: 2.2,
+	version: 2.2,
 	properties: {
 		border: {
 			link: '#border-shorthand-properties',

tests/css2-cascade.js

@@ -6,8 +6,7 @@ export default {
 		dev: 'css2/',
 	},
 	status: 'stable',
-	firstSnapshot: 2.2,
-	lastSnapshot: 2.2,
+	version: 2.2,
 	values: {
 		properties: ['color', 'border-color'],
 		inherit: {

tests/css2-colors.js

@@ -6,8 +6,7 @@ export default {
 		dev: 'css2/',
 	},
 	status: 'stable',
-	firstSnapshot: 2.2,
-	lastSnapshot: 2.2,
+	version: 2.2,
 	properties: {
 		'background-attachment': {
 			link: '#propdef-background-attachment',

tests/css2-fonts.js

@@ -6,8 +6,7 @@ export default {
 		dev: 'css2/',
 	},
 	status: 'stable',
-	firstSnapshot: 2.2,
-	lastSnapshot: 2.2,
+	version: 2.2,
 	properties: {
 		'font-family': {
 			link: '#font-family-prop',

tests/css2-generate.js

@@ -6,8 +6,7 @@ export default {
 		dev: 'css2/',
 	},
 	status: 'stable',
-	firstSnapshot: 2.2,
-	lastSnapshot: 2.2,
+	version: 2.2,
 	properties: {
 		content: {
 			links: {

tests/css2-media.js

@@ -6,8 +6,7 @@ export default {
 		dev: 'css2/',
 	},
 	status: 'stable',
-	firstSnapshot: 2.2,
-	lastSnapshot: 2.2,
+	version: 2.2,
 	mediaqueries: {
 		Syntax: {
 			link: '#at-media-rule',

tests/css2-page.js

@@ -6,8 +6,7 @@ export default {
 		dev: 'css2/',
 	},
 	status: 'stable',
-	firstSnapshot: 2.2,
-	lastSnapshot: 2.2,
+	version: 2.2,
 	atrules: {
 		'@page': {
 			link: '#page-box',

tests/css2-selectors.js

@@ -6,8 +6,7 @@ export default {
 		dev: 'css2/',
 	},
 	status: 'stable',
-	firstSnapshot: 2.2,
-	lastSnapshot: 2.2,
+	version: 2.2,
 	selectors: {
 		'Universal selector': {
 			link: '#universal-selector',