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

Comparing version 3.0.0-dev.20 to 3.0.0

changelog.md

@@ -0,1 +1,11 @@
+## V3.0.0
+This version has some breaking changes:
+- drop postcss-module, as a result most of postcss-module configurations are removed as well
+- remove `v2` feature flag
+
+Other changes:
+- full support of `compose`
+- code refactor
+- export both `commonjs` & `es` module
+
 ## V2.7.1
@@ -2,0 +12,0 @@ - support esbuild@^0.17

index.d.ts

 import type { Plugin, PluginBuild } from 'esbuild';
 
 declare interface BuildOptions {
-  /** force to build modules-css files even if `bundle` is disabled in esbuild, default is `false` */
+  /**
+   * force to build css modules files even if `bundle` is disabled in esbuild
+   * @default false
+   */
   force?: boolean;
-  /** inline images imported in css as data url even if `bundle` is false */
+  /**
+   * inline images imported in css as data url even if `bundle` is false
+   * @default false
+   */
   forceInlineImages?: boolean;
@@ -13,8 +19,39 @@ /**
    * - `true` : emit both `xxx.css.d.ts` and `xxx.d.css.ts`
+   * @default false
    */
   emitDeclarationFile?: boolean | '.d.css.ts' | '.css.d.ts';
+  /**
+   * set to false to not inject generated css into page;
+   * @description
+   * if set to `true`, the generated css will be injected into `head`;
+   * could be a string of css selector of the element to inject into,
+   * e.g.
+   *
+   * ``` js
+   * {
+   *   inject: '#some-element-id'
+   * }
+   *
+   * ```
+   * the plugin will try to get `shadowRoot` of the found element, and append css to the
+   * `shadowRoot`, if no shadowRoot then append to the found element, if no element found then append to `document.head`.
+   * 
+   * could be a function with params content & digest (return a string of js code to inject css into page),
+   * e.g.
+   *
+   * ```js
+   * {
+   *   inject: (content, digest) => `console.log(${content}, ${digest})`
+   * }
+   * ```
+   * @default false
+   */
   inject?: boolean | string | ((css: string, digest: string) => string);
+  /**
+   * Regex to filter certain CSS files.
+   * @default /\.modules?\.css$/i
+   */
   filter?: RegExp;
   /**
-   * refer to: https://github.com/parcel-bundler/parcel-css/releases/tag/v1.9.0
+   * @see https://lightningcss.dev/css-modules.html#local-css-variables
    */
@@ -27,2 +64,3 @@ dashedIndents?: boolean;
    * [local] - the original class name
+   * @see https://lightningcss.dev/css-modules.html#custom-naming-patterns
    */
@@ -32,7 +70,7 @@ pattern?: string;
    * localsConvention
-   * default is `camelCaseOnly`
-   * **cameCase** : `.some-class-name` ==> `someClassName`, the original class name will not to be removed from the locals
-   * **camelCaseOnly**: `.some-class-name` ==> `someClassName`, the original class name will be removed from the locals
-   * **pascalCase** : `.some-class-name` ==> `SomeClassName`, the original class name will not to be removed from the locals
-   * **pascalCaseOnly**: `.some-class-name` ==> `SomeClassName`, the original class name will be removed from the locals
+   * - **cameCase** : `.some-class-name` ==> `someClassName`, the original class name will not to be removed from the locals
+   * - **camelCaseOnly**: `.some-class-name` ==> `someClassName`, the original class name will be removed from the locals
+   * - **pascalCase** : `.some-class-name` ==> `SomeClassName`, the original class name will not to be removed from the locals
+   * - **pascalCaseOnly**: `.some-class-name` ==> `SomeClassName`, the original class name will be removed from the locals
+   * @default "camelCaseOnly"
    */
@@ -42,4 +80,2 @@ localsConvention?: 'camelCase' | 'pascalCase' | 'camelCaseOnly' | 'pascalCaseOnly';
    * namedExports
-   * @default false
-   * @description
    * e.g.:
@@ -49,2 +85,3 @@ * ```
    * ```
+   * @default false
    * Notes:
@@ -55,2 +92,5 @@ * - `someClassName` can not be a js key word like `const`, `var` & etc.
   namedExports?: boolean;
+  /**
+   * optional package detail
+   */
   package?: {
@@ -57,0 +97,0 @@ name: string;

package.json

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

readme.md

 # esbuild-css-modules-plugin
 
-[![npm version](https://img.shields.io/npm/v/esbuild-css-modules-plugin/v3-dev)](https://www.npmjs.com/package/esbuild-css-modules-plugin/v/v3-dev)
+[![npm version](https://img.shields.io/npm/v/esbuild-css-modules-plugin)](https://www.npmjs.com/package/esbuild-css-modules-plugin)
 [![Test](https://github.com/indooorsman/esbuild-css-modules-plugin/actions/workflows/test.yml/badge.svg)](https://github.com/indooorsman/esbuild-css-modules-plugin/actions/workflows/test.yml)
@@ -10,5 +10,5 @@
 
-If build with `bundle: false`, `xxx.modules.css` will be transformed to `xxx.modules.js`.
+If build with `bundle: false`, `xxx.modules.css` will be transformed to `xxx.modules.css.js`.
 
-See [`./test/test.js`](https://github.com/indooorsman/esbuild-css-modules-plugin/blob/v3/test/test.js) for examples.
+See [`./test/test.js`](https://github.com/indooorsman/esbuild-css-modules-plugin/blob/main/test/test.js) for examples.
 
@@ -18,3 +18,3 @@ ## Install
 ```shell
-npm i -D esbuild-css-modules-plugin@v3-dev
+npm i -D esbuild-css-modules-plugin
 ```
@@ -25,3 +25,3 @@
 ```shell
-yarn add -D esbuild-css-modules-plugin@v3-dev
+yarn add -D esbuild-css-modules-plugin
 ```
@@ -38,74 +38,8 @@
     CssModulesPlugin({
-      /** optional, force to build modules-css files even if `bundle` is disabled in esbuild. default is `false` */
-      force: false,
-      /** optional, inline images imported in css as data url even if `bundle` is false. default is `false` */
-      forceInlineImages: false,
-      /** optional, generate typescript declaration file for css file to `outdir` of esbuild config. default is `false` */
-      emitDeclarationFile: false,
-      /**
-       * optional
-       * @see https://lightningcss.dev/css-modules.html#local-css-variables
-       */
-      dashedIndents: false,
-      /**
-       * optional, pattern of class names
-       * The currently supported segments are:
-       * [name] - the base name of the CSS file, without the extension
-       * [hash] - a hash of the full file path
-       * [local] - the original class name
-       * @see https://lightningcss.dev/css-modules.html#custom-naming-patterns
-       */
-      pattern: '[name]_[local]_[hash]',
-      /**
-       * optional, localsConvention
-       * default is `camelCaseOnly`
-       * **cameCase** : `.some-class-name` ==> `someClassName`, the original class name will not to be removed from the locals
-       * **camelCaseOnly**: `.some-class-name` ==> `someClassName`, the original class name will be removed from the locals
-       * **pascalCase** : `.some-class-name` ==> `SomeClassName`, the original class name will not to be removed from the locals
-       * **pascalCaseOnly**: `.some-class-name` ==> `SomeClassName`, the original class name will be removed from the locals
-       */
-      localsConvention: 'camelCase' | 'pascalCase' | 'camelCaseOnly' | 'pascalCaseOnly',
-      /**
-       * optional, enable named exports
-       * @default false
-       * @description
-       * e.g.:
-       * ```
-       * export const someClassName = '.some-class-name__hauajsk';
-       * ```
-       * Notes:
-       * - `someClassName` can **NOT** be a js key word like `const`, `var` & etc.
-       * - can **NOT** be used with `inject`
-       */
-      namedExports: false,
-      // optional, package info
-      package: {
-        name: 'my-lib',
-        main: 'index.cjs',
-        module: 'index.js',
-        version: '3.0.0'
-      },
-      /**
-       * optional. set to false to not inject generated css into page;
-       * if set to `true`, the generated css will be injected into `head`;
-       * could be a string of css selector of the element to inject into,
-       * e.g.
-       *
-       * ```
-       * inject: '#some-element-id' // the plugin will try to get `shadowRoot` of the found element, and append css to the
-       * `shadowRoot`, if no shadowRoot then append to the found element, if no element found then append to document.head
-       *
-       * ```
-       *
-       * could be a function with params content & digest (return a string of js code to inject css into page),
-       * e.g.
-       *
-       * ```
-       * inject: (content, digest) => `console.log(${content}, ${digest})`
-       * ```
-       */
-      inject: false,
-
-      /** Optional. Regex to filter certain CSS files. default is `/\.modules?\.css$/i` */
-      filter: /\.modules?\.css$/i
+      // @see https://github.com/indooorsman/esbuild-css-modules-plugin/blob/main/index.d.ts for more details
+      force: true,
+      emitDeclarationFile: true,
+      localsConvention: 'camelCaseOnly',
+      namedExports: true,
+      inject: false
     })
@@ -112,0 +46,0 @@ ]

tsconfig.json

@@ -18,2 +18,3 @@ {
     "allowSyntheticDefaultImports": true,
+    "allowArbitraryExtensions": true,
     "esModuleInterop": true
@@ -20,0 +21,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Lines of code

1033

increased by4.13%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

39567

decreased by-3.82%

Number of lines in readme file

45

decreased by-59.46%

No dependency changes