Skip to content

fix/3711 #3742

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
akshay-gupta7 wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

fix/3711 #3742

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 82 additions & 0 deletions ...kens-studio-for-figma/src/plugin/asyncMessageHandlers/__tests__/applySiblingStyle.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import { applySiblingStyleId } from '../applySiblingStyle';
import * as getSiblingStyleId from '../getSiblingStyleId';

describe('applySiblingStyleId', () => {
const getNewStyleIdSpy = jest.spyOn(getSiblingStyleId, 'getNewStyleId');

beforeEach(() => {
getNewStyleIdSpy.mockReset();
});

it('should swap styles and recurse into children for a FRAME', async () => {
const mockChild = {
type: 'RECTANGLE',
fillStyleId: 'style-1',
};
const mockNode = {
type: 'FRAME',
children: [mockChild],
fillStyleId: 'style-2',
} as any;

getNewStyleIdSpy.mockResolvedValue('new-style');

await applySiblingStyleId(mockNode, {}, {}, []);

expect(getNewStyleIdSpy).toHaveBeenCalledWith('style-2', {}, {}, []);
expect(getNewStyleIdSpy).toHaveBeenCalledWith('style-1', {}, {}, []);
expect(mockNode.fillStyleId).toBe('new-style');
expect(mockChild.fillStyleId).toBe('new-style');
});

it('should skip INSTANCE children but process the COMPONENT itself', async () => {
const mockInstanceChild = {
type: 'INSTANCE',
fillStyleId: 'style-instance',
};
const mockRectChild = {
type: 'RECTANGLE',
fillStyleId: 'style-rect',
};
const mockNode = {
type: 'COMPONENT',
children: [mockInstanceChild, mockRectChild],
fillStyleId: 'style-comp',
} as any;

getNewStyleIdSpy.mockResolvedValue('new-style');

await applySiblingStyleId(mockNode, {}, {}, []);

// Should be called for COMPONENT and RECTANGLE, but NOT INSTANCE child
expect(getNewStyleIdSpy).toHaveBeenCalledWith('style-comp', {}, {}, []);
expect(getNewStyleIdSpy).toHaveBeenCalledWith('style-rect', {}, {}, []);
expect(getNewStyleIdSpy).not.toHaveBeenCalledWith('style-instance', {}, {}, []);

expect(mockNode.fillStyleId).toBe('new-style');
expect(mockRectChild.fillStyleId).toBe('new-style');
expect(mockInstanceChild.fillStyleId).toBe('style-instance'); // Should remain unchanged
});

it('should skip INSTANCE children but process the COMPONENT_SET itself', async () => {
const mockInstanceChild = {
type: 'INSTANCE',
fillStyleId: 'style-instance',
};
const mockNode = {
type: 'COMPONENT_SET',
children: [mockInstanceChild],
fillStyleId: 'style-comp-set',
} as any;

getNewStyleIdSpy.mockResolvedValue('new-style');

await applySiblingStyleId(mockNode, {}, {}, []);

expect(getNewStyleIdSpy).toHaveBeenCalledWith('style-comp-set', {}, {}, []);
expect(getNewStyleIdSpy).not.toHaveBeenCalledWith('style-instance', {}, {}, []);

expect(mockNode.fillStyleId).toBe('new-style');
expect(mockInstanceChild.fillStyleId).toBe('style-instance');
});
});
7 changes: 6 additions & 1 deletion packages/tokens-studio-for-figma/src/plugin/asyncMessageHandlers/applySiblingStyle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,12 @@ export async function applySiblingStyleId(node: BaseNode, styleIds: StyleIdMap,
node.effectStyleId = newEffectStyleId;
}
if (['COMPONENT', 'COMPONENT_SET', 'SECTION', 'INSTANCE', 'FRAME', 'BOOLEAN_OPERATION'].includes(node.type) && 'children' in node) {
await Promise.all(node.children.map((child) => applySiblingStyleId(child, styleIds, styleMap, activeThemes)));
await Promise.all(node.children.map((child) => {
if ((node.type === 'COMPONENT' || node.type === 'COMPONENT_SET') && child.type === 'INSTANCE') {
return Promise.resolve();
}
return applySiblingStyleId(child, styleIds, styleMap, activeThemes);
}));
}
}
break;
Expand Down
94 changes: 94 additions & 0 deletions packages/tokens-studio-for-figma/src/utils/__tests__/findAll.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import { ValidNodeTypes } from '@/constants/ValidNodeTypes';

