rollup-plugin-lib-style 1.0.0

package/README.md

@@ -0,0 +1,108 @@
+# rollup-plugin-lib-style
+
+A Rollup plugin that converts CSS files into CSS modules and also imports the generated CSS files.
+Under the assumption that your library will be bundled by webpack or another bundler, it gives us the ability to consume only the used styles
+
+## Why
+
+Today there are 2 main ways to bundle and import style from a library
+
+- bundle all the styles into one big CSS file
+- use CSS-in-JS
+
+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
+
+This plugin brings you the ability to consume only the used styles from the library
+
+## Install
+
+```bash
+yarn add rollup-plugin-lib-style --dev
+npm i rollup-plugin-lib-style --save-dev
+```
+
+## Usage
+
+```js
+// rollup.config.js
+import {libStyleLoader} from "rollup-plugin-lib-style"
+
+export default {
+  plugins: [libStyleLoader()],
+}
+```
+
+After adding this plugin we will be able to use CSS, SCSS, and SASS files (and more languages by adding plugins)
+The imported CSS file will be transformed into a CSS module and a new CSS file will be generated
+
+In the js file that imports style file, the import will be changed in the following way:
+
+```js
+import style from "./style.css"
+```
+
+```js
+import style from "./style.css.js"
+```
+
+The newly generated file will export the CSS module, but also will import the new CSS file.
+
+```js
+// style.css.js"
+import "./myComponent/style.css"
+
+var style = {test: "test_cPySKa"}
+
+export {style as default}
+```
+
+This gives us the ability to consume only the used style for our component
+
+## Options
+
+### classNamePrefix
+
+Type: `string`
+Default: ""
+Description: prefix for the classnames
+
+### scopedName
+
+Type: `string`
+Default: "[local]\_[hash:base64:6]"
+Description: customize the scoped name of the classname
+
+### postCssPlugins
+
+Type: object[]
+Default: []
+Description: [PostCSS Plugins](https://postcss.org/docs/postcss-plugins)
+
+### loaders
+
+Type: Loader[]
+Default: []
+Description: loaders for CSS preprocessor languages
+Example:
+
+```js
+// rollup.config.js
+const lessLoader = {
+  name: "lessLoader"
+  regex: /\.less$/
+  process: ({code, filePath}) => less(code)
+}
+
+export default {
+  plugins: [libStyleLoader({loaders: [lessLoader]})],
+}
+```
+
+### exclude
+Type: Array<string | RegExp> | string | RegExp
+Default: null
+Description: exclude files from load by the loader
+
+## License
+
+MIT &copy; [Daniel Amenou](https://github.com/DanielAmenou)

package/lib/index.es.js

@@ -0,0 +1,170 @@
+import { createFilter } from 'rollup-pluginutils';
+import postcss from 'postcss';
+import postcssModules from 'postcss-modules';
+import fs from 'fs-extra';
+import sass from 'sass';
+import path from 'path';
+import glob from 'glob';
+
+const defaultScopedName = "[local]_[hash:base64:6]";
+
+/**
+ * @typedef {object} postCssLoaderOptions
+* @property {object[]} postCssPlugins
+* @property {string} classNamePrefix
+* @property {string} scopedName
+ */
+
+/**
+ * @typedef {object} postCssLoaderProps
+* @property {postCssLoaderOptions} options
+* @property {string} fiePath
+ * @property {string} code
+ */
+
+/**
+ * Transform CSS into CSS-modules
+ * @param {postCssLoaderProps}
+ * @returns
+ */
+const postCssLoader = async ({code, fiePath, options}) => {
+  const {scopedName = defaultScopedName, postCssPlugins = [], classNamePrefix = ""} = options;
+
+  const modulesExported = {};
+
+  postCssPlugins.unshift(
+    postcssModules({
+      generateScopedName: classNamePrefix + scopedName,
+      getJSON: (cssFileName, json) => (modulesExported[cssFileName] = json),
+    })
+  );
+
+  const postcssOptions = {
+    from: fiePath,
+    to: fiePath,
+    map: false,
+  };
+
+  const result = await postcss(postCssPlugins).process(code, postcssOptions);
+
+  // collect dependencies
+  const dependencies = [];
+  for (const message of result.messages) {
+    if (message.type === "dependency") {
+      dependencies.add(message.file);
+    }
+  }
+
+  // print postcss warnings
+  for (const warning of result.warnings()) {
+    console.warn(warning.message || warning.text);
+  }
+
+  return {
+    code: `export default ${JSON.stringify(modulesExported[fiePath])};`,
+    dependencies,
+    extracted: {
+      id: fiePath,
+      code: result.css,
+    },
+  }
+};
+
+const PLUGIN_NAME = "rollup-plugin-lib-style";
+const MAGIC_PATH_REGEX = /@@_MAGIC_PATH_@@/g;
+const MAGIC_PATH = "@@_MAGIC_PATH_@@";
+
+const modulesIds = new Set();
+
+const outputPaths = [];
+
+const defaultLoaders = [
+  {
+    name: "sass",
+    regex: /\.(sass|scss)$/,
+    process: ({filePath}) => ({code: sass.compile(filePath).css.toString()}),
+  },
+  {
+    name: "css",
+    regex: /\.(css)$/,
+    process: ({code}) => ({code}),
+  },
+];
+
+const replaceMagicPath = (fileContent) => fileContent.replace(MAGIC_PATH_REGEX, ".");
+
+const libStylePlugin = (options) => {
+  const {loaders, include, exclude, ...postCssOptions} = options;
+  const allLoaders = [...(loaders || []), ...defaultLoaders];
+  const filter = createFilter(include, exclude);
+  const getLoader = (filepath) => allLoaders.find((loader) => loader.regex.test(filepath));
+
+  return {
+    name: PLUGIN_NAME,
+
+    options(options) {
+      if (!options.output) console.error("missing output options");
+      else options.output.forEach((outputOptions) => outputPaths.push(outputOptions.dir));
+    },
+
+    async transform(code, id) {
+      const loader = getLoader(id);
+      if (!filter(id) || !loader) return null
+
+      modulesIds.add(id);
+
+      const rawCss = await loader.process({filePath: id, code});
+
+      const postCssResult = await postCssLoader({code: rawCss.code, fiePath: id, options: postCssOptions});
+
+      for (const dependence of postCssResult.dependencies) this.addWatchFile(dependence);
+
+      const cssFilePath = id.replace(process.cwd(), "").replace(/\\/g, "/");
+
+      // create a new css file with the generated hash class names
+      this.emitFile({
+        type: "asset",
+        fileName: cssFilePath.replace("/", "").replace(loader.regex, ".css"),
+        source: postCssResult.extracted.code,
+      });
+
+      const importStr = `import "${MAGIC_PATH}${cssFilePath.replace(loader.regex, ".css")}";\n`;
+
+      // create a new js file with css module
+      return {
+        code: importStr + postCssResult.code,
+        map: {mappings: ""},
+      }
+    },
+
+    async closeBundle() {
+      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
+
+      const importersPaths = outputPaths
+        .reduce((result, currentPath) => {
+          result.push(glob.sync(`${path.resolve(process.cwd(), currentPath)}/**/*(${importers.join("|")})`));
+          return result
+        }, [])
+        .flat();
+
+      //const importersPaths = glob.sync(`lib/**/*(${importers.join("|")})`)
+      await Promise.all(
+        importersPaths.map((currentPath) =>
+          fs
+            .readFile(currentPath)
+            .then((buffer) => buffer.toString())
+            .then(replaceMagicPath)
+            .then((fileContent) => fs.writeFile(currentPath, fileContent))
+        )
+      );
+    },
+  }
+};
+
+const onwarn = (warning, warn) => {
+  if (warning.code === "UNRESOLVED_IMPORT" && warning.message.includes(MAGIC_PATH)) return
+  warn(warning);
+};
+
+export { libStylePlugin, onwarn };

package/lib/index.js

@@ -0,0 +1,184 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var rollupPluginutils = require('rollup-pluginutils');
+var postcss = require('postcss');
+var postcssModules = require('postcss-modules');
+var fs = require('fs-extra');
+var sass = require('sass');
+var path = require('path');
+var glob = require('glob');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var postcss__default = /*#__PURE__*/_interopDefaultLegacy(postcss);
+var postcssModules__default = /*#__PURE__*/_interopDefaultLegacy(postcssModules);
+var fs__default = /*#__PURE__*/_interopDefaultLegacy(fs);
+var sass__default = /*#__PURE__*/_interopDefaultLegacy(sass);
+var path__default = /*#__PURE__*/_interopDefaultLegacy(path);
+var glob__default = /*#__PURE__*/_interopDefaultLegacy(glob);
+
+const defaultScopedName = "[local]_[hash:base64:6]";
+
+/**
+ * @typedef {object} postCssLoaderOptions
+* @property {object[]} postCssPlugins
+* @property {string} classNamePrefix
+* @property {string} scopedName
+ */
+
+/**
+ * @typedef {object} postCssLoaderProps
+* @property {postCssLoaderOptions} options
+* @property {string} fiePath
+ * @property {string} code
+ */
+
+/**
+ * Transform CSS into CSS-modules
+ * @param {postCssLoaderProps}
+ * @returns
+ */
+const postCssLoader = async ({code, fiePath, options}) => {
+  const {scopedName = defaultScopedName, postCssPlugins = [], classNamePrefix = ""} = options;
+
+  const modulesExported = {};
+
+  postCssPlugins.unshift(
+    postcssModules__default["default"]({
+      generateScopedName: classNamePrefix + scopedName,
+      getJSON: (cssFileName, json) => (modulesExported[cssFileName] = json),
+    })
+  );
+
+  const postcssOptions = {
+    from: fiePath,
+    to: fiePath,
+    map: false,
+  };
+
+  const result = await postcss__default["default"](postCssPlugins).process(code, postcssOptions);
+
+  // collect dependencies
+  const dependencies = [];
+  for (const message of result.messages) {
+    if (message.type === "dependency") {
+      dependencies.add(message.file);
+    }
+  }
+
+  // print postcss warnings
+  for (const warning of result.warnings()) {
+    console.warn(warning.message || warning.text);
+  }
+
+  return {
+    code: `export default ${JSON.stringify(modulesExported[fiePath])};`,
+    dependencies,
+    extracted: {
+      id: fiePath,
+      code: result.css,
+    },
+  }
+};
+
+const PLUGIN_NAME = "rollup-plugin-lib-style";
+const MAGIC_PATH_REGEX = /@@_MAGIC_PATH_@@/g;
+const MAGIC_PATH = "@@_MAGIC_PATH_@@";
+
+const modulesIds = new Set();
+
+const outputPaths = [];
+
+const defaultLoaders = [
+  {
+    name: "sass",
+    regex: /\.(sass|scss)$/,
+    process: ({filePath}) => ({code: sass__default["default"].compile(filePath).css.toString()}),
+  },
+  {
+    name: "css",
+    regex: /\.(css)$/,
+    process: ({code}) => ({code}),
+  },
+];
+
+const replaceMagicPath = (fileContent) => fileContent.replace(MAGIC_PATH_REGEX, ".");
+
+const libStylePlugin = (options) => {
+  const {loaders, include, exclude, ...postCssOptions} = options;
+  const allLoaders = [...(loaders || []), ...defaultLoaders];
+  const filter = rollupPluginutils.createFilter(include, exclude);
+  const getLoader = (filepath) => allLoaders.find((loader) => loader.regex.test(filepath));
+
+  return {
+    name: PLUGIN_NAME,
+
+    options(options) {
+      if (!options.output) console.error("missing output options");
+      else options.output.forEach((outputOptions) => outputPaths.push(outputOptions.dir));
+    },
+
+    async transform(code, id) {
+      const loader = getLoader(id);
+      if (!filter(id) || !loader) return null
+
+      modulesIds.add(id);
+
+      const rawCss = await loader.process({filePath: id, code});
+
+      const postCssResult = await postCssLoader({code: rawCss.code, fiePath: id, options: postCssOptions});
+
+      for (const dependence of postCssResult.dependencies) this.addWatchFile(dependence);
+
+      const cssFilePath = id.replace(process.cwd(), "").replace(/\\/g, "/");
+
+      // create a new css file with the generated hash class names
+      this.emitFile({
+        type: "asset",
+        fileName: cssFilePath.replace("/", "").replace(loader.regex, ".css"),
+        source: postCssResult.extracted.code,
+      });
+
+      const importStr = `import "${MAGIC_PATH}${cssFilePath.replace(loader.regex, ".css")}";\n`;
+
+      // create a new js file with css module
+      return {
+        code: importStr + postCssResult.code,
+        map: {mappings: ""},
+      }
+    },
+
+    async closeBundle() {
+      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
+
+      const importersPaths = outputPaths
+        .reduce((result, currentPath) => {
+          result.push(glob__default["default"].sync(`${path__default["default"].resolve(process.cwd(), currentPath)}/**/*(${importers.join("|")})`));
+          return result
+        }, [])
+        .flat();
+
+      //const importersPaths = glob.sync(`lib/**/*(${importers.join("|")})`)
+      await Promise.all(
+        importersPaths.map((currentPath) =>
+          fs__default["default"]
+            .readFile(currentPath)
+            .then((buffer) => buffer.toString())
+            .then(replaceMagicPath)
+            .then((fileContent) => fs__default["default"].writeFile(currentPath, fileContent))
+        )
+      );
+    },
+  }
+};
+
+const onwarn = (warning, warn) => {
+  if (warning.code === "UNRESOLVED_IMPORT" && warning.message.includes(MAGIC_PATH)) return
+  warn(warning);
+};
+
+exports.libStylePlugin = libStylePlugin;
+exports.onwarn = onwarn;

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "rollup-plugin-lib-style",
+  "version": "1.0.0",
+  "description": "Rollup plugin that converts CSS and more preprocessor languages into CSS modules and also imports the generated CSS files",
+  "main": "lib/index.js",
+  "module": "lib/index.es.js",
+  "files": [
+    "lib",
+    "types/index.d.ts"
+  ],
+  "scripts": {
+    "build": "rollup --input src/index.js --file lib/index.es.js --format es && rollup --input src/index.js --file lib/index.js --format cjs",
+    "prepublishOnly": "npm run build && npm run test",
+    "postpublish": "git push && git push --tags",
+    "publish:beta": "npm version prerelease --preid=beta -m \"beta version - %s\" && npm publish --tag beta",
+    "publish:patch": "npm version patch -m \"patch version - %s\" && npm publish",
+    "publish:minor": "npm version minor -m \"minor version - %s\" && npm publish",
+    "publish:major": "npm version major -m \"major version - %s\" && npm publish",
+    "lint:fix": "eslint **/*.{js,jsx} --fix",
+    "lint": "eslint **/*.{js,jsx}",
+    "test": "jest",
+    "test:cov": "jest --coverage"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/danielamenou/rollup-plugin-lib-style"
+  },
+  "keywords": [
+    "library",
+    "rollup",
+    "plugin",
+    "style",
+    "sass",
+    "scss",
+    "css"
+  ],
+  "author": "Daniel Amenou <amenou.daniel@gmail.com>",
+  "license": "MIT",
+  "engines": {
+    "node": ">=16"
+  },
+  "types": "./types/index.d.ts",
+  "devDependencies": {
+    "@babel/core": "^7.19.3",
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/preset-env": "^7.19.3",
+    "@types/jest": "^29.1.2",
+    "babel-core": "^6.26.3",
+    "babel-jest": "^29.1.2",
+    "eslint": "^8.25.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-rem": "^4.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-promise": "^6.0.1",
+    "fs-extra": "^10.1.0",
+    "jest": "^29.1.2",
+    "jest-environment-node-single-context": "^29.0.0",
+    "prettier": "^2.7.1",
+    "rollup": "^2.79.1"
+  },
+  "dependencies": {
+    "postcss": "^8.4.17",
+    "postcss-modules": "^4.0.0",
+    "rollup-pluginutils": "^2.8.2",
+    "sass": "^1.55.0"
+  }
+}

package/types/index.d.ts

@@ -0,0 +1,26 @@
+import {Plugin, TransformHook, RollupWarning} from "rollup"
+
+declare interface ProcessArgs {
+  code: string
+  filePath: string
+}
+
+declare interface Loader {
+  name: string
+  regex: string
+  process: (arg: ProcessArgs) => string
+}
+
+declare interface Options {
+  include?: string | string[]
+  exclude?: string | string[]
+  loaders?: Loader[]
+  postCssPlugins: object[]
+  classNamePrefix: string
+  scopedName: string
+}
+
+type onwarn = (warning: RollupWarning, defaultHandler: (warning: string | RollupWarning) => void) => void
+type libStylePlugin = (options?: Options) => Plugin
+
+export {onwarn, libStylePlugin}