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

1. The script will log a warning if it encounters duplicate class names within the same file.
2. 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.