@cichol/sass-bridge 4.3.0

package/README.md

@@ -0,0 +1,35 @@
+# `@cichol/sass-bridge`
+
+A bridge interface to define Sass custom functions.
+
+[![Build Status][github actions badge]][github actions][![License][license badge]](LICENSE)[![Package Version][npm package version badge]][npm package]
+
+## Table of Contents
+
+- [`@cichol/sass-bridge`](#cicholsass-bridge)
+  - [Table of Contents](#table-of-contents)
+  - [Installation](#installation)
+  - [Usage](#usage)
+  - [License](#license)
+
+## Installation
+
+```sh
+$ npm install --save @cichol/sass-bridge
+```
+
+## Usage
+
+```typescript
+// ...
+```
+
+## License
+
+[MIT Licensed](../../LICENSE).
+
+[github actions badge]: https://img.shields.io/github/actions/workflow/status/morrighan/packages/default.yml?branch=develop&style=flat-square
+[github actions]: https://github.com/morrighan/packages/actions
+[license badge]: https://img.shields.io/github/license/morrighan/packages.svg?style=flat-square
+[npm package version badge]: https://img.shields.io/npm/v/@cichol/sass-bridge.svg?style=flat-square
+[npm package]: https://www.npmjs.com/package/@cichol/sass-bridge

package/package.json

@@ -0,0 +1,48 @@
+{
+    "name": "@cichol/sass-bridge",
+    "version": "4.3.0",
+    "description": "A bridge interface to define Sass custom functions.",
+    "homepage": "https://github.com/morrighan/packages",
+    "bugs": {
+        "url": "https://github.com/morrighan/packages/issues"
+    },
+    "license": "MIT",
+    "author": {
+        "name": "Yongbin Min",
+        "email": "contact@cichol.com",
+        "url": "https://www.cichol.com/"
+    },
+    "type": "module",
+    "main": "releases/cjs.js",
+    "module": "releases/esm.js",
+    "types": "types/index.d.ts",
+    "directories": {
+        "lib": "releases"
+    },
+    "exports": {
+        "import": "./releases/esm.js",
+        "require": "./releases/cjs.js"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/morrighan/packages.git",
+        "directory": "packages/sass-bridge"
+    },
+    "scripts": {
+        "build": "npm run build:tsc",
+        "build:tsc": "npx tsc --project sources --outDir types"
+    },
+    "dependencies": {
+        "chroma-js": "^3.0.0",
+        "reflect-metadata": "^0.2.2",
+        "sass": "npm:sass-embedded@^1.77.8"
+    },
+    "engines": {
+        "node": "^20.16.0",
+        "npm": "^10.8.0"
+    },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/",
+        "access": "public"
+    }
+}

package/releases/cjs.js

@@ -0,0 +1,211 @@
+'use strict';
+
+var _Symbol = require('core-js-pure/stable/symbol/index.js');
+var _Promise = require('core-js-pure/stable/promise/index.js');
+var _mapInstanceProperty = require('core-js-pure/stable/instance/map.js');
+var _Reflect$construct = require('core-js-pure/stable/reflect/construct.js');
+var _Object$fromEntries = require('core-js-pure/stable/object/from-entries.js');
+require('reflect-metadata');
+var _fillInstanceProperty = require('core-js-pure/stable/instance/fill.js');
+var _Array$from = require('core-js-pure/stable/array/from.js');
+var _entriesInstanceProperty = require('core-js-pure/stable/instance/entries.js');
+var _Map = require('core-js-pure/stable/map/index.js');
+var _everyInstanceProperty = require('core-js-pure/stable/instance/every.js');
+var _Array$isArray = require('core-js-pure/stable/array/is-array.js');
+var chroma = require('chroma-js');
+var _filterInstanceProperty = require('core-js-pure/stable/instance/filter.js');
+var _Object$keys = require('core-js-pure/stable/object/keys.js');
+var _startsWithInstanceProperty = require('core-js-pure/stable/instance/starts-with.js');
+var _Object$getPrototypeOf = require('core-js-pure/stable/object/get-prototype-of.js');
+var sass = require('sass');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var sass__namespace = /*#__PURE__*/_interopNamespaceDefault(sass);
+
+var _context, _context2, _context3, _context4, _context5;
+
+// Type definitions.
+
+const SassTypes = _Object$fromEntries(_mapInstanceProperty(_context = _filterInstanceProperty(_context2 = _filterInstanceProperty(_context3 = _mapInstanceProperty(_context4 = _filterInstanceProperty(_context5 = _Object$keys(sass__namespace)).call(_context5, propertyKey => _startsWithInstanceProperty(propertyKey).call(propertyKey, 'Sass'))).call(_context4, propertyKey => sass__namespace[propertyKey])).call(_context3, constructor => typeof constructor === 'function')).call(_context2, constructor => Object.prototype.isPrototypeOf.call(sass.Value.prototype, constructor.prototype))).call(_context, constructor => [constructor.name, constructor]));
+const SassTRUE = sass__namespace.sassTrue;
+const SassFALSE = sass__namespace.sassFalse;
+const SassNULL = sass__namespace.sassNull;
+const {
+  SassNumber
+} = SassTypes;
+const {
+  SassString
+} = SassTypes;
+const {
+  SassColor
+} = SassTypes;
+const {
+  SassList
+} = SassTypes;
+const {
+  SassMap
+} = SassTypes;
+const SassBoolean = _Object$getPrototypeOf(SassTRUE).constructor;
+
+// Helper functions.
+function isObject(value) {
+  const type = typeof value;
+  return !!value && (type === 'object' || type === 'function');
+}
+function sassToJavaScriptType(sassValue) {
+  switch (true) {
+    case sassValue instanceof SassBoolean:
+      {
+        return sassValue.value;
+      }
+    case sassValue instanceof SassString:
+      {
+        return sassValue.text;
+      }
+    case sassValue instanceof SassNumber:
+      {
+        const {
+          value,
+          numeratorUnits,
+          denominatorUnits
+        } = sassValue;
+        const unit = sassValue.hasUnits ? numeratorUnits.join('*') + (denominatorUnits.size > 0 ? `/${denominatorUnits.join('*')}` : '') : '';
+        return unit ? {
+          value,
+          unit
+        } : value;
+      }
+    case sassValue instanceof SassColor:
+      {
+        const {
+          red,
+          green,
+          blue,
+          alpha
+        } = sassValue;
+        return chroma(red, green, blue, alpha);
+      }
+    case sassValue instanceof SassList:
+      {
+        var _context;
+        const listValue = sassValue.asList;
+        const length = listValue.size;
+        const array = _fillInstanceProperty(_context = Array(length)).call(_context, undefined);
+        for (let index = 0; index < length; index += 1) {
+          array[index] = listValue.get(index);
+        }
+        return _mapInstanceProperty(array).call(array, value => sassToJavaScriptType(value));
+      }
+    case sassValue instanceof SassMap:
+      {
+        var _context2;
+        const mapValue = sassValue.contents;
+        const entries = _mapInstanceProperty(_context2 = _Array$from(_entriesInstanceProperty(mapValue).call(mapValue))).call(_context2, ([key, value]) => [sassToJavaScriptType(key), sassToJavaScriptType(value)]);
+        return new _Map(entries);
+      }
+    default:
+      {
+        return null;
+      }
+  }
+}
+function javaScriptToSassType(rawValue) {
+  var _context3;
+  switch (true) {
+    case typeof rawValue === 'boolean':
+      {
+        const booleanValue = rawValue;
+        return booleanValue ? SassTRUE : SassFALSE;
+      }
+    case typeof rawValue === 'number':
+      {
+        const numberValue = rawValue;
+        return new SassNumber(numberValue);
+      }
+    case isObject(rawValue) && _everyInstanceProperty(_context3 = ['value', 'unit']).call(_context3, propertyKey => propertyKey in rawValue):
+      {
+        const {
+          value,
+          unit
+        } = rawValue;
+        return new SassNumber(value, unit);
+      }
+    case typeof rawValue === 'string':
+      {
+        const stringValue = rawValue;
+        return new SassString(stringValue);
+      }
+    case isObject(rawValue) && '_rgb' in rawValue:
+      {
+        const [red, green, blue, alpha] = rawValue.rgba();
+        return new SassColor({
+          red,
+          green,
+          blue,
+          alpha
+        });
+      }
+    case _Array$isArray(rawValue):
+      {
+        return new SassList(_mapInstanceProperty(rawValue).call(rawValue, value => javaScriptToSassType(value)));
+      }
+    case rawValue instanceof _Map:
+      {
+        var _context4;
+        const mapValue = rawValue;
+        const sassMap = new SassMap();
+        const converted = _mapInstanceProperty(_context4 = _Array$from(_entriesInstanceProperty(mapValue).call(mapValue))).call(_context4, entry => _mapInstanceProperty(entry).call(entry, javaScriptToSassType));
+        for (const [key, value] of converted) {
+          sassMap.contents.set(key, value);
+        }
+        return sassMap;
+      }
+    default:
+      {
+        return SassNULL;
+      }
+  }
+}
+
+// Type definitions.
+
+// Constants.
+const KeyOfSignature = _Symbol('@cichol/sass-bridge::KeyOfSignature');
+function sassFunction(definition) {
+  return target => {
+    Reflect.defineMetadata(KeyOfSignature, definition, target);
+    return target;
+  };
+}
+async function getFunctions(...moduleImports) {
+  const modules = await _Promise.all(_mapInstanceProperty(moduleImports).call(moduleImports, module => _Promise.resolve(module).then(module => module.default)));
+  const entries = _mapInstanceProperty(modules).call(modules, module => {
+    const signature = Reflect.getMetadata(KeyOfSignature, module);
+    async function customFunction(rawArgs) {
+      const args = _mapInstanceProperty(rawArgs).call(rawArgs, sassToJavaScriptType);
+      const result = await _Reflect$construct(module, args).execute();
+      return javaScriptToSassType(result);
+    }
+    return [signature, customFunction];
+  });
+  return _Object$fromEntries(entries);
+}
+
+exports.getFunctions = getFunctions;
+exports.sassFunction = sassFunction;

package/releases/esm.js

@@ -0,0 +1,190 @@
+import _Symbol from 'core-js-pure/stable/symbol/index.js';
+import _Promise from 'core-js-pure/stable/promise/index.js';
+import _mapInstanceProperty from 'core-js-pure/stable/instance/map.js';
+import _Reflect$construct from 'core-js-pure/stable/reflect/construct.js';
+import _Object$fromEntries from 'core-js-pure/stable/object/from-entries.js';
+import 'reflect-metadata';
+import _fillInstanceProperty from 'core-js-pure/stable/instance/fill.js';
+import _Array$from from 'core-js-pure/stable/array/from.js';
+import _entriesInstanceProperty from 'core-js-pure/stable/instance/entries.js';
+import _Map from 'core-js-pure/stable/map/index.js';
+import _everyInstanceProperty from 'core-js-pure/stable/instance/every.js';
+import _Array$isArray from 'core-js-pure/stable/array/is-array.js';
+import chroma from 'chroma-js';
+import _filterInstanceProperty from 'core-js-pure/stable/instance/filter.js';
+import _Object$keys from 'core-js-pure/stable/object/keys.js';
+import _startsWithInstanceProperty from 'core-js-pure/stable/instance/starts-with.js';
+import _Object$getPrototypeOf from 'core-js-pure/stable/object/get-prototype-of.js';
+import * as sass from 'sass';
+import { Value } from 'sass';
+
+var _context, _context2, _context3, _context4, _context5;
+
+// Type definitions.
+
+const SassTypes = _Object$fromEntries(_mapInstanceProperty(_context = _filterInstanceProperty(_context2 = _filterInstanceProperty(_context3 = _mapInstanceProperty(_context4 = _filterInstanceProperty(_context5 = _Object$keys(sass)).call(_context5, propertyKey => _startsWithInstanceProperty(propertyKey).call(propertyKey, 'Sass'))).call(_context4, propertyKey => sass[propertyKey])).call(_context3, constructor => typeof constructor === 'function')).call(_context2, constructor => Object.prototype.isPrototypeOf.call(Value.prototype, constructor.prototype))).call(_context, constructor => [constructor.name, constructor]));
+const SassTRUE = sass.sassTrue;
+const SassFALSE = sass.sassFalse;
+const SassNULL = sass.sassNull;
+const {
+  SassNumber
+} = SassTypes;
+const {
+  SassString
+} = SassTypes;
+const {
+  SassColor
+} = SassTypes;
+const {
+  SassList
+} = SassTypes;
+const {
+  SassMap
+} = SassTypes;
+const SassBoolean = _Object$getPrototypeOf(SassTRUE).constructor;
+
+// Helper functions.
+function isObject(value) {
+  const type = typeof value;
+  return !!value && (type === 'object' || type === 'function');
+}
+function sassToJavaScriptType(sassValue) {
+  switch (true) {
+    case sassValue instanceof SassBoolean:
+      {
+        return sassValue.value;
+      }
+    case sassValue instanceof SassString:
+      {
+        return sassValue.text;
+      }
+    case sassValue instanceof SassNumber:
+      {
+        const {
+          value,
+          numeratorUnits,
+          denominatorUnits
+        } = sassValue;
+        const unit = sassValue.hasUnits ? numeratorUnits.join('*') + (denominatorUnits.size > 0 ? `/${denominatorUnits.join('*')}` : '') : '';
+        return unit ? {
+          value,
+          unit
+        } : value;
+      }
+    case sassValue instanceof SassColor:
+      {
+        const {
+          red,
+          green,
+          blue,
+          alpha
+        } = sassValue;
+        return chroma(red, green, blue, alpha);
+      }
+    case sassValue instanceof SassList:
+      {
+        var _context;
+        const listValue = sassValue.asList;
+        const length = listValue.size;
+        const array = _fillInstanceProperty(_context = Array(length)).call(_context, undefined);
+        for (let index = 0; index < length; index += 1) {
+          array[index] = listValue.get(index);
+        }
+        return _mapInstanceProperty(array).call(array, value => sassToJavaScriptType(value));
+      }
+    case sassValue instanceof SassMap:
+      {
+        var _context2;
+        const mapValue = sassValue.contents;
+        const entries = _mapInstanceProperty(_context2 = _Array$from(_entriesInstanceProperty(mapValue).call(mapValue))).call(_context2, ([key, value]) => [sassToJavaScriptType(key), sassToJavaScriptType(value)]);
+        return new _Map(entries);
+      }
+    default:
+      {
+        return null;
+      }
+  }
+}
+function javaScriptToSassType(rawValue) {
+  var _context3;
+  switch (true) {
+    case typeof rawValue === 'boolean':
+      {
+        const booleanValue = rawValue;
+        return booleanValue ? SassTRUE : SassFALSE;
+      }
+    case typeof rawValue === 'number':
+      {
+        const numberValue = rawValue;
+        return new SassNumber(numberValue);
+      }
+    case isObject(rawValue) && _everyInstanceProperty(_context3 = ['value', 'unit']).call(_context3, propertyKey => propertyKey in rawValue):
+      {
+        const {
+          value,
+          unit
+        } = rawValue;
+        return new SassNumber(value, unit);
+      }
+    case typeof rawValue === 'string':
+      {
+        const stringValue = rawValue;
+        return new SassString(stringValue);
+      }
+    case isObject(rawValue) && '_rgb' in rawValue:
+      {
+        const [red, green, blue, alpha] = rawValue.rgba();
+        return new SassColor({
+          red,
+          green,
+          blue,
+          alpha
+        });
+      }
+    case _Array$isArray(rawValue):
+      {
+        return new SassList(_mapInstanceProperty(rawValue).call(rawValue, value => javaScriptToSassType(value)));
+      }
+    case rawValue instanceof _Map:
+      {
+        var _context4;
+        const mapValue = rawValue;
+        const sassMap = new SassMap();
+        const converted = _mapInstanceProperty(_context4 = _Array$from(_entriesInstanceProperty(mapValue).call(mapValue))).call(_context4, entry => _mapInstanceProperty(entry).call(entry, javaScriptToSassType));
+        for (const [key, value] of converted) {
+          sassMap.contents.set(key, value);
+        }
+        return sassMap;
+      }
+    default:
+      {
+        return SassNULL;
+      }
+  }
+}
+
+// Type definitions.
+
+// Constants.
+const KeyOfSignature = _Symbol('@cichol/sass-bridge::KeyOfSignature');
+function sassFunction(definition) {
+  return target => {
+    Reflect.defineMetadata(KeyOfSignature, definition, target);
+    return target;
+  };
+}
+async function getFunctions(...moduleImports) {
+  const modules = await _Promise.all(_mapInstanceProperty(moduleImports).call(moduleImports, module => _Promise.resolve(module).then(module => module.default)));
+  const entries = _mapInstanceProperty(modules).call(modules, module => {
+    const signature = Reflect.getMetadata(KeyOfSignature, module);
+    async function customFunction(rawArgs) {
+      const args = _mapInstanceProperty(rawArgs).call(rawArgs, sassToJavaScriptType);
+      const result = await _Reflect$construct(module, args).execute();
+      return javaScriptToSassType(result);
+    }
+    return [signature, customFunction];
+  });
+  return _Object$fromEntries(entries);
+}
+
+export { getFunctions, sassFunction };

package/tests/artifacts/custom-function.ts

@@ -0,0 +1,18 @@
+import type { BridgedFunction } from '../../types';
+import { sassFunction } from '../../releases/esm.js'; // eslint-disable-line import/extensions
+
+@sassFunction('custom-function($a, $b)')
+export default class CustomFunction implements BridgedFunction {
+    #a: string;
+
+    #b: string;
+
+    public constructor(A: string, B: string) {
+        this.#a = A;
+        this.#b = B;
+    }
+
+    public async execute() {
+        return this.#a.toLowerCase() + this.#b.toUpperCase();
+    }
+}

package/tests/artifacts/sqrt-cos.ts

@@ -0,0 +1,15 @@
+import type { BridgedFunction } from '../../types';
+import { sassFunction } from '../../releases/esm.js'; // eslint-disable-line import/extensions
+
+@sassFunction('sqrt-cos($x)')
+export default class SquareRootCosine implements BridgedFunction {
+    #x: number;
+
+    public constructor(X: number) {
+        this.#x = X;
+    }
+
+    public async execute() {
+        return Math.sqrt(Math.cos(this.#x));
+    }
+}

package/tests/index.ts

@@ -0,0 +1,31 @@
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+/* eslint-disable import/extensions */
+
+// Third-party modules.
+import { describe, it } from 'mocha';
+import { expect } from 'chai';
+import * as sass from 'sass';
+
+// Testing target.
+import { getFunctions } from '../releases/esm.js';
+
+describe('@cichol/sass-bridge', () => {
+    it('should be working properly', async () => {
+        const source = `
+            body > *:first-child:after {
+                content: custom-function('HELLO', 'world');
+                line-height: sqrt-cos(${2 * Math.PI});
+            }
+        `;
+
+        const functions = await getFunctions(
+            import('./artifacts/custom-function.ts'),
+            import('./artifacts/sqrt-cos.ts')
+        );
+
+        const { css: result } = await sass.compileStringAsync(source, { functions });
+
+        expect(result).to.includes('content: "helloWORLD";');
+        expect(result).to.includes('line-height: 1;');
+    });
+});