{"id":13834726,"url":"https://github.com/Microsoft/typescript-styled-plugin","last_synced_at":"2025-07-10T07:30:52.038Z","repository":{"id":39861894,"uuid":"102672434","full_name":"microsoft/typescript-styled-plugin","owner":"microsoft","description":"TypeScript server plugin that adds intellisense to styled component css strings","archived":true,"fork":false,"pushed_at":"2023-04-04T23:46:08.000Z","size":4038,"stargazers_count":837,"open_issues_count":0,"forks_count":58,"subscribers_count":23,"default_branch":"main","last_synced_at":"2025-07-05T00:14:46.334Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/microsoft.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2017-09-07T00:41:34.000Z","updated_at":"2025-05-10T00:15:10.000Z","dependencies_parsed_at":"2024-07-31T07:24:05.470Z","dependency_job_id":null,"html_url":"https://github.com/microsoft/typescript-styled-plugin","commit_stats":{"total_commits":271,"total_committers":14,"mean_commits":"19.357142857142858","dds":"0.20295202952029523","last_synced_commit":"3409ef468b309505b6e18d90211034f8ebaaf6fe"},"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"purl":"pkg:github/microsoft/typescript-styled-plugin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Ftypescript-styled-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Ftypescript-styled-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Ftypescript-styled-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Ftypescript-styled-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/microsoft","download_url":"https://codeload.github.com/microsoft/typescript-styled-plugin/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Ftypescript-styled-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":[],"created_at":"2024-08-04T14:00:51.510Z","updated_at":"2025-07-10T07:30:49.921Z","avatar_url":"https://github.com/microsoft.png","language":"JavaScript","readme":"# TypeScript Styled Plugin\n\n\u003e ❗️ This package has been deprecated in favor of [Styled component's fork](https://github.com/styled-components/typescript-styled-plugin).\n\nTypeScript server plugin that adds intellisense to [styled component](https://styled-components.com) css strings\n\n![](documentation/preview.gif)\n\n![Build Status](https://github.com/microsoft/typescript-styled-plugin/actions/workflows/ci.yml/badge.svg)\n\n**Features**\n\n- IntelliSense for CSS property names and values.\n- Syntax error reporting.\n- Quick fixes for misspelled property names.\n\n## Usage\nThis plugin requires TypeScript 2.4 or later. It can provide intellisense in both JavaScript and TypeScript files within any editor that uses TypeScript to power their language features. This includes [VS Code](https://code.visualstudio.com), [Sublime with the TypeScript plugin](https://github.com/Microsoft/TypeScript-Sublime-Plugin), [Atom with the TypeScript plugin](https://atom.io/packages/atom-typescript), [Visual Studio](https://www.visualstudio.com), and others.\n\n### With VS Code\nJust install the [VS Code Styled Components extension](https://github.com/styled-components/vscode-styled-components). This extension adds syntax highlighting and IntelliSense for styled components in JavaScript and TypeScript files.\n\nIf you are using a [workspace version of TypeScript]((https://code.visualstudio.com/Docs/languages/typescript#_using-newer-typescript-versions)) however, you must manually install the plugin along side the version of TypeScript in your workspace:\n\n```bash\nnpm install --save-dev typescript-styled-plugin typescript\n```\n\nThen add a `plugins` section to your [`tsconfig.json`](http://www.typescriptlang.org/docs/handbook/tsconfig-json.html) or [`jsconfig.json`](https://code.visualstudio.com/Docs/languages/javascript#_javascript-project-jsconfigjson)\n\n```json\n{\n  \"compilerOptions\": {\n    \"plugins\": [\n      {\n        \"name\": \"typescript-styled-plugin\"\n      }\n    ]\n  }\n}\n```\n\nFinally, run the `Select TypeScript version` command in VS Code to switch to use the workspace version of TypeScript for VS Code's JavaScript and TypeScript language support. You can find more information about managing typescript versions [in the VS Code documentation](https://code.visualstudio.com/Docs/languages/typescript#_using-newer-typescript-versions).\n\n### With Sublime\nThis plugin works with the [Sublime TypeScript plugin](https://github.com/Microsoft/TypeScript-Sublime-Plugin).\n\nFirst install the plugin and a copy of TypeScript in your workspace:\n\n```bash\nnpm install --save-dev typescript-styled-plugin typescript\n```\n\nAnd configure Sublime to use the workspace version of TypeScript by [setting the `typescript_tsdk`](https://github.com/Microsoft/TypeScript-Sublime-Plugin#note-using-different-versions-of-typescript) setting in Sublime:\n\n```json\n{\n\t\"typescript_tsdk\": \"/Users/matb/my-amazing-project/node_modules/typescript/lib\"\n}\n```\n\nFinally add a `plugins` section to your [`tsconfig.json`](http://www.typescriptlang.org/docs/handbook/tsconfig-json.html) or [`jsconfig.json`](https://code.visualstudio.com/Docs/languages/javascript#_javascript-project-jsconfigjson) and restart Sublime.\n\n```json\n{\n  \"compilerOptions\": {\n    \"plugins\": [\n      {\n        \"name\": \"typescript-styled-plugin\"\n      }\n    ]\n  }\n}\n```\n\n### With Atom\nThis plugin works with the [Atom TypeScript plugin](https://atom.io/packages/atom-typescript).\n\nFirst install the plugin and a copy of TypeScript in your workspace:\n\n```bash\nnpm install --save-dev typescript-styled-plugin typescript\n```\n\nThen add a `plugins` section to your [`tsconfig.json`](http://www.typescriptlang.org/docs/handbook/tsconfig-json.html) or [`jsconfig.json`](https://code.visualstudio.com/Docs/languages/javascript#_javascript-project-jsconfigjson) and restart Atom.\n\n```json\n{\n  \"compilerOptions\": {\n    \"plugins\": [\n      {\n        \"name\": \"typescript-styled-plugin\"\n      }\n    ]\n  }\n}\n```\n\nTo get sytnax highlighting for styled strings in Atom, consider installing the [language-babel](https://atom.io/packages/language-babel) extension.\n\n\n### With Visual Studio\nThis plugin works [Visual Studio 2017](https://www.visualstudio.com) using the TypeScript 2.5+ SDK.\n\nFirst install the plugin in your project:\n\n```bash\nnpm install --save-dev typescript-styled-plugin\n```\n\nThen add a `plugins` section to your [`tsconfig.json`](http://www.typescriptlang.org/docs/handbook/tsconfig-json.html).\n\n```json\n{\n  \"compilerOptions\": {\n    \"plugins\": [\n      {\n        \"name\": \"typescript-styled-plugin\"\n      }\n    ]\n  }\n}\n```\n\nThen reload your project to make sure the plugin has been loaded properly. Note that `jsconfig.json` projects are currently not supported in VS.\n\n\n## Configuration\n\n### Tags\nThis plugin adds styled component IntelliSense to any template literal [tagged](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) with `styled`, `css`, `injectGlobal`, `keyframes` or `createGlobalStyle`:\n\n```js\nimport styled from 'styled-components'\n\nstyled.button`\n    color: blue;\n`\n```\n\nYou can enable IntelliSense for other tag names by configuring `\"tags\"`:\n\n```json\n{\n  \"compilerOptions\": {\n    \"plugins\": [\n      {\n        \"name\": \"typescript-styled-plugin\",\n        \"tags\": [\n          \"styled\",\n          \"css\",\n          \"sty\"\n        ]\n      }\n    ]\n  }\n}\n```\n\nNow strings tagged with either `styled`, `css`, or `sty` will have styled component IntelliSense:\n\n```js\nimport sty from 'styled-components'\n\nsty.button`\n    color: blue;\n`\n```\n\nTags also apply to methods on styled components. This is enabled for `extend` by default:\n\n```js\nimport sty from 'styled-components'\n\nconst BlueButton = sty.button`\n    color: blue;\n`\n\nconst MyFancyBlueButton = BlueButton.extend`\n    border: 10px solid hotpink;\n`\n```\n\n### Linting\n\nTo disable error reporting, set `\"validate\": false` in the plugin configuration:\n\n```json\n{\n  \"compilerOptions\": {\n    \"plugins\": [\n      {\n        \"name\": \"typescript-styled-plugin\",\n        \"validate\": false\n      }\n    ]\n  }\n}\n```\n\nYou can also configure how errors are reported using linter settings.\n\n```json\n{\n  \"compilerOptions\": {\n    \"plugins\": [\n      {\n        \"name\": \"typescript-styled-plugin\",\n        \"lint\": {\n          \"vendorPrefix\": \"error\",\n          \"zeroUnits\": \"ignore\"\n        }\n      }\n    ]\n  }\n}\n```\n\nThe following lint options are supported:\n\n#### validProperties\n```\n[\"property1\", \"property2\", ....]\n```\n\nList of properties that are treated as valid.\n\n#### unknownProperties\n```\n\"ignore\" | \"warning\" | \"error\"\n```\n\nShould unknown properties show an error or warning? Default is `\"warning\"`.\n\n#### compatibleVendorPrefixes\n```\n\"ignore\" | \"warning\" | \"error\"\n```\n\nWhen using a vendor-specific prefix make sure to also include all other vendor-specific properties. Default is `\"ignore\"`.\n\n#### vendorPrefix\n```\n\"ignore\" | \"warning\" | \"error\"\n```\n\nWhen using a vendor-specific prefix also include the standard property. Default is `\"warning\"`.\n\n#### duplicateProperties\n```\n\"ignore\" | \"warning\" | \"error\"\n```\n\nDo not use duplicate style definitions. Default is `\"ignore\"`.\n\n#### emptyRules\n```\n\"ignore\" | \"warning\" | \"error\"\n```\n\nDo not use empty rulesets. Default is `\"ignore\"`.\n\n#### importStatement\n```\n\"ignore\" | \"warning\" | \"error\"\n```\n\nImport statements do not load in parallel. Default is `\"ignore\"`.\n\n#### boxModel\n```\n\"ignore\" | \"warning\" | \"error\"\n```\n\nDo not use width or height when using padding or border.  Default is `\"ignore\"`.\n\n#### universalSelector\n```\n\"ignore\" | \"warning\" | \"error\"\n```\n\nThe universal selector (*) is known to be slow. Default is `\"ignore\"`.\n\n#### zeroUnits\n```\n\"ignore\" | \"warning\" | \"error\"\n```\n\nNo unit for zero needed. Default is `\"ignore\"`.\n\n#### fontFaceProperties\n```\n\"ignore\" | \"warning\" | \"error\"\n```\n\n@font-face rule must define 'src' and 'font-family' properties. Default is `\"warning\"`.\n\n#### hexColorLength\n```\n\"ignore\" | \"warning\" | \"error\"\n```\n\nHex colors must consist of three or six hex numbers. Default is `\"error\"`.\n\n#### argumentsInColorFunction\n```\n\"ignore\" | \"warning\" | \"error\"\n```\n\nInvalid number of parameters. Default is `\"error\"`.\n\n#### ieHack\n```\n\"ignore\" | \"warning\" | \"error\"\n```\n\nIE hacks are only necessary when supporting IE7 and older. Default is `\"ignore\"`.\n\n#### unknownVendorSpecificProperties\n```\n\"ignore\" | \"warning\" | \"error\"\n```\n\nUnknown vendor specific property. Default is `\"ignore\"`.\n\n#### propertyIgnoredDueToDisplay\n```\n\"ignore\" | \"warning\" | \"error\"\n```\n\nProperty is ignored due to the display. E.g. with 'display: inline', the width, height, margin-top, margin-bottom, and float properties have no effect. Default is `\"warning\"`\n\n#### important\n```\n\"ignore\" | \"warning\" | \"error\"\n```\n\nAvoid using !important. It is an indication that the specificity of the entire CSS has gotten out of control and needs to be refactored. Default is `\"ignore\"`.\n\n#### float\n```\n\"ignore\" | \"warning\" | \"error\"\n```\n\nAvoid using 'float'. Floats lead to fragile CSS that is easy to break if one aspect of the layout changes. Default is `\"ignore\"`.\n\n#### idSelector\n```\n\"ignore\" | \"warning\" | \"error\"\n```\n\nSelectors should not contain IDs because these rules are too tightly coupled with the HTML. Default is `\"ignore\"`.\n\n### Emmet in completion list\n\nYou can now see your Emmet abbreviations expanded and included in the completion list.\nAn [upstream issue](https://github.com/Microsoft/TypeScript/issues/21999) with typescript blocks the Emmet entry in the completion list to get updated as you type.\nSo for now you will have to press `Ctrl+Space` after typing out the abbreviation.\n\nThe below settings which are in sync with general Emmet settings in VS Code control the expanded Emmet abbreviations in the auto-completion list.\n\n#### showExpandedAbbreviation\n```\n\"always\" | \"never\"\n```\n\nControls whether or not expanded Emmet abbreviations should show up in the completion list\n\n#### showSuggestionsAsSnippets\n```\n`true` | `false`\n```\n\nIf true, then Emmet suggestions will show up as snippets allowing you to order them as per editor.snippetSuggestions setting.\n\n#### preferences\n\nPreferences used to modify behavior of some actions and resolvers of Emmet.\n\n\n## Contributing\n\nTo build the typescript-styled-plugin, you'll need [Git](https://git-scm.com/downloads) and [Node.js](https://nodejs.org/).\n\nFirst, [fork](https://help.github.com/articles/fork-a-repo/) the typescript-styled-plugin repo and clone your fork:\n\n```bash\ngit clone https://github.com/YOUR_GITHUB_ACCOUNT_NAME/typescript-styled-plugin.git\ncd typescript-styled-plugin\n```\n\nThen install dev dependencies:\n\n```bash\nnpm install\n```\n\nThe plugin is written in [TypeScript](http://www.typescriptlang.org). The source code is in the `src/` directory with the compiled JavaScript output to the `lib/` directory. Kick off a build using the `compile` script:\n\n```bash\nnpm run compile\n```\n\nswitch to `e2` to install or update test dependencies:\n\n```bash\n(cd e2e \u0026\u0026 npm install)\n```\n\nand then navigate back to the project root and run the end to end tests with the `e2e` script:\n\n```bash\ncd ..\nnpm run e2e\n```\n\nYou can submit bug fixes and features through [pull requests](https://help.github.com/articles/about-pull-requests/). To get started, first checkout a new feature branch on your local repo:\n\n```bash\ngit checkout -b my-awesome-new-feature-branch\n```\n\nMake the desired code changes, commit them, and then push the changes up to your forked repository:\n\n```bash\ngit push origin my-awesome-new-feature-branch\n```\n\nThen [submit a pull request](https://help.github.com/articles/creating-a-pull-request/\n) against the Microsoft typescript-styled-plugin repository.\n\nPlease also see our [Code of Conduct](CODE_OF_CONDUCT.md).\n\n\n## Credits\n\nCode originally forked from: https://github.com/Quramy/ts-graphql-plugin","funding_links":[],"categories":["Language service plugins"],"sub_categories":["Optimization"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMicrosoft%2Ftypescript-styled-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMicrosoft%2Ftypescript-styled-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMicrosoft%2Ftypescript-styled-plugin/lists"}