# @agilo/sass-watcher

> SCSS watcher with post-processing.

Latest version **1.0.1** (published 2023-07-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install @agilo/sass-watcher
pnpm add @agilo/sass-watcher
yarn add @agilo/sass-watcher
bun add @agilo/sass-watcher
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2023-07-05 |
| First published | 2023-07-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 4 |
| Unpacked size | 9.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | josipmatichr, anteprimorac, alenvuletic |
| Keywords | node, sass, watch, post-process |

## Links

- npm: https://www.npmjs.com/package/@agilo/sass-watcher
- Repository: https://github.com/agilo/sass-watcher
- Homepage: https://github.com/agilo/sass-watcher#readme
- Issues: https://github.com/agilo/sass-watcher/issues
- npm.io page: https://npm.io/package/@agilo/sass-watcher

## Dependencies (4)

- [yargs](https://npm.io/package/yargs.md) ^17.7.2
- [chokidar](https://npm.io/package/chokidar.md) ^3.5.3
- [sass-graph](https://npm.io/package/sass-graph.md) ^4.0.1
- [lodash.difference](https://npm.io/package/lodash.difference.md) ^4.5.0

## Alternatives

- [@expo/fingerprint](https://npm.io/package/@expo/fingerprint.md) — 6.2M weekly downloads
- [@azure/monitor-opentelemetry-exporter](https://npm.io/package/@azure/monitor-opentelemetry-exporter.md) — 850.0K weekly downloads
- [@azure/monitor-opentelemetry](https://npm.io/package/@azure/monitor-opentelemetry.md) — 624.0K weekly downloads
- [@posthog/ai](https://npm.io/package/@posthog/ai.md) — 423.3K weekly downloads
- [fakefilter](https://npm.io/package/fakefilter.md) — 63.9K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2023-07-05
- 1.0.0 — 2023-07-05

## README

# @agilo/sass-watcher

[![Test](https://github.com/agilo/sass-watcher/actions/workflows/test.yml/badge.svg)](https://github.com/agilo/sass-watcher/actions/workflows/test.yml)

SCSS watcher with post-processing.

## Why?

`sass` has `--watch` option but it doesn't allow post-processing of the compiled CSS.

The only way is to "watch" the generated CSS file with another watcher. **It's not convenient**.

`@agilo/sass-watcher` provides simple way to do SCSS watching with post-processing.

## Install

```sh
npm install @agilo/sass-watcher
```

## Usage: JS

Example: `sass` → `autoprefixer`.

```js
// watch-it.js

import fs from 'fs';
import * as sass from 'sass';
import postcss from 'postcss';
import autoprefixer from 'autoprefixer';
import Watcher from '@agilo/sass-watcher';

// Input variables
const inputFile = process.argv[2];
const outputFile = process.argv[3];
const supportedBrowsers = process.argv[4];

// Options
const watcherOptions = {
  verbosity: 1,
}

// Renderer
function render() {
  console.warn('Rendering "' + inputFile + '" file...');

  sass.render({file: inputFile}, function(err, result) {
    if (err) {
      console.error('Error: ' + err.message);
      return;
    }

    const processor = postcss([
      autoprefixer({
        browsers: supportedBrowsers.split(/,\s*/g)
      })
    ]);

    console.warn('Processing with Autoprefixer for browsers: ' + supportedBrowsers);

    processor.process(result.css.toString()).then(
      function(result) {
        console.warn('Outputting to "' + outputFile + '" file...');
        fs.writeFile(outputFile, result.css);
      },
      function(err) {
        console.error('Error: ' + err.message);
      }
    );
  });
}

// Start watching
const watcher = new Watcher(inputFile, watcherOptions);
watcher.on('init', render);
watcher.on('update', render);
watcher.run();
```

Run your custom script:

```sh
node watch-it.js src/input.scss dist/output.css "ie >= 9, > 1%"
```


Available options are a subset of the CLI options:

* `includePaths`
* `rootDir`
* `verbosity`
* `includeExtensions`

## Collaboration

Feel free to create a ticket or a pull-request ;)

---
_Source: https://npm.io/package/@agilo/sass-watcher · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._