@compiled/react 0.7.0 → 0.10.0

package/src/codemods/emotion-to-compiled/emotion-to-compiled.tsx

@@ -1,249 +0,0 @@
-import core, {
-  FileInfo,
-  API,
-  Options,
-  Collection,
-  ASTPath,
-  CommentBlock,
-  ObjectPattern,
-} from 'jscodeshift';
-
-import { COMPILED_IMPORT_PATH } from '../constants';
-
-import {
-  hasImportDeclaration,
-  getImportDeclarationCollection,
-  findImportSpecifierName,
-  addCommentForUnresolvedImportSpecifiers,
-  addReactIdentifier,
-  convertDefaultImportToNamedImport,
-  replaceImportDeclaration,
-  mergeImportSpecifiersAlongWithTheirComments,
-  addCommentBefore,
-} from '../codemods-helpers';
-
-const imports = {
-  compiledStyledImportName: 'styled',
-  emotionStyledPackageName: '@emotion/styled',
-  emotionCoreJSXPragma: '@jsx jsx',
-  emotionCoreImportNames: { jsx: 'jsx', css: 'css', ClassNames: 'ClassNames' },
-  emotionCorePackageName: '@emotion/core',
-};
-
-const removeEmotionCoreJSXPragma = (j: core.JSCodeshift, collection: Collection) => {
-  const commentCollection = collection.find(j.Comment);
-
-  commentCollection.forEach((commentPath) => {
-    const commentBlockCollection = j(
-      (commentPath as unknown) as ASTPath<CommentBlock>
-    ).filter((commentBlockPath) =>
-      commentBlockPath.value.value.includes(imports.emotionCoreJSXPragma)
-    );
-
-    commentBlockCollection.forEach((commentBlockPath) => {
-      j(commentBlockPath).remove();
-
-      addReactIdentifier({ j, collection });
-    });
-  });
-};
-
-const replaceEmotionCoreCSSTaggedTemplateExpression = (
-  j: core.JSCodeshift,
-  collection: Collection
-) => {
-  const importDeclarationCollection = getImportDeclarationCollection({
-    j,
-    collection,
-    importPath: imports.emotionCorePackageName,
-  });
-  const name = findImportSpecifierName({
-    j,
-    importDeclarationCollection,
-    importName: imports.emotionCoreImportNames.css,
-  });
-
-  if (name == null) {
-    return;
-  }
-
-  collection
-    .find(j.TaggedTemplateExpression)
-    .filter((taggedTemplateExpressionPath) =>
-      j(taggedTemplateExpressionPath)
-        .find(j.Identifier)
-        .some((identifierPath) => identifierPath.node.name === name)
-    )
-    .forEach((taggedTemplateExpressionPath) => {
-      const { quasi } = taggedTemplateExpressionPath.node;
-
-      if (quasi) {
-        j(taggedTemplateExpressionPath).replaceWith([quasi]);
-      }
-    });
-};
-
-const handleClassNamesCXBehavior = (j: core.JSCodeshift, objectPattern: ObjectPattern) => {
-  const cxIdentifierName = 'cx';
-  const axIdentifierName = 'ax';
-  const compiledRuntimePackageName = `${COMPILED_IMPORT_PATH}/runtime`;
-
-  const cxObjectPropertyCollection = j(objectPattern)
-    .find(j.ObjectProperty)
-    .filter(
-      (objectPropertyPath) =>
-        objectPropertyPath.node.key.type === 'Identifier' &&
-        objectPropertyPath.node.key.name === cxIdentifierName
-    );
-
-  cxObjectPropertyCollection.forEach((cxObjectPropertyPath) => {
-    addCommentBefore({
-      j,
-      collection: j(cxObjectPropertyPath.node),
-      message: `Please replace "${cxIdentifierName}" with "${axIdentifierName}" from "${compiledRuntimePackageName}".
-      Usage: import { ${axIdentifierName} } from '${compiledRuntimePackageName}';
-
-      NOTE: Both "${cxIdentifierName}" and "${axIdentifierName}" have some differences, so we have not replaced its usage.
-      Please check the docs for "${axIdentifierName}" usage.
-
-      In future, we will expose "${axIdentifierName}" directly from "${imports.emotionCoreImportNames.ClassNames}" props.
-
-      Issue tracked on Github: https://github.com/atlassian-labs/compiled/issues/373`,
-    });
-  });
-};
-
-const handleClassNamesStyleBehavior = (j: core.JSCodeshift, objectPattern: ObjectPattern) => {
-  const styleIdentifierName = 'style';
-
-  const hasStyleObjectProperty = j(objectPattern)
-    .find(j.ObjectProperty)
-    .some(
-      (objectPropertyPath) =>
-        objectPropertyPath.node.key.type === 'Identifier' &&
-        objectPropertyPath.node.key.name === styleIdentifierName
-    );
-
-  if (!hasStyleObjectProperty) {
-    const styleObjectProperty = j.objectProperty(
-      j.identifier(styleIdentifierName),
-      j.identifier(styleIdentifierName)
-    );
-
-    objectPattern.properties.push(styleObjectProperty);
-
-    addCommentBefore({
-      j,
-      collection: j(styleObjectProperty),
-      message: `We have exported "${styleIdentifierName}" from "${imports.emotionCoreImportNames.ClassNames}" props.
-      If you are using dynamic declarations, make sure to set the "${styleIdentifierName}"
-      prop otherwise remove it.`,
-    });
-  }
-};
-
-const handleClassNamesBehavior = (j: core.JSCodeshift, collection: Collection) => {
-  const importDeclarationCollection = getImportDeclarationCollection({
-    j,
-    collection,
-    importPath: imports.emotionCorePackageName,
-  });
-  const name = findImportSpecifierName({
-    j,
-    importDeclarationCollection,
-    importName: imports.emotionCoreImportNames.ClassNames,
-  });
-
-  if (name == null) {
-    return;
-  }
-
-  collection
-    .find(j.JSXElement)
-    .filter((jsxElementPath) =>
-      j(jsxElementPath)
-        .find(j.JSXIdentifier)
-        .some((jsxIdentifierPath) => jsxIdentifierPath.node.name === name)
-    )
-    .find(j.JSXExpressionContainer)
-    .forEach((jsxExpressionContainer) => {
-      const { expression } = jsxExpressionContainer.node;
-
-      if (
-        expression.type === 'FunctionExpression' ||
-        expression.type === 'ArrowFunctionExpression'
-      ) {
-        if (expression.params.length && expression.params[0].type === 'ObjectPattern') {
-          const objectPattern = expression.params[0];
-
-          handleClassNamesStyleBehavior(j, objectPattern);
-
-          handleClassNamesCXBehavior(j, objectPattern);
-        }
-      }
-    });
-};
-
-const mergeCompiledImportSpecifiers = (j: core.JSCodeshift, collection: Collection) => {
-  const allowedCompiledNames = [
-    imports.compiledStyledImportName,
-    ...Object.values(imports.emotionCoreImportNames),
-  ].filter(
-    (name) =>
-      ![imports.emotionCoreImportNames.jsx, imports.emotionCoreImportNames.css].includes(name)
-  );
-
-  mergeImportSpecifiersAlongWithTheirComments({
-    j,
-    collection,
-    filter: (name) => !!(name && allowedCompiledNames.includes(name)),
-  });
-};
-
-const transformer = (fileInfo: FileInfo, { jscodeshift: j }: API, options: Options): string => {
-  const { source } = fileInfo;
-  const collection = j(source);
-
-  const hasEmotionCoreImportDeclaration = hasImportDeclaration({
-    j,
-    collection,
-    importPath: imports.emotionCorePackageName,
-  });
-  const hasEmotionStyledImportDeclaration = hasImportDeclaration({
-    j,
-    collection,
-    importPath: imports.emotionStyledPackageName,
-  });
-
-  if (!hasEmotionCoreImportDeclaration && !hasEmotionStyledImportDeclaration) {
-    return source;
-  }
-
-  if (hasEmotionStyledImportDeclaration) {
-    convertDefaultImportToNamedImport({
-      j,
-      collection,
-      importPath: imports.emotionStyledPackageName,
-      namedImport: imports.compiledStyledImportName,
-    });
-  }
-
-  if (hasEmotionCoreImportDeclaration) {
-    removeEmotionCoreJSXPragma(j, collection);
-    addCommentForUnresolvedImportSpecifiers({
-      j,
-      collection,
-      importPath: imports.emotionCorePackageName,
-      allowedImportSpecifierNames: Object.values(imports.emotionCoreImportNames),
-    });
-    replaceEmotionCoreCSSTaggedTemplateExpression(j, collection);
-    handleClassNamesBehavior(j, collection);
-    replaceImportDeclaration({ j, collection, importPath: imports.emotionCorePackageName });
-  }
-
-  mergeCompiledImportSpecifiers(j, collection);
-
-  return collection.toSource(options.printOptions || { quote: 'single' });
-};
-
-export default transformer;

