Inline CSS to React StyleSheet
A VS Code extension that converts inline React/React Native styles to StyleSheet.create objects. This extension helps you maintain cleaner code by automatically extracting inline styles into reusable StyleSheet objects.

Features
- Convert inline styles to StyleSheet.create objects with a right-click
- Automatically generates meaningful style names based on component names
- Adds new styles to existing StyleSheet.create objects if present
- Maintains proper formatting and indentation
- Works with both .tsx and .jsx files
- Handles complex style objects including conditional styles and expressions
Installation
- Open VS Code
- Press
Ctrl+P
(Windows/Linux) or Cmd+P
(Mac)
- Type
ext install inlinecss2react
- Press Enter
Usage
Converting Inline Styles
- Place your cursor on or near a style property in your React/React Native component
- Right-click and select "Convert Inline Style to React Style Object" from the context menu
- The inline style will be automatically converted and added to a StyleSheet.create object
Examples
Before:
const MyComponent = () => {
return (
<View style={{ padding: 16, backgroundColor: 'white', marginBottom: 8 }}>
<Text>Hello World</Text>
</View>
);
};
After:
const styles = StyleSheet.create({
view: {
padding: 16,
backgroundColor: 'white',
marginBottom: 8
}
});
const MyComponent = () => {
return (
<View style={styles.view}>
<Text>Hello World</Text>
</View>
);
};
Adding to Existing StyleSheet
If your file already has a StyleSheet.create object, the extension will add the new style to it:
// Existing styles
const styles = StyleSheet.create({
container: {
flex: 1
}
});
// After converting an inline style
const styles = StyleSheet.create({
container: {
flex: 1
},
view: {
padding: 16,
backgroundColor: 'white'
}
});
Features
- ✅ Automatic style name generation
- ✅ Handles nested style objects
- ✅ Preserves comments and formatting
- ✅ Supports TypeScript and JavaScript
- ✅ Works with conditional styles and expressions
- ✅ Maintains proper indentation
- ✅ Prevents duplicate style names
- ✅ Skips already referenced styles
Requirements
- VS Code 1.85.0 or higher
- React/React Native project
Extension Settings
This extension doesn't require any additional settings.
Known Issues
- The extension only works with
.tsx
and .jsx
files
- Style names are generated based on component names and may need manual adjustment for better semantic meaning
Contributing
Found a bug or have a feature request? Please open an issue on our GitHub repository.
Release Notes
1.0.0
- Initial release
- Basic inline style to StyleSheet.create conversion
- Right-click context menu support
- Automatic style name generation
- Support for existing StyleSheet objects
License
This extension is licensed under the MIT License.
Enjoy!