@amandaguthrie/css-index
v0.1.0-dev-20240510234403
Published
CSS properties grouped by category, function, and more
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-indexUsage
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: cssAlignPropertiesType: CssAlignProperty | Array: cssAlignPropertiesCCType: CssAlignPropertyCC | Horizontal/vertical alignment properties for boxes, flex, grid, and text. |
| box | Array: cssBoxPropertiesType: CssBoxProperty | Array: cssBoxPropertiesCCType: CssBoxPropertyCC | Box model properties, like box, margin, padding, height, width, etc. |
| color | Array: cssColorPropertiesType: CssColorProperty | Array: cssColorPropertiesCCType: CssColorPropertyCC | CSS properties that relate to color, including blending/composition/filters |
| line | Array: cssLinePropertiesType: CssLineProperty | Array: cssLinePropertiesCCType: CssLinePropertyCC | Properties that result in a border, outline, underline, etc. |
| media | Array: cssMediaPropertiesType: CssMediaProperty | Array: cssMediaPropertiesCCType: CssMediaPropertyCC | CSS properties related to images and SVG |
| motion | Array: cssMotionPropertiesType: CssMotionProperty | Array: cssMotionPropertiesCCType: CssMotionPropertyCC | CSS properties related to animation, motion, transforms, and transitions. |
| position | Array: cssPositionPropertiesType: CssPositionProperty | Array: cssPositionPropertiesCCType: CssPositionPropertyCC | CSS properties related to positioning, including position, top, left, z-index, etc. |
| text | Array: cssTextPropertiesType: CssTextProperty | Array: cssTextPropertiesCCType: 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
