{
  "name": "csstype",
  "description": "Strict TypeScript and Flow types for style based on MDN data",
  "dist-tags": {
    "latest": "3.1.3",
    "version-2": "2.6.20"
  },
  "versions": {
    "2.6.20": {
      "name": "csstype",
      "version": "2.6.20",
      "main": "",
      "types": "index.d.ts",
      "description": "Strict TypeScript and Flow types for style based on MDN data",
      "repository": {
        "type": "git",
        "url": "git+https://github.com/frenic/csstype.git"
      },
      "author": {
        "name": "Fredrik Nicol",
        "email": "fredrik.nicol@gmail.com"
      },
      "license": "MIT",
      "devDependencies": {
        "@types/chokidar": "^2.1.3",
        "@types/jest": "^24.0.21",
        "@types/jsdom": "^12.2.4",
        "@types/node": "^12.12.3",
        "@types/prettier": "^1.18.3",
        "chalk": "^2.4.2",
        "chokidar": "^3.2.3",
        "fast-glob": "^3.1.0",
        "flow-bin": "^0.110.1",
        "jest": "^24.9.0",
        "jsdom": "^15.2.0",
        "mdn-browser-compat-data": "git+https://github.com/mdn/browser-compat-data.git#92bf4cb8c5594edb314995e53a9cde79d5fb1b1e",
        "mdn-data": "git+https://github.com/mdn/data.git#cad93443ab28ee08b1ba490b13cf45eafd1f008d",
        "prettier": "^1.18.2",
        "sync-request": "^6.1.0",
        "ts-node": "^8.4.1",
        "tslint": "^5.20.0",
        "tslint-config-prettier": "^1.18.0",
        "turndown": "^5.0.3",
        "typescript": "~3.6.4"
      },
      "scripts": {
        "update": "ts-node --files update.ts",
        "build": "ts-node --files build.ts --start",
        "watch": "ts-node --files build.ts --watch",
        "lint": "tslint --exclude node_modules/**/* --exclude **/*.d.ts --fix **/*.ts",
        "pretty": "prettier --write build.ts **/*.{ts,js,json,md}",
        "lazy": "tsc && npm run lint && npm run pretty",
        "test": "jest --no-cache",
        "typecheck": "tsc typecheck.ts --noEmit --pretty & flow check typecheck.js",
        "prepublish": "tsc && npm run test && npm run build && npm run typecheck",
        "rebase-build": "git rebase --exec \"yarn --ignore-scripts && yarn build && git commit -a --amend --no-verify --no-edit --allow-empty\""
      },
      "readme": "# CSSType\r\n\r\n[![npm](https://img.shields.io/npm/v/csstype.svg)](https://www.npmjs.com/package/csstype)\r\n\r\nTypeScript and Flow definitions for CSS, generated by [data from MDN](https://github.com/mdn/data). It provides autocompletion and type checking for CSS properties and values.\r\n\r\n```ts\r\nimport * as CSS from 'csstype';\r\n\r\nconst style: CSS.Properties = {\r\n  colour: 'white', // Type error on property\r\n  textAlign: 'middle', // Type error on value\r\n};\r\n```\r\n\r\n## Getting started\r\n\r\n```sh\r\n$ npm install csstype\r\n$ # or\r\n$ yarn add csstype\r\n```\r\n\r\n## Table of content\r\n\r\n- [Style types](#style-types)\r\n- [At-rule types](#at-rule-types)\r\n- [Pseudo types](#pseudo-types)\r\n- [Usage](#usage)\r\n- [What should I do when I get type errors?](#what-should-i-do-when-i-get-type-errors)\r\n- [Version 2.0](#version-20)\r\n- [Contributing](#contributing)\r\n  - [Commands](#commands)\r\n\r\n## Style types\r\n\r\nProperties are categorized in different uses and in several technical variations to provide typings that suits as many as possible.\r\n\r\nAll interfaces has one optional generic argument to define length. It defaults to `string | 0` because `0` is the only [length where the unit identifier is optional](https://drafts.csswg.org/css-values-3/#lengths). You can specify this, e.g. `string | number`, for platforms and libraries that accepts any numeric value as length with a specific unit.\r\n\r\n|                | Default              | `Hyphen`                   | `Fallback`                   | `HyphenFallback`                   |\r\n| -------------- | -------------------- | -------------------------- | ---------------------------- | ---------------------------------- |\r\n| **All**        | `Properties`         | `PropertiesHyphen`         | `PropertiesFallback`         | `PropertiesHyphenFallback`         |\r\n| **`Standard`** | `StandardProperties` | `StandardPropertiesHyphen` | `StandardPropertiesFallback` | `StandardPropertiesHyphenFallback` |\r\n| **`Vendor`**   | `VendorProperties`   | `VendorPropertiesHyphen`   | `VendorPropertiesFallback`   | `VendorPropertiesHyphenFallback`   |\r\n| **`Obsolete`** | `ObsoleteProperties` | `ObsoletePropertiesHyphen` | `ObsoletePropertiesFallback` | `ObsoletePropertiesHyphenFallback` |\r\n| **`Svg`**      | `SvgProperties`      | `SvgPropertiesHyphen`      | `SvgPropertiesFallback`      | `SvgPropertiesHyphenFallback`      |\r\n\r\nCategories:\r\n\r\n- **All** - Includes `Standard`, `Vendor`, `Obsolete` and `Svg`\r\n- **`Standard`** - Current properties and extends subcategories `StandardLonghand` and `StandardShorthand` _(e.g. `StandardShorthandProperties`)_\r\n- **`Vendor`** - Vendor prefixed properties and extends subcategories `VendorLonghand` and `VendorShorthand` _(e.g. `VendorShorthandProperties`)_\r\n- **`Obsolete`** - Removed or deprecated properties\r\n- **`Svg`** - SVG-specific properties\r\n\r\nVariations:\r\n\r\n- **Default** - JavaScript (camel) cased property names\r\n- **`Hyphen`** - CSS (kebab) cased property names\r\n- **`Fallback`** - Also accepts array of values e.g. `string | string[]`\r\n\r\n## At-rule types\r\n\r\nAt-rule interfaces with descriptors.\r\n\r\n|                      | Default        | `Hyphen`             | `Fallback`             | `HyphenFallback`             |\r\n| -------------------- | -------------- | -------------------- | ---------------------- | ---------------------------- |\r\n| **`@counter-style`** | `CounterStyle` | `CounterStyleHyphen` | `CounterStyleFallback` | `CounterStyleHyphenFallback` |\r\n| **`@font-face`**     | `FontFace`     | `FontFaceHyphen`     | `FontFaceFallback`     | `FontFaceHyphenFallback`     |\r\n| **`@page`**          | `Page`         | `PageHyphen`         | `PageFallback`         | `PageHyphenFallback`         |\r\n| **`@viewport`**      | `Viewport`     | `ViewportHyphen`     | `ViewportFallback`     | `ViewportHyphenFallback`     |\r\n\r\n## Pseudo types\r\n\r\nString literals of pseudo classes and pseudo elements\r\n\r\n- `Pseudos`\r\n\r\n  Extends:\r\n\r\n  - `AdvancedPseudos`\r\n\r\n    Function-like pseudos e.g. `:not(:first-child)`. The string literal contains the value excluding the parenthesis: `:not`. These are separated because they require an argument that results in infinite number of variations.\r\n\r\n  - `SimplePseudos`\r\n\r\n    Plain pseudos e.g. `:hover` that can only be **one** variation.\r\n\r\n## Usage\r\n\r\nLength defaults to `string | 0`. But it's possible to override it using generics.\r\n\r\n```ts\r\nimport * as CSS from 'csstype';\r\n\r\nconst style: CSS.Properties<string | number> = {\r\n  padding: 10,\r\n  margin: '1rem',\r\n};\r\n```\r\n\r\nIn 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.\r\n\r\n```ts\r\nimport * as CSS from 'csstype';\r\n\r\nconst style: CSS.PropertiesFallback = {\r\n  display: ['-webkit-flex', 'flex'],\r\n  color: 'white',\r\n};\r\n```\r\n\r\nThere's even string literals for pseudo selectors and elements.\r\n\r\n```ts\r\nimport * as CSS from 'csstype';\r\n\r\nconst pseudos: { [P in CSS.SimplePseudos]?: CSS.Properties } = {\r\n  ':hover': {\r\n    display: 'flex',\r\n  },\r\n};\r\n```\r\n\r\nHyphen 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`.\r\n\r\n```ts\r\nimport * as CSS from 'csstype';\r\n\r\ninterface Style extends CSS.Properties, CSS.PropertiesHyphen {}\r\n\r\nconst style: Style = {\r\n  'flex-grow': 1,\r\n  'flex-shrink': 0,\r\n  'font-weight': 'normal',\r\n  backgroundColor: 'white',\r\n};\r\n```\r\n\r\n## What should I do when I get type errors?\r\n\r\nThe goal is to have as perfect types as possible and we're trying to do our best. But with CSS Custom Properties, the CSS specification changing frequently and vendors implementing their own specifications with new releases sometimes causes type errors even if it should work. Here's some steps you could take to get it fixed:\r\n\r\n_If you're using CSS Custom Properties you can step directly to step 3._\r\n\r\n1.  **First of all, make sure you're doing it right.** A type error could also indicate that you're not :wink:\r\n\r\n    - Some CSS specs that some vendors has implemented could have been officially rejected or haven't yet received any official acceptance and are therefor not included\r\n    - If you're using TypeScript, [type widening](https://blog.mariusschulz.com/2017/02/04/typescript-2-1-literal-type-widening) could be the reason you get `Type 'string' is not assignable to...` errors\r\n\r\n2.  **Have a look in [issues](https://github.com/frenic/csstype/issues) to see if an issue already has been filed. If not, create a new one.** To help us out, please refer to any information you have found.\r\n3.  Fix the issue locally with **TypeScript** (Flow further down):\r\n\r\n    - The recommended way is to use **module augmentation**. Here's a few examples:\r\n\r\n      ```ts\r\n      // My css.d.ts file\r\n      import * as CSS from 'csstype';\r\n\r\n      declare module 'csstype' {\r\n        interface Properties {\r\n          // Add a missing property\r\n          WebkitRocketLauncher?: string;\r\n\r\n          // Add a CSS Custom Property\r\n          '--theme-color'?: 'black' | 'white';\r\n\r\n          // ...or allow any other property\r\n          [index: string]: any;\r\n        }\r\n      }\r\n      ```\r\n\r\n    - The alternative way is to use **type assertion**. Here's a few examples:\r\n\r\n      ```ts\r\n      const style: CSS.Properties = {\r\n        // Add a missing property\r\n        ['WebkitRocketLauncher' as any]: 'launching',\r\n\r\n        // Add a CSS Custom Property\r\n        ['--theme-color' as any]: 'black',\r\n      };\r\n      ```\r\n\r\n    Fix the issue locally with **Flow**:\r\n\r\n    - Use **type assertion**. Here's a few examples:\r\n\r\n      ```js\r\n      const style: $Exact<CSS.Properties<*>> = {\r\n        // Add a missing property\r\n        [('WebkitRocketLauncher': any)]: 'launching',\r\n\r\n        // Add a CSS Custom Property\r\n        [('--theme-color': any)]: 'black',\r\n      };\r\n      ```\r\n\r\n## Version 2.0\r\n\r\nThe casing of CSS vendor properties are changed matching the casing of prefixes in Javascript. So all of them are capitalized except for `ms`.\r\n\r\n- `msOverflowStyle` is still `msOverflowStyle`\r\n- `mozAppearance` is now `MozAppearance`\r\n- `webkitOverflowScrolling` is now `WebkitOverflowScrolling`\r\n\r\nMore info: https://www.andismith.com/blogs/2012/02/modernizr-prefixed/\r\n\r\n## Contributing\r\n\r\n**Never modify `index.d.ts` and `index.js.flow` directly. They are generated automatically and committed so that we can easily follow any change it results in.** Therefor it's important that you run `$ git config merge.ours.driver true` after you've forked and cloned. That setting prevents merge conflicts when doing rebase.\r\n\r\n### Commands\r\n\r\n- `yarn build` Generates typings and type checks them\r\n- `yarn watch` Runs build on each save\r\n- `yarn test` Runs the tests\r\n- `yarn lazy` Type checks, lints and formats everything\r\n",
      "readmeFilename": "README.md",
      "gitHead": "451d62da7ef1b5e73907bb12fbcc1d2a0106993f",
      "bugs": {
        "url": "https://github.com/frenic/csstype/issues"
      },
      "_id": "csstype@2.6.20",
      "_nodeVersion": "16.6.2",
      "_npmVersion": "8.5.0",
      "dist": {
        "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==",
        "shasum": "9229c65ea0b260cf4d3d997cb06288e36a8d6dda",
        "tarball": "http://localhost:4260/csstype/csstype-2.6.20.tgz",
        "fileCount": 5,
        "unpackedSize": 1953772
      },
      "directories": {},
      "_hasShrinkwrap": false
    },
    "3.1.3": {
      "name": "csstype",
      "version": "3.1.3",
      "main": "",
      "types": "index.d.ts",
      "description": "Strict TypeScript and Flow types for style based on MDN data",
      "repository": {
        "type": "git",
        "url": "git+https://github.com/frenic/csstype.git"
      },
      "author": { "name": "Fredrik Nicol", "email": "fredrik.nicol@gmail.com" },
      "license": "MIT",
      "devDependencies": {
        "@types/chokidar": "^2.1.3",
        "@types/css-tree": "^2.3.1",
        "@types/jest": "^29.5.0",
        "@types/jsdom": "^21.1.1",
        "@types/node": "^16.18.23",
        "@types/prettier": "^2.7.2",
        "@types/request": "^2.48.8",
        "@types/turndown": "^5.0.1",
        "@typescript-eslint/eslint-plugin": "^5.57.0",
        "@typescript-eslint/parser": "^5.57.0",
        "chalk": "^4.1.2",
        "chokidar": "^3.5.3",
        "eslint": "^8.37.0",
        "css-tree": "^2.3.1",
        "eslint-config-prettier": "^8.8.0",
        "eslint-plugin-prettier": "^4.2.1",
        "fast-glob": "^3.2.12",
        "flow-bin": "^0.203.1",
        "jest": "^29.5.0",
        "jsdom": "^21.1.1",
        "mdn-browser-compat-data": "git+https://github.com/mdn/browser-compat-data.git#1bf44517bd08de735e9ec20dbfe8e86c96341054",
        "mdn-data": "git+https://github.com/mdn/data.git#7f0c865a3c4b5d891285c93308ee5c25cb5cfee8",
        "prettier": "^2.8.7",
        "request": "^2.88.2",
        "ts-jest": "^29.0.5",
        "ts-node": "^10.9.1",
        "turndown": "^7.1.2",
        "typescript": "~5.0.3"
      },
      "scripts": {
        "prepublish": "npm install --prefix __tests__ && npm install --prefix __tests__/__fixtures__",
        "prepublishOnly": "tsc && npm run test:src && npm run build && ts-node --files prepublish.ts",
        "update": "ts-node --files update.ts",
        "build": "ts-node --files build.ts --start",
        "watch": "ts-node --files build.ts --watch",
        "lint": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
        "pretty": "prettier --write build.ts **/*.{ts,js,json,md}",
        "lazy": "tsc && npm run lint",
        "test": "jest --runInBand",
        "test:src": "jest src.*.ts",
        "test:dist": "jest dist.*.ts --runInBand"
      },
      "gitHead": "fb448e21733ac5cb52523d3b678fdbbe1f9b42f2",
      "bugs": { "url": "https://github.com/frenic/csstype/issues" },
      "_id": "csstype@3.1.3",
      "_nodeVersion": "18.16.0",
      "_npmVersion": "9.5.1",
      "dist": {
        "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
        "shasum": "d80ff294d114fb0e6ac500fbf85b60137d7eff81",
        "tarball": "http://localhost:4260/csstype/csstype-3.1.3.tgz",
        "fileCount": 5,
        "unpackedSize": 1246074,
        "signatures": [
          {
            "keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA",
            "sig": "MEQCIF2zTnkc6R7cr7euidncjKp9gnQSpUmoKPzB/pvL4rsQAiB4E1mDQEtpvu9cjct0kaUbtTAQc+rBLAO65gAk+ykfig=="
          }
        ]
      },
      "directories": {},
      "_hasShrinkwrap": false
    }
  },
  "author": {
    "name": "Fredrik Nicol",
    "email": "fredrik.nicol@gmail.com"
  },
  "license": "MIT",
  "readmeFilename": "README.md",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/frenic/csstype.git"
  },
  "homepage": "https://github.com/frenic/csstype#readme",
  "bugs": {
    "url": "https://github.com/frenic/csstype/issues"
  }
}