@terrazzo/plugin-sass 0.0.0 → 0.0.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Drew Powers
+Copyright (c) 2024 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
@@ -18,4 +18,4 @@ 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.
+SOFTWARE.

package/README.md

@@ -1,5 +1,40 @@
-# ⛋ @terrazzo/plugin-css
+# ⛋ @terrazzo/plugin-sass
 
-CSS codegen plugin for @terrazzo/cli. Generate Sass using DTCG tokens.
+Generate Sass code from DTCG tokens.
 
-[View Documentation](https://terrazzo.app/docs/integrations/sass)
+## Setup
+
+Requires [Node.js 18 or later](https://nodejs.org). With that installed, run:
+
+```sh
+npm i -D @terrazzo/cli @terrazzo/plugin-css @terrazzo/plugin-sass
+```
+
+Add a `terrazzo.config.js` to the root of your project with:
+
+```ts
+import { defineConfig } from "@terrazzo/cli";
+import sass from "@terrazzo/plugin-sass";
+
+export default defineConfig({
+  outDir: "./tokens/",
+  plugins: [
+    css({
+      fileName: "tokens.css",
+    }),
+    sass({
+      fileName: "index.sass",
+    }),
+  ],
+});
+```
+
+Lastly, run:
+
+```sh
+npx tz build
+```
+
+And you’ll see a `./tokens/index.scss` file generated in your project.
+
+[Full Documentation](https://terrazzo.app/docs/integrations/sass)

package/dist/build.js

@@ -1,8 +1,9 @@
 import { isTokenMatch } from '@terrazzo/token-tools';
-import { defaultAliasTransform } from '@terrazzo/token-tools/css';
+import { makeCSSVar } from '@terrazzo/token-tools/css';
+import { FORMAT_ID } from '@terrazzo/plugin-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 tokens = getTransforms({ format: FORMAT_ID, id: '*', mode: '.' });
     const output = [FILE_HEADER, ''];
     // main values
     output.push('$__token-values: (');
@@ -18,7 +19,7 @@ export default function build({ getTransforms, options }) {
         }
         else {
             const name = token.localID ?? token.token.id;
-            output.push(`  "${token.token.id}": (${defaultAliasTransform(name)}),`);
+            output.push(`  "${token.token.id}": (${makeCSSVar(name, { wrapVar: true })}),`);
         }
     }
     output.push(');', '');
@@ -29,7 +30,7 @@ export default function build({ getTransforms, options }) {
         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(`    "${property}": (${makeCSSVar(name, { wrapVar: true })}),`);
         }
         output.push('  ),');
     }

package/dist/build.js.map

@@ -1 +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"}
+{"version":3,"file":"build.js","sourceRoot":"","sources":["../src/build.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,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,SAAS,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;IAExE,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,UAAU,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,CAAC;QAClF,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,UAAU,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,CAAC;QAC9E,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

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

package/dist/index.js

@@ -23,6 +23,7 @@
  * SOFTWARE.
  */
 import build from './build.js';
+export * from './lib.js';
 export default function pluginSass(options) {
     const filename = options?.filename ?? 'index.scss';
     return {

package/dist/index.js.map

@@ -1 +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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,YAAY,CAAC;AAG/B,cAAc,UAAU,CAAC;AAEzB,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/package.json

@@ -1,37 +1,38 @@
 {
   "name": "@terrazzo/plugin-sass",
   "description": "Generate scss/sass from your design tokens schema (requires @terrazzo/cli)",
-  "version": "0.0.0",
+  "version": "0.0.1",
+  "type": "module",
   "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",
+  "homepage": "https://terrazzoapp.com/docs/cli/integrations/sass",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/terrazzoapp/terrazzo.git",
+    "directory": "packages/plugin-sass"
+  },
+  "license": "MIT",
   "peerDependencies": {
-    "@terrazzo/cli": "^0.0.6",
-    "@terrazzo/plugin-css": "^0.0.4"
+    "@terrazzo/cli": "^0.0.10",
+    "@terrazzo/plugin-css": "^0.0.5"
   },
   "dependencies": {
-    "@types/mime": "^3.0.4",
-    "mime": "^3.0.0",
-    "svgo": "^3.2.0",
-    "@terrazzo/token-tools": "^0.0.2"
+    "@terrazzo/token-tools": "^0.0.4"
   },
   "devDependencies": {
-    "@terrazzo/cli": "^0.0.6",
-    "@terrazzo/parser": "^0.0.6",
-    "@terrazzo/plugin-css": "^0.0.4"
+    "@terrazzo/cli": "^0.0.10",
+    "@terrazzo/parser": "^0.0.10",
+    "@terrazzo/plugin-css": "^0.0.5"
   },
   "scripts": {
     "build": "pnpm run build:clean && pnpm run build:ts && pnpm run build:license",

package/src/build.ts

@@ -1,51 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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};
-  }
-}`;