{"id":10699,"library":"csstype","title":"CSSType - Strict CSS Type Definitions","description":"CSSType provides comprehensive TypeScript and Flow type definitions for CSS properties and values, meticulously generated from MDN data. It is currently at version 3.2.3 and maintains an active release cadence, frequently updating its definitions to reflect the latest CSS specifications and browser compatibility data. Key differentiators include its strict adherence to MDN, support for various property naming conventions (camelCase for JavaScript, kebab-case for CSS-in-JS libraries), and inclusion of fallback array types for properties that accept multiple values. It covers standard, vendor-prefixed, obsolete, and SVG-specific properties, along with at-rule and pseudo-class/element types, offering robust type checking and autocompletion for web development projects.","status":"active","version":"3.2.3","language":"javascript","source_language":"en","source_url":"https://github.com/frenic/csstype","tags":["javascript","css","style","typescript","flow","typings","types","definitions"],"install":[{"cmd":"npm install csstype","lang":"bash","label":"npm"},{"cmd":"yarn add csstype","lang":"bash","label":"yarn"},{"cmd":"pnpm add csstype","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"For TypeScript, use `import type` as `csstype` only provides type declarations and has no runtime value. Not using `type` could lead to unnecessary import statements in compiled JavaScript if your bundler doesn't tree-shake types effectively.","wrong":"import * as CSS from 'csstype';","symbol":"CSS.Properties","correct":"import type * as CSS from 'csstype';"},{"note":"Specific interfaces like `PropertiesHyphen` are directly available as named exports from the main package entry point. Direct imports from internal paths like `dist/prop-types` are generally discouraged and might break in future versions.","wrong":"import { PropertiesHyphen } from 'csstype/dist/prop-types';","symbol":"CSS.PropertiesHyphen","correct":"import type { PropertiesHyphen } from 'csstype';"},{"note":"At-rule types are nested under the `AtRule` namespace. Access them via `AtRule.FontFace` after importing `AtRule`. Direct module imports for nested types are not the standard pattern.","wrong":"import type { FontFace } from 'csstype/at-rules';","symbol":"CSS.AtRule.FontFace","correct":"import type { AtRule } from 'csstype';"}],"quickstart":{"code":"import type * as CSS from 'csstype';\n\ninterface CustomTheme {\n  primary: CSS.Property.Color;\n  secondary: CSS.Property.Color;\n}\n\n// Example usage with a common CSS-in-JS pattern\nconst getButtonStyle = (theme: CustomTheme): CSS.Properties => ({\n  backgroundColor: theme.primary,\n  color: theme.secondary,\n  padding: '8px 16px',\n  borderRadius: '4px',\n  border: '1px solid currentColor',\n  ':hover': {\n    opacity: 0.9,\n    cursor: 'pointer'\n  },\n  // Type error: 'middle' is not a valid textAlign value\n  textAlign: 'middle' as CSS.Property.TextAlign,\n  // Type error: 'colour' is not a standard CSS property\n  // @ts-ignore: Intentionally demonstrating a property error\n  colour: 'red'\n});\n\nconst myTheme: CustomTheme = {\n  primary: '#007bff',\n  secondary: 'white'\n};\n\nconst buttonStyles = getButtonStyle(myTheme);\n\nconsole.log(buttonStyles);\n","lang":"typescript","description":"Demonstrates importing `csstype` types, defining an interface using CSS property types, and applying them within a styled object, highlighting type checking for property names and values."},"warnings":[{"fix":"Review the CSSType v3 migration guide on GitHub. Update import statements from specific sub-paths or direct exports to `import type * as CSS from 'csstype';` and then access types like `CSS.Properties` or `CSS.AtRule.Viewport`.","message":"CSSType v3 introduced significant breaking changes, primarily impacting how types are structured and accessed. The main `CSS` namespace now aggregates most types, requiring adjustments to existing type imports from previous versions (e.g., `v2`).","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Consult MDN Web Docs for the correct and accepted values for the CSS property causing the error. Ensure all values conform to the formal CSS syntax.","message":"Incorrect CSS property values will result in TypeScript errors (e.g., `textAlign: 'middle'`). CSSType enforces strict adherence to MDN-defined valid values.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Select the interface that matches your styling approach: `Properties` for camelCase JS objects, `PropertiesHyphen` for kebab-case (often for React `style` prop or styled-components), and `Fallback` variants if you need to allow array values for fallbacks.","message":"Choosing the correct type interface (e.g., `Properties`, `PropertiesHyphen`, `PropertiesFallback`) is crucial for various use cases like CSS-in-JS libraries or style objects that accept array fallbacks.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"For individual custom properties, use type assertions like `{'--my-var': '10px' as CSS.Property.Width}`. For widespread usage, consider TypeScript module augmentation to extend `Properties` or related interfaces with your custom properties.","message":"Using custom CSS properties (CSS Variables) with `csstype` might require type assertions or module augmentation, as they are not statically known by the library.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Replace 'middle' with a valid CSS `text-align` value such as 'center', 'left', 'right', 'start', or 'end'.","cause":"An invalid or unrecognized value was assigned to a CSS property type.","error":"Type '\"middle\"' is not assignable to type '\"-moz-initial\" | \"inherit\" | \"initial\" | \"revert\" | \"revert-layer\" | \"unset\" | ...'."},{"fix":"Correct the property name to 'color', which is the standard CSS property for text color. CSSType follows the standard W3C and MDN property names.","cause":"A non-standard or misspelled CSS property name was used.","error":"Property 'colour' does not exist on type 'Properties<string | number, string>'. Did you mean 'color'?"},{"fix":"Ensure you are using `import type * as CSS from 'csstype';` for all `csstype` imports to correctly reference type declarations without bundling runtime values. If the issue persists, explicitly annotate the type, e.g., `const style: CSS.Properties = { ... }`.","cause":"TypeScript might struggle to infer a complex type from `csstype` without an explicit `import type` statement or when using `require()` for types, especially in older TS versions or specific project configurations.","error":"TS2742: The inferred type of '...' cannot be named without a reference to 'csstype/dist/csstype'. This is likely not portable. A type annotation is necessary."}],"ecosystem":"npm"}