An object of CSS properties that don't accept values with units
92
Quality
Pending
Does it follow best practices?
Impact
92%
0.92xAverage score across 7 eval scenarios
{
"context": "This criteria evaluates how effectively the engineer uses the @emotion/unitless package to implement a style object normalization function. The focus is exclusively on proper usage of the package's lookup functionality to determine which CSS properties should remain unitless versus which need 'px' units appended.",
"type": "weighted_checklist",
"checklist": [
{
"name": "Import @emotion/unitless",
"description": "The code imports the default export from @emotion/unitless (e.g., `import unitless from '@emotion/unitless'` or `const unitless = require('@emotion/unitless')`)",
"max_score": 15
},
{
"name": "Unitless property lookup",
"description": "Uses the unitless object to check if a property is unitless by accessing it as a property (e.g., `unitless[property]`, `unitless.flex`, or `unitless[key]`) and checking if the value equals 1 or is truthy",
"max_score": 30
},
{
"name": "Unit addition logic",
"description": "Correctly adds 'px' units only to numeric values when the property is NOT in the unitless object (i.e., when `unitless[property]` is undefined or not equal to 1)",
"max_score": 25
},
{
"name": "Zero value handling",
"description": "Treats the numeric value 0 as unitless and does not append 'px' to it, regardless of the CSS property",
"max_score": 15
},
{
"name": "Object iteration",
"description": "Iterates through all properties in the input style object (using for...in, Object.entries, Object.keys, or similar) to process each property-value pair",
"max_score": 10
},
{
"name": "Output format",
"description": "Returns a new object with the same keys as the input, where numeric values are either preserved as numbers (for unitless properties and zero) or converted to strings with 'px' appended (for properties needing units)",
"max_score": 5
}
]
}Install with Tessl CLI
npx tessl i tessl/npm-emotion--unitless