@atomic-layout/core - npm Package Compare versions

Comparing version 0.11.4 to 0.11.5

lib/index.js

@@ -101,15 +101,34 @@ 'use strict';
 
-const keywords = ['/', 'auto'];
-// Determines if the given string is a valid area name.
-// Takes into account on the row/column dimensions and
-// keywords in the "grid-template" definition.
+const keywords = [
+    // Dot symbol (and its sequence) is a valid placeholder,
+    // but not a valid CSS Grid area name.
+    /\.+/,
+    // Numbers may be present in `grid-template` definition
+    // and describe dimensions of rows/columns.
+    /^[0-9]/,
+    // Slash is a special symbol used to declare dimensions
+    // for columns.
+    '/',
+    // "auto" is a reserved keyword to describe an automatic
+    // dimension value when sizing rows/columns.
+    'auto',
+];
+/**
+ * Determines if a given string is a valid CSS Grid area name.
+ * Takes into account row/column dimensions and reserved
+ * keywords used in the `grid-template` definition.
+ */
 function isAreaName(areaName) {
-    const startsWithNumber = /^[0-9]/.test(areaName);
-    const isKeyword = keywords.includes(areaName);
-    return !startsWithNumber && !isKeyword;
+    return keywords.every((keyword) => {
+        return keyword instanceof RegExp
+            ? !keyword.test(areaName)
+            : areaName !== keyword;
+    });
 }
 
-// Joins a given template string fragments into a valid template string.
-// Takes into account proper single quote wrapping around the areas
-// and no single quotes around the dimensions (row/columns).
+/**
+ * Joins a given template string fragments into a valid template string.
+ * Appends any row/column dimensions after the enclosing single quote
+ * character to have a valid `grid-template` syntax.
+ */
 const joinTemplateFragments = (fragments) => {
@@ -119,3 +138,3 @@ const areas = [];
     fragments.forEach((areaName) => {
-        if (isAreaName(areaName)) {
+        if (isAreaName(areaName) || /\.+/.test(areaName)) {
             areas.push(areaName);
@@ -127,9 +146,14 @@ }
     });
+    // Wraps areas string in single quote per CSS spec
     const joinedAreas = areas.length > 0 ? `'${areas.join(' ')}'` : '';
     const joinedSuffixes = suffixes.join(' ');
+    // Ensures row/column dimensions follow areas list after its been
+    // wrapped in single quotes.
     return [joinedAreas, joinedSuffixes].filter(Boolean).join(' ');
 };
-// Prepares given "grid-template-areas" string to be digestible.
-// Trims whitespace, deduplicates single quotes and wraps
-// each line in single quotes.
+/**
+ * Sanitizes a given `grid-template-areas` string.
+ * Trims whitespaces, deduplicates quotes and wraps each line
+ * in single quotes to be CSS-compliant.
+ */
 const sanitizeTemplateArea = compose(joinTemplateFragments, (area) => area.split(' '), (area) => area.replace(/'+/gm, ''), (area) => area.trim());
@@ -622,4 +646,7 @@
 
-// Returns an array of unique normalized grid areas
-// from the given template string.
+/**
+ * Returns an array of unique normalized grid area names
+ * from the given template string. Any member of the returned list
+ * is later evolved into a React component.
+ */
 const sanitizeTemplateString = compose((list) => list.sort(), 
@@ -626,0 +653,0 @@ // Deduplicate area strings

lib/utils/strings/isAreaName/isAreaName.d.ts

@@ -0,1 +1,7 @@
+export declare const keywords: (string | RegExp)[];
+/**
+ * Determines if a given string is a valid CSS Grid area name.
+ * Takes into account row/column dimensions and reserved
+ * keywords used in the `grid-template` definition.
+ */
 export default function isAreaName(areaName: string): boolean;

lib/utils/strings/sanitizeTemplateArea/sanitizeTemplateArea.d.ts

 declare type SanitizeTemplateArea = (str: string) => string;
+/**
+ * Sanitizes a given `grid-template-areas` string.
+ * Trims whitespaces, deduplicates quotes and wraps each line
+ * in single quotes to be CSS-compliant.
+ */
 declare const sanitizeTemplateArea: SanitizeTemplateArea;
 export default sanitizeTemplateArea;

lib/utils/strings/sanitizeTemplateString/sanitizeTemplateString.d.ts

 declare type SanitizeTemplateString = (str: string) => string[];
+/**
+ * Returns an array of unique normalized grid area names
+ * from the given template string. Any member of the returned list
+ * is later evolved into a React component.
+ */
 declare const sanitizeTemplateString: SanitizeTemplateString;
 export default sanitizeTemplateString;

package.json

 {
   "name": "@atomic-layout/core",
   "description": "Atomic Layout core module",
-  "version": "0.11.4",
+  "version": "0.11.5",
   "license": "MIT",
@@ -56,3 +56,3 @@ "esnext": "src/index.ts",
   ],
-  "gitHead": "31317d8aef8cb14e2dd1d646dd4d18e856188a6b"
+  "gitHead": "d10ba4587cf70cfacba05d8d71055520ff904d39"
 }

src/utils/strings/isAreaName/isAreaName.spec.ts

@@ -19,5 +19,22 @@ import isAreaName from './isAreaName'
     it('should return false', () => {
+      expect(isAreaName('/')).toBe(false)
       expect(isAreaName('auto')).toBe(false)
     })
   })
+
+  describe('given a dot placeholder', () => {
+    describe('given a single dot character', () => {
+      it('should return false', () => {
+        expect(isAreaName('.')).toBe(false)
+      })
+    })
+
+    describe('given a sequence of dots', () => {
+      it('should return false', () => {
+        expect(isAreaName('..')).toBe(false)
+        expect(isAreaName('....')).toBe(false)
+        expect(isAreaName('.......')).toBe(false)
+      })
+    })
+  })
 })

