theo
theo copied to clipboard
Don't merge prop names in different categories
When importing a few files, any prop names that repeat will be overwritten.
The Issue
Given a set of files:
# margins.yml
props:
- name: auto
value: auto
- name: px
value: 1px
- name: 1
value: 0.25rem
global:
category: margins
type: length
# paddings.yml
props:
- name: px
value: 1px
- name: 1
value: 0.25rem
global:
category: paddings
type: length
# dimensions.yml
imports:
- "./margins.yml"
- "./paddings.yml"
Expected Output
When converting dimensions.yml, using a slightly modified map.scss format that groups by cateogry instead of file-name, I expect to see:
// spacings.scss
$margins: (
'auto': (auto),
'px': (1px),
'1': (0.25rem)
);
$paddings: (
'px': (1px),
'1': (0.25rem)
);
Actual Output
Instead I'm seeing:
// spacings.scss
$margins: (
'auto': (auto)
);
$paddings: (
'px': (1px),
'1': (0.25rem)
);
In other words, the repeated prop names ("px" and "1") are omitted from the $margins map.
Rationale
Since I'm using SCSS maps, I don't need to prefix the name of the token with the category, however this means that between categories I am reusing the same name.
I can confirm this is happening. Will take a look