Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
The csstype package provides TypeScript and Flow definitions for CSS properties and values. It is designed to enhance type safety and autocompletion when working with CSS in JavaScript and TypeScript projects. It includes types for CSS properties, pseudo-classes, pseudo-elements, and at-rules.
Type definitions for CSS properties
Csstype allows developers to define CSS properties in an object with type checking. This ensures that the values assigned to CSS properties are valid according to the CSS specification.
{"color": "blue", "fontSize": "12px"}
Type definitions for pseudo-classes and pseudo-elements
Developers can use csstype to define styles for pseudo-classes and pseudo-elements with type safety, ensuring that the pseudo selectors and their associated styles are correctly typed.
{"::before": {"content": "'Before content'"}, ":hover": {"color": "red"}}
Type definitions for at-rules
Csstype includes type definitions for CSS at-rules like @media, allowing developers to write media queries with type-checked properties and values.
{"@media (min-width: 768px)": {"body": {"backgroundColor": "lightblue"}}}
Styled-components is a library for styling React components using tagged template literals. It provides a similar level of type safety and autocompletion when used with TypeScript, but it also includes runtime styling capabilities, which csstype does not.
Emotion is another CSS-in-JS library that allows for styling applications using JavaScript. It offers a similar developer experience to styled-components and can be used with TypeScript for type safety. Emotion also supports dynamic styling, which is not a feature of csstype.
Typestyle is a TypeScript-friendly library that allows for writing type-safe CSS with JavaScript. It is similar to csstype in providing type definitions for CSS properties, but it also includes utilities for generating CSS classes and handling them in JavaScript.
TypeScript and Flow definitions for CSS, generated by data from MDN. It provides autocompletion and type checking for CSS properties and values.
import * as CSS from 'csstype';
const style: CSS.Properties = {
alignSelf: 'stretsh', // Type error on value
colour: 'white', // Type error on property
};
$ npm install csstype
$ # or
$ yarn add csstype
Properties
CSS properties interface with camel cased property names:
Extends:
StandardProperties
StandardLonghandProperties
StandardShorthandProperties
VendorProperties
VendorLonghandProperties
VendorShorthandProperties
SvgProperties
PropertiesHyphen
CSS properties interface with kebab cased property names:
Extends:
StandardPropertiesHyphen
StandardLonghandPropertiesHyphen
StandardShorthandPropertiesHyphen
VendorPropertiesHyphen
VendorLonghandPropertiesHyphen
VendorShorthandPropertiesHyphen
SvgPropertiesHyphen
PropertiesFallback
Equals to Properties
but also allows array of values:
Extends:
StandardPropertiesFallback
StandardLonghandPropertiesFallback
StandardShorthandPropertiesFallback
VendorPropertiesFallback
VendorLonghandPropertiesFallback
VendorShorthandPropertiesFallback
SvgPropertiesFallback
PropertiesHyphenFallback
Equals to PropertiesHyphen
but also allows array of values:
Extends:
StandardPropertiesHyphenFallback
StandardLonghandPropertiesHyphenFallback
StandardShorthandPropertiesHyphenFallback
VendorPropertiesHyphenFallback
VendorLonghandPropertiesHyphenFallback
VendorShorthandPropertiesHyphenFallback
SvgPropertiesHyphenFallback
At-rule interfaces with descriptors.
@counter-style
CounterStyle
CounterStyleFallback
CounterStyleHyphen
CounterStyleHyphenFallback
@font-face
FontFace
FontFaceFallback
FontFaceHyphen
FontFaceHyphenFallback
@page
Page
PageFallback
PageHyphen
PageHyphenFallback
@viewport
Viewport
ViewportFallback
ViewportHyphen
ViewportHyphenFallback
String literals of pseudo classes and pseudo elements
Pseudos
AdvancedPseudos
Function-like pseudos like :not(...)
SimplePseudos
Length unit defaults to string | 0
because 0
is the only unitless length. But it's possible to override it using generics.
import * as CSS from 'csstype';
const style: CSS.Properties<string | number> = {
padding: 10,
margin: '1rem',
};
In some cases, like for CSS-in-JS libraries, an array of values is a way to provide fallback values in CSS. Using CSS.PropertiesFallback
instead of CSS.Properties
will add the possibility to use any property value as an array of values.
import * as CSS from 'csstype';
const style: CSS.PropertiesFallback = {
display: ['-webkit-flex', 'flex'],
color: 'white',
};
There's even string literals for pseudo selectors and elements.
import * as CSS from 'csstype';
const pseudos: { [P in CSS.SimplePseudos]?: CSS.Properties } = {
':hover': {
display: 'flex',
},
};
Hyphen cased (kebab cased) properties are provided in CSS.PropertiesHyphen
and CSS.PropertiesHyphenFallback
. It's not not added by default in CSS.Properties
. To allow both of them, you can simply extend with CSS.PropertiesHyphen
or/and CSS.PropertiesHyphenFallback
.
import * as CSS from 'csstype';
interface Style extends CSS.Properties, CSS.PropertiesHyphen {}
const style: Style = {
'flex-grow': 1,
'flex-shrink': 0,
'font-weight': 'normal',
backgroundColor: 'white',
};
The casing of CSS vendor properties are changed matching the casing of prefixes in Javascript. So all of them are capitalized except for ms
.
msOverflowStyle
is still msOverflowStyle
mozAppearance
is now MozAppearance
webkitOverflowScrolling
is now WebkitOverflowScrolling
More info: https://www.andismith.com/blogs/2012/02/modernizr-prefixed/
FAQs
Strict TypeScript and Flow types for style based on MDN data
The npm package csstype receives a total of 23,995,054 weekly downloads. As such, csstype popularity was classified as popular.
We found that csstype demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.