Responsive props suffixes ignore casing (templateLg = templatelg)

[dandelionadia]

const templateMd = `
	contacts products links
	newsletter newsletter newsletter
	legal legal legal
`
const templateDesktop = `
contacts products links newsletter
legal legal legal legal
`
<Composition
      template={templateMobile}
      templateMd={templateMd}
      templatelg={templateDesktop}
 >...</Composition>

[kettanaito]

Thanks for reporting this, @dandelionadia. This doesn't seem right.

I think that the parsePropName function that breaks down a proper name into pure prop name, breakpoint, and behavior, explicitly has i set in its regular expression, which tells it to ignore the difference in casing:

atomic-layout/packages/atomic-layout-core/src/utils/strings/parsePropName/parsePropName.ts

Line 32 in 64b10a5

const breakpointExp = new RegExp(`(${joinedBreakpointNames})$`, 'gi')

Solution

1. Create a unit test for parsePropName to ensure it ignores breakpoint suffixes written in lowecase.
2. Remove the i regular expression flag.
3. It would be nice to display a developmeny-only warning for cases like this. Whenever you have templatelg Atomic Layout should recognize you have a breakpoint suffixes in a wrong casing, and warn you "did you mean templateLg?". Such warning should be produced in development only.

[kettanaito]

I've finally got to tackling this. The fix will be released in the nearest time.

Please note that if you have any responsive props with lowercase breakpoint/behavior (by mistake, I suppose), those will stop work since the next release, and you would have to rewrite them to contain capitalized breakpoint/behavior.

I also decided not to introduce any developer-focused warnings regarding this, as figuring out whether the suffix is a breakpoint or an actual part of the prop name would be extremely hard. Imagine a prop name like fantasm={true} or noxs={2}. I know those are the edge cases, but you got an idea.

[kettanaito]

The issue is fixed and published:

 - @atomic-layout/emotion@0.13.0
 - atomic-layout@0.14.0

Please update and let me know in case you experience any problems. Thanks.