I'm a full-time student and developer by passion, Aspiring to become a great dev. I'm enthusiastic about open source

projects

devto

hashnode

github

Arnab Chatterjee  • Peerlist

<p class="leading-6">A CSS Module Transformer is a NPM package designed to transform classnames in JSX attributes to use CSS modules. This plugin replaces className="example" with className={styles.example} for static classnames and className={dynamicClassName} with className={styles[dynamicClassName]} for dynamic classnames.</p><h2 class="rich-heading"><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://www.npmjs.com/package/css-module-transformer-beta#features"><strong>Features</strong></a></h2><ul><li><p class="leading-6">Automatic Transformation: The plugin detects and transforms classnames containing hyphens to use CSS modules.</p></li><li><p class="leading-6">Static Classnames: Replaces static classnames defined in JSX attributes with the corresponding CSS module syntax.</p></li><li><p class="leading-6">Dynamic Classname Support: Seamlessly handle both static and dynamic classnames in JSX</p></li><li><p class="leading-6">Preserve other JSX attributes while transforming classnames</p></li></ul><h2 class="rich-heading"><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://www.npmjs.com/package/css-module-transformer-beta#installation"><strong>Installation</strong></a></h2><p class="leading-6">Install my-project with npm</p><pre><code>npm install -g css-module-transformer-beta</code></pre><h2 class="rich-heading"><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://www.npmjs.com/package/css-module-transformer-beta#usage"><strong>Usage</strong></a></h2><p class="leading-6">Transform a React or Next.js component file:</p><pre><code>  npx transform-classes ./path/to/YourComponent.js
</code></pre><h2 class="rich-heading"><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://www.npmjs.com/package/css-module-transformer-beta#examples"><strong>Examples</strong></a></h2><h4 class="rich-heading"><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://www.npmjs.com/package/css-module-transformer-beta#input"><strong>Input:</strong></a></h4><pre><code>import './YourComponent.css';

function YourComponent() {
  return (
    &lt;div className="container"&gt;
      &lt;h1 className="title"&gt;Hello, CSS Modules!&lt;/h1&gt;
    &lt;/div&gt;
  );
}

export default YourComponent;</code></pre><h4 class="rich-heading"><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://www.npmjs.com/package/css-module-transformer-beta#output"><strong>output</strong></a></h4><pre><code>import styles from './YourComponent.module.css';

function YourComponent() {
  return (
    &lt;div className={styles.container}&gt;
      &lt;h1 className={styles.title}&gt;Hello, CSS Modules!&lt;/h1&gt;
    &lt;/div&gt;
  );
}

export default YourComponent;</code></pre>

css-module-transformer-beta

<p class="leading-6">Link to open source: <a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://github.com/arnab2001/Coinverse">https://github.com/arnab2001/Coinverse</a></p><p class="leading-6">Link to Live Project: <a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://coinverse-delta.vercel.app/">https://coinverse-delta.vercel.app/</a></p><p class="leading-6">Cryptocurrency tracker and cryptocurrency related News , all at one place</p><p class="leading-6">📌Key Features :-</p><p class="leading-6">All crypto prices at a glance in the home page</p><p class="leading-6">Crypto News</p><p class="leading-6">Current prices of coins</p><p class="leading-6">Historical price data with charts</p><p class="leading-6">Search and get latest news on any specefic coin</p><p class="leading-6">Origin , facts and other stuffs</p><p class="leading-6">💻Tech Stacks used :-</p><p class="leading-6">React</p><p class="leading-6">Redux</p><p class="leading-6">Ant Designe</p><p class="leading-6">Chart js</p><p class="leading-6">Coinranking API, Bing News API</p>