Merge pull request #25 from neogeek/feature/css

[feat] Added css string template method.

README.md

@@ -224,7 +224,27 @@ import { html } from 'onlybuild';
 export default html`<h1>Hello, world!</h1>`;
 ```
 
-Install the [lit-html](https://marketplace.visualstudio.com/items?itemName=bierner.lit-html) plugin in VS Code to help format the HTML on save.
+Install the [lit-html](https://marketplace.visualstudio.com/items?itemName=bierner.lit-html) and [prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) plugin in VS Code to help format the HTML on save.
+
+### <code>&#96;css&#96;</code> String Template Utility
+
+The `onlybuild` library includes an optional <code>&#96;css&#96;</code> string template utility that can be used to add syntax highlighting and formatting to CSS, making it easier to author CSS in JavaScript.
+
+```javascript
+import { css } from 'onlybuild';
+
+const styles = css`
+  body {
+    color: red;
+  }
+`;
+
+export default html`<style>
+  ${styles}
+</style>`;
+```
+
+Install the [prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) plugin in VS Code to help format the CSS on save.
 
 ## File Structure
 

src/css.test.ts

@@ -0,0 +1,38 @@
+/* node:coverage disable */
+
+import test, { describe } from 'node:test';
+import assert from 'node:assert';
+
+import { css } from './css.js';
+
+describe('css string template utility', async () => {
+  test('simple css string', () => {
+    assert.equal(
+      css`
+        body {
+          color: red;
+        }
+      `,
+      `
+        body {
+          color: red;
+        }
+      `
+    );
+  });
+  test('simple css string with variable', () => {
+    const color = 'red';
+    assert.equal(
+      css`
+        body {
+          color: ${color};
+        }
+      `,
+      `
+        body {
+          color: red;
+        }
+      `
+    );
+  });
+});

src/css.ts

@@ -0,0 +1,17 @@
+/**
+ * String template utility that adds syntax highlighting and formatting in text editors.
+ *
+ * @param {TemplateStringsArray} strings
+ * @param {any[]} values
+ */
+
+export const css = (strings: TemplateStringsArray, ...values: any[]) => {
+  const processedValues = values.map(value =>
+    Array.isArray(value) ? value.join('') : value
+  );
+
+  return strings.reduce(
+    (prev, curr, i) => `${prev}${curr}${processedValues[i] || ''}`,
+    ''
+  );
+};

src/html.test.ts

@@ -12,6 +12,13 @@ describe('html string template utility', async () => {
       '<span><b>this is a test</b></span>'
     );
   });
+  test('simple html string with variable', () => {
+    const name = 'test';
+    assert.equal(
+      html`<span><b>this is a ${name}</b></span>`,
+      '<span><b>this is a test</b></span>'
+    );
+  });
   test('map', () => {
     assert.equal(
       html`<ul>

src/index.ts

@@ -1 +1,2 @@
+export { css } from './css.js';
 export { html } from './html.js';