package/src/codemods/emotion-to-compiled/index.tsx

@@ -1 +0,0 @@
-export { default } from './emotion-to-compiled';

package/src/codemods/styled-components-to-compiled/README.md

@@ -1,37 +0,0 @@
-# styled-components-to-compiled
-
-> Codemod for easy migration from styled components.
-
-## Usage
-
-```bash
-npx @compiled/cli --preset codemods
-# and follow the instructions
-```
-
-**Will modify files in place, so make sure you can recover if it goes wrong!**
-
-## Examples
-
-```javascript
-import styled from 'styled-components';
-```
-
-Is transformed to:
-
-```javascript
-import { styled } from '@compiled/react';
-```
-
-## Updating Instructions
-
-When wanting to update to a later version make sure `@compiled/cli` is being ran with the same version.
-
-> Watch out for it being cached!
-
-For example when upgrading `@compiled/react` to `v0.6.0` where you've already used the CLI,
-on your next run explicitly set the version number:
-
-```bash
-npx @compiled/cli@0.6.0 --preset codemods
-```

package/src/codemods/styled-components-to-compiled/__tests__/styled-components-to-compiled.test.tsx

@@ -1,109 +0,0 @@
-jest.disableAutomock();
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
-
-import transformer from '../styled-components-to-compiled';
-
-describe('styled-components-to-compiled transformer', () => {
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    "import styled from 'styled-components';",
-    "import { styled } from '@compiled/react';",
-    'it transforms default styled-components imports'
-  );
-
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    "import sc from 'styled-components';",
-    "import { styled as sc } from '@compiled/react';",
-    'it transforms default with different name than "styled" styled-components imports'
-  );
-
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
-    import styled from 'styled-components';
-    import * as React from 'react';
-    `,
-    `
-    import { styled } from '@compiled/react';
-    import * as React from 'react';
-    `,
-    'it ignores other imports'
-  );
-
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
-    // @top-level comment
-
-    // comment 1
-    import styled from 'styled-components';
-    // comment 2
-    import * as React from 'react';
-    `,
-    `
-    // @top-level comment
-
-    // comment 1
-    import { styled } from '@compiled/react';
-    // comment 2
-    import * as React from 'react';
-    `,
-    'it should not remove top level comments when transformed'
-  );
-
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
-    // @top-level comment
-
-    // comment 1
-    import * as React from 'react';
-    // comment 2
-    import styled from 'styled-components';
-    `,
-    `
-    // @top-level comment
-
-    // comment 1
-    import * as React from 'react';
-    // comment 2
-    import { styled } from '@compiled/react';
-    `,
-    'it should not remove comments before transformed statement when not on top'
-  );
-
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
-    import styled, { css, keyframes, createGlobalStyle, ThemeProvider, withTheme } from 'styled-components';
-    import * as React from 'react';
-    `,
-    `
-    /* TODO(@compiled/react codemod): "css" is not exported from "@compiled/react" at the moment. Please find an alternative for it. */
-    /* TODO(@compiled/react codemod): "keyframes" is not exported from "@compiled/react" at the moment. Please find an alternative for it. */
-    /* TODO(@compiled/react codemod): "createGlobalStyle" is not exported from "@compiled/react" at the moment. Please find an alternative for it. */
-    /* TODO(@compiled/react codemod): "ThemeProvider" is not exported from "@compiled/react" at the moment. Please find an alternative for it. */
-    /* TODO(@compiled/react codemod): "withTheme" is not exported from "@compiled/react" at the moment. Please find an alternative for it. */
-    import { styled } from '@compiled/react';
-    import * as React from 'react';
-    `,
-    'it adds TODO comment for imports which are not resolved'
-  );
-
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    "import * as React from 'react';",
-    "import * as React from 'react';",
-    'it should not transform when styled-components imports are not present'
-  );
-});

