{"id":13834691,"url":"https://github.com/LeetCode-OpenSource/emotion-ts-plugin","last_synced_at":"2025-07-10T07:30:49.888Z","repository":{"id":38269978,"uuid":"148123892","full_name":"LeetCode-OpenSource/emotion-ts-plugin","owner":"LeetCode-OpenSource","description":"TypeScript Emotion Plugin . https://emotion.sh/","archived":false,"fork":false,"pushed_at":"2023-04-07T09:43:38.000Z","size":3620,"stargazers_count":57,"open_issues_count":22,"forks_count":3,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-06-15T20:21:23.033Z","etag":null,"topics":["emotion","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LeetCode-OpenSource.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-10T08:31:56.000Z","updated_at":"2024-11-01T14:15:33.000Z","dependencies_parsed_at":"2024-11-09T08:35:07.881Z","dependency_job_id":null,"html_url":"https://github.com/LeetCode-OpenSource/emotion-ts-plugin","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"purl":"pkg:github/LeetCode-OpenSource/emotion-ts-plugin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeetCode-OpenSource%2Femotion-ts-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeetCode-OpenSource%2Femotion-ts-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeetCode-OpenSource%2Femotion-ts-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeetCode-OpenSource%2Femotion-ts-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LeetCode-OpenSource","download_url":"https://codeload.github.com/LeetCode-OpenSource/emotion-ts-plugin/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeetCode-OpenSource%2Femotion-ts-plugin/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264545157,"owners_count":23625403,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["emotion","typescript"],"created_at":"2024-08-04T14:00:51.120Z","updated_at":"2025-07-10T07:30:49.434Z","avatar_url":"https://github.com/LeetCode-OpenSource.png","language":"TypeScript","readme":"# Emotion TypeScript Plugin\n\n[![CircleCI](https://circleci.com/gh/LeetCode-OpenSource/emotion-ts-plugin.svg?style=svg)](https://circleci.com/gh/LeetCode-OpenSource/emotion-ts-plugin)\n[![codecov](https://codecov.io/gh/LeetCode-OpenSource/emotion-ts-plugin/branch/master/graph/badge.svg)](https://codecov.io/gh/LeetCode-OpenSource/emotion-ts-plugin)\n[![Downloads](https://img.shields.io/npm/dm/emotion-ts-plugin.svg?sanitize=true)](https://npmcharts.com/compare/emotion-ts-plugin?minimal=true)\n\n## Features\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eFeature/Syntax\u003c/th\u003e\n      \u003cth\u003eNative\u003c/th\u003e\n      \u003cth\u003eBabel Plugin\u003c/th\u003e\n      \u003cth\u003eTypeScript Plugin\u003c/th\u003e\n      \u003cth\u003eNotes\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ecss``\u003c/code\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e✅\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ecss(...)\u003c/code\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e✅\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003c/td\u003e\n      \u003ctd\u003eGenerally used for object styles.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003estyled('div')``\u003c/code\u003e syntax\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e✅\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003c/td\u003e\n      \u003ctd\u003eBoth string and object styles work without this plugin.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003estyled.div``\u003c/code\u003e syntax\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e✅\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003c/td\u003e\n      \u003ctd\u003eSupporting the shortcut syntax without the Babel plugin requires a large list of valid elements to be included in the bundle.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecomponents as selectors\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e✅\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e✅\u003c/td\u003e\n      \u003ctd\u003eAllows an emotion component to be \u003ca href=\"https://emotion.sh/docs/styled#targeting-another-emotion-component\"\u003eused as a CSS selector\u003c/a\u003e.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eMinification\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e✅\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e⛔️\u003c/td\u003e\n      \u003ctd\u003eAny leading/trailing space between properties in your \u003ccode\u003ecss\u003c/code\u003e and \u003ccode\u003estyled\u003c/code\u003e blocks is removed. This can reduce the size of your final bundle.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eDead Code Elimination\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e✅\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e✅\u003c/td\u003e\n      \u003ctd\u003eUglifyjs will use the injected \u003ccode\u003e/*#__PURE__*/\u003c/code\u003e flag comments to mark your \u003ccode\u003ecss\u003c/code\u003e and \u003ccode\u003estyled\u003c/code\u003e blocks as candidates for dead code elimination.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eSource Maps\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e✅\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e✅\u003c/td\u003e\n      \u003ctd\u003eWhen enabled, navigate directly to the style declaration in your javascript file.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eContextual Class Names\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e✅\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e✅\u003c/td\u003e\n      \u003ctd\u003eGenerated class names include the name of the variable or component they were defined in.\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Usage\n\n```ts\nconst { join } = require('path')\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin')\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\n\nconst { createEmotionPlugin } = require('emotion-ts-plugin')\n\nmodule.exports = {\n  entry: './tests/fixtures/simple.tsx',\n\n  output: {\n    filename: '[name].[hash].js',\n    path: join(process.cwd(), 'dist'),\n  },\n\n  resolve: {\n    extensions: ['.tsx', '.ts', '.js', '.jsx'],\n  },\n\n  mode: 'development',\n\n  devtool: 'cheap-module-source-map',\n\n  module: {\n    rules: [\n      {\n        test: /\\.(j|t)sx?$/,\n        loader: 'ts-loader',\n        options: {\n          transpileOnly: true,\n          getCustomTransformers: () =\u003e ({\n            before: [\n              createEmotionPlugin({\n                // \u003c------------------- here\n                sourcemap: true,\n                autoLabel: true,\n                labelFormat: '[local]',\n                // if the jsxFactory is set, should we auto insert the import statement\n                autoInject: true,\n                // set for react@17 new jsx runtime\n                // only effect if `autoInject` is true\n                // set it in createEmotionPlugin options rather than in `tsconfig.json` will generate more optimized codes:\n                // import { jsx } from 'react/jsx-runtime' for files not using emotion\n                // import { jsx } from '@emotion/react/jsx-runtime' for files using emotion\n                jsxImportSource: '@emotion/react',\n              }),\n            ],\n          }),\n          compilerOptions: {\n            // set jsx pragma to jsx or alias which is from the @emotion/react package to enable css property in jsx component\n            jsxFactory: 'jsx',\n          },\n        },\n        exclude: /node_modules/,\n      },\n      {\n        test: /\\.css$/,\n        use: [MiniCssExtractPlugin.loader, 'css-loader?minimize'],\n      },\n    ],\n  },\n\n  plugins: [\n    new HtmlWebpackPlugin({\n      template: join(process.cwd(), 'tests', 'fixtures', 'index.html'),\n    }),\n  ],\n}\n```\n\nfor customized exported(re-exported) styled\n\n```ts\ninterface CustomModule {\n  // module name used in import statement\n  moduleName: string\n  // `true` if you may import libs from 'my-emotion/subpath'\n  includesSubPath?: boolean\n  // all available names exported from custom module\n  exportedNames: string[]\n  // we may do some additional work on styled function, so if styled is reexport, you should specify it here\n  styledName?: string\n  // has default export\n  hasDefaultExport?: boolean\n}\n\ncreateEmotionPlugin({\n  ...otherConfig,\n  customModules: [\n    {\n      moduleName: 'my-emotion',\n      includesSubPath: true,\n      exportedNames: ['myStyled', 'myCss']\n      styledName: 'myStyled',\n    }\n  ]\n})\n```\n","funding_links":[],"categories":["Transformers"],"sub_categories":["React"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLeetCode-OpenSource%2Femotion-ts-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLeetCode-OpenSource%2Femotion-ts-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLeetCode-OpenSource%2Femotion-ts-plugin/lists"}