Skip to content

Commit

Permalink
Watch mode
Browse files Browse the repository at this point in the history
#1215 indirectly removed the --watch mode, by switching compilation
to a node.js file. Unfortunatelym `sass` CLI doesn't support a `--function` option, so this was the only option.
Now reintroduce `--watch` option using `chokidar`.
  • Loading branch information
Jacopo Beschi committed Dec 17, 2024
1 parent ad9bd44 commit 8b9fc80
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 12 deletions.
33 changes: 22 additions & 11 deletions bin/sass-build
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,16 @@ const path = require("path")
const fs = require("fs")
const sass = require("sass")
const { optimize } = require("svgo")
const chokidar = require("chokidar")

const args = process.argv.slice(2)
if (args.length < 2) {
console.error("Usage: bin/sass-build <inputFile> <outputFile>")
console.error("Usage: bin/sass-build <inputFile> <outputFile> (--watch)")
process.exit(1)
}
const inputFile = path.resolve(args[0])
const outputFile = path.resolve(args[1])
const watchMode = args.includes("--watch")

const basePath = path.dirname(inputFile)

Expand All @@ -20,20 +22,29 @@ const functions = {
const fileName = args[0].assertString().text
const filePath = path.resolve(basePath, fileName)

let svgContent = fs.readFileSync(filePath, "utf8");
svgContent = optimize(svgContent, { multipass: true, datauri: "enc" });
let svgContent = fs.readFileSync(filePath, "utf8")
svgContent = optimize(svgContent, { multipass: true, datauri: "enc" })

return new sass.SassString(`url("${svgContent.data}")`, { quotes: false })
}
}

try {
const result = sass.compile(inputFile, {
functions,
})
function compile() {
try {
const result = sass.compile(inputFile, { functions })

fs.writeFileSync(outputFile, result.css, "utf8")
} catch (error) {
console.error("Error compiling SCSS:", error.message)
process.exit(1)
fs.writeFileSync(outputFile, result.css, "utf8")
} catch (error) {
console.error("Error compiling SCSS:", error.message)
}
}
compile()

if (watchMode) {
console.log(`Watching for SASS file changes under ${basePath}...`)
chokidar.watch(basePath).on("change", (filePath) => {
if (!filePath.endsWith(".scss")) return
console.log(`[${new Date().toLocaleTimeString()}] File changed. Recompiling...`)
compile()
})
}
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
"@rollup/plugin-node-resolve": "^13.3.0",
"@web/dev-server": "^0.1.34",
"babel-eslint": "^10.1.0",
"chokidar": "^4.0.2",
"concurrently": "^7.4.0",
"eslint": "^7.32.0",
"esm": "^3.2.25",
Expand Down
2 changes: 1 addition & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2124,7 +2124,7 @@ chokidar@^3.4.3, chokidar@^3.5.1:
optionalDependencies:
fsevents "~2.3.2"

chokidar@^4.0.0:
chokidar@^4.0.0, chokidar@^4.0.2:
version "4.0.2"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-4.0.2.tgz#97b9562c9f59de559177f069eadf5dcc67d24798"
integrity sha512-/b57FK+bblSU+dfewfFe0rT1YjVDfOmeLQwCAuC+vwvgLkXboATqqmy+Ipux6JrF6L5joe5CBnFOw+gLWH6yKg==
Expand Down

0 comments on commit 8b9fc80

Please sign in to comment.