xcss-transform
v1.0.5
Published
This Package will convert inline css in your all .jsx files present inside ./src/components/ to an external css files, gives class names and removes them from the main .jsx code in order to make them more production ready and clean as well ;)
Downloads
3
Readme
xcss-transform
This project provides a script to extract inline styles from React components written in .jsx
files and generate external CSS files. The script handles the conversion of camelCase properties to kebab-case and ensures that styles are properly formatted. It also manages cases where elements have inline styles but no class names, generating random class names and logging warnings for such instances.
Features
- Extracts inline styles from
.jsx
files and generates external CSS files. - Converts camelCase properties to kebab-case in the generated CSS.
- Handles elements with inline styles but no class names by generating random class names.
- Logs warnings for duplicate class names and elements with generated class names.
- Updates
.jsx
files to import the generated CSS files.
Installation
To use this script, you need to have Node.js installed. Then, install the required dependencies using npm:
npm install @babel/parser @babel/traverse @babel/types @babel/generator fs-extra glob
Usage
Place all your React components in the ./src/components/ directory.
Add below line in your package.json "scripts"
"transform": "node ./node_modules/xcss-transform/transform.js"
},```
Run the script:
```bash
npm run transform
File Structure ./src/components/ ├── Component1.jsx ├── Component2.jsx └── ... transform.js
Example Input
const MyComponent = () => (
<div style={{ minHeight: '1200px', backgroundColor: 'palevioletred', display: 'flex', alignItems: 'center', fontSize: '50px', justifyContent: 'center', marginTop: '10px', borderRadius: '20px' }}>
Hello, World!
</div>
);
export default MyComponent;
Example Output
External CSS file:
min-height: 1200px;
background-color: palevioletred;
display: flex;
align-items: center;
font-size: 50px;
justify-content: center;
margin-top: 10px;
border-radius: 20px;
}
updated React component:
import './MyComponent.css';
const MyComponent = () => (
<div className="minHeight-1200px">
Hello, World!
</div>
);
export default MyComponent;
Warnings and Errors
- The script will log a warning if it encounters duplicate class names within the same file.
- If an inline style is found without a className attribute, the script will generate a random class name for the element and log a warning with the file name and line number.