Merge branch 'beta' into dev/beta

packages/css/jest.config.ts

@@ -1,4 +1,5 @@
 /** @type {import('jest').Config} */
 export default {
-    preset: '@techor/jest-dom'
+    preset: '@techor/jest-dom',
+    setupFilesAfterEnv: ['<rootDir>/setup-jest.ts']
 }

packages/css/package.json

@@ -75,6 +75,7 @@
         "commander": "^11.0.0"
     },
     "devDependencies": {
+        "@master/css-tester": "workspace:^",
         "@techor/extend": "^2.5.4",
         "@techor/pack": "^2.5.4",
         "css-shared": "workspace:^",

packages/css/setup-jest.ts

@@ -0,0 +1,2 @@
+import '../tester/src'
+

packages/css/tests/color.test.ts

@@ -1,7 +1,7 @@
 import { testCSS, testProp } from './css'
 
 test('color', () => {
-    testCSS('color:current:hover', '.color\\:current\\:hover:hover{color:currentColor}')
+    expect('color:current:hover').toBeMasterCSSRule('.color\\:current\\:hover:hover{color:currentColor}')
     testProp('color:current', 'color:currentColor')
     testProp('color:rgb(255,255,255)', 'color:rgb(255,255,255)')
     testProp('fg:#fff', 'color:#fff')

packages/css/tsconfig.json

@@ -5,6 +5,7 @@
         "rootDir": "src"
     },
     "include": [
-        "src/**/*"
+        "src/**/*",
+        "./setup-jest.ts"
     ]
 }

packages/tester/.eslintrc.yml

@@ -0,0 +1,2 @@
+extends:
+    - techor

packages/tester/README.md

@@ -0,0 +1,56 @@
+<br>
+<div align="center">
+
+<p align="center">
+    <a href="https://css.master.co">
+        <picture>
+            <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/33840671/201701649-3bb7d698-abec-4d5f-ac30-ccc4d7bafcd4.svg">
+            <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/33840671/201703010-77bf2373-9899-40cc-98f5-30cf9b546941.svg">
+            <img alt="Master CSS" src="https://user-images.githubusercontent.com/33840671/201703010-77bf2373-9899-40cc-98f5-30cf9b546941.svg" width="100%">
+        </picture>
+    </a>
+</p>
+<p align="center">Matcher for testing and validating Master CSS syntax</p>
+
+<p align="center">
+    <a aria-label="GitHub release (latest by date including pre-releases)" href="https://github.com/master-co/css/releases">
+        <picture>
+            <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/v/release/master-co/css?include_prereleases&color=212022&label=&style=for-the-badge&logo=github&logoColor=fff">
+            <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/v/release/master-co/css?include_prereleases&color=f6f7f8&label=&style=for-the-badge&logo=github&logoColor=%23000">
+            <img alt="NPM Version" src="https://img.shields.io/github/v/release/master-co/css?include_prereleases&color=f6f7f8&label=&style=for-the-badge&logo=github">
+        </picture>
+    </a>
+    <a aria-label="NPM Package" href="https://www.npmjs.com/package/@master/css-tester">
+        <picture>
+            <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/dm/@master/css-tester?color=212022&label=%20&logo=npm&style=for-the-badge">
+            <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/npm/dm/@master/css-tester?color=f6f7f8&label=%20&logo=npm&style=for-the-badge">
+            <img alt="NPM package ( download / month )" src="https://img.shields.io/npm/dm/@master/css-tester?color=f6f7f8&label=%20&logo=npm&style=for-the-badge">
+        </picture>
+    </a>
+    <a aria-label="Discord Community" href="https://discord.gg/sZNKpAAAw6">
+        <picture>
+            <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/discord/917780624314613760?color=212022&label=%20&logo=discord&style=for-the-badge">
+            <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/discord/917780624314613760?color=f6f7f8&label=%20&logo=discord&style=for-the-badge">
+            <img alt="Discord online" src="https://img.shields.io/discord/917780624314613760?color=f6f7f8&label=%20&logo=discord&style=for-the-badge">
+        </picture>
+    </a>
+    <a aria-label="Follow @mastercorg" href="https://twitter.com/mastercorg">
+        <picture>
+            <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/static/v1?label=%20&message=twitter&color=212022&logo=twitter&style=for-the-badge">
+            <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/static/v1?label=%20&message=twitter&color=f6f7f8&logo=twitter&style=for-the-badge">
+            <img alt="Follow @mastercorg" src="https://img.shields.io/static/v1?label=%20&message=twitter&color=f6f7f8&logo=twitter&style=for-the-badge">
+        </picture>
+    </a>
+    <a aria-label="Github Actions" href="https://github.com/1aron/repo/actions/workflows/release.yml">
+        <picture>
+            <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/actions/workflow/status/master-co/css/release.yml?branch=beta&label=%20&message=twitter&color=212022&logo=githubactions&style=for-the-badge">
+            <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/actions/workflow/status/master-co/css/release.yml?branch=beta&label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000">
+            <img alt="Github release actions" src="https://img.shields.io/github/actions/workflow/status/master-co/css/release.yml?branch=beta&label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000">
+        </picture>
+    </a>
+</p>
+
+</div>
+
+## Documentation
+Check out the official [documentation](https://beta.css.master.co/docs/tester).

packages/tester/jest.config.ts

@@ -0,0 +1,4 @@
+/** @type {import('jest').Config} */
+export default {
+    preset: '@techor/jest'
+}

packages/tester/package.json

@@ -0,0 +1,83 @@
+{
+    "name": "@master/css-tester",
+    "scripts": {
+        "build": "techor pack \"./src/**/*.ts\" --platform node",
+        "dev": "pnpm run build --watch --no-declare",
+        "lint": "eslint ./src",
+        "type-check": "tsc --noEmit",
+        "test": "jest"
+    },
+    "license": "MIT",
+    "description": "Matcher for testing and validating Master CSS syntax",
+    "author": "Aoyue Design LLC.",
+    "funding": "https://css.master.co/docs/donate",
+    "homepage": "https://css.master.co",
+    "bugs": {
+        "url": "https://github.com/master-co/css/issues"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/master-co/css.git",
+        "directory": "packages/tester"
+    },
+    "keywords": [
+        "testing",
+        "dom",
+        "jest",
+        "jsdom",
+        "vitest",
+        "css",
+        "mastercss"
+    ],
+    "sideEffects": false,
+    "main": "./dist/index.js",
+    "module": "./dist/index.mjs",
+    "jsnext:main": "./dist/index.mjs",
+    "esnext": "./dist/index.mjs",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/index.mjs",
+            "require": "./dist/index.js",
+            "types": "./dist/index.d.ts"
+        },
+        "./matchers": {
+            "import": "./dist/matchers/index.mjs",
+            "require": "./dist/matchers/index.js",
+            "types": "./dist/matchers/index.d.ts"
+        }
+    },
+    "files": [
+        "dist"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "dependencies": {
+        "@master/css": "workspace:^"
+    },
+    "peerDependencies": {
+        "@jest/globals": ">= 28",
+        "@types/jest": ">= 28",
+        "jest": ">= 28",
+        "vitest": ">= 0.32"
+    },
+    "peerDependenciesMeta": {
+        "@jest/globals": {
+            "optional": true
+        },
+        "@types/jest": {
+            "optional": true
+        },
+        "jest": {
+            "optional": true
+        },
+        "vitest": {
+            "optional": true
+        }
+    },
+    "devDependencies": {
+        "@jest/globals": "^29.7.0",
+        "expect": "^29.7.0"
+    }
+}

packages/tester/src/index.ts

@@ -0,0 +1,4 @@
+import { expect } from '@jest/globals'
+import * as matchers from './matchers'
+
+expect.extend({ ...matchers })

packages/tester/src/matchers/index.ts

@@ -0,0 +1 @@
+export { default as toBeMasterCSSRule } from './toBeMasterCSSRule'

packages/tester/src/matchers/toBeMasterCSSRule.ts

@@ -0,0 +1,25 @@
+import type { MatcherFunction } from 'expect'
+import { MasterCSS, type Config } from '@master/css'
+// @ts-ignore
+import matchers from 'expect/build/matchers'
+
+const toBeMasterCSSRule: MatcherFunction<[expected: string, config?: Config]> =
+    function (actual, expected, config) {
+        if (typeof actual !== 'string') {
+            throw new Error('It must be of type string.')
+        }
+        const css = new MasterCSS(config)
+        css.add(actual)
+        return matchers.toBe.call(this, css.text, expected)
+    }
+
+export default toBeMasterCSSRule
+
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace jest {
+        interface Matchers<R> {
+            toBeMasterCSSRule(expected: string, config?: Config): R;
+        }
+    }
+}

packages/tester/tsconfig.json

@@ -0,0 +1,10 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "baseUrl": ".",
+        "rootDir": "src"
+    },
+    "include": [
+        "src/**/*"
+    ]
+}