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 well the engineer uses the @emotion/unitless package to differentiate between CSS properties that accept unitless numeric values and those that require units. The focus is on correctly importing and utilizing the unitless lookup object to handle various CSS property categories.",
"type": "weighted_checklist",
"checklist": [
{
"name": "Import unitless object",
"description": "Correctly imports the default export from '@emotion/unitless' package (e.g., `import unitless from '@emotion/unitless'` or `const unitless = require('@emotion/unitless')`)",
"max_score": 10
},
{
"name": "Unitless property lookup",
"description": "Uses the unitless object to check if a CSS property is unitless by accessing it as a property (e.g., `unitless[propertyName]` or `unitless.propertyName`) and checking if the value equals 1 or is defined",
"max_score": 20
},
{
"name": "Flexbox properties handling",
"description": "Correctly identifies and handles flexbox properties (flex, flexGrow, flexShrink) as unitless based on the unitless object, returning numeric values without adding units",
"max_score": 10
},
{
"name": "Grid properties handling",
"description": "Correctly identifies and handles grid layout properties (gridRow, gridColumn, gridRowSpan) as unitless based on the unitless object, returning numeric values without adding units",
"max_score": 10
},
{
"name": "Typography properties handling",
"description": "Correctly identifies fontWeight and lineHeight as unitless (no units added) while adding 'px' units to fontSize, based on lookups in the unitless object",
"max_score": 10
},
{
"name": "Opacity properties handling",
"description": "Correctly identifies opacity properties (opacity, fillOpacity, strokeOpacity) as unitless based on the unitless object, returning numeric values without adding units",
"max_score": 10
},
{
"name": "Layout properties unit addition",
"description": "Correctly adds 'px' units to layout properties (width, height, padding, margin) that are NOT in the unitless object or where unitless[property] !== 1",
"max_score": 10
},
{
"name": "Z-index and order handling",
"description": "Correctly identifies zIndex and order as unitless based on the unitless object, returning numeric values without adding units",
"max_score": 10
},
{
"name": "Animation properties handling",
"description": "Correctly identifies animationIterationCount as unitless based on the unitless object, returning the numeric value without adding units",
"max_score": 5
},
{
"name": "Aspect ratio handling",
"description": "Correctly identifies aspectRatio as unitless based on the unitless object, returning the numeric value without adding units",
"max_score": 5
}
]
}Install with Tessl CLI
npx tessl i tessl/npm-emotion--unitless