fix system return types incompatible with styled-components

examples/styled-components/src/Box.tsx

@@ -18,7 +18,7 @@ import {
   CSSObject,
   Theme,
 } from 'system-props';
-import { CSSProp } from 'styled-components';
+import styled, { CSSProp } from 'styled-components';
 import * as CSS from 'csstype';
 
 const system = createSystem();

examples/styled-components/src/main.tsx

@@ -1,11 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import './index.css'
-import App from './App'
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
   document.getElementById('root')
-)
+);

src/core/createSystem.ts

@@ -190,7 +190,7 @@ export const createSystem = ({
     const parser = createParser(config, pseudoSelectors, strict);
     const cssFunction = createCss(config, tokenPrefix);
     parser.css = cssFunction;
-    return parser as Required<Parser<typeof tokenPrefix>>;
+    return parser;
   };
 
   return system;