Rework CSS AST Declaration Visitor

1.0.0 · abandoned · verified Sun Apr 19

rework-visit is a utility package providing a declaration visitor for the Rework CSS preprocessor's Abstract Syntax Tree (AST). Released as version 1.0.0 in June 2013, it has not seen active development or new releases since. The package enables Rework plugins to traverse and manipulate CSS declarations programmatically within the AST. It is specifically designed for the `rework` ecosystem, which has largely been superseded by more modern and actively maintained CSS tooling like PostCSS. Therefore, rework-visit is considered abandoned, with no ongoing release cadence or new feature development. Its core differentiator is its tight integration with the now-legacy Rework AST, making it unsuitable for contemporary CSS processing pipelines.

Common errors

```
TypeError: require is not a function
```
cause Attempting to use `require()` in an ES Module (ESM) file context.

fix This package is CommonJS. If you are in an ESM module, you cannot directly use `require()`. You must either convert your file to CommonJS (`.cjs` or `"type": "commonjs"` in `package.json`) or use a dynamic import, e.g., `const visit = await import('rework-visit');` (note: this will still return a module object, not the direct function, so you might need `(await import('rework-visit')).default`).
```
Error: Parse error on line X, column Y: Unexpected token
```
cause The `rework` parser, which `rework-visit` relies on, encounters modern CSS syntax it does not understand.

fix This error indicates that the CSS input contains syntax (e.g., nesting, custom properties advanced usage, new selectors) that the outdated `rework` parser cannot handle. `rework-visit` is not compatible with modern CSS. Consider using PostCSS with appropriate plugins for contemporary CSS processing.

Warnings

breaking The `rework-visit` package, along with the entire `rework` ecosystem, is unmaintained and considered abandoned. The last release was in 2013. Users should migrate to actively maintained CSS processing tools like PostCSS.
Fix: Migrate your CSS processing pipeline to PostCSS or a modern alternative. Existing `rework` plugins using `rework-visit` will likely need to be rewritten for the new tooling.
gotcha rework-visit is a CommonJS module and does not support ES Modules (ESM) `import` syntax. Attempting to `import` it in an ESM context will result in a runtime error.
Fix: Ensure your project uses CommonJS `require()` statements for `rework-visit`. If your project is ESM-first, you might need to use dynamic `import()` or stick to CommonJS for the parts interacting with `rework-visit`.
breaking Due to its age and lack of maintenance, `rework-visit` and the `rework` parser it relies on do not support modern CSS features (e.g., CSS Nesting, Container Queries, `color-mix()`, `:has()`). Parsing modern CSS with `rework` will likely lead to errors or incorrect AST generation.
Fix: Avoid using `rework-visit` for projects requiring modern CSS syntax. Use tools that actively support the latest CSS specifications.

Install

npm install rework-visit npm
yarn add rework-visit yarn
pnpm add rework-visit pnpm

Imports

visit
wrong:
```
import visit from 'rework-visit';
```
correct:
```
const visit = require('rework-visit');
```
rework-visit is a CommonJS module and only supports `require()` syntax. It exports the visitor function as the default.

Quickstart

This example demonstrates how to use `rework-visit` within a `rework` plugin to iterate over and modify CSS declarations in an AST. It changes 'font-size' and adds 'align-items' to flex containers.

const rework = require('rework');
const visit = require('rework-visit');

const cssInput = `
  .container {
    color: blue;
    font-size: 16px;
    display: flex;
  }
  .item {
    margin: 10px;
    padding: 5px;
  }
`;

function myReworkPlugin(stylesheet) {
  visit.declarations(stylesheet, function (declarations, node) {
    declarations.forEach(function (declaration) {
      // Example: Convert all font-size values to '1.2em' (for demonstration)
      if (declaration.property === 'font-size') {
        declaration.value = '1.2em';
      }
      // Example: Add a new declaration
      if (declaration.property === 'display' && declaration.value === 'flex') {
        declarations.push({
          type: 'declaration',
          property: 'align-items',
          value: 'center'
        });
      }
    });
  });
}

// Apply the plugin
const outputCss = rework(cssInput)
  .use(myReworkPlugin)
  .toString();

console.log(outputCss);
/*
  Expected Output:
  .container {
    color: blue;
    font-size: 1.2em;
    display: flex;
    align-items: center;
  }
  .item {
    margin: 10px;
    padding: 5px;
  }
*/

view raw JSON →