https://github.com/Agreon/styco

Transform Tags with style-props to styled components
https://github.com/Agreon/styco

Last synced: 3 months ago
JSON representation

Transform Tags with style-props to styled components

• Host: GitHub
• URL: https://github.com/Agreon/styco
• Owner: Agreon
• License: mit
• Created: 2019-07-28T16:44:54.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-15T01:17:45.000Z (over 1 year ago)
• Last Synced: 2024-01-22T02:14:01.213Z (5 months ago)
• Language: TypeScript
• Size: 1.03 MB
• Stars: 91
• Watchers: 3
• Forks: 14
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Lists

• awesome-stars - Agreon/styco - Transform Tags with style-props to styled components (TypeScript)

README

        
# StyCo README

Transform JSX-Tags with style-props to styled components.

VSCode Marketplace: [Link](https://marketplace.visualstudio.com/items?itemName=DanielHuth.styco)

## Demo

![Demo](./demo.gif)

## Usage

Either use the command `StyCo` with `CTRL` + `SHIFT` +  `P` or the code action with `CTRL` + `.` while in the line of the style-attribute.

## Configuration

There are several options that can be found in the options.

- `insertImportStatement`: Insert import statement of the detected library if not existent. (default: `true`)

- `orderStyleByName`: Order styles by name alphabetically. (default: `false`)

- `saveAfterExecute`: Save the file after command execution. (default: `true`)

- `disableCodeAction`: Don't show a CodeAction if a `style`-Attribute is found. (default: `false`)

- `objectSyntax`: Output the styled component in object syntax. (default: `false`)