rollup-plugin-lib-style 1.1.0 → 1.2.1

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
 
@@ -25,10 +26,10 @@ npm i rollup-plugin-lib-style --save-dev
 
 ```js
 // rollup.config.js
-import {libStyleLoader} from "rollup-plugin-lib-style"
+import {libStylePlugin} from "rollup-plugin-lib-style"
 
 export default {
-  plugins: [libStyleLoader()],
+  plugins: [libStylePlugin()],
 }
 ```
 
@@ -99,7 +100,7 @@ const lessLoader = {
 }
 
 export default {
-  plugins: [libStyleLoader({loaders: [lessLoader]})],
+  plugins: [libStylePlugin({loaders: [lessLoader]})],
 }
 ```
 
@@ -109,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
 ```
@@ -124,7 +147,7 @@ import {libStylePlugin, onwarn} from "rollup-plugin-lib-style"
 
 export default {
   onwarn,
-  plugins: [libStyleLoader()],
+  plugins: [libStylePlugin()],
 }
 ```
 

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),
     })
   );

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),
     })
   );

package/package.json

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