Check failure on line 1 in packages/tokens-studio-for-figma/src/utils/__tests__/findAll.test.ts

View workflow job for this annotation

GitHub Actions / ESLint 

'ValidNodeTypes' is defined but never used. Allowed unused vars must match /^_/u
import { findAll } from '../findAll';

describe('findAll', () => {
it('should find all nodes including self', () => {
const mockNodes = [
{
id: '1',
type: 'FRAME',
children: [
{ id: '2', type: 'RECTANGLE' },
],
findAllWithCriteria: jest.fn().mockReturnValue([{ id: '2', type: 'RECTANGLE' }]),
},
] as any;

const result = findAll(mockNodes, true);
expect(result).toHaveLength(2);
expect(result.map(n => n.id)).toContain('1');
expect(result.map(n => n.id)).toContain('2');
});

it('should exclude instances when recursing from a COMPONENT', () => {
const mockNodes = [
{
id: 'component-1',
type: 'COMPONENT',
children: [
{ id: 'rect-1', type: 'RECTANGLE' },
{ id: 'instance-1', type: 'INSTANCE' },
],
findAllWithCriteria: jest.fn().mockReturnValue([
{ id: 'rect-1', type: 'RECTANGLE' },
{ id: 'instance-1', type: 'INSTANCE' },
]),
},
] as any;

const result = findAll(mockNodes, true);
// Should include COMPONENT and RECTANGLE, but NOT INSTANCE
expect(result).toHaveLength(2);
expect(result.map(n => n.id)).toContain('component-1');
expect(result.map(n => n.id)).toContain('rect-1');
expect(result.map(n => n.id)).not.toContain('instance-1');
});

it('should exclude instances when recursing from a COMPONENT_SET', () => {
const mockNodes = [
{
id: 'component-set-1',
type: 'COMPONENT_SET',
children: [
{ id: 'rect-1', type: 'RECTANGLE' },
{ id: 'instance-1', type: 'INSTANCE' },
],
findAllWithCriteria: jest.fn().mockReturnValue([
{ id: 'rect-1', type: 'RECTANGLE' },
{ id: 'instance-1', type: 'INSTANCE' },
]),
},
] as any;

const result = findAll(mockNodes, true);
// Should include COMPONENT_SET and RECTANGLE, but NOT INSTANCE
expect(result).toHaveLength(2);
expect(result.map(n => n.id)).toContain('component-set-1');
expect(result.map(n => n.id)).toContain('rect-1');
expect(result.map(n => n.id)).not.toContain('instance-1');
});

it('should NOT exclude instances when recursing from a FRAME', () => {
const mockNodes = [
{
id: 'frame-1',
type: 'FRAME',
children: [
{ id: 'rect-1', type: 'RECTANGLE' },
{ id: 'instance-1', type: 'INSTANCE' },
],
findAllWithCriteria: jest.fn().mockReturnValue([
{ id: 'rect-1', type: 'RECTANGLE' },
{ id: 'instance-1', type: 'INSTANCE' },
]),
},
] as any;

const result = findAll(mockNodes, true);
// Should include FRAME, RECTANGLE, AND INSTANCE
expect(result).toHaveLength(3);
expect(result.map(n => n.id)).toContain('frame-1');
expect(result.map(n => n.id)).toContain('rect-1');
expect(result.map(n => n.id)).toContain('instance-1');
});
});
16 changes: 10 additions & 6 deletions packages/tokens-studio-for-figma/src/utils/findAll.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,16 @@ export function findAll(nodes: readonly BaseNode[], includeSelf = false, nodesWi
};
nodes.forEach((node) => {
if ('children' in node) {
allNodes = allNodes.concat(
node.findAllWithCriteria({
types: ValidNodeTypes,
...pluginDataOptions,
}),
);
const childNodes = node.findAllWithCriteria({
types: ValidNodeTypes,
...pluginDataOptions,
});

const filteredChildren = node.type === 'COMPONENT' || node.type === 'COMPONENT_SET'
? childNodes.filter((child) => child.type !== 'INSTANCE')
: childNodes;

allNodes = allNodes.concat(filteredChildren);
}
});
return allNodes;
Expand Down
Loading