@teleporthq/teleport-project-plugin-styled-components 0.21.9

package/src/next.ts

@@ -0,0 +1,96 @@
+import {
+  FileType,
+  ProjectPluginStructure,
+  ReactNativeStyleVariation,
+} from '@teleporthq/teleport-types'
+import { createStyleSheetPlugin } from '@teleporthq/teleport-plugin-react-styled-components'
+import importStatementsPlugin from '@teleporthq/teleport-plugin-import-statements'
+import prettierJS from '@teleporthq/teleport-postprocessor-prettier-js'
+import MagicString from 'magic-string'
+import { STYLED_DEPENDENCIES } from './constant'
+
+export const nextBeforeModifier = async (structure: ProjectPluginStructure) => {
+  const { strategy } = structure
+
+  if (strategy.id !== 'teleport-project-next') {
+    throw new Error('Plugin can be used only with teleport-project-next')
+  }
+
+  strategy.style = ReactNativeStyleVariation.StyledComponents
+  if (strategy?.projectStyleSheet?.generator) {
+    strategy.projectStyleSheet.plugins = [createStyleSheetPlugin(), importStatementsPlugin]
+    strategy.projectStyleSheet.postprocessors = [prettierJS]
+    strategy.framework.config.isGlobalStylesDependent = false
+  }
+}
+
+export const nextAfterModifier = async (structure: ProjectPluginStructure) => {
+  const { files, dependencies } = structure
+
+  if (!files.get('entry')) {
+    throw new Error(`Entry File is missing from the generated project, _document file not found`)
+  }
+
+  const fileContent = files.get('entry').files[0].content
+  const magicString = new MagicString(fileContent.replace('/n', '//n'))
+
+  magicString.appendRight(70, `\nimport { ServerStyleSheet } from 'styled-components' \n`)
+  magicString.appendRight(
+    114,
+    `\nstatic getInitialProps({ renderPage }) {
+  const sheet = new ServerStyleSheet();
+  const page = renderPage((App) => (props) =>
+    sheet.collectStyles(<App {...props} />),
+  );
+  const styleTags = sheet.getStyleElement();
+  
+  return { ...page, styleTags };
+  }\n\n`
+  )
+  magicString.appendRight(175, `\n{this.props.styleTags}`)
+
+  const formattedCode = prettierJS({
+    [FileType.JS]: magicString.toString(),
+  })
+
+  const babelRc = `{
+    "presets": [
+      "next/babel"
+    ],
+    "plugins": [
+      [
+        "styled-components",
+        {
+          "ssr": true,
+          "displayName": true,
+          "preprocess": false
+        }
+      ]
+    ]
+  }`
+
+  files.set('entry', {
+    path: ['pages'],
+    files: [
+      {
+        name: '_document',
+        fileType: FileType.JS,
+        content: formattedCode[FileType.JS],
+      },
+    ],
+  })
+
+  files.set('.babelrc', {
+    path: [],
+    files: [
+      {
+        name: '.babelrc',
+        content: babelRc,
+      },
+    ],
+  })
+
+  Object.keys(STYLED_DEPENDENCIES).forEach((dep: string) => {
+    dependencies[dep] = STYLED_DEPENDENCIES[dep]
+  })
+}

package/src/react.ts

@@ -0,0 +1,31 @@
+import { ProjectPluginStructure, ReactStyleVariation } from '@teleporthq/teleport-types'
+import {
+  createStyleSheetPlugin,
+  createReactStyledComponentsPlugin,
+} from '@teleporthq/teleport-plugin-react-styled-components'
+import importStatementsPlugin from '@teleporthq/teleport-plugin-import-statements'
+import reactAppRoutingPlugin from '@teleporthq/teleport-plugin-react-app-routing'
+import { STYLED_DEPENDENCIES } from './constant'
+
+export const reactBeforeModifier = async (structure: ProjectPluginStructure) => {
+  const { strategy } = structure
+
+  strategy.style = ReactStyleVariation.StyledComponents
+  if (strategy?.projectStyleSheet?.generator) {
+    strategy.projectStyleSheet.plugins = [createStyleSheetPlugin(), importStatementsPlugin]
+    strategy.router = {
+      ...strategy.router,
+      plugins: [createReactStyledComponentsPlugin(), reactAppRoutingPlugin, importStatementsPlugin],
+    }
+    if (strategy.framework?.config) {
+      strategy.framework.config.isGlobalStylesDependent = false
+    }
+  }
+}
+
+export const reactAfterModifier = async (structure: ProjectPluginStructure) => {
+  const { dependencies } = structure
+  Object.keys(STYLED_DEPENDENCIES).forEach((dep: string) => {
+    dependencies[dep] = STYLED_DEPENDENCIES[dep]
+  })
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist/esm"
+  },
+  "include": [
+    "./src"
+  ]
+}