rollup-plugin-lib-style 1.0.3 → 1.2.0

package/README.md

@@ -1,16 +1,17 @@
 # rollup-plugin-lib-style
 
-A Rollup plugin that converts CSS and extensions for CSS into CSS modules and imports the generated CSS files.
-Under the assumption the library will be bundled by webpack or another bundler, it gives us the ability to consume only the used styles
+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).
+
 
 ## Why
 
-Today there are 2 main ways to bundle and import style from a library
+Today there are 2 main ways to bundle and import styles from a library
 
-- bundle all the styles into one big CSS file
-- use CSS-in-JS
+- 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 using one big file we are importing style that probably will not be necessary, and when you are using CSS-in-JS you will increase 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
 
@@ -56,10 +57,15 @@ var style = {test: "test_cPySKa"}
 export {style as default}
 ```
 
-This gives us the ability to consume only the used style for our component
+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
+
 ### classNamePrefix
 
 Type: `string`<br />
@@ -82,7 +88,7 @@ Description: [PostCSS Plugins](https://postcss.org/docs/postcss-plugins)
 
 Type: Loader[]<br />
 Default: []<br />
-Description: loaders for CSS preprocessor languages<br />
+Description: loaders for CSS extension languages like Less, Stylus, ...<br />
 Example:
 
 ```js
@@ -104,6 +110,28 @@ Default: null<br />
 Description: exclude files from load by the loader
 
 
+## 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]"
+Example: myStyle.global.css, mySecondStyle.global.scss
+
+```css
+// myStyle.global.css
+.myStyle {
+  background-color: red;
+}
+```
+
+```js
+// myStyle.global.css.js
+import "./myComponent/style.css"
+
+var style = {myStyle: "myStyle"}
+
+export {style as default}
+```
+
 ## Known Issues
 "Unresolved dependencies" warnings
 ```

package/lib/index.es.js

@@ -32,9 +32,11 @@ const postCssLoader = async ({code, fiePath, options}) => {
 
   const modulesExported = {};
 
+  const isGlobalStyle = /\.global.(css|scss|sass|less|stylus)$/.test(fiePath);
+
   postCssPlugins.unshift(
     postcssModules({
-      generateScopedName: classNamePrefix + scopedName,
+      generateScopedName: isGlobalStyle ? "[local]" : classNamePrefix + scopedName,
       getJSON: (cssFileName, json) => (modulesExported[cssFileName] = json),
     })
   );
@@ -94,7 +96,7 @@ const defaultLoaders = [
 const replaceMagicPath = (fileContent) => fileContent.replace(MAGIC_PATH_REGEX, ".");
 
 const libStylePlugin = (options = {}) => {
-  const {loaders, include, exclude, ...postCssOptions} = options;
+  const {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));
@@ -128,7 +130,7 @@ const libStylePlugin = (options = {}) => {
         source: postCssResult.extracted.code,
       });
 
-      const importStr = `import "${MAGIC_PATH}${cssFilePath.replace(loader.regex, ".css")}";\n`;
+      const importStr = importCSS ? `import "${MAGIC_PATH}${cssFilePath.replace(loader.regex, ".css")}";\n` : "";
 
       // create a new js file with css module
       return {
@@ -138,9 +140,12 @@ const libStylePlugin = (options = {}) => {
     },
 
     async closeBundle() {
+      if (!importCSS) return
+
       const importers = [];
       modulesIds.forEach((id) => this.getModuleInfo(id).importers.forEach((importer) => importers.push(path.parse(importer).name + ".js"))); // TODO - add number pattern for duplicate name files
 
+      // get all the modules that import CSS files
       const importersPaths = outputPaths
         .reduce((result, currentPath) => {
           result.push(glob.sync(`${currentPath}/**/*(${importers.join("|")})`));
@@ -148,6 +153,7 @@ const libStylePlugin = (options = {}) => {
         }, [])
         .flat();
 
+      // replace magic path with relative path
       await Promise.all(
         importersPaths.map((currentPath) =>
           fs

package/lib/index.js

@@ -45,9 +45,11 @@ const postCssLoader = async ({code, fiePath, options}) => {
 
   const modulesExported = {};
 
+  const isGlobalStyle = /\.global.(css|scss|sass|less|stylus)$/.test(fiePath);
+
   postCssPlugins.unshift(
     postcssModules__default["default"]({
-      generateScopedName: classNamePrefix + scopedName,
+      generateScopedName: isGlobalStyle ? "[local]" : classNamePrefix + scopedName,
       getJSON: (cssFileName, json) => (modulesExported[cssFileName] = json),
     })
   );
@@ -107,7 +109,7 @@ const defaultLoaders = [
 const replaceMagicPath = (fileContent) => fileContent.replace(MAGIC_PATH_REGEX, ".");
 
 const libStylePlugin = (options = {}) => {
-  const {loaders, include, exclude, ...postCssOptions} = options;
+  const {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));
@@ -141,7 +143,7 @@ const libStylePlugin = (options = {}) => {
         source: postCssResult.extracted.code,
       });
 
-      const importStr = `import "${MAGIC_PATH}${cssFilePath.replace(loader.regex, ".css")}";\n`;
+      const importStr = importCSS ? `import "${MAGIC_PATH}${cssFilePath.replace(loader.regex, ".css")}";\n` : "";
 
       // create a new js file with css module
       return {
@@ -151,9 +153,12 @@ const libStylePlugin = (options = {}) => {
     },
 
     async closeBundle() {
+      if (!importCSS) return
+
       const importers = [];
       modulesIds.forEach((id) => this.getModuleInfo(id).importers.forEach((importer) => importers.push(path__default["default"].parse(importer).name + ".js"))); // TODO - add number pattern for duplicate name files
 
+      // get all the modules that import CSS files
       const importersPaths = outputPaths
         .reduce((result, currentPath) => {
           result.push(glob__default["default"].sync(`${currentPath}/**/*(${importers.join("|")})`));
@@ -161,6 +166,7 @@ const libStylePlugin = (options = {}) => {
         }, [])
         .flat();
 
+      // replace magic path with relative path
       await Promise.all(
         importersPaths.map((currentPath) =>
           fs__default["default"]

package/package.json

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

package/types/index.d.ts

@@ -15,9 +15,10 @@ declare interface Options {
   include?: string | string[]
   exclude?: string | string[]
   loaders?: Loader[]
-  postCssPlugins: object[]
-  classNamePrefix: string
-  scopedName: string
+  importCSS?: boolean
+  postCssPlugins?: object[]
+  classNamePrefix?: string
+  scopedName?: string
 }
 
 type onwarn = (warning: RollupWarning, defaultHandler: (warning: string | RollupWarning) => void) => void