chore: remove require

.github/workflows/npmpublish.yml

@@ -9,7 +9,19 @@ jobs:
         with:
           node-version: '18.x'
       - run: npm install
+
+      - name: Determine npm tag
+        id: npm_tag
+        run: |
+          version=$(node -p "require('./package.json').version")
+          if [[ $version == *"-rc"* ]]; then
+            echo "tag=rc" >> $GITHUB_ENV
+          else
+            echo "tag=latest" >> $GITHUB_ENV
+          fi
+
       - uses: JS-DevTools/npm-publish@v3
         with:
           token: ${{ secrets.NPM_TOKEN }}
+          tag: ${{ env.tag }}
           ignore-scripts: false

README.md

@@ -1,19 +1,21 @@
 # sass-style-template
 
-Simple SCSS watcher with autoprefixer.
+A simple SCSS watcher with autoprefixer.
 
 ### Why?
 
-- I want to use **SASS** and **LitElement** for creating **Web Components**.
-- I want to use ES Modules for CSS (CSS Modules) helping me through ES6 modules.
-- I want to make it simple and decoupled from any bundle generator (_snowpack, parcel, rollup, webpack_)
+- I want to use [SASS](https://github.com/sass/dart-sass) and [Lit](https://lit.dev/) to build **Web Components**.
+- I prefer using ES Modules for CSS (CSS Modules) to leverage ES6 module features.
+- I aim to keep it simple and independent of any bundler (_parcel, rollup, webpack_).
 
 ```js
 // I don't want to use SASS directly in my code
 import styles from './my-component-style.scss' 😟
 ```
 
-> Lit Element makes it easy to _"shimming"_ CSS Modules and _"using"_ CSS-in-JS in a simple and lightweight way
+> Lit makes it easy to _shim_ CSS Modules in a simple and lightweight way
+
+- **my-component-styles.scss**
 
 ```scss
 :host {
@@ -33,8 +35,10 @@ p {
 }
 ```
 
+- **my-component-styles.css.js**
+
 ```js
-import { css, unsafeCSS } from 'lit';
+import {css, unsafeCSS} from 'lit';
 import * as tokens from 'my-design-system-tokens';
 
 export const styles = css`
@@ -55,27 +59,32 @@ export const styles = css`
 `;
 ```
 
+- **my-component.js**
+
 ```js
-// LitElement
+import {html, LitElement} from 'lit';
 import { styles } from './my-component-styles.css.js';
 
-static get styles() {
-  return [styles]
+class MyComponent extends LitElement {
+  static get styles() {
+    return [styles]
+  }
 }
 ```
 
 ---
 
-Or just, compile .scss files to .css file and then use [ES Module Shims](https://github.com/guybedford/es-module-shims)
+Or just, compile .scss files to .css file and then use [CSS module scripts](https://fullystacked.net/constructable/)
 
-> [CSS Modules - chromestatus](https://www.chromestatus.com/feature/5948572598009856)
 
 ```js
-// LitElement
-import styles from './style.css';
-...
-static get styles() {
-  return [styles]
+import {html, LitElement} from 'lit';
+import styles from './my-component-styles.css' with { type: 'css' };
+
+class MyComponent extends LitElement {
+  static get styles() {
+    return [styles]
+  }
 }
 ```
 
@@ -87,7 +96,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 +115,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';
@@ -132,16 +141,12 @@ export const styles = css`
 **sass-style-template**
 
 ```js
-// template default
-
-const customTemplate = path.resolve('sass-template.tmpl');
-
 // commander options
 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');
@@ -165,17 +170,19 @@ 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 %>`;
 ```
 
-Creating a custom template file _in root directory_, using this name `sass-template.tmpl`
+**Custom Template**
+
+Creating a custom template file in the root directory with the name `sass-template.tmpl`
 
 ```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 %>`;
 ```
@@ -194,7 +201,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,6 +221,8 @@ export const styles = css`<% content %>`;
 
 ### Example:
 
-[open-wc-vitejs-sass](https://github.com/oscarmarina/open-wc-vitejs-sass)
+Scaffold a new Lit component with SASS using:
+
+> [npm init @blockquote/wc](https://github.com/oscarmarina/create-wc)
 
 _Free Software._

bin/index.js

@@ -1,30 +1,36 @@
 #!/usr/bin/env node
 
-const fs = require('fs');
-const { program } = require('commander');
-const path = require('path');
-const pkg = require('../package.json');
+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 SassStyleTemplate = require('../lib/index.js');
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
-const customTemplate = path.resolve('.sass-template.tmpl');
+const customTemplatePath = path.resolve(process.cwd(), '.sass-template.tmpl');
+const tplTemplatePath = path.resolve(__dirname, '../tpls/sass-template.tmpl');
+
+const pkgPath = path.resolve(__dirname, '../package.json');
+const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
 
 program
   .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');
 
 program.parse(process.argv);
 
-const template = fs.existsSync(customTemplate)
-  ? fs.readFileSync(customTemplate, 'utf8')
-  : undefined;
+const template = fs.existsSync(customTemplatePath)
+  ? fs.readFileSync(customTemplatePath, 'utf8')
+  : fs.readFileSync(tplTemplatePath, 'utf8');
 
-const config = Object.assign({}, program.opts(), { template: 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,
+];