Add `isGradientFunction(name: string): boolean` to `css-analyzer/values`

Open Beginner friendly
#605 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
84/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Quiet
Tech stack
css, typescript
Domain
tooling

Research direction

Start at the css-analyzer/values entry point and inspect the existing classification helpers and exports. Add the proposed isGradientFunction API for the six listed gradient names, then verify those names return true while rgb and url return false.

Written by the indexing model from the issue text.

Description

✨ enhancement
Context

css-analyzer/values already exports classification helpers like colorFunctions, colorKeywords, and namedColors. There is no equivalent helper for identifying CSS gradient functions.
Consumers currently write inline regex checks like:

/^(repeating-)?(linear|conic|radial)-gradient$/.test(name)

This duplicates knowledge of which function names are gradients and will need updating if new gradient types are standardized (e.g. conic-gradient was added relatively recently).
Proposed API

/** Returns true if `name` is a CSS gradient function name. */
function isGradientFunction(name: string): boolean
Example
import { isGradientFunction } from '@projectwallace/css-analyzer/values'

isGradientFunction('linear-gradient')          // true
isGradientFunction('repeating-radial-gradient') // true
isGradientFunction('conic-gradient')           // true
isGradientFunction('rgb')                      // false
isGradientFunction('url')                      // false
Gradient functions to cover
  • linear-gradient
  • radial-gradient
  • conic-gradient
  • repeating-linear-gradient
  • repeating-radial-gradient
  • repeating-conic-gradient
Motivation

Centralises the list of gradient function names alongside other value-classification constants in this package. Prevents consumers from maintaining inline regexes that may diverge from the actual CSS specification over time.

Dominant language
TypeScript
Stars
366
Forks
15
Avg merge
3h 23m
Merged PRs (30d)
3

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from projectwallace/css-analyzer

All issues in projectwallace/css-analyzer

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.