💨 Razorwind is a unified set of tools that make creating design systems a breeze.

[!IMPORTANT] This repository, and the apps, libraries, and tools contained within, is still in it's initial development phase. As a result, bugs and issues are expected with it's usage. When the main development phase completes, a proper release will be performed, the packages will be available through NPM (and other distributions), and this message will be removed. However, in the meantime, please feel free to report any issues you may come across.

Razorwind - Stylelint Extension Plugin

A Razorwind plugin that generates a Stylelint plugin from the design system spec. It ports the rules of @atlaskit/stylelint-design-system onto your own tokens and fonts, adds the @razorwind/eslint rules that apply to stylesheets, and bundles the @razorwind/tailwindcss guardrails for @apply and theme variables in the same plugin.

Quick Features

• Generate a Stylelint plugin with rules for your own tokens and fonts.
• Reuse the ESLint design-system rules that apply to stylesheets.
• Bundle Tailwind guardrails for @apply and theme variables.
• Read every rule and its default severity from the generated INSTALL.md.
• Consume manifest, plugins, rules, and defaultSeverity at runtime.

Installing

Using pnpm:

pnpm add -D @razorwind/stylelint stylelint

npm install -D @razorwind/stylelint stylelint

yarn add -D @razorwind/stylelint stylelint

Stylelint ^16.8.2 or ^17 is required; autofix uses the fix callback those versions pass to rules.

Usage

Add the plugin to razorwind.config.ts:

import { defineConfig } from "@razorwind/core";
import stylelint from "@razorwind/stylelint";

export default defineConfig({
  plugins: [
    stylelint({
      // Rule namespace: `acme/ensure-design-token-usage`.
      prefix: "acme"
    })
  ]
});

Generating writes stylelint/design-system/index.mjs (the plugin, with the design-system manifest inlined) and an INSTALL.md listing every rule and its default severity. Multi-theme token sets generate one shared plugin and guide, not separate files per theme. Wire the plugin into stylelint.config.mjs:

import designSystem from "./stylelint/design-system/index.mjs";

const { plugins, rules } = designSystem({
  // Domains `ensure-design-token-usage` checks (Atlassian's primary option).
  tokenUsage: { color: true, spacing: true },
  // `var(--token, fallback)`: "forced", "optional" (default) or "none".
  fallbackUsage: "optional",
  severity: { "no-physical-properties": "error" }
});

export default {
  extends: ["stylelint-config-standard"],
  plugins: [...plugins],
  rules: { ...rules }
};

Passing files moves the rules into an overrides entry for those globs, and ignoreFiles is forwarded as is. Deliberate one-offs carry an inline, reviewable exception:

/* stylelint-disable-next-line acme/ensure-design-token-usage -- <reason> */

Options

| Option | Default | Description | | --------------- | ------------------------------------- | ------------------------------------------------------------------------------- | | stylelintPath | "stylelint/design-system/index.mjs" | Output filename of the generated plugin module, not a directory. | | prefix | "design-system" | Rule namespace used in stylelint.config.*. | | runtimeImport | "@razorwind/stylelint/runtime" | Module the generated file imports the runtime from. | | cssVarPrefix | initials of the schema name | Prefix of the token CSS variables, matching @razorwind/css. false for none. | | tailwind | true | Include the @razorwind/tailwindcss guardrails as tailwind-* rules. | | installGuide | generated | Override the generated INSTALL.md. |

Relative stylelintPath values resolve against the generation cwd. Include a full filename when placing the module in a directory, for example stylelint({ stylelintPath: "stylelint/design-system/index.ts" }).

Rules

Every rule reads its allowlist, matches and examples from the design system, and token rules are enabled when the schema defines that token category. Literals whose value matches exactly one token are replaced by stylelint --fix; when several tokens match, the message names them and the choice is left to you.

