@zappie/check 0.1.3 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @zappie/check
 
+## 0.2.0
+
+### Minor Changes
+
+- 79deec3: Hold every template to the same accessibility, semantics, performance and CSS bar.
+
+  - `eslint-plugin-zappie`: `zappie/no-lazy-overlay` reports `React.lazy` and `Suspense` and points at `deferred()` from `@zappie/foundations`. It is an error in `recommended`.
+  - `@zappie/check`: `lint` fails when a project turns down a `jsx-a11y` rule from `recommended`. A new `css` step reports `css/important` and `css/class-patch` as errors, and `css/duplicate-keyframes`, `css/duplicate-selector`, `css/arbitrary-token`, `css/literal-token`, `css/unused-custom-property`, `css/reduced-motion` and `css/unreadable` as warnings.
+  - `@zappie/verify`: V13 fails on a missing main landmark, a page without exactly one h1, a dialog without a name, a positive tabindex, a phone control under 44×44 px and focus that doesn't return after the item or cart closes. V16 times each marked overlay from tap to first paint on a phone profile. V17 checks each marked overlay's focus, Escape and scroll lock. Both are skipped while a menu has no overlay markers. V14 records `menuCssKbGz`. `findRegressions` compares two reports' metrics.
+  - `@zappie/starter`: menu controls are at least 44×44 px on a phone.
+
+### Patch Changes
+
+- Updated dependencies [4f3cdc3]
+- Updated dependencies [79deec3]
+  - @zappie/sdk@0.1.8
+  - eslint-plugin-zappie@0.2.0
+
 ## 0.1.3
 
 ### Patch Changes

package/README.md

@@ -15,13 +15,30 @@ npx zappie check
 | ----------- | ------------------------------------------------------------------------------------------- |
 | `config`    | `zappie.config.ts` and `theme.json`, against the SDK and token rules                        |
 | `allowlist` | Every npm dependency is on Zappie's package allowlist or in `packages.allow` in your config |
-| `lint`      | The `eslint-plugin-zappie` rules                                                            |
+| `lint`      | The `eslint-plugin-zappie` rules and the `jsx-a11y` accessibility baseline                  |
 | `types`     | A TypeScript check of the project                                                           |
 | `test`      | Your project's tests                                                                        |
 | `build`     | A production build                                                                          |
 | `secrets`   | No secret keys or tokens in your source or build                                            |
 | `readiness` | Initial route discovery is enabled, or the config records why the site opts out             |
 | `budgets`   | Built JavaScript and CSS sizes, against Zappie's default budgets or the ones in your config |
+| `css`       | Your source CSS and class names, and the built client CSS, for the problems below           |
+
+### CSS problems
+
+| Code                         | Level   | What it catches                                                                                         |
+| ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------- |
+| `css/important`              | Error   | `!important` in source CSS or `@apply`, or an important utility such as `p-4!` or `!p-4`                |
+| `css/class-patch`            | Error   | A selector that matches a class attribute, such as `[class*="bg-white"]`. Dark mode goes through tokens |
+| `css/duplicate-keyframes`    | Warning | Two `@keyframes` with the same frames under different names, or one name defined twice                  |
+| `css/duplicate-selector`     | Warning | A selector, or a selector list, styled by more than one source rule in the same context                 |
+| `css/arbitrary-token`        | Warning | An arbitrary utility that restates a token from your `@theme`, such as `text-[hsl(var(--foreground))]`  |
+| `css/literal-token`          | Warning | A plain CSS colour, radius or shadow that equals a token your CSS defines                               |
+| `css/unused-custom-property` | Warning | A custom property your CSS defines that no CSS, source or built script reads                            |
+| `css/reduced-motion`         | Warning | An animation or transition with no `prefers-reduced-motion` path                                        |
+| `css/unreadable`             | Warning | A CSS file that can't be parsed                                                                         |
+
+Warnings don't fail the step. A reviewed `!important` passes with `/* zappie-allow-important: <reason> */` on the same line. Declarations inside `@media (prefers-reduced-motion: reduce)` may use `!important`.
 
 Add `--json` for a machine-readable result. Its shape is the JSON Schema at `@zappie/check/schema/check-result.v1.json`.
 

package/dist/index.d.ts

@@ -6,7 +6,7 @@ type CheckProblem = {
     message: string;
     fix: string | null;
 };
-type CheckStepName = "config" | "allowlist" | "lint" | "types" | "test" | "build" | "secrets" | "readiness" | "budgets";
+type CheckStepName = "config" | "allowlist" | "lint" | "types" | "test" | "build" | "secrets" | "readiness" | "budgets" | "css";
 type CheckStep = {
     name: CheckStepName;
     result: CheckResultValue;
@@ -44,6 +44,28 @@ declare function supportsTypeScriptImport(version?: string): boolean;
 declare function loadConfig(cwd: string): Promise<LoadedConfig>;
 declare function checkConfig({ cwd, signal, }: StepOptions): Promise<CheckStep>;
 
+declare function checkCss({ cwd, signal, }: StepOptions): Promise<CheckStep>;
+
+type TextFile = {
+    file: string;
+    text: string;
+};
+type CssInputs = {
+    /** CSS the project authors. */
+    sourceCss: TextFile[];
+    /** Script and markup that can hold class strings or read custom properties. */
+    sourceCode: TextFile[];
+    /** Client CSS the build emitted, Tailwind's generated rules among it. */
+    builtCss: TextFile[];
+    /** Client JavaScript the build emitted; it can read custom properties too. */
+    builtCode: TextFile[];
+};
+
+type CssCode = "css/important" | "css/duplicate-keyframes" | "css/duplicate-selector" | "css/arbitrary-token" | "css/unused-custom-property" | "css/reduced-motion" | "css/class-patch" | "css/literal-token" | "css/unreadable";
+/** These codes fail the step. The other codes warn for one release. */
+declare const CSS_ERRORS: ReadonlySet<CssCode>;
+declare function analyseCss(inputs: CssInputs): CheckProblem[];
+
 declare function checkLint({ cwd, signal, }: StepOptions): Promise<CheckStep>;
 
 declare function checkReadiness({ cwd, signal, }: StepOptions): Promise<CheckStep>;
@@ -61,4 +83,4 @@ declare function checkTests({ cwd, packageManager, signal, }: StepOptions): Prom
 
 declare function checkTypes(options: StepOptions): Promise<CheckStep>;
 
-export { type AllowlistSource, BUILTIN_ALLOWLIST_SOURCE, type CheckOptions, type CheckProblem, type CheckResult, type CheckResultValue, type CheckStep, type CheckStepName, type PackageManager, SECRET_FILE_SIZE_CAP, type SecretFinding, type StepOptions, checkAllowlist, checkBudgets, checkBuild, checkConfig, checkLint, checkReadiness, checkSecrets, checkTests, checkTypes, loadConfig, runCheck, scanSecrets, supportsTypeScriptImport };
+export { type AllowlistSource, BUILTIN_ALLOWLIST_SOURCE, CSS_ERRORS, type CheckOptions, type CheckProblem, type CheckResult, type CheckResultValue, type CheckStep, type CheckStepName, type CssCode, type CssInputs, type PackageManager, SECRET_FILE_SIZE_CAP, type SecretFinding, type StepOptions, type TextFile, analyseCss, checkAllowlist, checkBudgets, checkBuild, checkConfig, checkCss, checkLint, checkReadiness, checkSecrets, checkTests, checkTypes, loadConfig, runCheck, scanSecrets, supportsTypeScriptImport };