esbuild-css-modules-plugin - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

index.js

		@@ -17,2 +17,3 @@ const path = require('path');
		localsConvention = 'camelCaseOnly',
		inject = true,
		generateScopedName
		@@ -38,6 +39,21 @@ } = options;

		const jsonStr = JSON.stringify(cssModulesJSON);
		const classNames = JSON.stringify(cssModulesJSON);
		hash.update(cssFullPath);
		const styleId = hash.copy().digest('hex');
		return `(function(){if (!document.getElementById('${styleId}')) {var ele = document.createElement('style');ele.id = '${styleId}';ele.textContent = \`${result.css}\`;document.head.appendChild(ele);}})();export default ${jsonStr};`;
		const digest = hash.copy().digest('hex');
		return `
		const digest = '${digest}';
		const css = \`${result.css}\`;
		${inject && `
		(function() {
		if (!document.getElementById(digest)) {
		var ele = document.createElement('style');
		ele.id = digest;
		ele.textContent = css;
		document.head.appendChild(ele);
		}
		})();
		`}
		export default ${classNames};
		export { css, digest };
		`;
		};
		@@ -44,0 +60,0 @@

package.json

		{
		"name": "esbuild-css-modules-plugin",
		"version": "1.0.5",
		"version": "1.0.6",
		"description": "A esbuild plugin to bundle css modules into js(x)/ts(x).",
		@@ -5,0 +5,0 @@ "main": "index.js",

readme.md

		@@ -5,2 +5,4 @@ # esbuild-css-modules-plugin

		Works both with `bundle: false` and `bundle: true`.

		If build with `bundle: false`, `xxx.modules.css` will be transformed to `xxx.modules.css.js`.
		@@ -31,2 +33,3 @@
		cssModulesPlugin({
		inject: true, // optional. set to false to not inject generated CSS into <head>, default is true
		localsConvention: 'camelCaseOnly', // optional. value could be one of 'camelCaseOnly', 'camelCase', 'dashes', 'dashesOnly', default is 'camelCaseOnly'
		@@ -33,0 +36,0 @@ generateScopedName: (name, filename, css) => string // optional.

test/components/hello.world.jsx

		import React from 'react';
		import styles from '../styles/app.modules.css';
		import styles, { css, digest } from '../styles/app.modules.css';

		export const HelloWorld = () => {
		return (
		<h3 className={styles.helloWorld}>Hello World!</h3>
		);
		};
		export const HelloWorld = () => <>
		<h3 className={styles.helloWorld}>Hello World!</h3>
		<code>{digest}</code>
		<pre><code>{css}</code></pre>
		</>

test/test.js

		@@ -40,1 +40,20 @@ const esbuild = require('esbuild');
		});

		esbuild.build({
		entryPoints: ['app.jsx'],
		format: 'esm',
		target: ['es2020'],
		bundle: true,
		minify: false,
		sourcemap: true,
		external: ['react', 'react-dom'],
		outdir: './dist/bundle-no-inject',
		write: true,
		plugins: [
		cssModulesPlugin({
		inject: false
		})
		]
		}).then((result) => {
		console.log('[test][esbuild:bundle-no-inject] done, please check `test/dist/bundle-no-inject`');
		});

New alerts