New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@compiled/codemods

Package Overview
Dependencies
Maintainers
4
Versions
22
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@compiled/codemods - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

5

dist/plugins/default.js

@@ -11,5 +11,8 @@ "use strict";

var compiledImportPath = _a.compiledImportPath, currentNode = _a.currentNode, specifiers = _a.specifiers;
if (specifiers.length === 0) {
return null;
}
var newImport = j.importDeclaration(specifiers, j.literal(compiledImportPath));
// Copy the comments from the previous import to the new one
newImport.comments = currentNode.comments;
newImport.comments = currentNode === null || currentNode === void 0 ? void 0 : currentNode.comments;
return newImport;

@@ -16,0 +19,0 @@ },

6

dist/plugins/types.d.ts
import type { API, FileInfo, ImportDeclaration, ImportSpecifier, JSXAttribute, JSXSpreadAttribute, Options, Program, VariableDeclaration, ASTPath, TaggedTemplateExpression, ArrowFunctionExpression } from 'jscodeshift';
declare type ValidateConfig<T, Struct> = T extends Struct ? Exclude<keyof T, keyof Struct> extends never ? T : never : never;
export declare type BuildImportContext<T> = ValidateConfig<T, {
originalNode: ImportDeclaration;
currentNode: ImportDeclaration;
originalNode: ImportDeclaration | null;
currentNode: ImportDeclaration | null;
specifiers: ImportSpecifier[];

@@ -33,3 +33,3 @@ compiledImportPath: string;

*/
buildImport?<T>(context: BuildImportContext<T>): ImportDeclaration;
buildImport?<T>(context: BuildImportContext<T>): ImportDeclaration | null;
/**

@@ -36,0 +36,0 @@ * Build the compiled import replacing the existing import

@@ -194,8 +194,2 @@ "use strict";

if (hasEmotionCoreImportDeclaration) {
(0, utils_1.addCommentForUnresolvedImportSpecifiers)({
j: j,
collection: collection,
importPath: imports.emotionCorePackageName,
allowedImportSpecifierNames: Object.values(imports.emotionCoreReactImportNames),
});
replaceEmotionCoreCSSTaggedTemplateExpression(j, collection, imports.emotionCorePackageName);

@@ -213,8 +207,2 @@ handleClassNamesBehavior(j, collection, imports.emotionCorePackageName);

if (hasEmotionReactImportDeclaration) {
(0, utils_1.addCommentForUnresolvedImportSpecifiers)({
j: j,
collection: collection,
importPath: imports.emotionReactPackageName,
allowedImportSpecifierNames: Object.values(imports.emotionCoreReactImportNames),
});
replaceEmotionCoreCSSTaggedTemplateExpression(j, collection, imports.emotionReactPackageName);

@@ -221,0 +209,0 @@ handleClassNamesBehavior(j, collection, imports.emotionReactPackageName);

@@ -37,8 +37,2 @@ "use strict";

}
(0, utils_1.addCommentForUnresolvedImportSpecifiers)({
j: j,
collection: collection,
importPath: imports.styledComponentsPackageName,
allowedImportSpecifierNames: imports.styledComponentsSupportedImportNames,
});
(0, utils_1.convertMixedImportToNamedImport)({

@@ -45,0 +39,0 @@ j: j,

@@ -1,2 +0,2 @@

import type { Collection, JSCodeshift, Node, Program } from 'jscodeshift';
import type { Collection, JSCodeshift, Program } from 'jscodeshift';
export declare const addCommentBefore: ({ j, collection, message, }: {

@@ -7,7 +7,1 @@ j: JSCodeshift;

}) => void;
export declare const addCommentForUnresolvedImportSpecifiers: ({ j, collection, importPath, allowedImportSpecifierNames, }: {
j: JSCodeshift;
collection: Collection<Node>;
importPath: string;
allowedImportSpecifierNames: string[];
}) => void;
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.addCommentForUnresolvedImportSpecifiers = exports.addCommentBefore = void 0;
exports.addCommentBefore = void 0;
var constants_1 = require("../constants");
var import_declarations_1 = require("./import-declarations");
// not replacing newlines (which \s does)

@@ -30,43 +29,2 @@ var spacesAndTabs = /[ \t]{2,}/g;

exports.addCommentBefore = addCommentBefore;
var getAllImportSpecifiers = function (_a) {
var j = _a.j, importDeclarationCollection = _a.importDeclarationCollection;
var importSpecifiersImportedNodes = [];
importDeclarationCollection.find(j.ImportSpecifier).forEach(function (importSpecifierPath) {
var node = importSpecifierPath.node.imported;
if (node) {
importSpecifiersImportedNodes.push(node);
}
});
return importSpecifiersImportedNodes;
};
var addCommentToStartOfFile = function (_a) {
var j = _a.j, collection = _a.collection, message = _a.message;
(0, exports.addCommentBefore)({
j: j,
collection: collection.find(j.Program),
message: message,
});
};
var addCommentForUnresolvedImportSpecifiers = function (_a) {
var j = _a.j, collection = _a.collection, importPath = _a.importPath, allowedImportSpecifierNames = _a.allowedImportSpecifierNames;
var importDeclarationCollection = (0, import_declarations_1.getImportDeclarationCollection)({
j: j,
collection: collection,
importPath: importPath,
});
var importSpecifiers = getAllImportSpecifiers({
j: j,
importDeclarationCollection: importDeclarationCollection,
});
importSpecifiers
.filter(function (identifierPath) { return !allowedImportSpecifierNames.includes(identifierPath.name); })
.forEach(function (importSpecifierPath) {
addCommentToStartOfFile({
j: j,
collection: collection,
message: "\"".concat(importSpecifierPath.name, "\" is not exported from \"").concat(constants_1.COMPILED_IMPORT_PATH, "\" at the moment. Please find an alternative for it."),
});
});
};
exports.addCommentForUnresolvedImportSpecifiers = addCommentForUnresolvedImportSpecifiers;
//# sourceMappingURL=add-comment.js.map

@@ -68,2 +68,3 @@ "use strict";

importDeclarationCollection.forEach(function (importDeclarationPath) {
var _a, _b;
var newSpecifiers = (importDeclarationPath.node.specifiers || [])

@@ -102,3 +103,12 @@ .map(function (specifier) {

});
j(importDeclarationPath).replaceWith(newImport);
// Remove all moved import specifiers from the original import
importDeclarationPath.node.specifiers = (_a = importDeclarationPath.node.specifiers) === null || _a === void 0 ? void 0 : _a.filter(function (specifier) {
var _a;
return specifier.type !== 'ImportDefaultSpecifier' &&
!(specifier.type === 'ImportSpecifier' &&
allowedImportSpecifierNames.includes((_a = specifier === null || specifier === void 0 ? void 0 : specifier.imported) === null || _a === void 0 ? void 0 : _a.name));
});
j(importDeclarationPath).insertAfter(newImport);
if (((_b = importDeclarationPath.node.specifiers) === null || _b === void 0 ? void 0 : _b.length) === 0)
j(importDeclarationPath).remove();
});

@@ -105,0 +115,0 @@ };

@@ -1,2 +0,2 @@

export { addCommentBefore, addCommentForUnresolvedImportSpecifiers } from './add-comment';
export { addCommentBefore } from './add-comment';
export { applyVisitor } from './apply-visitor';

@@ -3,0 +3,0 @@ export { convertDefaultImportToNamedImport, convertMixedImportToNamedImport, } from './convert-to-named-import';

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.withPlugin = exports.hasImportDeclaration = exports.getImportDeclarationCollection = exports.convertMixedImportToNamedImport = exports.convertDefaultImportToNamedImport = exports.applyVisitor = exports.addCommentForUnresolvedImportSpecifiers = exports.addCommentBefore = void 0;
exports.withPlugin = exports.hasImportDeclaration = exports.getImportDeclarationCollection = exports.convertMixedImportToNamedImport = exports.convertDefaultImportToNamedImport = exports.applyVisitor = exports.addCommentBefore = void 0;
var add_comment_1 = require("./add-comment");
Object.defineProperty(exports, "addCommentBefore", { enumerable: true, get: function () { return add_comment_1.addCommentBefore; } });
Object.defineProperty(exports, "addCommentForUnresolvedImportSpecifiers", { enumerable: true, get: function () { return add_comment_1.addCommentForUnresolvedImportSpecifiers; } });
var apply_visitor_1 = require("./apply-visitor");

@@ -8,0 +7,0 @@ Object.defineProperty(exports, "applyVisitor", { enumerable: true, get: function () { return apply_visitor_1.applyVisitor; } });

{
"name": "@compiled/codemods",
"version": "0.6.0",
"version": "0.7.0",
"description": "A familiar and performant compile time CSS-in-JS library for React.",

@@ -35,3 +35,3 @@ "keywords": [

"chalk": "^4.1.2",
"jscodeshift": "^0.13.1"
"jscodeshift": "^0.14.0"
},

@@ -38,0 +38,0 @@ "devDependencies": {

@@ -5,2 +5,14 @@ # codemods

## Usage
Codemods in this repository can be run with the [CodeshiftCommunity](https://www.codeshiftcommunity.com/docs/) tooling.
```bash
# Transform single file
npx @codeshift/cli --packages @compiled/codemods /Project/path/to/file
# Transform multiple files
npx @codeshift/cli --packages @compiled/codemods /Project/**/*.tsx
```
## Available codemods

@@ -10,2 +22,3 @@

2. [emotion-to-compiled](./src/transforms/emotion-to-compiled)
3. [styled-components-inner-ref-to-ref](./src/transforms/styled-components-inner-ref-to-ref)

@@ -12,0 +25,0 @@ ## Plugins

@@ -10,6 +10,10 @@ import type { JSXAttribute } from 'jscodeshift';

buildImport({ compiledImportPath, currentNode, specifiers }) {
if (specifiers.length === 0) {
return null;
}
const newImport = j.importDeclaration(specifiers, j.literal(compiledImportPath));
// Copy the comments from the previous import to the new one
newImport.comments = currentNode.comments;
newImport.comments = currentNode?.comments;

@@ -16,0 +20,0 @@ return newImport;

@@ -27,5 +27,5 @@ import type {

// The original import node in the source code
originalNode: ImportDeclaration;
originalNode: ImportDeclaration | null;
// The existing import node that will be replaced
currentNode: ImportDeclaration;
currentNode: ImportDeclaration | null;
// The specifiers to include in the new import declaration

@@ -82,3 +82,3 @@ specifiers: ImportSpecifier[];

*/
buildImport?<T>(context: BuildImportContext<T>): ImportDeclaration;
buildImport?<T>(context: BuildImportContext<T>): ImportDeclaration | null;

@@ -85,0 +85,0 @@ /**

@@ -398,4 +398,5 @@ import type { API, FileInfo } from 'jscodeshift';

`
/* TODO(@compiled/react codemod): "CSSObject" is not exported from "@compiled/react" at the moment. Please find an alternative for it. */
import * as React from 'react';
import { CSSObject } from '@emotion/core';
import { ClassNames, css as c } from '@compiled/react';

@@ -428,3 +429,3 @@

`,
'it adds TODO comment for imports which are not resolved'
'it preserves imports which are not resolved'
);

@@ -444,5 +445,8 @@

`
/* TODO(@compiled/react codemod): "CSSObject" is not exported from "@compiled/react" at the moment. Please find an alternative for it. */
// @top-level comment
import { CSSObject } from '@emotion/core';
// @top-level comment
import { ClassNames, css as c } from '@compiled/react';

@@ -468,6 +472,7 @@

`
/* TODO(@compiled/react codemod): "CSSObject" is not exported from "@compiled/react" at the moment. Please find an alternative for it. */
// @top-level comment
import * as React from 'react';
// comment 1
import { CSSObject } from '@emotion/core';

@@ -474,0 +479,0 @@ // comment 1

@@ -18,3 +18,2 @@ import type {

addCommentBefore,
addCommentForUnresolvedImportSpecifiers,
applyVisitor,

@@ -269,8 +268,2 @@ convertDefaultImportToNamedImport,

if (hasEmotionCoreImportDeclaration) {
addCommentForUnresolvedImportSpecifiers({
j,
collection,
importPath: imports.emotionCorePackageName,
allowedImportSpecifierNames: Object.values(imports.emotionCoreReactImportNames),
});
replaceEmotionCoreCSSTaggedTemplateExpression(j, collection, imports.emotionCorePackageName);

@@ -289,8 +282,2 @@ handleClassNamesBehavior(j, collection, imports.emotionCorePackageName);

if (hasEmotionReactImportDeclaration) {
addCommentForUnresolvedImportSpecifiers({
j,
collection,
importPath: imports.emotionReactPackageName,
allowedImportSpecifierNames: Object.values(imports.emotionCoreReactImportNames),
});
replaceEmotionCoreCSSTaggedTemplateExpression(j, collection, imports.emotionReactPackageName);

@@ -297,0 +284,0 @@ handleClassNamesBehavior(j, collection, imports.emotionReactPackageName);

@@ -7,5 +7,10 @@ # emotion-to-compiled

Codemods in this repository can be run with the [CodeshiftCommunity](https://www.codeshiftcommunity.com/docs/) tooling.
```bash
npx @compiled/cli --preset codemods
# and follow the instructions
# Transform single file
npx @codeshift/cli --packages "@compiled/codemods#emotion-to-compiled" /Project/path/to/file
# Transform multiple files
npx @codeshift/cli --packages "@compiled/codemods#emotion-to-compiled" /Project/**/*.tsx
```

@@ -61,13 +66,16 @@

## Updating Instructions
## Gotchas
When wanting to update to a later version make sure `@compiled/cli` is being ran with the same version.
Some imports from Emotion are unsupported in Compiled. These imports will not be migrated by the codemod and will need to be manually removed.
> Watch out for it being cached!
Example:
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:
```javascript
// Before
import { ClassNames, CSSObject, css as c, jsx } from '@emotion/core';
```bash
npx @compiled/cli@0.6.0 --preset codemods
// After
import { CSSObject } from '@emotion/core';
import { ClassNames, css as c } from '@compiled/react';
```

@@ -7,5 +7,10 @@ # styled-components-inner-ref-to-ref

Codemods in this repository can be run with the [CodeshiftCommunity](https://www.codeshiftcommunity.com/docs/) tooling.
```bash
npx @compiled/cli --preset codemods
# and follow the instructions
# Transform single file
npx @codeshift/cli --packages "@compiled/codemods#styled-components-inner-ref-to-ref" /Project/path/to/file
# Transform multiple files
npx @codeshift/cli --packages "@compiled/codemods#styled-components-inner-ref-to-ref" /Project/**/*.tsx
```

@@ -26,14 +31,1 @@

```
## 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
```

@@ -142,9 +142,7 @@ import type { API, FileInfo } from 'jscodeshift';

`
/* 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 { createGlobalStyle, ThemeProvider, withTheme } from 'styled-components';
import { css, keyframes, styled } from '@compiled/react';
import * as React from 'react';
`,
'it adds TODO comment for imports which are not resolved'
'it leaves imports alone which are not resolved'
);

@@ -155,17 +153,2 @@

{ plugins: [] },
`
import { multiple, unsupported, imports } from 'styled-components';
`,
`
/* TODO(@compiled/react codemod): "multiple" is not exported from "@compiled/react" at the moment. Please find an alternative for it. */
/* TODO(@compiled/react codemod): "unsupported" is not exported from "@compiled/react" at the moment. Please find an alternative for it. */
/* TODO(@compiled/react codemod): "imports" is not exported from "@compiled/react" at the moment. Please find an alternative for it. */
import '@compiled/react';
`,
'it properly handles import statements with no supported imports'
);
defineInlineTest(
{ default: transformer, parser: 'tsx' },
{ plugins: [] },
"import * as React from 'react';",

@@ -172,0 +155,0 @@ "import * as React from 'react';",

@@ -6,3 +6,2 @@ import type { API, FileInfo, Options, Program, TaggedTemplateExpression } from 'jscodeshift';

import {
addCommentForUnresolvedImportSpecifiers,
applyVisitor,

@@ -46,9 +45,2 @@ convertMixedImportToNamedImport,

addCommentForUnresolvedImportSpecifiers({
j,
collection,
importPath: imports.styledComponentsPackageName,
allowedImportSpecifierNames: imports.styledComponentsSupportedImportNames,
});
convertMixedImportToNamedImport({

@@ -55,0 +47,0 @@ j,

@@ -7,5 +7,10 @@ # styled-components-to-compiled

Codemods in this repository can be run with the [CodeshiftCommunity](https://www.codeshiftcommunity.com/docs/) tooling.
```bash
npx @compiled/cli --preset codemods
# and follow the instructions
# Transform single file
npx @codeshift/cli --packages "@compiled/codemods#styled-components-to-compiled" /Project/path/to/file
# Transform multiple files
npx @codeshift/cli --packages "@compiled/codemods#styled-components-to-compiled" /Project/**/*.tsx
```

@@ -27,22 +32,28 @@

## Updating Instructions
## Gotchas
When wanting to update to a later version make sure `@compiled/cli` is being ran with the same version.
### Unresolved imports
> Watch out for it being cached!
Some imports from styled components are unsupported in Compiled. These imports will not be migrated by the codemod and will need to be manually removed.
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:
```javascript
// Before
import styled, {
css,
keyframes,
createGlobalStyle,
ThemeProvider,
withTheme,
} from 'styled-components';
```bash
npx @compiled/cli@0.6.0 --preset codemods
// After
import { createGlobalStyle, ThemeProvider, withTheme } from 'styled-components';
import { css, keyframes, styled } from '@compiled/react';
```
## Gotchas
### Spread properties
`styled.div.attrs` spread properties are not supported.
_Example_
```
```javascript
styled.div.attrs({

@@ -49,0 +60,0 @@ style: ({ left, ...props }) => {

@@ -1,18 +0,5 @@

import type {
Collection,
ImportDeclaration,
JSCodeshift,
Node,
Program,
Identifier,
JSXIdentifier,
TSTypeParameter,
} from 'jscodeshift';
import type { Collection, JSCodeshift, Program } from 'jscodeshift';
import { COMPILED_IMPORT_PATH } from '../constants';
import { getImportDeclarationCollection } from './import-declarations';
type Identifiers = (Identifier | JSXIdentifier | TSTypeParameter)[];
// not replacing newlines (which \s does)

@@ -52,71 +39,1 @@ const spacesAndTabs = /[ \t]{2,}/g;

};
const getAllImportSpecifiers = ({
j,
importDeclarationCollection,
}: {
j: JSCodeshift;
importDeclarationCollection: Collection<ImportDeclaration>;
}): Identifiers => {
const importSpecifiersImportedNodes: Identifiers = [];
importDeclarationCollection.find(j.ImportSpecifier).forEach((importSpecifierPath) => {
const node = importSpecifierPath.node.imported;
if (node) {
importSpecifiersImportedNodes.push(node);
}
});
return importSpecifiersImportedNodes;
};
const addCommentToStartOfFile = ({
j,
collection,
message,
}: {
j: JSCodeshift;
collection: Collection<Node>;
message: string;
}): void => {
addCommentBefore({
j,
collection: collection.find(j.Program),
message,
});
};
export const addCommentForUnresolvedImportSpecifiers = ({
j,
collection,
importPath,
allowedImportSpecifierNames,
}: {
j: JSCodeshift;
collection: Collection<Node>;
importPath: string;
allowedImportSpecifierNames: string[];
}): void => {
const importDeclarationCollection: Collection<ImportDeclaration> = getImportDeclarationCollection(
{
j,
collection,
importPath,
}
);
const importSpecifiers: Identifiers = getAllImportSpecifiers({
j,
importDeclarationCollection,
});
importSpecifiers
.filter((identifierPath) => !allowedImportSpecifierNames.includes(identifierPath.name))
.forEach((importSpecifierPath) => {
addCommentToStartOfFile({
j,
collection,
message: `"${importSpecifierPath.name}" is not exported from "${COMPILED_IMPORT_PATH}" at the moment. Please find an alternative for it.`,
});
});
};

@@ -20,3 +20,3 @@ import type {

plugins: CodemodPluginInstance[];
originalNode: ImportDeclaration;
originalNode: ImportDeclaration | null;
specifiers: ImportSpecifier[];

@@ -165,4 +165,16 @@ }) =>

j(importDeclarationPath).replaceWith(newImport);
// Remove all moved import specifiers from the original import
importDeclarationPath.node.specifiers = importDeclarationPath.node.specifiers?.filter(
(specifier) =>
specifier.type !== 'ImportDefaultSpecifier' &&
!(
specifier.type === 'ImportSpecifier' &&
allowedImportSpecifierNames.includes(specifier?.imported?.name)
)
);
j(importDeclarationPath).insertAfter(newImport);
if (importDeclarationPath.node.specifiers?.length === 0) j(importDeclarationPath).remove();
});
};

@@ -1,2 +0,2 @@

export { addCommentBefore, addCommentForUnresolvedImportSpecifiers } from './add-comment';
export { addCommentBefore } from './add-comment';
export { applyVisitor } from './apply-visitor';

@@ -3,0 +3,0 @@ export {

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc