rollup-plugin-lib-style 2.3.0 → 2.3.2

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),
     }),
@@ -143,11 +162,12 @@ const libStylePlugin = (options = {}) => {
 
       const cssFilePath = customCSSPath ? customCSSPath(id) : getFilePath();
       const cssFileInjectedPath = customCSSInjectedPath ? customCSSInjectedPath(cssFilePath) : cssFilePath;
+      const cssFilePathWithoutSlash = cssFilePath.startsWith("/") ? cssFilePath.substring(1) : cssFilePath;
 
       // create a new css file with the generated hash class names
       this.emitFile({
         type: "asset",
-        fileName: cssFilePath.replace("/", "").replace(loader.regex, ".css"),
+        fileName: cssFilePathWithoutSlash.replace(loader.regex, ".css"),
         source: postCssResult.extracted.code,
       });
 

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),
     }),
@@ -145,11 +164,12 @@ const libStylePlugin = (options = {}) => {
 
       const cssFilePath = customCSSPath ? customCSSPath(id) : getFilePath();
       const cssFileInjectedPath = customCSSInjectedPath ? customCSSInjectedPath(cssFilePath) : cssFilePath;
+      const cssFilePathWithoutSlash = cssFilePath.startsWith("/") ? cssFilePath.substring(1) : cssFilePath;
 
       // create a new css file with the generated hash class names
       this.emitFile({
         type: "asset",
-        fileName: cssFilePath.replace("/", "").replace(loader.regex, ".css"),
+        fileName: cssFilePathWithoutSlash.replace(loader.regex, ".css"),
         source: postCssResult.extracted.code,
       });
 

package/package.json

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