chore: remove require

README.md

@@ -34,7 +34,7 @@ p {
 ```
 
 ```js
-import { css, unsafeCSS } from 'lit';
+import {css, unsafeCSS} from 'lit';
 import * as tokens from 'my-design-system-tokens';
 
 export const styles = css`
@@ -87,7 +87,7 @@ The first time a default template will be used to create a style file
 
 ```js
 // sass-template.tmpl
-import { css } from 'lit';
+import {css} from 'lit';
 
 export const styles = css`<% content %>`;
 ```
@@ -106,11 +106,11 @@ or without suffix
 
 > `my-component.scss --> my-component.css.js`
 
-Following changes in the `scss file (my-component.scss)` will update only the content between the `css``;` template literal in .css.js file
+Following changes in the `scss file (my-component.scss)` will update only the content between the ` css``; ` template literal in .css.js file
 
 ```js
 // from original template
-import { css } from 'lit';
+import {css} from 'lit';
 
 // new content added later, it will not be deleted when updating scss file
 import * as tokens from 'my-design-system-tokens';
@@ -137,7 +137,7 @@ version(pkg.version, '-v, --version', 'show version number')
   .option('-s, --marker-start <string>', 'start replace position')
   .option('-e, --marker-end <string>', 'end replace position')
   .option('-g, --custom-glob <string>', 'string pattern to be matched')
-  .option('-f, --css-file', 'generate css file instead of using template')
+  .option('-c, --css-file', 'generate a CSS file instead of JS or TS')
   .option('-wo, --wo-suffix', 'without suffix string `-styles`')
   .option('-j, --js-file <string>', 'file extension')
   .option('-d, --destination <string>', 'location of the output file');
@@ -161,7 +161,7 @@ version(pkg.version, '-v, --version', 'show version number')
 **sass-template.tmpl**
 
 ```js
-import { css } from 'lit';
+import {css} from 'lit';
 
 export const styles = css`<% content %>`;
 ```
@@ -171,7 +171,7 @@ Creating a custom template file _in root directory_, using this name `sass-templ
 ```js
 // https://github.com/material-components/material-web/blob/master/css-to-ts.js
 
-import { css } from 'lit';
+import {css} from 'lit';
 
 export const styles = css`<% content %>`;
 ```
@@ -190,7 +190,7 @@ export const styles = css`<% content %>`;
 
 > pattern to be matched : `./*.scss, ./src/**/*.scss`
 
-##### --css-file (-f)
+##### --css-file (-c)
 
 > generate css file instead of using template : `undefined`
 
@@ -214,5 +214,4 @@ Scaffold a new Lit component with SASS using:
 
 > [npm init @blockquote/wc](https://github.com/oscarmarina/create-wc)
 
-
 _Free Software._

bin/index.js

@@ -1,10 +1,10 @@
 #!/usr/bin/env node
 
-import fs from 'fs';
-import { program } from 'commander';
-import { SassStyleTemplate } from '../lib/index.js';
-import path from 'path';
-import { fileURLToPath } from 'url';
+import fs from 'node:fs';
+import path from 'node:path';
+import {fileURLToPath} from 'node:url';
+import {program} from 'commander';
+import {SassStyleTemplate} from '../lib/index.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -20,7 +20,7 @@ program
   .option('-s, --marker-start <string>', 'start replace position')
   .option('-e, --marker-end <string>', 'end replace position')
   .option('-g, --custom-glob <string>', 'string pattern to be matched')
-  .option('-f, --css-file', 'generate css file instead of using template')
+  .option('-c, --css-file', 'generate a CSS file instead of JS or TS')
   .option('-wo, --wo-suffix', 'without suffix string `-styles`')
   .option('-j, --js-file <string>', 'file extension')
   .option('-d, --destination <string>', 'location of the output file');
@@ -31,6 +31,6 @@ const template = fs.existsSync(customTemplatePath)
   ? fs.readFileSync(customTemplatePath, 'utf8')
   : fs.readFileSync(tplTemplatePath, 'utf8');
 
-const config = Object.assign({}, program.opts(), { template });
+const config = Object.assign({}, program.opts(), {template});
 
 new SassStyleTemplate(config);

eslint.config.js

@@ -0,0 +1,10 @@
+import globals from 'globals';
+import pluginJs from '@eslint/js';
+import eslintConfigPrettier from 'eslint-config-prettier';
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  {languageOptions: {globals: globals.node}},
+  pluginJs.configs.recommended,
+  eslintConfigPrettier,
+];

lib/index.js

@@ -1,6 +1,6 @@
-import fs from 'fs/promises';
-import path from 'path';
-import { globSync } from 'tinyglobby';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import {globSync} from 'tinyglobby';
 import chokidar from 'chokidar';
 import * as sass from 'sass';
 import autoprefixer from 'autoprefixer';
@@ -52,7 +52,6 @@ class CssProcessor {
   }
 }
 
-
 class FileHandler {
   /**
    * @param {string|undefined} destination - The destination directory.
@@ -66,10 +65,8 @@ class FileHandler {
    * @returns {Promise<string>} - The cleaned and resolved path.
    */
   async cleanDestinationPath() {
-    const cleanedPath = path
-      .resolve(this.destination)
-      .replace(/^\/+|\/+$/g, '');
-    await fs.mkdir(cleanedPath, { recursive: true });
+    const cleanedPath = path.resolve(this.destination).replace(/^\/+|\/+$/g, '');
+    await fs.mkdir(cleanedPath, {recursive: true});
     return cleanedPath;
   }
 
@@ -100,7 +97,7 @@ export class SassStyleTemplate {
    * @param {string} [options.markerStart='const styles = css`'] - The start marker for CSS injection.
    * @param {string} [options.markerEnd='`;'] - The end marker for CSS injection.
    * @param {string} [options.customGlob='./*.scss,./src/**\/**\/*.scss'] - The glob pattern for SASS files.
-   * @param {string} [options.cssFile] - The CSS file extension.
+   * @param {string} [options.cssFile] - Generate a CSS file instead of JS or TS.
    * @param {boolean} [options.woSuffix] - Whether to omit the suffix.
    * @param {string} [options.jsFile='js'] - The JavaScript file extension.
    * @param {string} [options.destination] - The destination directory.
@@ -181,13 +178,11 @@ export class SassStyleTemplate {
       fileNameWithoutExt: path.basename(fileName, '.scss'),
       fileExt: this.options.cssFile
         ? `${this.options.woSuffix ? '' : '-styles'}.css`
-        : `${this.options.woSuffix ? '' : '-styles'}.css.${
-            this.options.jsFile
-          }`,
+        : `${this.options.woSuffix ? '' : '-styles'}.css.${this.options.jsFile}`,
     };
 
     if (!this.options.destination) {
-      this.fileInfo = { ...this.fileInfo, fileDir: path.dirname(fileName) };
+      this.fileInfo = {...this.fileInfo, fileDir: path.dirname(fileName)};
     } else {
       this.fileInfo = {
         ...this.fileInfo,
@@ -234,7 +229,7 @@ export class SassStyleTemplate {
    * @param {string} glob - The glob pattern for SASS files.
    */
   watchSass(glob) {
-    const watcher = chokidar.watch(glob, { ignoreInitial: true });
+    const watcher = chokidar.watch(glob, {ignoreInitial: true});
 
     watcher.on('change', () => {
       this.globSassFile(this.renderStylesTemplate);
@@ -249,9 +244,7 @@ export class SassStyleTemplate {
       this.unlinkFile(filePath);
     });
 
-    watcher.on('error', (err) =>
-      console.error(`Watcher ${color.red}${err}${color.reset}`)
-    );
+    watcher.on('error', (err) => console.error(`Watcher ${color.red}${err}${color.reset}`));
   }
 
   /**
@@ -263,9 +256,7 @@ export class SassStyleTemplate {
     const fileToUnlink = `${this.fileInfo.fileDir}/${fileNameWithoutExt}${this.fileInfo.fileExt}`;
     try {
       await fs.unlink(fileToUnlink);
-      console.info(
-        `${color.red}file removed ${path.basename(fileToUnlink)}${color.reset}`
-      );
+      console.info(`${color.red}file removed ${path.basename(fileToUnlink)}${color.reset}`);
     } catch (err) {
       console.error(`${color.red}${err}${color.reset}`);
     }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockquote/sass-style-template",
-  "version": "4.0.0-rc.4",
+  "version": "4.0.0-rc.5",
   "description": "SASS and Lit for creating Web Components",
   "keywords": [
     "lit",
@@ -30,7 +30,8 @@
   },
   "scripts": {
     "start": "node ./bin/index.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "format": "eslint . --fix"
   },
   "dependencies": {
     "autoprefixer": "^10.4.20",
@@ -40,7 +41,28 @@
     "sass": "^1.80.6",
     "tinyglobby": "^0.2.10"
   },
+  "prettier": {
+    "bracketSpacing": false,
+    "printWidth": 100,
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "overrides": [
+      {
+        "files": "*.{scss,css}",
+        "options": {
+          "printWidth": 280,
+          "singleQuote": false
+        }
+      }
+    ]
+  },
   "publishConfig": {
     "access": "public"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.14.0",
+    "eslint": "^9.14.0",
+    "eslint-config-prettier": "^9.1.0",
+    "globals": "^15.12.0"
   }
 }

src/main.scss

@@ -1,4 +1,4 @@
-@use 'other';
+@use "other";
 $color: indianred;
 $bar: 2rem;
 

src/other.scss

@@ -1,9 +1,8 @@
-$color: orange;
+$color: indianred;
 
 p {
   color: $color;
-
- padding: 2em;
+  padding: 2em;
 }
 @media (min-resolution: 2dppx) {
   .image {