package/src/codemods/styled-components-to-compiled/index.tsx

@@ -1 +0,0 @@
-export { default } from './styled-components-to-compiled';

package/src/codemods/styled-components-to-compiled/styled-components-to-compiled.tsx

@@ -1,45 +0,0 @@
-import { FileInfo, API, Options } from 'jscodeshift';
-
-import {
-  hasImportDeclaration,
-  convertDefaultImportToNamedImport,
-  addCommentForUnresolvedImportSpecifiers,
-} from '../codemods-helpers';
-
-const imports = {
-  compiledStyledImportName: 'styled',
-  styledComponentsPackageName: 'styled-components',
-};
-
-const transformer = (fileInfo: FileInfo, { jscodeshift: j }: API, options: Options): string => {
-  const { source } = fileInfo;
-  const collection = j(source);
-
-  const hasStyledComponentsImportDeclaration = hasImportDeclaration({
-    j,
-    collection,
-    importPath: imports.styledComponentsPackageName,
-  });
-
-  if (!hasStyledComponentsImportDeclaration) {
-    return source;
-  }
-
-  addCommentForUnresolvedImportSpecifiers({
-    j,
-    collection,
-    importPath: imports.styledComponentsPackageName,
-    allowedImportSpecifierNames: [],
-  });
-
-  convertDefaultImportToNamedImport({
-    j,
-    collection,
-    importPath: imports.styledComponentsPackageName,
-    namedImport: imports.compiledStyledImportName,
-  });
-
-  return collection.toSource(options.printOptions || { quote: 'single' });
-};
-
-export default transformer;