@amandaguthrie/css-index
v0.1.0-dev-20240510234403
Published
CSS properties grouped by category, function, and more
Downloads
4
Readme
@amandaguthrie/css-index
This package contains CSS property names sliced in different categories as types and arrays to avoid duplication of lists.
It utilizes @webref/css to provide the CSS property names and style declarations.
Contents
Installation
npm install @amandaguthrie/css-index
Usage
Categories
Categories are exported from @amandaguthrie/css-index/category
and are used to group CSS properties by their function.
To view all properties in a category, review the source code.
Each category is exported as an array and a type as both kebab case and camel case for convenience.
The CSS properties for camel case do not convert variables or vendor-prefixed properties. For example, -webkit-box-reflect
remains kebab-cased in the camel case type and array because it is vendor-prefixed.
| Category | Kebab Case | Camel Case | Description |
|------------|-----------------------------------------------------------------|---------------------------------------------------------------------|---------------------------------------------------------------------------------------------------|
| align
| Array: cssAlignProperties
Type: CssAlignProperty
| Array: cssAlignPropertiesCC
Type: CssAlignPropertyCC
| Horizontal/vertical alignment properties for boxes, flex, grid, and text. |
| box
| Array: cssBoxProperties
Type: CssBoxProperty
| Array: cssBoxPropertiesCC
Type: CssBoxPropertyCC
| Box model properties, like box
, margin
, padding
, height
, width
, etc. |
| color
| Array: cssColorProperties
Type: CssColorProperty
| Array: cssColorPropertiesCC
Type: CssColorPropertyCC
| CSS properties that relate to color, including blending/composition/filters |
| line
| Array: cssLineProperties
Type: CssLineProperty
| Array: cssLinePropertiesCC
Type: CssLinePropertyCC
| Properties that result in a border, outline, underline, etc. |
| media
| Array: cssMediaProperties
Type: CssMediaProperty
| Array: cssMediaPropertiesCC
Type: CssMediaPropertyCC
| CSS properties related to images and SVG |
| motion
| Array: cssMotionProperties
Type: CssMotionProperty
| Array: cssMotionPropertiesCC
Type: CssMotionPropertyCC
| CSS properties related to animation, motion, transforms, and transitions. |
| position
| Array: cssPositionProperties
Type: CssPositionProperty
| Array: cssPositionPropertiesCC
Type: CssPositionPropertyCC
| CSS properties related to positioning, including position
, top
, left
, z-index
, etc. |
| text
| Array: cssTextProperties
Type: CssTextProperty
| Array: cssTextPropertiesCC
Type: CssTextPropertyCC
| CSS properties related to font, text display, and text localization. Includes counters and lists. |
import { cssAlignProperties, type CssAlignProperty } from '@amandaguthrie/css-index/category';
function isCssAlignProperty(s: string | CssAlignProperty): s is CssAlignProperty {
return cssAlignProperties.includes(s);
}
License
MIT © 2024 Amanda Guthrie