[WNMGDS-2935] Make Sass token file changes backwards compatible (#3230)

* Make our Figma changes backwards compatible with respect to the sass var files

* In the unit tests, acknowledge but don't snapshot the duplicated files

packages/design-system-tokens/src/css/translate.test.ts

@@ -39,7 +39,19 @@ describe('tokenFilesToCssFiles', () => {
 
 describe('tokenFilesToScssFiles', () => {
   it('matches snapshot', () => {
-    expect(tokenFilesToScssFiles(tokensByFile)).toMatchSnapshot();
+    const files = tokenFilesToScssFiles(tokensByFile);
+
+    // Acknowledge but don't snapshot the duplicated files
+    expect(files['core-component-tokens.scss']).toBeTruthy();
+    expect(files['core-tokens.scss']).toBeTruthy();
+    expect(files['cmsgov-component-tokens.scss']).toBeTruthy();
+    expect(files['cmsgov-tokens.scss']).toBeTruthy();
+    delete files['core-component-tokens.scss'];
+    delete files['core-tokens.scss'];
+    delete files['cmsgov-component-tokens.scss'];
+    delete files['cmsgov-tokens.scss'];
+
+    expect(files).toMatchSnapshot();
   });
 });
 

packages/design-system-tokens/src/css/translate.ts

@@ -226,6 +226,14 @@ export function tokenFilesToScssFiles(tokensByFile: FlattenedTokensByFile): Outp
       const scssVars = tokensToSassVars(themeTokens, systemTokens, themeName === 'core');
       const scssFileName = `${themeName}-theme.scss`;
       obj[scssFileName] = scssVars;
+
+      // TODO: We're duplicating these files for backwards compatibility so teams currently
+      // using the Sass variables don't have to change anything, but at some point we'll
+      // want to force a change. This may coincide with the removal of Sass entirely.
+      const deprecatedVars = `// Use of this file is deprecated. Please use "${scssFileName}" instead.\n${scssVars}`;
+      obj[`${themeName}-tokens.scss`] = deprecatedVars;
+      obj[`${themeName}-component-tokens.scss`] = deprecatedVars;
+
       return obj;
     }, {} as Record<string, string>);
 }