rollup-plugin-lib-style 1.2.9 → 2.0.0

package/README.md

@@ -1,9 +1,10 @@
 # rollup-plugin-lib-style
 
-A Rollup plugin that converts CSS and CSS extension languages into CSS modules and imports the generated CSS files. 
-This plugin gives you the ability to build a library that imports its styles (under the assumption the library will be bundled with a bundler like webpack or rollup).
+This plugin allows you to import CSS or SASS/SCSS files in your Rollup library and include them in the generated output. The plugin will extract the CSS or SASS/SCSS from the imported files and import them as a CSS file
 
 
+When creating a library, you may want to use CSS modules to create scoped styles for your components. However, when publishing your library as a standalone package, you also need to include the CSS styles that are used by your components. Rollup Plugin Lib Style automates this process by generating a CSS file that includes all the imported CSS modules.
+
 ## Why
 
 Today there are 2 main ways to bundle and import styles from a library
@@ -11,7 +12,7 @@ Today there are 2 main ways to bundle and import styles from a library
 - Having a single CSS file for all styles in the library
 - Using CSS-in-JS (styled-components, emotion, ...)
 
-These two ways have some disadvantages, when we are having a single CSS file, we are importing styles that probably will not be necessary, and when we are using CSS-in-JS we are increasing the HTML size
+These two ways have some disadvantages when we are having a single CSS file, we are importing styles that probably will not be necessary, and when we are using CSS-in-JS we are increasing the HTML size
 
 This plugin brings you the ability to consume only the used styles from the library
 
@@ -75,8 +76,10 @@ Description: prefix for the classnames
 ### scopedName
 
 Type: `string`<br />
-Default: "[local]\_[hash:base64:6]"<br />
-Description: customize the scoped name of the classname
+Default: "[local]\_[hash:hex:6]"<br />
+Description: customize the scoped name of the classname.
+Available placeholders: [local], [hash], [hash:\<digset>], [hash:\<digset>:\<length>] [hash:\<length>]
+Available digset: "latin1", "hex", "base64"
 
 ### postCssPlugins
 

package/lib/index.es.js

@@ -1,11 +1,24 @@
 import { createFilter } from 'rollup-pluginutils';
 import postcss from 'postcss';
 import postcssModules from 'postcss-modules';
+import crypto from 'node:crypto';
 import fs from 'fs-extra';
 import sass from 'sass';
 import glob from 'glob';
 
