From 29fdbe8eeeed77ab095d9ce6b00bb090465139bf Mon Sep 17 00:00:00 2001
From: oscar marina <oscar7600@outlook.com>
Date: Sun, 10 Nov 2024 23:18:26 +0100
Subject: [PATCH] chore: remove require

---
 README.md    | 38 ++++++++++++++++++++++++++++----------
 package.json |  4 ++--
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index e7c37aa..1bd1dee 100644
--- a/README.md
+++ b/README.md
@@ -2,18 +2,20 @@
 
 A simple SCSS watcher with autoprefixer.
 
-### Why?
+## Goals
 
-- 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_).
+- Use [Lit](https://lit.dev/) + [SASS](https://github.com/sass/dart-sass) to build **Web Components**.
+- Leverage ES6 module features to enable easy adoption of [import-attributes](https://fullystacked.net/import-attributes/) for [CSS module scripts](https://fullystacked.net/constructable/).
+- Keep it simple and independent of any bundler such as _rollup, parcel, webpack_.
 
 ```js
 // I don't want to use SASS directly in my code
 import styles from './my-component-style.scss' 😟
 ```
 
-> Lit makes it easy to _shim_ CSS Modules in a simple and lightweight way
+<hr>
+
+### Flow
 
 - **my-component-styles.scss**
 
@@ -74,7 +76,7 @@ class MyComponent extends LitElement {
 
 ---
 
-Or just, compile .scss files to .css file and then use [CSS module scripts](https://fullystacked.net/constructable/)
+Or just, compile .scss files to .css file and then use [CSS module scripts](https://github.com/web-platform-tests/interop/issues/703)
 
 
 ```js
@@ -136,6 +138,17 @@ export const styles = css`
 
 `npm i -D sass-style-template`
 
+Here is an example of using [Vite](https://vite.dev/) + [concurrently](https://www.npmjs.com/package/concurrently) in the package scripts:
+
+```js
+// package.json
+"scripts": {
+  "start": "concurrently -k -r \"npm:sass:watch\" \"npm:vite\"",
+  "vite": "vite",
+  "sass:watch": "sass-style-template"
+}
+```
+
 ### Options
 
 **sass-style-template**
@@ -156,9 +169,9 @@ version(pkg.version, '-v, --version', 'show version number')
 
 ```js
 // package.json
-// my-component.scss --> my-component-styles.css.ts
 "scripts": {
   "start": "concurrently -k -r \"npm:sass:watch\" \"npm:vite\"",
+  "vite": "vite",
   "sass:watch": "sass-style-template -j ts"
 }
 ```
@@ -180,10 +193,15 @@ export const styles = css`<% content %>`;
 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
-
+// Example: sass-template.tmpl
+// https://github.com/material-components/material-web/blob/main/scripts/css-to-ts.ts
+
+/**
+ * @license
+ * Copyright 2024 XXX LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
 import {css} from 'lit';
-
 export const styles = css`<% content %>`;
 ```
 
diff --git a/package.json b/package.json
index f6fb847..072dad2 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@blockquote/sass-style-template",
-  "version": "4.0.0-rc.5",
-  "description": "SASS and Lit for creating Web Components",
+  "version": "4.0.0",
+  "description": "A SCSS watcher with autoprefixer for building Web Components using Lit and SASS.",
   "keywords": [
     "lit",
     "web-components",