{"id":19056326,"url":"https://github.com/kottenator/node-sass-watcher","last_synced_at":"2025-04-24T04:34:37.448Z","repository":{"id":65424744,"uuid":"78484814","full_name":"kottenator/node-sass-watcher","owner":"kottenator","description":"SCSS watcher with post-processing","archived":false,"fork":false,"pushed_at":"2018-02-01T02:03:40.000Z","size":85,"stargazers_count":8,"open_issues_count":2,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-30T06:51:16.362Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kottenator.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-10T01:17:18.000Z","updated_at":"2021-12-17T11:18:48.000Z","dependencies_parsed_at":"2023-01-23T02:05:11.477Z","dependency_job_id":null,"html_url":"https://github.com/kottenator/node-sass-watcher","commit_stats":{"total_commits":30,"total_committers":3,"mean_commits":10.0,"dds":0.1333333333333333,"last_synced_commit":"ab6a4fbcb99dcf6cf3a7d107b4f489c72ea9ac40"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kottenator%2Fnode-sass-watcher","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kottenator%2Fnode-sass-watcher/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kottenator%2Fnode-sass-watcher/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kottenator%2Fnode-sass-watcher/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kottenator","download_url":"https://codeload.github.com/kottenator/node-sass-watcher/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250566127,"owners_count":21451225,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-08T23:49:06.067Z","updated_at":"2025-04-24T04:34:37.420Z","avatar_url":"https://github.com/kottenator.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# node-sass-watcher\n\n[![Build Status](https://travis-ci.org/kottenator/node-sass-watcher.svg?branch=master)](https://travis-ci.org/kottenator/node-sass-watcher)\n\n\u003cimg src=\"https://raw.githubusercontent.com/kottenator/node-sass-watcher/master/media/node-sass-watcher-logo.png\" alt=\"Logo\" width=\"270\"\u003e\n\nSCSS watcher with post-processing.\n\n## Why?\n\n`node-sass` has `--watch` option but it doesn't allow post-processing of the compiled CSS.\n\nThe only way is to \"watch\" the generated CSS file with another watcher. **It's not convenient**.\n\n`node-sass-watcher` provides simple way to do SCSS watching with post-processing.\n\n## Install\n\n```sh\nnpm install node-sass-watcher\n```\n\n## Usage: CLI\n\n```sh\nnode-sass-watcher src/input.scss -o dist/output.css -c 'node-sass \u003cinput\u003e | postcss -u autoprefixer --autoprefixer.browsers=\"ie \u003e= 9, \u003e 1%\"'\n```\n\n_Note:_ You need to run `node-sass` inside the post-processing command,\nbecause I don't want to deal with all `node-sass` CLI arguments.\nIn fact, current implementation is `node-sass`-independent.\n\nMore about `--command` (`-c`):\n\n* contents of the `input.scss` are passed to the command's `stdin`\n* `\u003cinput\u003e` will be replaced with the input file path\n* `\u003coutput\u003e` will be replaced with the output file path, provided with `--output` (`-o`) argument (if specified)\n* Shell syntax is allowed: pipes (`|`), FD redirects (`\u003e output.css`), etc\n\nIf there's no `-o` specified, the command output will be printed to `stdout`.\n\nAll CLI options:\n\n```\nUsage: node-sass-watcher \u003cinput.scss\u003e [options]\n\nOptions:\n  -c, --command             Pass a command to execute. Shell syntax allowed\n  -o, --output              Output CSS file path\n  -r, --root-dir            Directory to watch for addition/deletion of the files. Default: .\n  -I, --include-path        Path to look for imported files. Use multiple if needed\n  -e, --include-extensions  File extensions to watch. Default: scss, sass, css\n  -v, --verbose             Verbosity level: from -v to -vvv\n  -h, --help                Show help\n  -V, --version             Show version number\n```\n\n## Usage: JS\n\nExample: `node-sass` → `autoprefixer`.\n\n```js\n// watch-it.js\n\nvar fs = require('fs');\nvar sass = require('node-sass');\nvar postcss = require('postcss');\nvar autoprefixer = require('autoprefixer');\nvar Watcher = require('node-sass-watcher');\n\n// Input variables\nvar inputFile = process.argv[2];\nvar outputFile = process.argv[3];\nvar supportedBrowsers = process.argv[4];\n\n// Options\nvar watcherOptions = {\n  verbosity: 1,\n}\n\n// Renderer\nfunction render() {\n  console.warn('Rendering \"' + inputFile + '\" file...');\n\n  sass.render({file: inputFile}, function(err, result) {\n    if (err) {\n      console.error('Error: ' + err.message);\n      return;\n    }\n\n    var processor = postcss([\n      autoprefixer({\n        browsers: supportedBrowsers.split(/,\\s*/g)\n      })\n    ]);\n\n    console.warn('Processing with Autoprefixer for browsers: ' + supportedBrowsers);\n\n    processor.process(result.css.toString()).then(\n      function(result) {\n        console.warn('Outputting to \"' + outputFile + '\" file...');\n        fs.writeFile(outputFile, result.css);\n      },\n      function(err) {\n        console.error('Error: ' + err.message);\n      }\n    );\n  });\n}\n\n// Start watching\nvar watcher = new Watcher(inputFile, watcherOptions);\nwatcher.on('init', render);\nwatcher.on('update', render);\nwatcher.run();\n```\n\nRun your custom script:\n\n```sh\nnode watch-it.js src/input.scss dist/output.css \"ie \u003e= 9, \u003e 1%\"\n```\n\n\nAvailable options are a subset of the CLI options:\n\n* `includePaths`\n* `rootDir`\n* `verbosity`\n* `includeExtensions`\n\n## Collaboration\n\nFeel free to create a ticket or a pull-request ;)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkottenator%2Fnode-sass-watcher","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkottenator%2Fnode-sass-watcher","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkottenator%2Fnode-sass-watcher/lists"}