Merge pull request #28371 from athrunsun/update_styled_jsx_css_typings

[styled-jsx] Update styled-jsx/css typings, add type definitions for methods css.global and css.resolve

types/styled-jsx/css.d.ts

@@ -1,4 +1,8 @@
-type Tag = (chunks: TemplateStringsArray, ...args: any[]) => string;
+type Tag = {
+    (chunks: TemplateStringsArray, ...args: any[]): string;
+    global: (chunks: TemplateStringsArray, ...args: any[]) => string;
+    resolve: (chunks: TemplateStringsArray, ...args: any[]) => { className: string; styles: string };
+};
 
 declare let css: Tag;
 export = css;

types/styled-jsx/styled-jsx-tests.tsx

@@ -26,6 +26,29 @@ const withSeparatedCSS = (
     </div>
 );
 
+const globalCSS = css.global`body { margin: 0; }`;
+const withGlobalCSS = (
+    <div>
+        <style jsx global>{globalCSS}</style>
+    </div>
+);
+
+const resolvedCSS = css.resolve`a { color: green; }`;
+const withResolvedCSS = (
+    <div>
+        <button className={resolvedCSS.className}>About</button>
+        {resolvedCSS.styles}
+    </div>
+);
+
+const dynamicResolvedCSS = css.resolve`a { color: ${buttonColor}; }`;
+const withDynamicResolvedCSS = (
+    <div>
+        <button className={dynamicResolvedCSS.className}>About</button>
+        {dynamicResolvedCSS.styles}
+    </div>
+);
+
 const stylesChildren = flushToReact();
 const jsxToRender = (
     <head>{ stylesChildren }</head>