projectwallace / projectwallace/css-analyzer

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.

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

Description

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.

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.

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.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.