{"action":"closed","issue":{"url":"https://api.github.com/repos/microsoft/fast-dna/issues/1489","repository_url":"https://api.github.com/repos/microsoft/fast-dna","labels_url":"https://api.github.com/repos/microsoft/fast-dna/issues/1489/labels{/name}","comments_url":"https://api.github.com/repos/microsoft/fast-dna/issues/1489/comments","events_url":"https://api.github.com/repos/microsoft/fast-dna/issues/1489/events","html_url":"https://github.com/microsoft/fast-dna/issues/1489","id":417442227,"node_id":"MDU6SXNzdWU0MTc0NDIyMjc=","number":1489,"title":"CSSRules interface does not extend CSS.Properties correctly","user":{"login":"shaohaolin","id":6677092,"node_id":"MDQ6VXNlcjY2NzcwOTI=","avatar_url":"https://avatars3.githubusercontent.com/u/6677092?v=4","gravatar_id":"","url":"https://api.github.com/users/shaohaolin","html_url":"https://github.com/shaohaolin","followers_url":"https://api.github.com/users/shaohaolin/followers","following_url":"https://api.github.com/users/shaohaolin/following{/other_user}","gists_url":"https://api.github.com/users/shaohaolin/gists{/gist_id}","starred_url":"https://api.github.com/users/shaohaolin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/shaohaolin/subscriptions","organizations_url":"https://api.github.com/users/shaohaolin/orgs","repos_url":"https://api.github.com/users/shaohaolin/repos","events_url":"https://api.github.com/users/shaohaolin/events{/privacy}","received_events_url":"https://api.github.com/users/shaohaolin/received_events","type":"User","site_admin":false},"labels":[{"id":854394939,"node_id":"MDU6TGFiZWw4NTQzOTQ5Mzk=","url":"https://api.github.com/repos/microsoft/fast-dna/labels/issue%20:%20bug","name":"issue : bug","color":"b60205","default":false},{"id":922969521,"node_id":"MDU6TGFiZWw5MjI5Njk1MjE=","url":"https://api.github.com/repos/microsoft/fast-dna/labels/reason%20:%20stale","name":"reason : stale","color":"bfdadc","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2019-03-05T18:28:09Z","updated_at":"2019-06-14T03:28:25Z","closed_at":"2019-06-14T03:28:25Z","author_association":"NONE","body":"Cannot pass numerical value to zIndex because CSSRules interface does not extend CSS.Properties correctly.\r\n\r\nI have the following example.\r\n```typescript\r\nexport const styles: ComponentStyles<CssClasses, DesignSystem> =() =>{\r\n  return {\r\n   footer: {\r\n     zIndex: 10 \r\n   }\r\n  }\r\n}\r\n```\r\nTypeScript is throwing a waring that the type of zIndex has to be string. \r\n\r\nThe cause is a type mismatch:\r\n```typescript\r\nexport interface CSSRules<T> {\r\n    [rule: string]: CSSRules<T> | CSSRuleResolver<T> | CSSStaticRule;\r\n}\r\n\r\nexport declare type CSSStaticRule = CSS.Properties | string;\r\n```\r\nThe type CSSStaticRule assigns the CSS Properties object type to each rule meaning that\r\n```typescript\r\nexport const styles: ComponentStyles<CssClasses, DesignSystem> =() =>{\r\n  return {\r\n   footer: {\r\n     anything: {\r\n      zIndex: 10\r\n    }\r\n   }\r\n  }\r\n}\r\n```\r\nis valid; however\r\n```typescript\r\nexport const styles: ComponentStyles<CssClasses, DesignSystem> =() =>{\r\n  return {\r\n   footer: {\r\n     zIndex: 10 \r\n   }\r\n  }\r\n}\r\n```\r\nis invalid.\r\n\r\nJSS does not recognize the key `anything`, so the `zIndex` is not set in the page.\r\n\r\nThe following code changes will fix this problem.\r\n```typescript\r\nexport type CssRules<T> = CSSComputedRules<T> | CSS.Properties;\r\nexport interface CSSComputedRules<T> {\r\n    [rule: string]: CSSComputedRules<T> | CSSRuleResolver<T> | string;\r\n}\r\n```"}}
{"actor":{"display_login":"stale"}}