build-sass: Support optional out-dir option

app/javascript/packages/build-sass/CHANGELOG.md

@@ -4,6 +4,10 @@
 
 - Requires Node.js v18 or newer
 
+### Improvements
+
+- `--out-dir` is now optional. If omitted, files will be output in the same directory as their source files.
+
 ## 2.0.0
 
 ### Breaking Changes

app/javascript/packages/build-sass/README.md

@@ -6,7 +6,7 @@ Why use it?
 
 - ⚡️ **It's fast**, since it uses native Dart Sass binary through [`sass-embedded`](http://npmjs.com/package/sass-embedded), and the Rust-based [Lightning CSS](https://www.npmjs.com/package/lightningcss) for autoprefixing and minification.
 - 💻 **It includes a CLI**, so it's easy to integrate with command-based build pipelines like NPM scripts or Makefile.
-- 🚀 **It has relevant defaults**, as as to require as little additional configuration as possible.
+- 🚀 **It has relevant defaults**, to work out of the box with minimal or no additional configuration.
 
 Default behavior includes:
 
@@ -23,7 +23,7 @@ Default behavior includes:
 Invoke the included `build-sass` executable with the source files and any relevant command flags.
 
 ```
-npx build-sass path/to/sass/*.scss --out-dir=build
+npx build-sass path/to/sass/*.scss
 ```
 
 Flags:

app/javascript/packages/build-sass/cli.js

@@ -29,10 +29,6 @@ const { values: flags, positionals: fileArgs } = parseArgs({
 const { watch: isWatching, 'out-dir': outDir, 'load-path': loadPaths = [] } = flags;
 loadPaths.push(...getDefaultLoadPaths());
 
-if (!outDir) {
-  throw new TypeError('Output directory must be provided using the `--out-dir` option.');
-}
-
 /** @type {BuildOptions & SyncSassOptions} */
 const options = { outDir, loadPaths, optimize: isProduction };
 
@@ -84,9 +80,13 @@ function build(files) {
   );
 }
 
-mkdir(outDir, { recursive: true })
-  .then(() => build(fileArgs))
-  .catch((error) => {
-    console.error(error);
-    process.exitCode = 1;
-  });
+if (outDir) {
+  await mkdir(outDir, { recursive: true });
+}
+
+try {
+  await build(fileArgs);
+} catch (error) {
+  console.error(error);
+  process.exitCode = 1;
+}

app/javascript/packages/build-sass/cli.spec.js

@@ -18,4 +18,12 @@ describe('cli', () => {
       await stat(join(cwd, 'fixtures/missing-out-dir/in.css.scss'));
     });
   });
+
+  context('with unconfigured output directory', () => {
+    it('outputs in the same directory as the input file', async () => {
+      await exec('./cli.js fixtures/default-out-dir/styles.css.scss', { cwd });
+
+      await stat(join(cwd, 'fixtures/default-out-dir/styles.css'));
+    });
+  });
 });

app/javascript/packages/build-sass/fixtures/default-out-dir/.gitignore

@@ -0,0 +1 @@
+styles.css

app/javascript/packages/build-sass/index.js

@@ -1,4 +1,4 @@
-import { basename, join } from 'node:path';
+import { basename, join, dirname } from 'node:path';
 import { createWriteStream } from 'node:fs';
 import { Readable } from 'node:stream';
 import { pipeline } from 'node:stream/promises';
@@ -29,7 +29,7 @@ const TARGETS = browserslistToTargets(
  * @return {Promise<CompileResult>}
  */
 export async function buildFile(file, options) {
-  const { outDir, optimize, loadPaths = [], ...sassOptions } = options;
+  const { outDir = dirname(file), optimize, loadPaths = [], ...sassOptions } = options;
   const sassResult = sassCompile(file, {
     style: optimize ? 'compressed' : 'expanded',
     ...sassOptions,
@@ -46,9 +46,7 @@ export async function buildFile(file, options) {
     targets: TARGETS,
   });
 
-  if (outDir) {
-    outFile = join(outDir, outFile);
-  }
+  outFile = join(outDir, outFile);
 
   await pipeline(Readable.from(lightningResult.code), createWriteStream(outFile));