-const defaultScopedName = "[local]_[hash:base64:6]";
+const hashFormats = ["latin1", "hex", "base64"];
+
+const replaceFormat = (formatString, fileName, cssContent) => {
+  const hashLengthMatch = formatString.match(/hash:.*:(\d+)/);
+  const hashFormatMatch = formatString.match(/hash:([^:]*)[:-]?/);
+  const hashFormat = hashFormatMatch && hashFormats.includes(hashFormatMatch[1]) ? hashFormatMatch[1] : "hex";
+  const hashLength = hashLengthMatch ? parseInt(hashLengthMatch[1]) : 6;
+  const hashString = crypto.createHash("md5").update(cssContent).digest(hashFormat);
+  const hashToUse = hashString.length < hashLength ? hashString : hashString.slice(0, hashLength);
+  return formatString.replace("[local]", fileName).replace(/\[hash:(.*?)(:\d+)?\]/, hashToUse)
+};
+
+const DEFAULT_SCOPED_NAME = "[local]_[hash:hex:6]";
 
 /**
  * @typedef {object} postCssLoaderOptions
@@ -27,7 +40,7 @@ const defaultScopedName = "[local]_[hash:base64:6]";
  * @returns
  */
 const postCssLoader = async ({code, fiePath, options}) => {
-  const {scopedName = defaultScopedName, postCssPlugins = [], classNamePrefix = ""} = options;
+  const {scopedName = DEFAULT_SCOPED_NAME, postCssPlugins = [], classNamePrefix = ""} = options;
 
   const modulesExported = {};
 
@@ -36,7 +49,10 @@ const postCssLoader = async ({code, fiePath, options}) => {
 
   const postCssPluginsWithCssModules = [
     postcssModules({
-      generateScopedName: isInNodeModules || isGlobalStyle ? "[local]" : classNamePrefix + scopedName,
+      generateScopedName: (name, filename, css) => {
+        const newClassName = classNamePrefix + ((isInNodeModules || isGlobalStyle) ? name : replaceFormat(scopedName, name, css));
+        return newClassName
+      },
       getJSON: (cssFileName, json) => (modulesExported[cssFileName] = json),
     }),
     ...postCssPlugins,

package/lib/index.js

@@ -3,11 +3,24 @@
 var rollupPluginutils = require('rollup-pluginutils');
 var postcss = require('postcss');
 var postcssModules = require('postcss-modules');
+var crypto = require('node:crypto');
 var fs = require('fs-extra');
 var sass = require('sass');
 var glob = require('glob');
 
-const defaultScopedName = "[local]_[hash:base64:6]";
+const hashFormats = ["latin1", "hex", "base64"];
+
+const replaceFormat = (formatString, fileName, cssContent) => {
+  const hashLengthMatch = formatString.match(/hash:.*:(\d+)/);
+  const hashFormatMatch = formatString.match(/hash:([^:]*)[:-]?/);
+  const hashFormat = hashFormatMatch && hashFormats.includes(hashFormatMatch[1]) ? hashFormatMatch[1] : "hex";
+  const hashLength = hashLengthMatch ? parseInt(hashLengthMatch[1]) : 6;
+  const hashString = crypto.createHash("md5").update(cssContent).digest(hashFormat);
+  const hashToUse = hashString.length < hashLength ? hashString : hashString.slice(0, hashLength);
+  return formatString.replace("[local]", fileName).replace(/\[hash:(.*?)(:\d+)?\]/, hashToUse)
+};
+
+const DEFAULT_SCOPED_NAME = "[local]_[hash:hex:6]";
 
 /**
  * @typedef {object} postCssLoaderOptions
@@ -29,7 +42,7 @@ const defaultScopedName = "[local]_[hash:base64:6]";
  * @returns
  */
 const postCssLoader = async ({code, fiePath, options}) => {
-  const {scopedName = defaultScopedName, postCssPlugins = [], classNamePrefix = ""} = options;
+  const {scopedName = DEFAULT_SCOPED_NAME, postCssPlugins = [], classNamePrefix = ""} = options;
 
   const modulesExported = {};
 
@@ -38,7 +51,10 @@ const postCssLoader = async ({code, fiePath, options}) => {
 
   const postCssPluginsWithCssModules = [
     postcssModules({
-      generateScopedName: isInNodeModules || isGlobalStyle ? "[local]" : classNamePrefix + scopedName,
+      generateScopedName: (name, filename, css) => {
+        const newClassName = classNamePrefix + ((isInNodeModules || isGlobalStyle) ? name : replaceFormat(scopedName, name, css));
+        return newClassName
+      },
       getJSON: (cssFileName, json) => (modulesExported[cssFileName] = json),
     }),
     ...postCssPlugins,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rollup-plugin-lib-style",
-  "version": "1.2.9",
+  "version": "2.0.0",
   "description": "A Rollup plugin that converts CSS and extensions for CSS into CSS modules and imports the generated CSS files",
   "main": "lib/index.js",
   "module": "lib/index.es.js",
@@ -54,13 +54,13 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-promise": "^6.1.1",
-    "fs-extra": "^11.0.0",
     "jest": "^29.3.1",
     "jest-environment-node-single-context": "^29.0.0",
     "prettier": "^2.8.0",
     "rollup": "^3.5.0"
   },
   "dependencies": {
+    "fs-extra": "^11.1.0",
     "postcss": "8.4.17",
     "postcss-modules": "4.0.0",
     "rollup-pluginutils": "2.8.2",