Update TypeScript to 5.1 and support TS 4.8+ (#713)

fixes #710, supersedes #711

- the peer dependency is set to 4.8+ because there [was a breaking
change in the API we use in
4.8](https://github.com/microsoft/TypeScript/wiki/API-Breaking-Changes#decorators-are-placed-on-modifiers-on-typescripts-syntax-trees)
- use `styled-components` package for types instead of
`@types/styled-components`

Author: Igorbek

package.json

@@ -21,19 +21,19 @@
     },
     "typings": "dist/index.d.ts",
     "peerDependencies": {
-        "typescript": "^4.0"
+        "typescript": "~4.8 || 5"
     },
     "devDependencies": {
         "@types/jest": "^25.2.1",
         "@types/jest-specific-snapshot": "^0.5.4",
         "@types/node": "^13.1.2",
         "@types/react": "^16.7.22",
-        "@types/styled-components": "^5.1.9",
         "jest": "^24.1.0",
         "jest-specific-snapshot": "^2.0.0",
+        "styled-components": "^5.3.11",
         "ts-jest": "24.3.0",
         "ts-node": "^8.0.2",
-        "typescript": "~4.2"
+        "typescript": "~5.1"
     },
     "files": [
         "dist"

src/__tests__/baselines/minification-only/minify-css-in-helpers.ts.baseline

@@ -64,17 +64,15 @@ TypeScript after transform:
   declare const theColor: any;
   const key = keyframes \`to{transform:rotate(360deg);}\`;
   const color = css \`color:\${theColor};\`;
-  const MyRedBody = createGlobalStyle \`body{background-color:red;\${color}//\${color}
-  }\`;
+  const MyRedBody = createGlobalStyle \`body{background-color:red;\${color}//\${color}\\n}\`;
   export {};
 
 
 TypeScript after transpile module:
 
   const key = keyframes \`to{transform:rotate(360deg);}\`;
   const color = css \`color:\${theColor};\`;
-  const MyRedBody = createGlobalStyle \`body{background-color:red;\${color}//\${color}
-  }\`;
+  const MyRedBody = createGlobalStyle \`body{background-color:red;\${color}//\${color}\\n}\`;
   export {};
 
 

src/__tests__/baselines/minification-only/minify-single-line-comments-with-interpolations.ts.baseline

@@ -111,11 +111,9 @@ TypeScript after transform:
   const Test4 = styled.div \`width:100%;//\${'red'}\`;
   const Test5 = styled.div \`width:100%;//\${'red'}\${'blue'}\`;
   const Test6 = styled.div \`background:url("https://google.com");width:100%;\${'green'}//\${'red'}\${'blue'}\`;
-  const Test7 = styled.div \`background:url("https://google.com");width:\${p => p.props.width};\${'green'}//\${'red'}\${'blue'}
-  height:\${p => p.props.height};\`;
+  const Test7 = styled.div \`background:url("https://google.com");width:\${p => p.props.width};\${'green'}//\${'red'}\${'blue'}\\nheight:\${p => p.props.height};\`;
   const Test8 = styled.dev \`color:/*\${'red'}*/blue;\`;
-  const Test9 = styled.dev \`color://\${'red'}
-  blue\`;
+  const Test9 = styled.dev \`color://\${'red'}\\nblue\`;
   export {};
 
 
@@ -127,11 +125,9 @@ TypeScript after transpile module:
   const Test4 = styled.div \`width:100%;//\${'red'}\`;
   const Test5 = styled.div \`width:100%;//\${'red'}\${'blue'}\`;
   const Test6 = styled.div \`background:url("https://google.com");width:100%;\${'green'}//\${'red'}\${'blue'}\`;
-  const Test7 = styled.div \`background:url("https://google.com");width:\${p => p.props.width};\${'green'}//\${'red'}\${'blue'}
-  height:\${p => p.props.height};\`;
+  const Test7 = styled.div \`background:url("https://google.com");width:\${p => p.props.width};\${'green'}//\${'red'}\${'blue'}\\nheight:\${p => p.props.height};\`;
   const Test8 = styled.dev \`color:/*\${'red'}*/blue;\`;
-  const Test9 = styled.dev \`color://\${'red'}
-  blue\`;
+  const Test9 = styled.dev \`color://\${'red'}\\nblue\`;
   export {};
 
 

src/__tests__/baselines/minification/minify-css-in-helpers.ts.baseline

@@ -64,17 +64,15 @@ TypeScript after transform:
   declare const theColor: any;
   const key = keyframes \`to{transform:rotate(360deg);}\`;
   const color = css \`color:\${theColor};\`;
-  const MyRedBody = createGlobalStyle \`body{background-color:red;\${color}//\${color}
-  }\`;
+  const MyRedBody = createGlobalStyle \`body{background-color:red;\${color}//\${color}\\n}\`;
   export {};
 
 
 TypeScript after transpile module:
 
   const key = keyframes \`to{transform:rotate(360deg);}\`;
   const color = css \`color:\${theColor};\`;
-  const MyRedBody = createGlobalStyle \`body{background-color:red;\${color}//\${color}
-  }\`;
+  const MyRedBody = createGlobalStyle \`body{background-color:red;\${color}//\${color}\\n}\`;
   export {};
 
 

src/__tests__/baselines/minification/minify-single-line-comments-with-interpolations.ts.baseline

@@ -111,11 +111,9 @@ TypeScript after transform:
   const Test4 = styled.div.withConfig({ displayName: "Test4" }) \`width:100%;//\${'red'}\`;
   const Test5 = styled.div.withConfig({ displayName: "Test5" }) \`width:100%;//\${'red'}\${'blue'}\`;
   const Test6 = styled.div.withConfig({ displayName: "Test6" }) \`background:url("https://google.com");width:100%;\${'green'}//\${'red'}\${'blue'}\`;
-  const Test7 = styled.div.withConfig({ displayName: "Test7" }) \`background:url("https://google.com");width:\${p => p.props.width};\${'green'}//\${'red'}\${'blue'}
-  height:\${p => p.props.height};\`;
+  const Test7 = styled.div.withConfig({ displayName: "Test7" }) \`background:url("https://google.com");width:\${p => p.props.width};\${'green'}//\${'red'}\${'blue'}\\nheight:\${p => p.props.height};\`;
   const Test8 = styled.dev.withConfig({ displayName: "Test8" }) \`color:/*\${'red'}*/blue;\`;
-  const Test9 = styled.dev.withConfig({ displayName: "Test9" }) \`color://\${'red'}
-  blue\`;
+  const Test9 = styled.dev.withConfig({ displayName: "Test9" }) \`color://\${'red'}\\nblue\`;
   export {};
 
 
@@ -127,11 +125,9 @@ TypeScript after transpile module:
   const Test4 = styled.div.withConfig({ displayName: "Test4" }) \`width:100%;//\${'red'}\`;
   const Test5 = styled.div.withConfig({ displayName: "Test5" }) \`width:100%;//\${'red'}\${'blue'}\`;
   const Test6 = styled.div.withConfig({ displayName: "Test6" }) \`background:url("https://google.com");width:100%;\${'green'}//\${'red'}\${'blue'}\`;
-  const Test7 = styled.div.withConfig({ displayName: "Test7" }) \`background:url("https://google.com");width:\${p => p.props.width};\${'green'}//\${'red'}\${'blue'}
-  height:\${p => p.props.height};\`;
+  const Test7 = styled.div.withConfig({ displayName: "Test7" }) \`background:url("https://google.com");width:\${p => p.props.width};\${'green'}//\${'red'}\${'blue'}\\nheight:\${p => p.props.height};\`;
   const Test8 = styled.dev.withConfig({ displayName: "Test8" }) \`color:/*\${'red'}*/blue;\`;
-  const Test9 = styled.dev.withConfig({ displayName: "Test9" }) \`color://\${'red'}
-  blue\`;
+  const Test9 = styled.dev.withConfig({ displayName: "Test9" }) \`color://\${'red'}\\nblue\`;
   export {};
 
 

src/createTransformer.ts

@@ -261,7 +261,7 @@ export function createTransformer({
                 );
 
             const updateExportAssignmentExpression = (node: ts.ExportAssignment, expression: ts.Expression) =>
-                context.factory.updateExportAssignment(node, node.decorators, node.modifiers, expression);
+                context.factory.updateExportAssignment(node, node.modifiers, expression);
 
             const transformNode = (node: ts.Node) =>
                 isVariableDeclaration(node) && node.initializer
@@ -282,7 +282,7 @@ export function createTransformer({
 
             const visitNode: ts.Visitor = (node) => transformNode(node) || ts.visitEachChild(node, visitNode, context);
 
-            return ts.visitNode(sourceFile, visitNode);
+            return ts.visitNode(sourceFile, visitNode) as ts.SourceFile;
         };
     };