backstage: Add Sass token target

apps/dictionary/src/build.js

@@ -1,6 +1,7 @@
 import {StyleDictionaryPackageWithTransforms} from './config/styledictionary.js';
 import {getBrandSourcesAndIncludes, getBrandNames} from './utils.js';
 import {cssConfigForBrand} from './config/platforms/css.js';
+import {sassConfigForBrand} from './config/platforms/sass.js';
 import {toolingConfigForBrand} from './config/platforms/tooling.js';
 
 const brands = getBrandNames();
@@ -32,6 +33,7 @@ export async function buildForBrand(brand) {
 		},
 		platforms: {
 			css: cssConfigForBrand(brand),
+			sass: sassConfigForBrand(brand),
 			tooling: toolingConfigForBrand(brand),
 		},
 	};

apps/dictionary/src/config/platforms/sass.js

@@ -0,0 +1,26 @@
+import path from 'node:path';
+import {sharedTransformers} from '../transformers.js';
+
+function sassConfigForBrand(brand) {
+	const parentBrand = brand.split('/').slice(-1);
+	return {
+		transformGroup: 'scss',
+		transforms: [
+			...sharedTransformers,
+			'value/figma-shadow-shorthand',
+			'value/transformSVG',
+		],
+		buildPath: path.join(process.cwd(), '../../components/'),
+		files: [
+			{
+				destination: `o-private-foundation/src/scss/tokens/${parentBrand}.scss`,
+				format: 'scss/map-flat',
+				options: {
+					outputReferences: false,
+				},
+			},
+		],
+	};
+}
+
+export {sassConfigForBrand};