Comments (9)
FYI I've opened a PR on @types/react
to use csstype as-is with a string index fallback: DefinitelyTyped/DefinitelyTyped#24688
from csstype.
Thank you! I'll do my best with SVG properties as soon as possible.
from csstype.
Iβm as excited to apply conditional types to every problem as the next person, but I think this may be a case of diminishing returns on investment π I would guess that 95% of downstream libraries donβt care to distinguish between the properties that are valid for one type of element vs another... the most pressing need is for a complete yet finite union of possible properties and their corresponding value types.
from csstype.
Nice catch, I'll fix that. I guess keywords containing only digits should be converted to a numeric literal instead.
SVG properties are missing in https://github.com/mdn/data. Here's an issue about that.
from csstype.
Here's an index of SVG properties. But there's no raw data to use as far as I can see. Either way, there's a complexity described here with SVG properties that some of them only apply to a very limited group of elements. Some of them only apply to one single element like the stop-color
property.
from csstype.
I just did a quick test and it seems like React.CSSProperties
are now compatible with csstype.
const x: CSS.Properties<string | number> = {} as React.CSSProperties; // OK
from csstype.
It's still not quite compatible when assigning style literals because of the missing SVG properties. I have a branch of @types/react
where I define type CSSProperties = CSS.Properties<string | number>
here:
https://github.com/pelotom/DefinitelyTyped/tree/react-csstype
Running npm run lint react
produces the following errors:
Error: /Users/tom/code/DefinitelyTyped/types/react/test/cssProperties.tsx:41:49
ERROR: 41:49 expect TypeScript@next compile error:
Type '{ fillOpacity: number; }' is not assignable to type 'Properties<Key>'.
Object literal may only specify known properties, and 'fillOpacity' does not exist in type 'Properties<Key>'.
ERROR: 44:51 expect TypeScript@next compile error:
Type '{ strokeOpacity: number; }' is not assignable to type 'Properties<Key>'.
Object literal may only specify known properties, and 'strokeOpacity' does not exist in type 'Properties<Key>'.
ERROR: 47:49 expect TypeScript@next compile error:
Type '{ strokeWidth: string; }' is not assignable to type 'Properties<Key>'.
Object literal may only specify known properties, and 'strokeWidth' does not exist in type 'Properties<Key>'.
One escape hatch would be to just allow any arbitrary additional properties:
export interface CSSProperties extends CSS.Properties<string | number> {
[k: string]: any;
}
which is what @types/react
is already doing. TypeStyle takes the approach of exhaustively enumerating all properties, including the SVG ones:
(By hand? π€·ββοΈ) What do you think is the best approach? I personally would prefer exhaustiveness, but I can understand that that's annoying to maintain if it has to be done manually.
from csstype.
Sure, I didn't mean fully compatible. But at least there's no mismatch on common properties with [email protected] as the previous version had on justifyContent
.
I agree that the missing SVG properties is a problem because the whole idea is to have as perfect types as possible so index signatures aren't needed. I was thinking about writing them manually since they are not that many SVG properties. I don't see that as a problem. But I'm not sure how to include them in the Properties
interface. It would be nice if you could do something like this to include properties that only applies to certain elements:
const style: CSS.Properties<Element> = {
fill: 'red', // OK
stopColor: 'green', // OK
};
const htmlStyle: CSS.Properties<HTMLElement> = {
fill: 'red', // Error
stopColor: 'green', // Error
};
const svgStyle: CSS.Properties<SVGElement> = {
fill: 'red', // OK
stopColor: 'green', // OK
};
const svgStopStyle: CSS.Properties<SVGStopElement> = {
fill: 'red', // OK
stopColor: 'green', // OK
};
const svgRectStyle: CSS.Properties<SVGRectElement> = {
fill: 'red', // OK
stopColor: 'green', // Error
};
Now the first generic argument is occupied. But in theory.
This would be possible with TypeScript conditional types that will be released in v2.8. But the problem is that Flow doesn't have any feature like that.
Including them all under Properties
would of course be at least something and a good start.
from csstype.
I hear you π SVG properties should at least be separated but included in Properties
like vendor properties.
from csstype.
Related Issues (20)
- How to limit the StandardLonghandProperties[`propertyName`] type to valid strings? HOT 1
- CSS Typed OM support HOT 1
- Missing '-webkit-user-drag'
- Ability to use an object with the value representing the css type
- Support for Container Queries HOT 4
- Strict types HOT 4
- Add `text-wrap` / `textWrap` from CSS4 (Chrome 113)
- add return type of `getComputedStyle()`
- Idea to wrap types into element types?
- How to migrate from old version to latest version
- Missing '-webkit-column-gap'
- missing '-webkit-padding-after' and '-webkit-padding-before'
- mdn/data deprecated HOT 1
- Regarding documentation and site for csstype
- Which version is the current version? Is it v3.1.2 or v2.6.0
- [3.1.3] typing issue with @emotion/serialize HOT 8
- New version causes breaks in Definitely Typed package `mui-datatables`
- WebkitUserSelects will resolve to user-select but not to -webkit-user-select
- Is there a reason why vendor prefixes in IE start with a lowercase letter?
- feat: add `view-*` CSS properties
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from csstype.