CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-emotion--unitless

An object of CSS properties that don't accept values with units

92

0.92x

Quality

Pending

Does it follow best practices?

Impact

92%

0.92x

Average score across 7 eval scenarios

Overview
Eval results
Files

rubric.jsonevals/scenario-4/

{
  "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

tile.json