csstype
Advanced tools
Package description
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.
Readme
TypeScript definitions for CSS, generated by data from MDN. It provides autocompletion and type checking for CSS properties and values.
const style: CSS.Properties = {
flexDirection: 'columns', // -> Type '"rows"' is not assignable to type 'FlexDirection'.
opacity: '10%', // -> Type 'string' is not assignable to type 'number'.
bakground: 'red', // -> Object literal may only specify known properties, and 'bakground' does not exist in type 'Properties'.
}
$ npm install csstype@latest # For projects
$ npm install csstype@* # For libraries
FAQs
Strict TypeScript and Flow types for style based on MDN data
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
LDAPjs, an LDAP Client and Server API for Node.js, was decommissioned after its maintainer received an abusive email from a user, raising concerns about this form of abuse as a potential attack vector.
Security News
CISA launched a new project called Vulnrichment to enrich CVEs with details that help prioritize patching and mitigation efforts, as the NVD backlog of unenriched CVEs awaiting analysis surpasses 10,000.
Security News
Socket is joining forces with CISA and other industry leaders at the RSA Conference to sign the Secure by Design pledge, committing to uphold the highest security standards in our products.