Add target: variant

The `:target` pseudo-selector can be used to style an element whose
`[id]` attribute matches the current URL's [hash][] fragment.

For example:

```html
<div id="section-1" class="border-0 target:border-1"><!-- ... --></div>

<div id="section-2" class="border-0 target:border-1"><!-- ... --></div>
```

When the URL's path is `/#section-1`, the `#section-1` element's
`target:` variant will be active (i.e. `border-1`), and the `#section-2`
element's will be inactive (i.e. `border-0`).

[:target]: https://developer.mozilla.org/en-US/docs/Web/CSS/:target
[hash]: https://developer.mozilla.org/en-US/docs/Web/API/URL/hash

src/lib/substituteVariantsAtRules.js

@@ -135,6 +135,7 @@ const defaultVariantGenerators = (config) => ({
   odd: generatePseudoClassVariant('nth-child(odd)', 'odd'),
   even: generatePseudoClassVariant('nth-child(even)', 'even'),
   empty: generatePseudoClassVariant('empty'),
+  target: generatePseudoClassVariant('target'),
 })
 
 function prependStackableVariants(atRule, variants, stackableVariants) {

tests/variantsAtRule.test.js

@@ -590,6 +590,27 @@ test('it can generate read-only variants', () => {
   })
 })
 
+test('it can generate target variants', () => {
+  const input = `
+    @variants target {
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+    }
+  `
+
+  const output = `
+    .banana { color: yellow; }
+    .chocolate { color: brown; }
+    .target\\:banana:target { color: yellow; }
+    .target\\:chocolate:target { color: brown; }
+  `
+
+  return run(input).then((result) => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})
+
 test('it can generate hover, active and focus variants for multiple classes in one rule', () => {
   const input = `
     @variants hover, focus, active {