@vanilla-extract/sprinkles - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

CHANGELOG.md

 # @vanilla-extract/sprinkles
 
+## 0.1.2
+
+### Patch Changes
+
+- [#77](https://github.com/seek-oss/vanilla-extract/pull/77) [`63c01ad`](https://github.com/seek-oss/vanilla-extract/commit/63c01ada07dd268c8d3cbe62dcf1baa8842216f2) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Improve runtime errors
+
+  Sprinkles will now validate your `atoms` calls at runtime for a better developer experience. The validation code should be stripped from production bundles via a `process.env.NODE_ENV` check.
+
+  Example Error
+
+  ```bash
+  SprinklesError: "paddingTop" has no value "xlarge". Possible values are "small", "medium", "large"
+  ```
+
 ## 0.1.1
@@ -4,0 +18,0 @@

createAtomsFn/dist/vanilla-extract-sprinkles-createAtomsFn.cjs.dev.js

@@ -40,27 +40,114 @@ 'use strict';
 
-      if (atomicProperty.mappings) {
-        // Skip shorthands
-        continue;
-      }
+      try {
+        if (atomicProperty.mappings) {
+          // Skip shorthands
+          continue;
+        }
 
-      if (typeof propValue === 'string' || typeof propValue === 'number') {
-        classNames.push(atomicProperty.values[propValue].defaultClass);
-      } else if (Array.isArray(propValue)) {
-        for (const responsiveIndex in propValue) {
-          const responsiveValue = propValue[responsiveIndex];
+        if (typeof propValue === 'string' || typeof propValue === 'number') {
+          if (process.env.NODE_ENV !== 'production') {
+            if (!atomicProperty.values[propValue].defaultClass) {
+              throw new Error();
+            }
+          }
 
-          if (typeof responsiveValue === 'string' || typeof responsiveValue === 'number') {
-            const conditionName = atomicProperty.responsiveArray[responsiveIndex];
-            classNames.push(atomicProperty.values[responsiveValue].conditions[conditionName]);
+          classNames.push(atomicProperty.values[propValue].defaultClass);
+        } else if (Array.isArray(propValue)) {
+          for (const responsiveIndex in propValue) {
+            const responsiveValue = propValue[responsiveIndex];
+
+            if (responsiveValue != null) {
+              const conditionName = atomicProperty.responsiveArray[responsiveIndex];
+
+              if (process.env.NODE_ENV !== 'production') {
+                if (!atomicProperty.values[responsiveValue].conditions[conditionName]) {
+                  throw new Error();
+                }
+              }
+
+              classNames.push(atomicProperty.values[responsiveValue].conditions[conditionName]);
+            }
           }
-        }
-      } else {
-        for (const conditionName in propValue) {
-          // Conditional style
-          const value = propValue[conditionName];
+        } else {
+          for (const conditionName in propValue) {
+            // Conditional style
+            const value = propValue[conditionName];
 
-          if (typeof value === 'string' || typeof value === 'number') {
+            if (process.env.NODE_ENV !== 'production') {
+              if (!atomicProperty.values[value].conditions[conditionName]) {
+                throw new Error();
+              }
+            }
+
             classNames.push(atomicProperty.values[value].conditions[conditionName]);
           }
         }
+      } catch (e) {
+        if (process.env.NODE_ENV !== 'production') {
+          class SprinklesError extends Error {
+            constructor(message) {
+              super(message);
+              this.name = 'SprinklesError';
+            }
+
+          }
+
+          const format = v => typeof v === 'string' ? `"${v}"` : v;
+
+          const invalidPropValue = (prop, value, possibleValues) => {
+            throw new SprinklesError(`"${prop}" has no value ${format(value)}. Possible values are ${Object.keys(possibleValues).map(format).join(', ')}`);
+          };
+
+          if (!atomicProperty) {
+            throw new SprinklesError(`"${prop}" is not a valid atom property`);
+          }
+
+          if (typeof propValue === 'string' || typeof propValue === 'number') {
+            if (!(propValue in atomicProperty.values)) {
+              invalidPropValue(prop, propValue, atomicProperty.values);
+            }
+
+            if (!atomicProperty.values[propValue].defaultClass) {
+              throw new SprinklesError(`"${prop}" has no default condition. You must specify which conditions to target explicitly. Possible options are ${Object.keys(atomicProperty.values[propValue].conditions).map(format).join(', ')}`);
+            }
+          }
+
+          if (typeof propValue === 'object') {
+            if (!('conditions' in atomicProperty.values[Object.keys(atomicProperty.values)[0]])) {
+              throw new SprinklesError(`"${prop}" is not a conditional property`);
+            }
+
+            if (Array.isArray(propValue)) {
+              if (!('responsiveArray' in atomicProperty)) {
+                throw new SprinklesError(`"${prop}" does not support responsive arrays`);
+              }
+
+              const breakpointCount = atomicProperty.responsiveArray.length;
+
+              if (breakpointCount < propValue.length) {
+                throw new SprinklesError(`"${prop}" only supports up to ${breakpointCount} breakpoints. You passed ${propValue.length}`);
+              }
+
+              for (const responsiveValue of propValue) {
+                if (!atomicProperty.values[responsiveValue]) {
+                  invalidPropValue(prop, responsiveValue, atomicProperty.values);
+                }
+              }
+            } else {
+              for (const conditionName in propValue) {
+                const value = propValue[conditionName];
+
+                if (!atomicProperty.values[value]) {
+                  invalidPropValue(prop, value, atomicProperty.values);
+                }
+
+                if (!atomicProperty.values[value].conditions[conditionName]) {
+                  throw new SprinklesError(`"${prop}" has no condition named ${format(conditionName)}. Possible values are ${Object.keys(atomicProperty.values[value].conditions).map(format).join(', ')}`);
+                }
+              }
+            }
+          }
+        }
+
+        throw e;
       }
@@ -67,0 +154,0 @@ }

createAtomsFn/dist/vanilla-extract-sprinkles-createAtomsFn.cjs.prod.js

@@ -40,27 +40,37 @@ 'use strict';
 
-      if (atomicProperty.mappings) {
-        // Skip shorthands
-        continue;
-      }
+      try {
+        if (atomicProperty.mappings) {
+          // Skip shorthands
+          continue;
+        }
 
-      if (typeof propValue === 'string' || typeof propValue === 'number') {
-        classNames.push(atomicProperty.values[propValue].defaultClass);
-      } else if (Array.isArray(propValue)) {
-        for (const responsiveIndex in propValue) {
-          const responsiveValue = propValue[responsiveIndex];
+        if (typeof propValue === 'string' || typeof propValue === 'number') {
+          if (        "production" !== 'production') ;
 
-          if (typeof responsiveValue === 'string' || typeof responsiveValue === 'number') {
-            const conditionName = atomicProperty.responsiveArray[responsiveIndex];
-            classNames.push(atomicProperty.values[responsiveValue].conditions[conditionName]);
+          classNames.push(atomicProperty.values[propValue].defaultClass);
+        } else if (Array.isArray(propValue)) {
+          for (const responsiveIndex in propValue) {
+            const responsiveValue = propValue[responsiveIndex];
+
+            if (responsiveValue != null) {
+              const conditionName = atomicProperty.responsiveArray[responsiveIndex];
+
+              if (        "production" !== 'production') ;
+
+              classNames.push(atomicProperty.values[responsiveValue].conditions[conditionName]);
+            }
           }
-        }
-      } else {
-        for (const conditionName in propValue) {
-          // Conditional style
-          const value = propValue[conditionName];
+        } else {
+          for (const conditionName in propValue) {
+            // Conditional style
+            const value = propValue[conditionName];
 
-          if (typeof value === 'string' || typeof value === 'number') {
+            if (        "production" !== 'production') ;
+
             classNames.push(atomicProperty.values[value].conditions[conditionName]);
           }
         }
+      } catch (e) {
+
+        throw e;
       }
@@ -67,0 +77,0 @@ }

createAtomsFn/dist/vanilla-extract-sprinkles-createAtomsFn.esm.js

@@ -36,27 +36,114 @@ function createAtomsFn(...args) {
 
-      if (atomicProperty.mappings) {
-        // Skip shorthands
-        continue;
-      }
+      try {
+        if (atomicProperty.mappings) {
+          // Skip shorthands
+          continue;
+        }
 
-      if (typeof propValue === 'string' || typeof propValue === 'number') {
-        classNames.push(atomicProperty.values[propValue].defaultClass);
-      } else if (Array.isArray(propValue)) {
-        for (const responsiveIndex in propValue) {
-          const responsiveValue = propValue[responsiveIndex];
+        if (typeof propValue === 'string' || typeof propValue === 'number') {
+          if (process.env.NODE_ENV !== 'production') {
+            if (!atomicProperty.values[propValue].defaultClass) {
+              throw new Error();
+            }
+          }
 
-          if (typeof responsiveValue === 'string' || typeof responsiveValue === 'number') {
-            const conditionName = atomicProperty.responsiveArray[responsiveIndex];
-            classNames.push(atomicProperty.values[responsiveValue].conditions[conditionName]);
+          classNames.push(atomicProperty.values[propValue].defaultClass);
+        } else if (Array.isArray(propValue)) {
+          for (const responsiveIndex in propValue) {
+            const responsiveValue = propValue[responsiveIndex];
+
+            if (responsiveValue != null) {
+              const conditionName = atomicProperty.responsiveArray[responsiveIndex];
+
+              if (process.env.NODE_ENV !== 'production') {
+                if (!atomicProperty.values[responsiveValue].conditions[conditionName]) {
+                  throw new Error();
+                }
+              }
+
+              classNames.push(atomicProperty.values[responsiveValue].conditions[conditionName]);
+            }
           }
-        }
-      } else {
-        for (const conditionName in propValue) {
-          // Conditional style
-          const value = propValue[conditionName];
+        } else {
+          for (const conditionName in propValue) {
+            // Conditional style
+            const value = propValue[conditionName];
 
-          if (typeof value === 'string' || typeof value === 'number') {
+            if (process.env.NODE_ENV !== 'production') {
+              if (!atomicProperty.values[value].conditions[conditionName]) {
+                throw new Error();
+              }
+            }
+
             classNames.push(atomicProperty.values[value].conditions[conditionName]);
           }
         }
+      } catch (e) {
+        if (process.env.NODE_ENV !== 'production') {
+          class SprinklesError extends Error {
+            constructor(message) {
+              super(message);
+              this.name = 'SprinklesError';
+            }
+
+          }
+
+          const format = v => typeof v === 'string' ? `"${v}"` : v;
+
+          const invalidPropValue = (prop, value, possibleValues) => {
+            throw new SprinklesError(`"${prop}" has no value ${format(value)}. Possible values are ${Object.keys(possibleValues).map(format).join(', ')}`);
+          };
+
+          if (!atomicProperty) {
+            throw new SprinklesError(`"${prop}" is not a valid atom property`);
+          }
+
+          if (typeof propValue === 'string' || typeof propValue === 'number') {
+            if (!(propValue in atomicProperty.values)) {
+              invalidPropValue(prop, propValue, atomicProperty.values);
+            }
+
+            if (!atomicProperty.values[propValue].defaultClass) {
+              throw new SprinklesError(`"${prop}" has no default condition. You must specify which conditions to target explicitly. Possible options are ${Object.keys(atomicProperty.values[propValue].conditions).map(format).join(', ')}`);
+            }
+          }
+
+          if (typeof propValue === 'object') {
+            if (!('conditions' in atomicProperty.values[Object.keys(atomicProperty.values)[0]])) {
+              throw new SprinklesError(`"${prop}" is not a conditional property`);
+            }
+
+            if (Array.isArray(propValue)) {
+              if (!('responsiveArray' in atomicProperty)) {
+                throw new SprinklesError(`"${prop}" does not support responsive arrays`);
+              }
+
+              const breakpointCount = atomicProperty.responsiveArray.length;
+
+              if (breakpointCount < propValue.length) {
+                throw new SprinklesError(`"${prop}" only supports up to ${breakpointCount} breakpoints. You passed ${propValue.length}`);
+              }
+
+              for (const responsiveValue of propValue) {
+                if (!atomicProperty.values[responsiveValue]) {
+                  invalidPropValue(prop, responsiveValue, atomicProperty.values);
+                }
+              }
+            } else {
+              for (const conditionName in propValue) {
+                const value = propValue[conditionName];
+
+                if (!atomicProperty.values[value]) {
+                  invalidPropValue(prop, value, atomicProperty.values);
+                }
+
+                if (!atomicProperty.values[value].conditions[conditionName]) {
+                  throw new SprinklesError(`"${prop}" has no condition named ${format(conditionName)}. Possible values are ${Object.keys(atomicProperty.values[value].conditions).map(format).join(', ')}`);
+                }
+              }
+            }
+          }
+        }
+
+        throw e;
       }
@@ -63,0 +150,0 @@ }

package.json

 {
   "name": "@vanilla-extract/sprinkles",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Zero-runtime atomic CSS framework for vanilla-extract",
@@ -5,0 +5,0 @@ "sideEffects": false,

README.md

@@ -93,16 +93,10 @@ # 🍨 Sprinkles
 const space = {
-  none: 0,
-  small: 4,
-  medium: 8,
-  large: 16
-};
-
-const colors = {
-  blue50: '#eff6ff',
-  blue100: '#dbeafe',
-  blue200: '#bfdbfe',
+  0: '0',
+  4: '4px',
+  8: '8px',
+  12: '12px',
   // etc.
 };
 
-const layoutStyles = createAtomicStyles({
+const responsiveStyles = createAtomicStyles({
   conditions: {
@@ -115,4 +109,6 @@ mobile: {},
   properties: {
-    display: ['none', 'block', 'flex'],
+    display: ['none', 'flex', 'block', 'inline'],
     flexDirection: ['row', 'column'],
+    justifyContent: ['stretch', 'flex-start', 'center', 'flex-end', 'space-around', 'space-between'],
+    alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
     paddingTop: space,
@@ -127,12 +123,20 @@ paddingBottom: space,
     paddingX: ['paddingLeft', 'paddingRight'],
-    paddingY: ['paddingTop', 'paddingBottom']
+    paddingY: ['paddingTop', 'paddingBottom'],
+    placeItems: ['justifyContent', 'alignItems'],
   }
 });
 
+const colors = {
+  'blue-50': '#eff6ff',
+  'blue-100': '#dbeafe',
+  'blue-200': '#bfdbfe',
+  // etc.
+};
+
 const colorStyles = createAtomicStyles({
   conditions: {
-    lightMode: { '@media': '(prefers-color-scheme: light)' },
+    lightMode: {},
     darkMode: { '@media': '(prefers-color-scheme: dark)' }
   },
-  defaultCondition: false,
+  defaultCondition: 'lightMode',
   properties: {
@@ -145,3 +149,3 @@ color: colors,
 
-export const atoms = createAtomsFn(layoutStyles, colorStyles);
+export const atoms = createAtomsFn(responsiveStyles, colorStyles);
 ```
@@ -148,0 +152,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

47924

increased by19.36%

Lines of code

772

increased by22.73%

Number of lines in readme file

490

increased by0.82%

No dependency changes