Source scanning

The scanner reads files as text. It doesn't parse JavaScript, doesn't run your code and doesn't care which framework you use.

Which files

import { defineConfig } from "@croff/core";

export default defineConfig({
  content: ["src/**/*.{ts,tsx}", "templates/**/*.php"],
  ignore: ["src/**/*.test.tsx"],
});

Dependencies, build output and minified files are always ignored: node_modules, dist, .git, .vite and *.min.*.

What counts as a candidate

A token that starts after whitespace, a quote or =, is shaped like an expression and ends at whitespace, a quote, >, /> or the end of the text. So el.width(10) and width(10); are never picked up. In a JavaScript string, an escaped quote or an escape like \n counts as well.

Bare words never qualify, which keeps almost all prose and code out.

Context decides how strict it is

Where a candidate appears decides what happens if it's invalid.

Class attributes are class, className, :class and class:list, and Svelte's class:gap(4)={on} counts too. Helpers are the functions in classFunctions, called or used as a template tag, like cx`gap(4) bg(brand)` . Add your own:

import { defineConfig } from "@croff/core";

export default defineConfig({
  classFunctions: ["cx", "tw", "styles"],
});

Valid expressions generate CSS in any context. A stray width(10) that looks like a utility in delimited code adds one small harmless rule.

Speed

Files whose size and modification time haven't changed aren't read again, unless they were modified within the last two seconds, and watchers only act if the set of expressions changed. See Performance.

Limitations

Class names built at runtime can't be found. See Dynamic utility limitations.

An expression can be up to 512 characters. A longer one in a class is reported as expression-too-long and generates no CSS, so move a long value to a theme token or a CSS variable.