src/utils/strings/isAreaName/isAreaName.ts

@@ -1,10 +0,27 @@
-const keywords = ['/', 'auto']
+export const keywords = [
+  // Dot symbol (and its sequence) is a valid placeholder,
+  // but not a valid CSS Grid area name.
+  /\.+/,
+  // Numbers may be present in `grid-template` definition
+  // and describe dimensions of rows/columns.
+  /^[0-9]/,
+  // Slash is a special symbol used to declare dimensions
+  // for columns.
+  '/',
+  // "auto" is a reserved keyword to describe an automatic
+  // dimension value when sizing rows/columns.
+  'auto',
+]
 
-// Determines if the given string is a valid area name.
-// Takes into account on the row/column dimensions and
-// keywords in the "grid-template" definition.
+/**
+ * Determines if a given string is a valid CSS Grid area name.
+ * Takes into account row/column dimensions and reserved
+ * keywords used in the `grid-template` definition.
+ */
 export default function isAreaName(areaName: string): boolean {
-  const startsWithNumber = /^[0-9]/.test(areaName)
-  const isKeyword = keywords.includes(areaName)
-  return !startsWithNumber && !isKeyword
+  return keywords.every((keyword) => {
+    return keyword instanceof RegExp
+      ? !keyword.test(areaName)
+      : areaName !== keyword
+  })
 }

src/utils/strings/sanitizeTemplateArea/sanitizeTemplateArea.spec.ts

@@ -35,2 +35,10 @@ import sanitizeTemplateArea from './sanitizeTemplateArea'
   })
+
+  describe('given a template string with placeholder dots', () => {
+    it('should return a parsed template string including dots', () => {
+      expect(sanitizeTemplateArea('first . second ... third')).toEqual(
+        `'first . second ... third'`,
+      )
+    })
+  })
 })

src/utils/strings/sanitizeTemplateArea/sanitizeTemplateArea.ts

@@ -6,5 +6,7 @@ import compose from '../../functions/compose'
 
-// Joins a given template string fragments into a valid template string.
-// Takes into account proper single quote wrapping around the areas
-// and no single quotes around the dimensions (row/columns).
+/**
+ * Joins a given template string fragments into a valid template string.
+ * Appends any row/column dimensions after the enclosing single quote
+ * character to have a valid `grid-template` syntax.
+ */
 const joinTemplateFragments = (fragments: string[]): string => {
@@ -15,3 +17,3 @@ const areas: string[] = []
   fragments.forEach((areaName) => {
-    if (isAreaName(areaName)) {
+    if (isAreaName(areaName) || /\.+/.test(areaName)) {
       areas.push(areaName)
@@ -23,11 +25,16 @@ } else {
 
+  // Wraps areas string in single quote per CSS spec
   const joinedAreas = areas.length > 0 ? `'${areas.join(' ')}'` : ''
   const joinedSuffixes = suffixes.join(' ')
 
+  // Ensures row/column dimensions follow areas list after its been
+  // wrapped in single quotes.
   return [joinedAreas, joinedSuffixes].filter(Boolean).join(' ')
 }
 
-// Prepares given "grid-template-areas" string to be digestible.
-// Trims whitespace, deduplicates single quotes and wraps
-// each line in single quotes.
+/**
+ * Sanitizes a given `grid-template-areas` string.
+ * Trims whitespaces, deduplicates quotes and wraps each line
+ * in single quotes to be CSS-compliant.
+ */
 const sanitizeTemplateArea: SanitizeTemplateArea = compose(
@@ -34,0 +41,0 @@ joinTemplateFragments,

src/utils/strings/sanitizeTemplateString/sanitizeTemplateString.spec.ts

@@ -45,2 +45,3 @@ import sanitizeTemplateString from './sanitizeTemplateString'
   })
+
   describe('given a template string written in "grid-template" syntax', () => {
@@ -71,2 +72,24 @@ let areas: string[]
   })
+
+  describe('given a template string with placeholder dots', () => {
+    let areas: string[]
+
+    beforeAll(() => {
+      areas = sanitizeTemplateString(`
+        first . second
+        third fourth .
+      `)
+    })
+
+    it('should contain list of areas names', () => {
+      expect(areas).toContain('first')
+      expect(areas).toContain('second')
+      expect(areas).toContain('third')
+      expect(areas).toContain('fourth')
+    })
+
+    it('should not any contain placeholder characters', () => {
+      expect(areas).not.toContain('.')
+    })
+  })
 })

src/utils/strings/sanitizeTemplateString/sanitizeTemplateString.ts

@@ -6,4 +6,7 @@ import compose from '../../functions/compose'
 
-// Returns an array of unique normalized grid areas
-// from the given template string.
+/**
+ * Returns an array of unique normalized grid area names
+ * from the given template string. Any member of the returned list
+ * is later evolved into a React component.
+ */
 const sanitizeTemplateString: SanitizeTemplateString = compose(
@@ -10,0 +13,0 @@ (list: string[]): string[] => list.sort(),

No alert changes

Improved metrics

Total package byte prevSize

166452

increased by2.45%

Number of package files

175

increased by2.34%

Lines of code

4998

increased by2.44%

No dependency changes