rollup-plugin-lib-style 2.2.1 → 2.3.1

package/README.md

@@ -2,7 +2,6 @@
 
 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
@@ -63,6 +62,7 @@ This gives us the ability to consume only the used style
 ## Options
 
 ### importCSS
+
 Type: `boolean`<br />
 Default: true<br />
 Description: auto import the generated CSS
@@ -108,22 +108,31 @@ export default {
 ```
 
 ### exclude
+
 Type: Array<string | RegExp> | string | RegExp<br />
 Default: null<br />
 Description: exclude files from load by the loader
 
 ### customPath
+
 Type: string<br />
 Default: "."<br />
 Description: Change custom path for starting of reference to CSS file, useful for nested component structure
 
 ### customCSSPath
+
 Type: (id: string) => string<br />
 Default: undefined<br />
 Description: A callback that allows you to transform where to store import the generated CSS file from. For example, `Header.module.scss` transformed to `Header.module.css`, but NextJS treat `.module.scss` as CSS module, so you cannot import it directly. Then you can use `return id.replace(process.cwd(), "").replace(/\\/g, "/").replace('.module', '')` to fix it. This will affect both CSS filename and the `import` statement.
 
+### customCSSInjectedPath
+
+Type: (id: string) => string<br />
+Default: undefined<br />
+Description: A callback that allows you to transform the injected `import` statement path. For example, if you have deep nested css files like `./components/headers/Header.css` placed along with their corresponding js, this can be transformed to `./Header.css`. This will affect both CSS filename and the `import` statement.
 
 ## Global Styles
+
 In some cases, we will want to create global class names (without hash)
 we can do so by adding ".global" to the style file name.
 In this case, the scopedName will be "[local]"
@@ -146,7 +155,9 @@ export {style as default}
 ```
 
 ## Known Issues
+
 "Unresolved dependencies" warnings
+
 ```
 (!) Unresolved dependencies
 https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
@@ -154,6 +165,7 @@ https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
 ```
 
 These warnings can be suppressed by using the "onwarn" function
+
 ```js
 // rollup.config.js
 import {libStylePlugin, onwarn} from "rollup-plugin-lib-style"

package/lib/index.es.js

@@ -18,6 +18,20 @@ const replaceFormat = (formatString, fileName, cssContent) => {
   return formatString.replace("[local]", fileName).replace(/\[hash:(.*?)(:\d+)?\]/, hashToUse)
 };
 
+/**
+ * Ensures generated class names are valid CSS identifiers.
+ * - Replaces invalid characters with `_`
+ * - Ensures class names do not start with a number
+ * @param {string} name - Original class name
+ * @returns {string} - Valid CSS class name
+ */
+const normalizeClassName = (hash) => {
+  // Replace invalid characters with '_'
+  let sanitized = hash.replace(/[^a-zA-Z0-9-_]/g, "_");
+  if (/^[0-9]/.test(sanitized)) sanitized = `_${sanitized}`;
+  return sanitized
+};
+
 const DEFAULT_SCOPED_NAME = "[local]_[hash:hex:6]";
 
 /**
@@ -44,13 +58,18 @@ const postCssLoader = async ({code, fiePath, options}) => {
 
   const modulesExported = {};
 
-  const isGlobalStyle = /\.global.(css|scss|sass|less|stylus)$/.test(fiePath);
+  const isGlobalStyle = /\.global\.(css|scss|sass|less|stylus)$/.test(fiePath);
   const isInNodeModules = /[\\/]node_modules[\\/]/.test(fiePath);
 
   const postCssPluginsWithCssModules = [
     postcssModules({
       generateScopedName: (name, filename, css) => {
-        return isInNodeModules || isGlobalStyle ? name : classNamePrefix + replaceFormat(scopedName, name, css)
+        const hashContent = `${filename}:${name}:${css}`;
+        const rawScopedName = replaceFormat(scopedName, name, hashContent);
+        const normalizedName = normalizeClassName(rawScopedName);
+        return isInNodeModules || isGlobalStyle
+          ? name // Use the original name for global or node_modules styles
+          : classNamePrefix + normalizedName // Apply prefix and normalize
       },
       getJSON: (cssFileName, json) => (modulesExported[cssFileName] = json),
     }),
@@ -112,7 +131,7 @@ const defaultLoaders = [
 const replaceMagicPath = (fileContent, customPath = ".") => fileContent.replace(MAGIC_PATH_REGEX, customPath);
 
 const libStylePlugin = (options = {}) => {
-  const {customPath, customCSSPath, loaders, include, exclude, importCSS = true, ...postCssOptions} = options;
+  const {customPath, customCSSPath, customCSSInjectedPath, loaders, include, exclude, importCSS = true, ...postCssOptions} = options;
   const allLoaders = [...(loaders || []), ...defaultLoaders];
   const filter = createFilter(include, exclude);
   const getLoader = (filepath) => allLoaders.find((loader) => loader.regex.test(filepath));
@@ -142,6 +161,7 @@ const libStylePlugin = (options = {}) => {
       };
 
       const cssFilePath = customCSSPath ? customCSSPath(id) : getFilePath();
+      const cssFileInjectedPath = customCSSInjectedPath ? customCSSInjectedPath(cssFilePath) : cssFilePath;
 
       // create a new css file with the generated hash class names
       this.emitFile({
@@ -150,7 +170,7 @@ const libStylePlugin = (options = {}) => {
         source: postCssResult.extracted.code,
       });
 
-      const importStr = importCSS ? `import "${MAGIC_PATH}${cssFilePath.replace(loader.regex, ".css")}";\n` : "";
+      const importStr = importCSS ? `import "${MAGIC_PATH}${cssFileInjectedPath.replace(loader.regex, ".css")}";\n` : "";
 
       // create a new js file with css module
       return {

package/lib/index.js

@@ -20,6 +20,20 @@ const replaceFormat = (formatString, fileName, cssContent) => {
   return formatString.replace("[local]", fileName).replace(/\[hash:(.*?)(:\d+)?\]/, hashToUse)
 };
 
+/**
+ * Ensures generated class names are valid CSS identifiers.
+ * - Replaces invalid characters with `_`
+ * - Ensures class names do not start with a number
+ * @param {string} name - Original class name
+ * @returns {string} - Valid CSS class name
+ */
+const normalizeClassName = (hash) => {
+  // Replace invalid characters with '_'
+  let sanitized = hash.replace(/[^a-zA-Z0-9-_]/g, "_");
+  if (/^[0-9]/.test(sanitized)) sanitized = `_${sanitized}`;
+  return sanitized
+};
+
 const DEFAULT_SCOPED_NAME = "[local]_[hash:hex:6]";
 
 /**
@@ -46,13 +60,18 @@ const postCssLoader = async ({code, fiePath, options}) => {
 
   const modulesExported = {};
 
-  const isGlobalStyle = /\.global.(css|scss|sass|less|stylus)$/.test(fiePath);
+  const isGlobalStyle = /\.global\.(css|scss|sass|less|stylus)$/.test(fiePath);
   const isInNodeModules = /[\\/]node_modules[\\/]/.test(fiePath);
 
   const postCssPluginsWithCssModules = [
     postcssModules({
       generateScopedName: (name, filename, css) => {
-        return isInNodeModules || isGlobalStyle ? name : classNamePrefix + replaceFormat(scopedName, name, css)
+        const hashContent = `${filename}:${name}:${css}`;
+        const rawScopedName = replaceFormat(scopedName, name, hashContent);
+        const normalizedName = normalizeClassName(rawScopedName);
+        return isInNodeModules || isGlobalStyle
+          ? name // Use the original name for global or node_modules styles
+          : classNamePrefix + normalizedName // Apply prefix and normalize
       },
       getJSON: (cssFileName, json) => (modulesExported[cssFileName] = json),
     }),
@@ -114,7 +133,7 @@ const defaultLoaders = [
 const replaceMagicPath = (fileContent, customPath = ".") => fileContent.replace(MAGIC_PATH_REGEX, customPath);
 
 const libStylePlugin = (options = {}) => {
-  const {customPath, customCSSPath, loaders, include, exclude, importCSS = true, ...postCssOptions} = options;
+  const {customPath, customCSSPath, customCSSInjectedPath, loaders, include, exclude, importCSS = true, ...postCssOptions} = options;
   const allLoaders = [...(loaders || []), ...defaultLoaders];
   const filter = rollupPluginutils.createFilter(include, exclude);
   const getLoader = (filepath) => allLoaders.find((loader) => loader.regex.test(filepath));
@@ -144,6 +163,7 @@ const libStylePlugin = (options = {}) => {
       };
 
       const cssFilePath = customCSSPath ? customCSSPath(id) : getFilePath();
+      const cssFileInjectedPath = customCSSInjectedPath ? customCSSInjectedPath(cssFilePath) : cssFilePath;
 
       // create a new css file with the generated hash class names
       this.emitFile({
@@ -152,7 +172,7 @@ const libStylePlugin = (options = {}) => {
         source: postCssResult.extracted.code,
       });
 
-      const importStr = importCSS ? `import "${MAGIC_PATH}${cssFilePath.replace(loader.regex, ".css")}";\n` : "";
+      const importStr = importCSS ? `import "${MAGIC_PATH}${cssFileInjectedPath.replace(loader.regex, ".css")}";\n` : "";
 
       // create a new js file with css module
       return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rollup-plugin-lib-style",
-  "version": "2.2.1",
+  "version": "2.3.1",
   "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",

package/types/index.d.ts

@@ -21,6 +21,7 @@ declare interface Options {
   scopedName?: string
   customPath?: string
   customCSSPath?: (id: string) => string
+  customCSSInjectedPath?: (id: string) => string
 }
 
 declare const onwarn: (warning: RollupWarning, defaultHandler: (warning: string | RollupWarning) => void) => void