@terrazzo/plugin-sass 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Drew Powers
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,5 @@
+# ⛋ @terrazzo/plugin-css
+
+CSS codegen plugin for @terrazzo/cli. Generate Sass using DTCG tokens.
+
+[View Documentation](https://terrazzo.app/docs/integrations/sass)

package/dist/build.d.ts

@@ -0,0 +1,7 @@
+import type { BuildHookOptions } from '@terrazzo/parser';
+import { type SassPluginOptions } from './lib.js';
+export interface BuildParams {
+    getTransforms: BuildHookOptions['getTransforms'];
+    options?: SassPluginOptions;
+}
+export default function build({ getTransforms, options }: BuildParams): string;

package/dist/build.js

@@ -0,0 +1,40 @@
+import { isTokenMatch } from '@terrazzo/token-tools';
+import { defaultAliasTransform } from '@terrazzo/token-tools/css';
+import { FILE_HEADER, MIXIN_TOKEN, MIXIN_TYPOGRAPHY } from './lib.js';
+export default function build({ getTransforms, options }) {
+    const tokens = getTransforms({ format: 'css', id: '*', mode: '.' });
+    const output = [FILE_HEADER, ''];
+    // main values
+    output.push('$__token-values: (');
+    for (const token of tokens) {
+        if (isTokenMatch(token.token.id, options?.exclude ?? [])) {
+            continue;
+        }
+        // typography tokens handled later
+        if (token.token.$type === 'typography') {
+            output.push(`  "${token.token.id}": (
+    "__tz-error": 'This is a typography mixin. Use \`@include typography("${token.token.id}")\` instead.',
+  ),`);
+        }
+        else {
+            const name = token.localID ?? token.token.id;
+            output.push(`  "${token.token.id}": (${defaultAliasTransform(name)}),`);
+        }
+    }
+    output.push(');', '');
+    // typography mixins
+    output.push('$__token-typography-mixins: (');
+    const typographyTokens = getTransforms({ format: 'css', id: '*', mode: '.', $type: 'typography' });
+    for (const token of typographyTokens) {
+        output.push(`  "${token.token.id}": (`);
+        for (const property of Object.keys(token.value)) {
+            const name = `${token.localID ?? token.token.id}-${property}`;
+            output.push(`    "${property}": (${defaultAliasTransform(name)}),`);
+        }
+        output.push('  ),');
+    }
+    output.push(');', '');
+    output.push(MIXIN_TOKEN, '', MIXIN_TYPOGRAPHY, '');
+    return output.join('\n');
+}
+//# sourceMappingURL=build.js.map

package/dist/build.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"build.js","sourceRoot":"","sources":["../src/build.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAA0B,MAAM,UAAU,CAAC;AAO9F,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,aAAa,EAAE,OAAO,EAAe;IACnE,MAAM,MAAM,GAAG,aAAa,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;IAEpE,MAAM,MAAM,GAAa,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IAE3C,cAAc;IACd,MAAM,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;IAClC,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;QAC3B,IAAI,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,OAAO,EAAE,OAAO,IAAI,EAAE,CAAC,EAAE,CAAC;YACzD,SAAS;QACX,CAAC;QACD,kCAAkC;QAClC,IAAI,KAAK,CAAC,KAAK,CAAC,KAAK,KAAK,YAAY,EAAE,CAAC;YACvC,MAAM,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,EAAE;4EACsC,KAAK,CAAC,KAAK,CAAC,EAAE;KACrF,CAAC,CAAC;QACH,CAAC;aAAM,CAAC;YACN,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;YAC7C,MAAM,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,EAAE,OAAO,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1E,CAAC;IACH,CAAC;IACD,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IAEtB,oBAAoB;IACpB,MAAM,CAAC,IAAI,CAAC,+BAA+B,CAAC,CAAC;IAE7C,MAAM,gBAAgB,GAAG,aAAa,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,CAAC;IACnG,KAAK,MAAM,KAAK,IAAI,gBAAgB,EAAE,CAAC;QACrC,MAAM,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC;QACxC,KAAK,MAAM,QAAQ,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;YAChD,MAAM,IAAI,GAAG,GAAG,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,KAAK,CAAC,EAAE,IAAI,QAAQ,EAAE,CAAC;YAC9D,MAAM,CAAC,IAAI,CAAC,QAAQ,QAAQ,OAAO,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACtE,CAAC;QACD,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACtB,CAAC;IACD,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IAEtB,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,EAAE,gBAAgB,EAAE,EAAE,CAAC,CAAC;IAEnD,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC3B,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from '@terrazzo/parser';
+import type { SassPluginOptions } from './lib.js';
+export default function pluginSass(options?: SassPluginOptions): Plugin;

package/dist/index.js

@@ -0,0 +1,44 @@
+/**
+ * @module @terrazzo/plugin-sass
+ * @license MIT License
+ * 
+ * Copyright (c) 2021 Drew Powers
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import build from './build.js';
+export default function pluginSass(options) {
+    const filename = options?.filename ?? 'index.scss';
+    return {
+        name: '@terrazzo/plugin-sass',
+        enforce: 'post',
+        config(config) {
+            // plugin-css is required for transforms. throw error
+            if (!config.plugins.some((p) => p.name === '@terrazzo/plugin-css')) {
+                throw new Error(`@terrazzo/plugin-sass relies on @terrazzo/plugin-css.
+Please install @terrazzo/plugin-css and follow setup to add to your config.`);
+            }
+        },
+        async build({ getTransforms, outputFile }) {
+            const output = build({ getTransforms, options });
+            outputFile(filename, output);
+        },
+    };
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,YAAY,CAAC;AAG/B,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,OAA2B;IAC5D,MAAM,QAAQ,GAAG,OAAO,EAAE,QAAQ,IAAI,YAAY,CAAC;IAEnD,OAAO;QACL,IAAI,EAAE,uBAAuB;QAC7B,OAAO,EAAE,MAAM;QACf,MAAM,CAAC,MAAM;YACX,qDAAqD;YACrD,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,sBAAsB,CAAC,EAAE,CAAC;gBACnE,MAAM,IAAI,KAAK,CACb;4EACkE,CACnE,CAAC;YACJ,CAAC;QACH,CAAC;QACD,KAAK,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE;YACvC,MAAM,MAAM,GAAG,KAAK,CAAC,EAAE,aAAa,EAAE,OAAO,EAAE,CAAC,CAAC;YACjD,UAAU,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QAC/B,CAAC;KACF,CAAC;AACJ,CAAC"}

package/dist/lib.d.ts

@@ -0,0 +1,10 @@
+import type { CSSPluginOptions } from '@terrazzo/plugin-css';
+export interface SassPluginOptions {
+    /** Where to output CSS */
+    filename?: CSSPluginOptions['filename'];
+    /** Glob patterns to exclude tokens from output */
+    exclude?: CSSPluginOptions['exclude'];
+}
+export declare const FILE_HEADER = "////\n/// Autogenerated by \u26CB Terrazzo. DO NOT EDIT!\n////\n\n@use \"sass:list\";\n@use \"sass:map\";";
+export declare const MIXIN_TOKEN = "@function token($tokenName) {\n  @if map.has-key($__token-values, $tokenName) == false {\n    @error 'No token named \"#{$tokenName}\"';\n  }\n  $_token: map.get($__token-values, $tokenName);\n  @if map.has-key($_token, \"__tz-error\") {\n    @error map.get($_token, \"__tz-error\");\n  }\n  @return map.get($_token);\n}";
+export declare const MIXIN_TYPOGRAPHY = "@mixin typography($tokenName, $modeName: \".\") {\n  @if map.has-key($__token-typography-mixins, $tokenName) == false {\n    @error 'No typography mixin named \"#{$tokenName}\"';\n  }\n  $_mixin: map.get($__token-typography-mixins, $tokenName);\n  $_properties: map.get($_mixin, \".\");\n  @if map.has-key($_mixin) {\n    $_properties: map.get($_mixin);\n  }\n  @each $_property, $_value in $_properties {\n    #{$_property}: #{$_value};\n  }\n}";

package/dist/lib.js

@@ -0,0 +1,30 @@
+export const FILE_HEADER = `////
+/// Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
+////
+
+@use "sass:list";
+@use "sass:map";`;
+export const MIXIN_TOKEN = `@function token($tokenName) {
+  @if map.has-key($__token-values, $tokenName) == false {
+    @error 'No token named "#{$tokenName}"';
+  }
+  $_token: map.get($__token-values, $tokenName);
+  @if map.has-key($_token, "__tz-error") {
+    @error map.get($_token, "__tz-error");
+  }
+  @return map.get($_token);
+}`;
+export const MIXIN_TYPOGRAPHY = `@mixin typography($tokenName, $modeName: ".") {
+  @if map.has-key($__token-typography-mixins, $tokenName) == false {
+    @error 'No typography mixin named "#{$tokenName}"';
+  }
+  $_mixin: map.get($__token-typography-mixins, $tokenName);
+  $_properties: map.get($_mixin, ".");
+  @if map.has-key($_mixin) {
+    $_properties: map.get($_mixin);
+  }
+  @each $_property, $_value in $_properties {
+    #{$_property}: #{$_value};
+  }
+}`;
+//# sourceMappingURL=lib.js.map

package/dist/lib.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lib.js","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AASA,MAAM,CAAC,MAAM,WAAW,GAAG;;;;;iBAKV,CAAC;AAElB,MAAM,CAAC,MAAM,WAAW,GAAG;;;;;;;;;EASzB,CAAC;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG;;;;;;;;;;;;EAY9B,CAAC"}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@terrazzo/plugin-sass",
+  "description": "Generate scss/sass from your design tokens schema (requires @terrazzo/cli)",
+  "version": "0.0.0",
+  "author": {
+    "name": "Drew Powers",
+    "email": "drew@pow.rs"
+  },
+  "keywords": [
+    "design tokens",
+    "design tokens community group",
+    "design system",
+    "dtcg",
+    "w3c",
+    "css",
+    "sass"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "peerDependencies": {
+    "@terrazzo/cli": "^0.0.6",
+    "@terrazzo/plugin-css": "^0.0.4"
+  },
+  "dependencies": {
+    "@types/mime": "^3.0.4",
+    "mime": "^3.0.0",
+    "svgo": "^3.2.0",
+    "@terrazzo/token-tools": "^0.0.2"
+  },
+  "devDependencies": {
+    "@terrazzo/cli": "^0.0.6",
+    "@terrazzo/parser": "^0.0.6",
+    "@terrazzo/plugin-css": "^0.0.4"
+  },
+  "scripts": {
+    "build": "pnpm run build:clean && pnpm run build:ts && pnpm run build:license",
+    "build:clean": "del dist",
+    "build:ts": "tsc -p tsconfig.build.json",
+    "build:license": "node ../../scripts/inject-license.js @terrazzo/plugin-sass dist/index.js",
+    "dev": "tsc -p tsconfig.build.json -w",
+    "lint": "biome check .",
+    "test": "pnpm run \"/^test:.*/\"",
+    "test:js": "vitest run",
+    "test:ts": "tsc --noEmit"
+  }
+}

package/src/build.ts

@@ -0,0 +1,51 @@
+import { isTokenMatch } from '@terrazzo/token-tools';
+import { defaultAliasTransform } from '@terrazzo/token-tools/css';
+import type { BuildHookOptions } from '@terrazzo/parser';
+import { FILE_HEADER, MIXIN_TOKEN, MIXIN_TYPOGRAPHY, type SassPluginOptions } from './lib.js';
+
+export interface BuildParams {
+  getTransforms: BuildHookOptions['getTransforms'];
+  options?: SassPluginOptions;
+}
+
+export default function build({ getTransforms, options }: BuildParams): string {
+  const tokens = getTransforms({ format: 'css', id: '*', mode: '.' });
+
+  const output: string[] = [FILE_HEADER, ''];
+
+  // main values
+  output.push('$__token-values: (');
+  for (const token of tokens) {
+    if (isTokenMatch(token.token.id, options?.exclude ?? [])) {
+      continue;
+    }
+    // typography tokens handled later
+    if (token.token.$type === 'typography') {
+      output.push(`  "${token.token.id}": (
+    "__tz-error": 'This is a typography mixin. Use \`@include typography("${token.token.id}")\` instead.',
+  ),`);
+    } else {
+      const name = token.localID ?? token.token.id;
+      output.push(`  "${token.token.id}": (${defaultAliasTransform(name)}),`);
+    }
+  }
+  output.push(');', '');
+
+  // typography mixins
+  output.push('$__token-typography-mixins: (');
+
+  const typographyTokens = getTransforms({ format: 'css', id: '*', mode: '.', $type: 'typography' });
+  for (const token of typographyTokens) {
+    output.push(`  "${token.token.id}": (`);
+    for (const property of Object.keys(token.value)) {
+      const name = `${token.localID ?? token.token.id}-${property}`;
+      output.push(`    "${property}": (${defaultAliasTransform(name)}),`);
+    }
+    output.push('  ),');
+  }
+  output.push(');', '');
+
+  output.push(MIXIN_TOKEN, '', MIXIN_TYPOGRAPHY, '');
+
+  return output.join('\n');
+}

package/src/index.ts

@@ -0,0 +1,25 @@
+import type { Plugin } from '@terrazzo/parser';
+import build from './build.js';
+import type { SassPluginOptions } from './lib.js';
+
+export default function pluginSass(options?: SassPluginOptions): Plugin {
+  const filename = options?.filename ?? 'index.scss';
+
+  return {
+    name: '@terrazzo/plugin-sass',
+    enforce: 'post',
+    config(config) {
+      // plugin-css is required for transforms. throw error
+      if (!config.plugins.some((p) => p.name === '@terrazzo/plugin-css')) {
+        throw new Error(
+          `@terrazzo/plugin-sass relies on @terrazzo/plugin-css.
+Please install @terrazzo/plugin-css and follow setup to add to your config.`,
+        );
+      }
+    },
+    async build({ getTransforms, outputFile }) {
+      const output = build({ getTransforms, options });
+      outputFile(filename, output);
+    },
+  };
+}

package/src/lib.ts

@@ -0,0 +1,40 @@
+import type { CSSPluginOptions } from '@terrazzo/plugin-css';
+
+export interface SassPluginOptions {
+  /** Where to output CSS */
+  filename?: CSSPluginOptions['filename'];
+  /** Glob patterns to exclude tokens from output */
+  exclude?: CSSPluginOptions['exclude'];
+}
+
+export const FILE_HEADER = `////
+/// Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
+////
+
+@use "sass:list";
+@use "sass:map";`;
+
+export const MIXIN_TOKEN = `@function token($tokenName) {
+  @if map.has-key($__token-values, $tokenName) == false {
+    @error 'No token named "#{$tokenName}"';
+  }
+  $_token: map.get($__token-values, $tokenName);
+  @if map.has-key($_token, "__tz-error") {
+    @error map.get($_token, "__tz-error");
+  }
+  @return map.get($_token);
+}`;
+
+export const MIXIN_TYPOGRAPHY = `@mixin typography($tokenName, $modeName: ".") {
+  @if map.has-key($__token-typography-mixins, $tokenName) == false {
+    @error 'No typography mixin named "#{$tokenName}"';
+  }
+  $_mixin: map.get($__token-typography-mixins, $tokenName);
+  $_properties: map.get($_mixin, ".");
+  @if map.has-key($_mixin) {
+    $_properties: map.get($_mixin);
+  }
+  @each $_property, $_value in $_properties {
+    #{$_property}: #{$_value};
+  }
+}`;