diff --git a/.changeset/orange-donkeys-chew.md b/.changeset/orange-donkeys-chew.md new file mode 100644 index 000000000..82af3fe00 --- /dev/null +++ b/.changeset/orange-donkeys-chew.md @@ -0,0 +1,5 @@ +--- +"@tokens-studio/figma-plugin": minor +--- + +Fixes issue where styles are not applied in Figma, when user exports Token Sets as Styles diff --git a/packages/tokens-studio-for-figma/src/plugin/TokenValueRetriever.ts b/packages/tokens-studio-for-figma/src/plugin/TokenValueRetriever.ts index 02fa6aedd..36d061de7 100644 --- a/packages/tokens-studio-for-figma/src/plugin/TokenValueRetriever.ts +++ b/packages/tokens-studio-for-figma/src/plugin/TokenValueRetriever.ts @@ -19,10 +19,15 @@ export class TokenValueRetriever { public createStylesWithVariableReferences; - private getAdjustedTokenName(tokenName: string): string { - const withPrefix = [this.stylePathPrefix, tokenName].filter((n) => n).join('.'); + private getAdjustedTokenName(tokenName: string): [string, string] { + const withIgnoredFirstPart = this.ignoreFirstPartForStyles && tokenName.split('.').length > 1 + ? tokenName.split('.').slice(1).join('.') + : tokenName; - return withPrefix; + const adjustedTokenName = [this.stylePathPrefix, tokenName].filter((n) => n).join('.'); + const adjustedTokenNameWithIgnoreFirstPart = [this.stylePathPrefix, withIgnoredFirstPart].filter((n) => n).join('.'); + + return [adjustedTokenName, adjustedTokenNameWithIgnoreFirstPart]; } public initiate({ @@ -53,10 +58,16 @@ export class TokenValueRetriever { this.tokens = new Map(tokens.map((token) => { const variableId = variableReferences?.get(token.name); // For styles, we need to ignore the first part of the token name as well as consider theme prefix - const adjustedTokenName = this.getAdjustedTokenName(token.name); - const styleId = styleReferences?.get(token.name); + const [adjustedTokenName, adjustedTokenNameWithIgnoreFirstPart] = this.getAdjustedTokenName(token.name); + + const styleId = styleReferences?.get(adjustedTokenName) || styleReferences?.get(adjustedTokenNameWithIgnoreFirstPart); + const finalAdjustedTokenName = styleReferences?.has(adjustedTokenName) ? adjustedTokenName : adjustedTokenNameWithIgnoreFirstPart; + return [token.name, { - ...token, variableId, styleId, adjustedTokenName, + ...token, + variableId, + styleId, + adjustedTokenName: styleId ? finalAdjustedTokenName : adjustedTokenName, }]; })); } diff --git a/packages/tokens-studio-for-figma/src/plugin/__tests__/setValuesOnNode.test.ts b/packages/tokens-studio-for-figma/src/plugin/__tests__/setValuesOnNode.test.ts index 4f757f43a..faa6d0195 100644 --- a/packages/tokens-studio-for-figma/src/plugin/__tests__/setValuesOnNode.test.ts +++ b/packages/tokens-studio-for-figma/src/plugin/__tests__/setValuesOnNode.test.ts @@ -333,8 +333,8 @@ describe('Can set values on node', () => { }, }, ); - expect(setTextValuesOnTargetSpy).toHaveBeenCalled(); - expect(textNodeMock).toEqual({ ...textNodeMock }); + expect(setTextValuesOnTargetSpy).not.toHaveBeenCalled(); + expect(textNodeMock).toEqual({ ...textNodeMock, textStyleId: '456' }); }); it('sets effectStyle if matching Style is found', async () => { @@ -453,8 +453,8 @@ describe('Can set values on node', () => { }, }, ); - expect(setEffectValuesOnTargetSpy).toHaveBeenCalled(); - expect(solidNodeMock).toEqual({ ...solidNodeMock, effectStyleId: '' }); + expect(setEffectValuesOnTargetSpy).not.toHaveBeenCalled(); + expect(solidNodeMock).toEqual({ ...solidNodeMock, effectStyleId: '123' }); }); it('sets fillStyle if matching Style', async () => {