https://github.com/paulshen/manipulative
Devtool for manipulating React + Emotion styles in the browser
https://github.com/paulshen/manipulative
devtool emotion react
Last synced: 28 days ago
JSON representation
Devtool for manipulating React + Emotion styles in the browser
- Host: GitHub
- URL: https://github.com/paulshen/manipulative
- Owner: paulshen
- License: mit
- Created: 2020-11-26T17:54:21.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2020-12-01T19:50:28.000Z (over 4 years ago)
- Last Synced: 2025-04-04T22:17:50.319Z (2 months ago)
- Topics: devtool, emotion, react
- Language: TypeScript
- Homepage:
- Size: 723 KB
- Stars: 38
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - manipulative
- awesome-emotion - manipulative - React devtool to style emotion components from the browser. (Libraries)
README
# manipulative
A React devtool for live-updating [Emotion](https://emotion.sh/) styles in the browser. When the styles look good, write them to your source files with one click.
> manipulative is currently alpha-quality software. If manipulative is not working for your use case, please file an issue and I'll try my best to help.
## Requirements
- You're using `@emotion/react` with [`css` prop](https://emotion.sh/docs/css-prop)
- You're using React Fast Refresh (included w/ [create-react-app](https://create-react-app.dev/) 4+)
## Installation
```sh
npm install --dev manipulative
# or
yarn add --dev manipulative
```
## Usage
### Run server
The server writes changes to your source files.
```sh
npx manipulative-server
```
### Invoke manipulative
Use one of these two approaches.
1. `useCssPlaceholder()` - quickest but not ideal
If you have a create-react-app, you can use the Babel macro without any setup. Add calls to `useCssPlaceholder()` on elements you want to style.
```js
import { useCssPlaceholder } from "manipulative/macro";
function MyComponent() {
return (
...
);
}
```
2. `css__` prop
This more convenient approach requires a little Babel setup ([see below](#recommended-babel-setup)).
```js
// no need to import anything
function MyComponent() {
return (
...
);
}
```
### Modify and commit styles
In the browser, you should see the manipulative inspector with an input for each `useCssPlaceholder()` or `css__` prop. Type CSS in the textarea to see styles update live. Click "commit" to write changes back to the source files, replacing `useCssPlaceholder()` and `css__` props.
Be sure to remove any imports from `manipulative` when building for production!
## Recommended Babel setup
If you want to use the more convenient `css__` syntax, you'll need to install a Babel plugin that runs before React Fast Refresh.
If you have access to the Webpack config (e.g. you ejected CRA), add `manipulative/babel` to the list of Babel plugins. This plugin needs to run before `react-refresh/babel`.
```
{
loader: 'babel-loader',
plugins: [
'manipulative/babel',
'react-refresh/babel',
],
...
}
```
If you have not ejected CRA, you can still use this plugin with something like [react-app-rewired](https://github.com/timarney/react-app-rewired). Here is an example `config-overrides.js` with `react-app-rewired`.
```js
const { getBabelLoader } = require("customize-cra");
module.exports = function override(config) {
getBabelLoader(config).options.plugins.unshift(
require.resolve("manipulative/babel")
);
return config;
};
```
## Known Limitations
- manipulative only supports static styles. It does not handle functions or JS variables.
- `css__` cannot be used with `css` prop on the same element
- `css__` is transformed to `css={...}`. Therefore, one will override the other. There may be support for modifying existing styles in the future.