{"bugs":{"url":"https://github.com/Igorbek/typescript-plugin-styled-components/issues"},"dist":{"shasum":"bb92cf4e06ac465cf74ede9fb7e3f51fd1a2fe53","tarball":"https://registry.npmjs.org/typescript-plugin-styled-components/-/typescript-plugin-styled-components-1.1.0-rc.tgz","fileCount":15,"integrity":"sha512-eXZvrPJA2bG5uk31p6+exTMzjndloO4Amahfy9/dstFdTR76kqXhRpW9H+TA2K2ApHoLUr3dI7Kds+RZnOcX9Q==","signatures":[{"sig":"MEQCIFXmZBanGFM75HbK3PwacXmqs7Hx1oqBki8iQp6Gk7hcAiBvF5kJ1+SYiJbMxpoZ8Fec147D7GdvfhH6TOQORp7sVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb9mJNCRA9TVsSAnZWagAAu10P/3ExoUBFLAUYE4YzUG1U\nzmDUuZioF+78NrUxGKUMQs2B1S34yVsBJiasHcueoMiiqSeELejvD6Y5nwrf\nTQx1FvqAdI3IsvAKbzcFbO6TR0Nh8BoFDPZ7hKBbWr4Rp4n1czknIpZqImHS\nqIpLF6oL+DTj3eEPwRQ7FxS8HNr1V2YrZSEB7lhTpdlpxP37POwWj5njg8Kk\n/b/9nMN4UJsiH3Qw899J6gZe7rfayirAI61JQHZgbjjoO+u12UEO4e26Dzct\nkAX7OZyDQlPNau3lxXBqPH9YZvIdWxfz/dL1/WcmzlOyznoRgV2TcqMhUis9\nkaMqE/Y7aGaNO5SYc9b6rhtz6lYoYc5SplME/QT2Etq8zaa/VmCb+/dPdUBJ\nWSc72JYubs5wefGHFGOSr+9VGhYjbbKtFHX1yjESrEwXPqPo1o5OyfJL+VRz\nzhw81U9QT0FHBYJ6RMgxCXZrVE579EKSzo5af7d1w9O8USWol8NEk9bqhjpW\n1oNrUpeDoaExrZ57Sj+yj8QwVzA5yhKUmzOQeM+4Ol90/VDQ7zGNDysOcTT9\nlTAPExZhxfgVsof9F2xzw97BkxOIyEC0RxkxEJXgH1Umu0KC1F0cmlAwwazj\nzURrTzUDxp3/+m3P8qjPWB+1F3bjFlz5+XkF3Vme9J+cPICA7Sj+G49Xt9Hk\nboLn\r\n=O1Aj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","name":"typescript-plugin-styled-components","_from":"file:/home/vsts/work/r1/a/artifact/drop/package.tgz","author":{"name":"Igor Oleinikov","email":"igor@oleinikov.ru"},"readme":"# `typescript-plugin-styled-components`\n\nThis is a TypeScript transformer that improves development experience of [`styled-components`](https://www.styled-components.com/).\n\nThe main purpose is to provide compile-time information of creates styled components, such as names of these components, for the run-time, allowing to operate with proper names of such the components.\n\nThe plugin was mostly inspired by great Babel's plugin [`babel-plugin-styled-components`](https://github.com/styled-components/babel-plugin-styled-components) and partially provides similar functionality for TypeScript users.\n\nIf you like it, consider [![Buy me a coffee](https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png)](https://www.buymeacoffee.com/igorbek)\n\n# Installation\n\nThe following command adds the packages to the project as a development-time dependency:\n\n<pre><code><strong>yarn</strong> add <em>typescript-plugin-styled-components</em> --dev</code></pre>\n\n\n# Integration with `Webpack`\n\nThis section describes how to integrate the plugin into the build/bundling process driven by [**Webpack**](https://webpack.js.org/) and its TypeScript loaders.\n\nThere are two popular TypeScript loaders that support specifying custom transformers:\n\n- [**awesome-typescript-loader**](https://github.com/s-panferov/awesome-typescript-loader), supports custom transformers since v3.1.3\n- [**ts-loader**](https://github.com/TypeStrong/ts-loader), supports custom transformers since v2.2.0\n\nBoth loaders use the same setting `getCustomTransformers` which is an optional function that returns `{ before?: Transformer[], after?: Transformer[] }`.\nIn order to inject the transformer into compilation, add it to `before` transformers array, like: `{ before: [styledComponentsTransformer] }`.\n\n## `awesome-typescript-loader`\n\nIn the `webpack.config.js` file in the section where **awesome-typescript-loader** is configured as a loader:\n\n```js\n// 1. import default from the plugin module\nconst createStyledComponentsTransformer = require('typescript-plugin-styled-components').default;\n\n// 2. create a transformer;\n// the factory additionally accepts an options object which described below\nconst styledComponentsTransformer = createStyledComponentsTransformer();\n\n// 3. add getCustomTransformer method to the loader config\nvar config = {\n    ...\n    module: {\n        rules: [\n            {\n                test: /\\.tsx?$/,\n                loader: 'awesome-typescript-loader',\n                options: {\n                    ... // other loader's options\n                    getCustomTransformers: () => ({ before: [styledComponentsTransformer] })\n                }\n            }\n        ]\n    }\n    ...\n};\n```\n\nPlease note, that in the development mode, `awesome-typescript-loader` uses multiple separate processes to speed up compilation. In that mode the above configuration cannot work because functions, which `getCustomTransformers` is, are not transferrable between processes.\nTo solve this please refer to [Forked process configuration](#forked-process-configuration) section.\n\n## `ts-loader`\n\nIn the `webpack.config.js` file in the section where **ts-loader** is configured as a loader:\n\n```js\n// 1. import default from the plugin module\nconst createStyledComponentsTransformer = require('typescript-plugin-styled-components').default;\n\n// 2. create a transformer;\n// the factory additionally accepts an options object which described below\nconst styledComponentsTransformer = createStyledComponentsTransformer();\n\n// 3. add getCustomTransformer method to the loader config\nvar config = {\n    ...\n    module: {\n        rules: [\n            {\n                test: /\\.tsx?$/,\n                loader: 'ts-loader',\n                options: {\n                    ... // other loader's options\n                    getCustomTransformers: () => ({ before: [styledComponentsTransformer] })\n                }\n            }\n        ]\n    }\n    ...\n};\n```\n\nPlease note, when `awesome-typescript-loader` is used with `HappyPack` or `thread-loader`, they use multiple separate processes to speed up compilation. In that mode the above configuration cannot work because functions, which `getCustomTransformers` is, are not transferrable between processes.\nTo solve this please refer to [Forked process configuration](#forked-process-configuration) section.\n\n## Forked process configuration\n\nTo configure the transformer for development mode in `awesome-typescript-loader` or `ts-loader` with `HappyPack` or `thread-loader`, you need to make `getCustomTransformers` a resolvoble module name instead of the function. Since the configuration is very similar, here's an example:\n\n### 1. Move `styledComponentsTransformer` into a separate file\n\nLet's assume it is in the same folder as your `webpack.config` and has name `webpack.ts-transformers.js`:\n```js\n// 1. import default from the plugin module\nconst createStyledComponentsTransformer = require('typescript-plugin-styled-components').default;\n\n// 2. create a transformer;\n// the factory additionally accepts an options object which described below\nconst styledComponentsTransformer = createStyledComponentsTransformer();\n\n// 3. create getCustomTransformer function\nconst getCustomTransformers = () => ({ before: [styledComponentsTransformer] });\n\n// 4. export getCustomTransformers\nmodule.exports = getCustomTransformers;\n```\n\n### 2. Change the loader's options to point to that file instead of explicit function\n\n```diff\n-const createStyledComponentsTransformer = require('typescript-plugin-styled-components').default;\n-const styledComponentsTransformer = createStyledComponentsTransformer();\n\noptions: {\n    ... // other loader's options\n-    getCustomTransformers: () => ({ before: [styledComponentsTransformer] })\n+    getCustomTransformers: path.join(__dirname, './webpack.ts-transformers.js')\n}\n```\n\n# API\n\n## `createTransformer`\n\n```ts\nfunction createTransformer(options?: Partial<Options>): TransformerFactory<SourceFile>;\n```\n\nA factory that creates an instance of a TypeScript transformer (which is a factory itself).\n\nIt allows to optionally pass options that allow to tweak transformer's behavior. See `Options` for details.\n\n## `Options`\n\n```ts\ninterface Options {\n    getDisplayName(filename: string, bindingName: string | undefined): string | undefined;\n    identifiers: CustomStyledIdentifiers;\n    ssr: boolean;\n    displayName: boolean;\n}\n```\n\n### `getDisplayName`\n\nThis method is used to determine component display name from filename and its binding name.\n\n`filename` is the file name, relative to the project base directory, of the file where the styled component defined.\n\n`bindingName` is the name that is used in the source code to bind the component. It can be `null` if the component was not bound or assigned.\n\nDefault strategy is to use `bindingName` if it's defined and use inference algorithm from `filename` otherwise.\n\nSample:\n```js\nfunction getStyledComponentDisplay(filename, bindingName) {\n    return bindingName || makePascalCase(filename);\n}\n```\n\n### `ssr`\n\nBy adding a unique identifier to every styled component, this plugin avoids checksum mismatches\ndue to different class generation on the client and on the server.\n\nThis option allows to disable component id generation by setting it to `false`.\n\nDefault value is `true` which means that component id is being injected.\n\n### `displayName`\n\nThis option enhances the attached CSS class name on each component with richer output\nto help identify your components in the DOM without React DevTools.\n\nIt also adds allows you to see the component's `displayName` in React DevTools.\n\nTo disable `displayName` generation set this option to `false`\n\nDefault value is `true` which means that display name is being injected.\n\n### `identifiers`\n\nThis option allows to customize identifiers used by `styled-components` API functions.\n\n> **Warning**. By providing custom identifiers, predefined ones are not added automatically.\n> Make sure you add standard APIs in case you meant to use them.\n\n```ts\ninterface CustomStyledIdentifiers {\n    styled: string[];\n    attrs: string[];\n}\n```\n\n- `styled` - list of identifiers of `styled` API (default `['styled'])\n- `attrs` - list of identifiers of `attrs` API (default `['attrs'])\n\nExample\n\n```ts\nconst styledComponentsTransformer = createStyledComponentsTransformer({\n    identifiers: {\n        styled: ['styled', 'typedStyled'] // typedStyled is an additional identifier of styled API\n    }\n});\n```\n\n# Notes\n\nTechnically, `typescript-plugin-styled-components` is not a TypeScript plugin, since it is only exposed as a TypeScript transformer.\n","license":"MIT","scripts":{"test":"yarn test:baselines","build":"tsc","runner":"ts-node ./src/runner.ts","build:prod":"tsc --sourceMap false","test:watch":"yarn test:baselines -- --watch","test:baselines":"jest --config ./jest.config.json"},"typings":"dist/index.d.ts","_npmUser":{"name":"igorbek","email":"igor@oleinikov.ru"},"homepage":"https://github.com/Igorbek/typescript-plugin-styled-components","_resolved":"","_integrity":"","repository":{"url":"git+https://github.com/Igorbek/typescript-plugin-styled-components.git","type":"git"},"_npmVersion":"6.4.1","description":"TypeScript transformer for improving the debugging experience of styled-components","directories":{},"maintainers":[{"name":"igorbek","email":"igor@oleinikov.ru"}],"_nodeVersion":"10.13.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"20","ts-jest":"20","ts-node":"^3.3.0","typescript":"^2.8.3","@types/jest":"^19.2.4","@types/node":"^7.0.31","@types/react":"^16.3.13","styled-components":"^2.1.2"},"peerDependencies":{"typescript":"^2.5.2 || ^3.0"},"_npmOperationalInternal":{"tmp":"tmp/typescript-plugin-styled-components_1.1.0-rc_1542873676341_0.8527561070589926","host":"s3://npm-registry-packages"},"_id":"typescript-plugin-styled-components@1.1.0-rc","version":"1.1.0-rc"}