| Rule | Default (when enabled) | Fix | Checks | | ---------------------------------- | ---------------------- | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ensure-design-token-usage | error | ✓ | Hard-coded colors and shadows; with tokenUsage, also spacing, typography and var()s outside the design system (nonTokenCssVariables). | | no-unsafe-design-token-usage | error | ✓ | var(--acme-…) names the design system does not define, with "did you mean"; the fallbackUsage strategy (fixes add the token value or drop the fallback). | | no-deprecated-design-token-usage | warn | ✓ | DTCG $deprecated tokens; the replacement is read from a {token.path} reference in the note. | | use-tokens-space | warn | ✓ | Lengths in padding, margin, gap, inset, … . | | use-tokens-shape | warn | ✓ | Radii and border widths. | | use-tokens-typography | warn | ✓ | Font size, weight, family, line height and letter spacing; families outside the schema fonts. | | use-tokens-motion | warn | ✓ | Durations and easings, including inside transition / animation. | | expand-motion-shorthand | off | ✓ | transition / animation shorthands, expanded to longhands so each value can use a token. | | no-physical-properties | off | ✓ | Physical properties and values (margin-left, text-align: left), replaced by their logical equivalents. | | no-margin | off | | margin*, pointing at the schema's layout primitives. Off by default because stylesheets hold resets. | | use-visually-hidden | warn | | Hand-rolled visually hidden rules, pointing at the schema's visually hidden component. | | tailwind-* | see below | | The @razorwind/tailwindcss guardrails over @apply classes, plus var() / theme() / --theme() references to unknown theme variables. |

The tailwind-* rules are tailwind-no-color-literal, tailwind-no-stock-palette, tailwind-no-unknown-theme-var, tailwind-no-radius-literal, tailwind-no-spacing-literal, tailwind-no-typography-literal, tailwind-no-shadow-literal, tailwind-no-dark-pairs and tailwind-focus-visible. See the @razorwind/tailwindcss README.

Migrating from @atlaskit/stylelint-design-system

The three Atlassian rules keep their names and options: ensure-design-token-usage accepts the { color, spacing, typography, nonTokenCssVariables } object, and no-unsafe-design-token-usage accepts fallbackUsage and the older shouldEnsureFallbackUsage flag. Atlassian's deleted-token renames are covered by no-deprecated-design-token-usage, which reads replacements from the schema's $deprecated notes.

Development

Building

Run nx build stylelint to build the library.

Running unit tests

Run vitest run --project stylelint to execute the unit tests via Vitest.

Storm Workspaces

Storm workspaces are built using Nx, a set of extensible dev tools for monorepos, which helps you develop like Google, Facebook, and Microsoft. Building on top of Nx, the Open System provides a set of tools and patterns that help you scale your monorepo to many teams while keeping the codebase maintainable.

Roadmap

See the open issues for a list of proposed features (and known issues).

• Top Feature Requests (Add your votes using the 👍 reaction)
• Top Bugs (Add your votes using the 👍 reaction)
• Newest Bugs

Support

Reach out to the maintainer at one of the following places:

• Contact
• GitHub discussions
• [email protected]

License

This project is licensed under the Apache License 2.0. Feel free to edit and distribute this template as you like.

See LICENSE for more information.

Changelog

This project adheres to Semantic Versioning. Every release, along with the migration instructions, is documented in the CHANGELOG file

Contributing

First off, thanks for taking the time to contribute! Contributions are what makes the open-source community such an amazing place to learn, inspire, and create. Any contributions you make will benefit everybody else and are greatly appreciated.

Please try to create bug reports that are:

• Reproducible. Include steps to reproduce the problem.
• Specific. Include as much detail as possible: which version, what environment, etc.
• Unique. Do not duplicate existing opened issues.
• Scoped to a Single Bug. One bug per report.

Please adhere to this project's code of conduct.

You can use markdownlint-cli to check for common markdown style inconsistency.

Contributors

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

Storm Software is an open source software development organization and creator of Acidic, StormStack and StormCloud.

Our mission is to make software development more accessible. Our ideal future is one where anyone can create software without years of prior development experience serving as a barrier to entry. We hope to achieve this via LLMs, Generative AI, and intuitive, high-level data modeling/programming languages.

Join us on Discord to chat with the team, receive release notifications, ask questions, and get involved.

If this sounds interesting, and you would like to help us in creating the next generation of development tools, please reach out on our website or join our Slack channel!