feat: Add support for alpha channel modifier to arbitrary color class…

…es (#198)

src/_rules/background.js

@@ -1,4 +1,4 @@
-import { positionMap, globalKeywords, makeGlobalStaticRules, resolveArbitraryValues } from '#utils';
+import { positionMap, globalKeywords, makeGlobalStaticRules, resolveArbitraryValues, resolveArbitraryCssVariable } from '#utils';
 
 export const backgrounds = [
  // size
@@ -51,7 +51,7 @@ export const backgrounds = [
  ['bg-inherit', { 'background-color': 'inherit' }],
  ['bg-transparent', { 'background-color': 'transparent' }],
  ['bg-current', { 'background-color': 'currentColor' }],
- [/^bg-\[(var\(--.+\)|--.+)]$/, ([, val]) => ({ 'background-color': val.startsWith('--') ? `var(${val})` : val })],
+ [/^bg-\[(var\(--.+\)|--[^\/]+)(\/(0|[1-9][0-9]?|100))?]$/, ([, val, alpha]) => ({ 'background-color': resolveArbitraryCssVariable(val, alpha) })],
 
  // image
  ['bg-none', { 'background-image': 'none' }],

src/_rules/border.js

@@ -1,5 +1,5 @@
 import { escapeSelector } from '@unocss/core';
-import { directionMap, cornerMap, resolveArbitraryValues } from '#utils';
+import { directionMap, cornerMap, resolveArbitraryValues, resolveArbitraryCssVariable } from '#utils';
 import { lineWidth } from '#theme';
 
 const borderStyles = ['solid', 'dashed', 'dotted', 'double', 'hidden', 'none', 'groove', 'ridge', 'inset', 'outset'];
@@ -15,7 +15,7 @@ export const borders = [
  [/^border-inverted$/, () => ({ 'border-color': 'var(--w-s-border-inverted)' })],
  [/^border-inherit$/, () => ({ 'border-color': 'inherit' })],
  [/^border-current$/, () => ({ 'border-color': 'currentColor' })],
- [/^border(-[lrtbxy])?-\[(var\(.+\)|--.+|\D.*)]$/, handleArbitraryBorderColor],
+ [/^border(-[lrtbxy])?-\[(var\(--.+\)|--[^\/]+|\D[^\/]*)(\/(0|[1-9][0-9]?|100))?]$/, handleArbitraryBorderColor],
 
  // border-style
  [new RegExp(`^border(-[lrtbxy])?-(${borderStyles.join('|')})$`), handleBorderStyle, { autocomplete: [`border-(${borderStyles.join('|')})`, `border-<directions>-(${borderStyles.join('|')})`] }],
@@ -30,9 +30,8 @@ function handleArbitraryBorderWidth([, dir = '', value, unit], context) {
  return directionMap[dir.substring(1)]?.map((i) => [`border${i}-width`, resolveArbitraryValues(value, unit, context)]);
 }
 
-function handleArbitraryBorderColor([, dir = '', val]) {
- const cssVal = val.startsWith('--') ? `var(${val})` : val;
- return directionMap[dir.substring(1)]?.map((i) => [`border${i}-color`, cssVal]);
+function handleArbitraryBorderColor([, dir = '', val, alpha]) {
+ return directionMap[dir.substring(1)]?.map((i) => [`border${i}-color`, resolveArbitraryCssVariable(val, alpha)]);
 }
 
 function handleBorderStyle([, dir = '', style]) {
@@ -50,7 +49,7 @@ export const divide = [
 
  // border-color
  [/^divide(-[xy])?-current$/, (match) => handleArbitraryDivideColor(match.concat('currentColor'))],
- [/^divide(-[xy])?-\[(var\(.+\)|--.+|\D.*)]$/, handleArbitraryDivideColor],
+ [/^divide(-[xy])?-\[(var\(--.+\)|--[^\/]+|\D[^\/]*)(\/(0|[1-9][0-9]?|100))?]$/, handleArbitraryDivideColor],
 ];
 
 function getDivideWidthStyles(selector, dir, width, reverse) {
@@ -75,8 +74,8 @@ function handleArbitraryDivideWidth([_selector, dir, width, unit, reverse], { th
  return getDivideWidthStyles(_selector, dir, resolveArbitraryValues(width, unit, theme), reverse);
 }
 
-function handleArbitraryDivideColor([_selector, dir = '', val]) {
- const cssRules = directionMap[dir?.substring(1)]?.map((i) => `border${i}-color: ${val.startsWith('--') ? `var(${val})` : val}`);
+function handleArbitraryDivideColor([_selector, dir = '', val, alpha]) {
+ const cssRules = directionMap[dir?.substring(1)]?.map((i) => `border${i}-color: ${resolveArbitraryCssVariable(val, alpha)}`);
  if (cssRules) return `.${escapeSelector(_selector)}>*+*{${cssRules.join(';')};}`;
 }
 

src/_rules/color.js

@@ -1,3 +1,5 @@
+import { resolveArbitraryCssVariable } from '#utils';
+
 export const opacity = [[/^opacity-(\d+)$/, ([, d], { theme }) => ({ opacity: theme.opacity[d] }), { autocomplete: 'opacity-${opacity}' }]];
 
 export const caretColors = [
@@ -10,6 +12,5 @@ export const textColors = [
  // ['text-inherit', { 'color': 'inherit' }], // This class currently sets "text-align: inherit;" in align.js
  ['text-transparent', { color: 'transparent' }],
  ['text-current', { color: 'currentColor' }],
- [/^text-\[(--.+)]$/, ([, p]) => ({ color: `var(${p})` })],
- [/^text-\[(var\(--.+\))]$/, ([, p]) => ({ color: p })],
+ [/^text-\[(var\(--.+\)|--[^\/]+)(\/(0|[1-9][0-9]?|100))?]$/, ([, val, alpha]) => ({ color: resolveArbitraryCssVariable(val, alpha) })],
 ];

src/_rules/outline.js

@@ -1,4 +1,5 @@
 import { lineWidth } from '#theme';
+import { resolveArbitraryCssVariable } from '#utils';
 
 const outlineNone = {
  outline: '2px solid transparent',
@@ -9,8 +10,7 @@ export const outlineColors = [
  ['outline-inherit', { 'outline-color': 'inherit' }],
  ['outline-transparent', { 'outline-color': 'transparent' }],
  ['outline-current', { 'outline-color': 'currentColor' }],
- [/^outline-\[(--.+)]$/, ([, p]) => ({ 'outline-color': `var(${p})` })],
- [/^outline-\[(var\(--.+\))]$/, ([, p]) => ({ 'outline-color': p })],
+ [/^outline-\[(var\(--.+\)|--[^\/]+)(\/(0|[1-9][0-9]?|100))?]$/, ([, val, alpha]) => ({ 'outline-color': resolveArbitraryCssVariable(val, alpha) })],
 ];
 
 export const outlineStyle = [

src/_utils/utilities.js

@@ -3,6 +3,7 @@ import { colorOpacityToString, colorToString, parseCssColor } from './colors.js'
 import { handler as h } from './handlers/index.js';
 import { directionMap, globalKeywords } from './mappings.js';
 import { getComponents } from './getComponents.js';
+import { percent } from './handlers/handlers.js';
 
 /**
  * Provide {@link DynamicMatcher} function returning spacing definition. See spacing rules.
@@ -229,3 +230,14 @@ export function resolveArbitraryValues(value, unit, context) {
  if (value.startsWith('--')) return `var(${value})`;
  return h.rem(value) || value;
 }
+
+export function resolveArbitraryCssVariable(val, alpha) {
+ let cssValue = val.startsWith('--') ? `var(${val})` : val;
+ if (alpha) {
+ if (!/^var\(--w-(s-)?rgb-/.test(cssValue)) {
+ cssValue = cssValue.replace(/^var\(--w-(s-)?(color-)?(.*)\)$/, 'var(--w-$1rgb-$3)');
+ }
+ cssValue = `rgba(${cssValue},${percent(alpha.substring(1))})`;
+ }
+ return cssValue;
+}

test/__snapshots__/background.js.snap

@@ -89,6 +89,20 @@ exports[`bg size 1`] = `
 .bg-contain{background-size:contain;}"
 `;
 
+exports[`supports setting arbitrary background color variables with alpha channel 1`] = `
+"/* layer: default */
+.bg-\\[--w-black\\/90\\]{background-color:rgba(var(--w-rgb-black),0.9);}
+.bg-\\[--w-rgb-black\\/75\\]{background-color:rgba(var(--w-rgb-black),0.75);}
+.bg-\\[--w-rgb-white\\/0\\]{background-color:rgba(var(--w-rgb-white),0);}
+.bg-\\[--w-s-color-background-positive-selected-hover\\/100\\]{background-color:rgba(var(--w-s-rgb-background-positive-selected-hover),1);}
+.bg-\\[--w-s-color-background\\/5\\]{background-color:rgba(var(--w-s-rgb-background),0.05);}
+.bg-\\[--w-white\\/5\\]{background-color:rgba(var(--w-rgb-white),0.05);}
+.bg-\\[var\\(--w-black\\)\\/100\\]{background-color:rgba(var(--w-rgb-black),1);}
+.bg-\\[var\\(--w-color-text-link-active\\)\\/55\\]{background-color:rgba(var(--w-rgb-text-link-active),0.55);}
+.bg-\\[var\\(--w-s-color-border\\)\\/60\\]{background-color:rgba(var(--w-s-rgb-border),0.6);}
+.bg-\\[var\\(--w-s-rgb-border-disabled\\)\\/12\\]{background-color:rgba(var(--w-s-rgb-border-disabled),0.12);}"
+`;
+
 exports[`supports setting arbitrary background colors 1`] = `
 "/* layer: default */
 .bg-\\[--w-s-color-background\\],

test/__snapshots__/border.js.snap

@@ -68,6 +68,20 @@ exports[`border > supports setting arbitrary border color variables 1`] = `
 .border-y-\\[--w-s-color-border\\]{border-top-color:var(--w-s-color-border);border-bottom-color:var(--w-s-color-border);}"
 `;
 
+exports[`border > supports setting arbitrary border color variables with alpha channel 1`] = `
+"/* layer: default */
+.border-\\[--w-black\\/90\\]{border-color:rgba(var(--w-rgb-black),0.9);}
+.border-\\[--w-rgb-white\\/0\\]{border-color:rgba(var(--w-rgb-white),0);}
+.border-\\[--w-s-color-background-positive-selected-hover\\/100\\]{border-color:rgba(var(--w-s-rgb-background-positive-selected-hover),1);}
+.border-\\[var\\(--w-color-text-link-active\\)\\/55\\]{border-color:rgba(var(--w-rgb-text-link-active),0.55);}
+.border-\\[var\\(--w-s-color-border\\)\\/60\\]{border-color:rgba(var(--w-s-rgb-border),0.6);}
+.border-l-\\[--w-s-color-background\\/5\\]{border-left-color:rgba(var(--w-s-rgb-background),0.05);}
+.border-l-\\[var\\(--w-s-rgb-border-disabled\\)\\/12\\]{border-left-color:rgba(var(--w-s-rgb-border-disabled),0.12);}
+.border-r-\\[var\\(--w-black\\)\\/100\\]{border-right-color:rgba(var(--w-rgb-black),1);}
+.border-x-\\[--w-white\\/5\\]{border-left-color:rgba(var(--w-rgb-white),0.05);border-right-color:rgba(var(--w-rgb-white),0.05);}
+.border-y-\\[--w-rgb-black\\/75\\]{border-top-color:rgba(var(--w-rgb-black),0.75);border-bottom-color:rgba(var(--w-rgb-black),0.75);}"
+`;
+
 exports[`border > supports setting arbitrary border width 1`] = `
 "/* layer: default */
 .border-\\[6\\]{border-width:0.6rem;}
@@ -94,6 +108,20 @@ exports[`border > supports setting arbitrary divide color variables 1`] = `
 .divide-y-\\[var\\(--w-s-color-border-positive\\)\\]>*+*{border-top-color: var(--w-s-color-border-positive);border-bottom-color: var(--w-s-color-border-positive);}"
 `;
 
+exports[`border > supports setting arbitrary divide color variables with alpha channel 1`] = `
+"/* layer: default */
+.divide-\\[--w-black\\/90\\]>*+*{border-color: rgba(var(--w-rgb-black),0.9);}
+.divide-\\[--w-rgb-white\\/0\\]>*+*{border-color: rgba(var(--w-rgb-white),0);}
+.divide-\\[--w-s-color-background-positive-selected-hover\\/100\\]>*+*{border-color: rgba(var(--w-s-rgb-background-positive-selected-hover),1);}
+.divide-\\[var\\(--w-color-text-link-active\\)\\/55\\]>*+*{border-color: rgba(var(--w-rgb-text-link-active),0.55);}
+.divide-\\[var\\(--w-s-color-border\\)\\/60\\]>*+*{border-color: rgba(var(--w-s-rgb-border),0.6);}
+.divide-x-\\[--w-s-color-background\\/5\\]>*+*{border-left-color: rgba(var(--w-s-rgb-background),0.05);border-right-color: rgba(var(--w-s-rgb-background),0.05);}
+.divide-x-\\[--w-white\\/5\\]>*+*{border-left-color: rgba(var(--w-rgb-white),0.05);border-right-color: rgba(var(--w-rgb-white),0.05);}
+.divide-y-\\[--w-rgb-black\\/75\\]>*+*{border-top-color: rgba(var(--w-rgb-black),0.75);border-bottom-color: rgba(var(--w-rgb-black),0.75);}
+.divide-y-\\[var\\(--w-black\\)\\/100\\]>*+*{border-top-color: rgba(var(--w-rgb-black),1);border-bottom-color: rgba(var(--w-rgb-black),1);}
+.divide-y-\\[var\\(--w-s-rgb-border-disabled\\)\\/12\\]>*+*{border-top-color: rgba(var(--w-s-rgb-border-disabled),0.12);border-bottom-color: rgba(var(--w-s-rgb-border-disabled),0.12);}"
+`;
+
 exports[`border > supports setting border color 1`] = `
 "/* layer: default */
 .border-transparent{border-color:transparent;}

test/__snapshots__/color.js.snap

@@ -23,6 +23,20 @@ exports[`opacity by theme 1`] = `
 .opacity-75{opacity:75%;}"
 `;
 
+exports[`supports setting arbitrary outline color variables with alpha channel 1`] = `
+"/* layer: default */
+.text-\\[--w-black\\/90\\]{color:rgba(var(--w-rgb-black),0.9);}
+.text-\\[--w-rgb-black\\/75\\]{color:rgba(var(--w-rgb-black),0.75);}
+.text-\\[--w-rgb-white\\/0\\]{color:rgba(var(--w-rgb-white),0);}
+.text-\\[--w-s-color-background-positive-selected-hover\\/100\\]{color:rgba(var(--w-s-rgb-background-positive-selected-hover),1);}
+.text-\\[--w-s-color-background\\/5\\]{color:rgba(var(--w-s-rgb-background),0.05);}
+.text-\\[--w-white\\/5\\]{color:rgba(var(--w-rgb-white),0.05);}
+.text-\\[var\\(--w-black\\)\\/100\\]{color:rgba(var(--w-rgb-black),1);}
+.text-\\[var\\(--w-color-text-link-active\\)\\/55\\]{color:rgba(var(--w-rgb-text-link-active),0.55);}
+.text-\\[var\\(--w-s-color-border\\)\\/60\\]{color:rgba(var(--w-s-rgb-border),0.6);}
+.text-\\[var\\(--w-s-rgb-border-disabled\\)\\/12\\]{color:rgba(var(--w-s-rgb-border-disabled),0.12);}"
+`;
+
 exports[`supports setting arbitrary text colors 1`] = `
 "/* layer: default */
 .text-\\[--w-s-color-border\\],

test/__snapshots__/outline.js.snap

@@ -9,6 +9,20 @@ exports[`outline > offset 1`] = `
 .outline-offset-8{outline-offset:8px;}"
 `;
 
+exports[`outline > supports setting arbitrary outline color variables with alpha channel 1`] = `
+"/* layer: default */
+.outline-\\[--w-black\\/90\\]{outline-color:rgba(var(--w-rgb-black),0.9);}
+.outline-\\[--w-rgb-black\\/75\\]{outline-color:rgba(var(--w-rgb-black),0.75);}
+.outline-\\[--w-rgb-white\\/0\\]{outline-color:rgba(var(--w-rgb-white),0);}
+.outline-\\[--w-s-color-background-positive-selected-hover\\/100\\]{outline-color:rgba(var(--w-s-rgb-background-positive-selected-hover),1);}
+.outline-\\[--w-s-color-background\\/5\\]{outline-color:rgba(var(--w-s-rgb-background),0.05);}
+.outline-\\[--w-white\\/5\\]{outline-color:rgba(var(--w-rgb-white),0.05);}
+.outline-\\[var\\(--w-black\\)\\/100\\]{outline-color:rgba(var(--w-rgb-black),1);}
+.outline-\\[var\\(--w-color-text-link-active\\)\\/55\\]{outline-color:rgba(var(--w-rgb-text-link-active),0.55);}
+.outline-\\[var\\(--w-s-color-border\\)\\/60\\]{outline-color:rgba(var(--w-s-rgb-border),0.6);}
+.outline-\\[var\\(--w-s-rgb-border-disabled\\)\\/12\\]{outline-color:rgba(var(--w-s-rgb-border-disabled),0.12);}"
+`;
+
 exports[`outline > supports setting outline colors 1`] = `
 "/* layer: default */
 .outline-inherit{outline-color:inherit;}

test/background.js

@@ -55,6 +55,18 @@ test('supports setting arbitrary background colors', async ({ uno }) => {
  expect(css).toMatchSnapshot();
 });
 
+test('supports setting arbitrary background color variables with alpha channel', async ({ uno }) => {
+ const classes = ['bg-[--w-black/90]', 'bg-[--w-s-color-background-positive-selected-hover/100]', 'bg-[--w-rgb-white/0]', 'bg-[var(--w-color-text-link-active)/55]', 'bg-[var(--w-s-color-border)/60]', 'bg-[--w-s-color-background/5]', 'bg-[var(--w-black)/100]', 'bg-[--w-white/5]', 'bg-[--w-rgb-black/75]', 'bg-[var(--w-s-rgb-border-disabled)/12]'];
+ const { css } = await uno.generate(classes);
+ expect(css).toMatchSnapshot();
+});
+
+test('it should not generate css for arbitrary background color variables with incorrect alpha channel values', async ({ uno }) => {
+ const antiClasses = ['bg-[--w-black/900]', 'bg-[--w-black/]', 'bg-[--w-black/101]', 'bg-[--w-black/001]', 'bg-[--w-black/1000]', 'bg-[--w-black/00]', 'bg-[--w-black/01]'];
+ const { css } = await uno.generate(antiClasses);
+ expect(css).toHaveLength(0);
+});
+
 test('supports setting arbitrary background positions', async ({ uno }) => {
  const classes = ['bg-[25%_75%]', 'bg-[right_3em_bottom_10px]', 'bg-[center_top_1rem]'];
  const { css } = await uno.generate(classes);

test/border.js

@@ -38,6 +38,18 @@ describe('border', () => {
  expect(css).toMatchSnapshot();
  });
 
+ test('supports setting arbitrary border color variables with alpha channel', async ({ uno }) => {
+ const classes = ['border-[--w-black/90]', 'border-[--w-s-color-background-positive-selected-hover/100]', 'border-[--w-rgb-white/0]', 'border-[var(--w-color-text-link-active)/55]', 'border-[var(--w-s-color-border)/60]', 'border-l-[--w-s-color-background/5]', 'border-r-[var(--w-black)/100]', 'border-x-[--w-white/5]', 'border-y-[--w-rgb-black/75]', 'border-l-[var(--w-s-rgb-border-disabled)/12]'];
+ const { css } = await uno.generate(classes);
+ expect(css).toMatchSnapshot();
+ });
+
+ test('it should not generate css for arbitrary border color variables with incorrect alpha channel values', async ({ uno }) => {
+ const antiClasses = ['border-[--w-black/900]', 'border-x-[--w-black/]', 'border-l-[--w-black/101]', 'border-[--w-black/001]', 'border-[--w-black/1000]', 'border-[--w-black/00]', 'border-y-[--w-black/01]'];
+ const { css } = await uno.generate(antiClasses);
+ expect(css).toHaveLength(0);
+ });
+
  test('supports setting arbitrary divide color variables', async ({ uno }) => {
  const classes = ['divide-[--w-s-color-border]', 'divide-[var(--w-s-color-border-subtle)]', 'divide-x-[var(--w-s-color-border-negative)]', 'divide-y-[var(--w-s-color-border-positive)]'];
  const { css } = await uno.generate(classes);
@@ -57,6 +69,18 @@ describe('border', () => {
  expect(css).toMatchSnapshot();
  });
 
+ test('supports setting arbitrary divide color variables with alpha channel', async ({ uno }) => {
+ const classes = ['divide-[--w-black/90]', 'divide-[--w-s-color-background-positive-selected-hover/100]', 'divide-[--w-rgb-white/0]', 'divide-[var(--w-color-text-link-active)/55]', 'divide-[var(--w-s-color-border)/60]', 'divide-x-[--w-s-color-background/5]', 'divide-y-[var(--w-black)/100]', 'divide-x-[--w-white/5]', 'divide-y-[--w-rgb-black/75]', 'divide-y-[var(--w-s-rgb-border-disabled)/12]'];
+ const { css } = await uno.generate(classes);
+ expect(css).toMatchSnapshot();
+ });
+
+ test('it should not generate css for arbitrary divide color variables with incorrect alpha channel values', async ({ uno }) => {
+ const antiClasses = ['divide-[--w-black/900]', 'divide-x-[--w-black/]', 'divide-y-[--w-black/101]', 'divide-[--w-black/001]', 'divide-[--w-black/1000]', 'divide-[--w-black/00]', 'divide-y-[--w-black/01]'];
+ const { css } = await uno.generate(antiClasses);
+ expect(css).toHaveLength(0);
+ });
+
  test('supports setting border style', async ({ uno }) => {
  const classes = ['border-solid', 'border-dashed', 'border-dotted', 'border-double', 'border-hidden', 'border-none', 'border-groove', 'border-ridge', 'border-inset', 'border-outset'];
  const { css } = await uno.generate(classes);

test/color.js

@@ -6,50 +6,54 @@ setup();
 
 test('opacity by theme', async ({ uno }) => {
  const classes = Object.keys(opacity).map((op) => `opacity-${op}`);
-
  const { css } = await uno.generate(classes);
  expect(css).toMatchSnapshot();
 });
 
 test('opacity not created if invalid', async ({ uno }) => {
  const classes = ['opacity-1'];
-
  const { css } = await uno.generate(classes);
  expect(css).toHaveLength(0);
 });
 
 test('text colors', async ({ uno }) => {
  const classes = ['text-transparent', 'text-current'];
-
  const { css } = await uno.generate(classes);
  expect(css).toMatchSnapshot();
 });
 
 test('supports setting arbitrary text colors', async ({ uno }) => {
  const classes = ['text-[--w-s-color-border]', 'text-[var(--w-s-color-border)]'];
-
  const { css } = await uno.generate(classes);
+ expect(css).toMatchSnapshot();
+});
 
+test('supports setting arbitrary outline color variables with alpha channel', async ({ uno }) => {
+ const classes = ['text-[--w-black/90]', 'text-[--w-s-color-background-positive-selected-hover/100]', 'text-[--w-rgb-white/0]', 'text-[var(--w-color-text-link-active)/55]', 'text-[var(--w-s-color-border)/60]', 'text-[--w-s-color-background/5]', 'text-[var(--w-black)/100]', 'text-[--w-white/5]', 'text-[--w-rgb-black/75]', 'text-[var(--w-s-rgb-border-disabled)/12]'];
+ const { css } = await uno.generate(classes);
  expect(css).toMatchSnapshot();
 });
 
+test('it should not generate css for arbitrary outline color variables with incorrect alpha channel values', async ({ uno }) => {
+ const antiClasses = ['text-[--w-black/900]', 'text-[--w-black/]', 'text-[--w-black/101]', 'text-[--w-black/001]', 'text-[--w-black/1000]', 'text-[--w-black/00]', 'text-[--w-black/01]'];
+ const { css } = await uno.generate(antiClasses);
+ expect(css).toHaveLength(0);
+});
+
 test('text color invalid class', async ({ uno }) => {
  const classes = ['text-color'];
-
  const { css } = await uno.generate(classes);
  expect(css).toHaveLength(0);
 });
 
 test('bg colors', async ({ uno }) => {
  const classes = ['bg-inherit', 'bg-transparent', 'bg-current'];
-
  const { css } = await uno.generate(classes);
  expect(css).toMatchSnapshot();
 });
 
 test('caret', async ({ uno }) => {
  const classes = ['caret-inherit', 'caret-current', 'caret-transparent'];
-
  const { css } = await uno.generate(classes);
  expect(css).toMatchSnapshot();
 });