Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
csstype - npm Package Compare versions
Comparing version 2.2.0 to 2.3.0
| { | ||
| "name": "csstype", | ||
| "version": "2.2.0", | ||
| "version": "2.3.0", | ||
| "main": "", | ||
@@ -15,7 +15,8 @@ "types": "index.d.ts", | ||
| "@types/prettier": "^1.10.0", | ||
| "chalk": "^2.3.2", | ||
| "chokidar": "^2.0.0", | ||
| "flow-bin": "^0.69.0", | ||
| "jest": "^22.2.1", | ||
| "mdn-browser-compat-data": "0.0.30", | ||
| "mdn-data": "1.1.1", | ||
| "mdn-browser-compat-data": "git+https://github.com/mdn/browser-compat-data.git#3ab7b502352239d2131571d7463e098d2317532d", | ||
| "mdn-data": "git+https://github.com/mdn/data.git#c5fc95e780d14f4f949e9f26675bb6f0ae376ea0", | ||
| "prettier": "^1.10.2", | ||
@@ -36,3 +37,3 @@ "ts-node": "^5.0.1", | ||
| "prepublish": "tsc && npm run test && npm run build && npm run typecheck", | ||
| "rebase-build": "git rebase -s recursive -X theirs --exec \"yarn build && git commit -a --amend --no-verify --no-edit --allow-empty\"" | ||
| "rebase-build": "git rebase --exec \"yarn --ignore-scripts && yarn build && git commit -a --amend --no-verify --no-edit --allow-empty\"" | ||
| }, | ||
@@ -39,0 +40,0 @@ "files": [ |
@@ -9,4 +9,4 @@ # CSSType | ||
| const style: CSS.Properties = { | ||
| alignSelf: 'stretsh', // Type error on value | ||
| colour: 'white', // Type error on property | ||
| overflow: 'hide', // Type error on value | ||
| }; | ||
@@ -37,2 +37,3 @@ ``` | ||
| * [Usage](#usage) | ||
| * [What should I do when I get type errors?](#what-should-i-do-when-i-get-type-errors) | ||
| * [Version 2.0](#version-20) | ||
@@ -42,3 +43,3 @@ | ||
| All properties are categorized in different uses and in several technical variations to provide the type that suits as many as possible. | ||
| All properties are categorized in different uses and in several technical variations to provide typings that suits as many as possible. | ||
@@ -54,7 +55,7 @@ Categories: | ||
| * _Default variation_ - JavaScript default (camel) cased property names | ||
| * `Hyphen` - CSS default (kebab) cased property names | ||
| * `Fallback` - Accepts array of values e.g. `string | string[]` | ||
| * _Default variation_ - JavaScript (camel) cased property names | ||
| * `Hyphen` - CSS (kebab) cased property names | ||
| * `Fallback` - Also accepts array of values e.g. `string | string[]` | ||
| All interfaces has one optional generic argument to define length. It defaults to `string | 0` because `0` is the [only unitless length](https://www.w3.org/TR/REC-CSS2/syndata.html#length-units) by default. You can specify this, e.g. `string | number`, for platforms and libraries that accepts any numeric value with a specific unit. | ||
| All interfaces has one optional generic argument to define length. It defaults to `string | 0` because `0` is the [only unitless length](https://www.w3.org/TR/REC-CSS2/syndata.html#length-units). You can specify this, e.g. `string | number`, for platforms and libraries that accepts any numeric value as length with a specific unit. | ||
@@ -158,5 +159,13 @@ ### `Properties` | ||
| * `Pseudos` | ||
| * `AdvancedPseudos` Function-like pseudos like `:not(...)` | ||
| Extends: | ||
| * `AdvancedPseudos` | ||
| 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. | ||
| * `SimplePseudos` | ||
| Plain pseudos e.g. `:hover` that can only be **one** variation. | ||
| ## Usage | ||
@@ -213,2 +222,62 @@ | ||
| ## What should I do when I get type errors? | ||
| The 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: | ||
| _If you're using CSS Custom Properties you can step directly to step 3._ | ||
| 1. **First of all, make sure you're doing it right.** A type error could also indicate that you're not :wink: | ||
| * 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 | ||
| * 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 | ||
| 2. **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. | ||
| 3. Fix the issue locally with **TypeScript** (Flow further down): | ||
| * The recommended way is to use **module augmentation**. Here's a few examples: | ||
| ```ts | ||
| // My css.d.ts file | ||
| import * as CSS from 'csstype'; | ||
| declare module 'csstype' { | ||
| interface Properties { | ||
| // Add a missing property | ||
| WebkitRocketLauncher?: string; | ||
| // Add a CSS Custom Property | ||
| '--theme-color'?: 'black' | 'white'; | ||
| // ...or allow any other property | ||
| [index: string]: any; | ||
| } | ||
| } | ||
| ``` | ||
| * The alternative way is to use **type assertion**. Here's a few examples: | ||
| ```ts | ||
| const style: CSS.Properties = { | ||
| // Add a missing property | ||
| ['WebkitRocketLauncher' as any]: 'launching', | ||
| // Add a CSS Custom Property | ||
| ['--theme-color' as any]: 'black', | ||
| }; | ||
| ``` | ||
| Fix the issue locally with **Flow**: | ||
| * Use **type assertion**. Here's a few examples: | ||
| ```js | ||
| const style: $Exact<CSS.Properties<*>> = { | ||
| // Add a missing property | ||
| [('WebkitRocketLauncher': any)]: 'launching', | ||
| // Add a CSS Custom Property | ||
| [('--theme-color': any)]: 'black', | ||
| }; | ||
| ``` | ||
| ## Version 2.0 | ||
@@ -223,1 +292,12 @@ | ||
| More info: https://www.andismith.com/blogs/2012/02/modernizr-prefixed/ | ||
| ## Contributing | ||
| 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 because **we want you to commit the generated files** (`index.d.ts` and `index.js.flow`). That's necessary to be able to easily follow the changes your code results in. | ||
| ### Commands | ||
| * `yarn build` Generates typings and type checks them | ||
| * `yarn watch` Runs build on each save | ||
| * `yarn test` Runs the tests | ||
| * `yarn lazy` Type check, lint and formats everything |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by3.49%
485413
- Lines of code
- increased by2.95%
4495
- Number of lines in readme file
- increased by36.87%
297
Worsened metrics
- Dev dependency count
- increased by7.14%
15
No dependency changes