parsePropName: Parses in case-sensitive manner

kettanaito · Apr 1, 2020 · a8a9ec1 · a8a9ec1
1 parent 83eac07
commit a8a9ec1
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 4 deletions.
diff --git a/packages/atomic-layout-core/src/utils/strings/parsePropName/parsePropName.spec.ts b/packages/atomic-layout-core/src/utils/strings/parsePropName/parsePropName.spec.ts
@@ -60,6 +60,42 @@ describe('parsePropName', () => {
     })
   })
 
+  it('ignores valid breakpoint written in lowercase', () => {
+    expect(parsePropName('guttermd')).toEqual({
+      originPropName: 'guttermd',
+      purePropName: 'guttermd',
+      behavior: 'up',
+      breakpoint: {
+        name: 'xs',
+        isDefault: true,
+      },
+    })
+  })
+
+  it('ignores valid behavior written in lowercase', () => {
+    expect(parsePropName('gutterdown')).toEqual({
+      originPropName: 'gutterdown',
+      purePropName: 'gutterdown',
+      behavior: 'up',
+      breakpoint: {
+        name: 'xs',
+        isDefault: true,
+      },
+    })
+  })
+
+  it('ignores valid breakpoint and behavior written in lowercase', () => {
+    expect(parsePropName('gutterlgdown')).toEqual({
+      originPropName: 'gutterlgdown',
+      purePropName: 'gutterlgdown',
+      behavior: 'up',
+      breakpoint: {
+        name: 'xs',
+        isDefault: true,
+      },
+    })
+  })
+
   it('ignores unknown suffixes', () => {
     expect(parsePropName('gutterFoo')).toEqual({
       originPropName: 'gutterFoo',

diff --git a/packages/atomic-layout-core/src/utils/strings/parsePropName/parsePropName.ts b/packages/atomic-layout-core/src/utils/strings/parsePropName/parsePropName.ts
@@ -1,6 +1,7 @@
 import { BreakpointBehavior } from '../../../const/defaultOptions'
 import Layout from '../../../Layout'
 import toLowerCaseFirst from '../toLowerCaseFirst'
+import capitalize from '../capitalize'
 
 export interface Props {
   [propName: string]: any
@@ -27,10 +28,12 @@ export interface ParsedBreakpoint {
  * lookbehind is supported everywhere.
  */
 export default function parsePropName(originPropName: string): ParsedProp {
-  const joinedBreakpointNames = Object.keys(Layout.breakpoints).join('|')
-  const joinedBehaviors = ['down', 'only'].join('|')
-  const breakpointExp = new RegExp(`(${joinedBreakpointNames})$`, 'gi')
-  const behaviorExp = new RegExp(`(${joinedBehaviors})$`, 'gi')
+  const joinedBreakpointNames = Object.keys(Layout.breakpoints)
+    .map(capitalize)
+    .join('|')
+  const joinedBehaviors = ['down', 'only'].map(capitalize).join('|')
+  const breakpointExp = new RegExp(`(${joinedBreakpointNames})$`, 'g')
+  const behaviorExp = new RegExp(`(${joinedBehaviors})$`, 'g')
 
   const behaviorMatch = originPropName.match(behaviorExp)
   const behavior = behaviorMatch ? behaviorMatch[0] : ''