rollup-plugin-lib-style 1.0.1 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +9 -4
  2. package/lib/index.es.js +12 -8
  3. package/lib/index.js +12 -8
  4. package/package.json +68 -68
  5. package/types/index.d.ts +4 -3
package/README.md CHANGED
@@ -1,7 +1,7 @@
1
1
  # rollup-plugin-lib-style
2
2
 
3
- A Rollup plugin that converts CSS files into CSS modules and also imports the generated CSS files.
4
- 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
3
+ A Rollup plugin that converts CSS and extensions for CSS into CSS modules and imports the generated CSS files.
4
+ Under the assumption the library will be bundled by webpack or another bundler, it gives us the ability to consume only the used styles
5
5
 
6
6
  ## Why
7
7
 
@@ -56,10 +56,15 @@ var style = {test: "test_cPySKa"}
56
56
  export {style as default}
57
57
  ```
58
58
 
59
- This gives us the ability to consume only the used style for our component
59
+ This gives us the ability to consume only the used style
60
60
 
61
61
  ## Options
62
62
 
63
+ ### importCSS
64
+ Type: `boolean`<br />
65
+ Default: true<br />
66
+ Description: auto import the generated CSS
67
+
63
68
  ### classNamePrefix
64
69
 
65
70
  Type: `string`<br />
@@ -82,7 +87,7 @@ Description: [PostCSS Plugins](https://postcss.org/docs/postcss-plugins)
82
87
 
83
88
  Type: Loader[]<br />
84
89
  Default: []<br />
85
- Description: loaders for CSS preprocessor languages<br />
90
+ Description: loaders for CSS extension languages like Less, Stylus, ...<br />
86
91
  Example:
87
92
 
88
93
  ```js
package/lib/index.es.js CHANGED
@@ -10,15 +10,15 @@ const defaultScopedName = "[local]_[hash:base64:6]";
10
10
 
11
11
  /**
12
12
  * @typedef {object} postCssLoaderOptions
13
- * @property {object[]} postCssPlugins
14
- * @property {string} classNamePrefix
15
- * @property {string} scopedName
13
+ * @property {object[]} postCssPlugins
14
+ * @property {string} classNamePrefix
15
+ * @property {string} scopedName
16
16
  */
17
17
 
18
18
  /**
19
19
  * @typedef {object} postCssLoaderProps
20
- * @property {postCssLoaderOptions} options
21
- * @property {string} fiePath
20
+ * @property {postCssLoaderOptions} options
21
+ * @property {string} fiePath
22
22
  * @property {string} code
23
23
  */
24
24
 
@@ -93,8 +93,8 @@ const defaultLoaders = [
93
93
 
94
94
  const replaceMagicPath = (fileContent) => fileContent.replace(MAGIC_PATH_REGEX, ".");
95
95
 
96
- const libStylePlugin = (options) => {
97
- const {loaders, include, exclude, ...postCssOptions} = options;
96
+ const libStylePlugin = (options = {}) => {
97
+ const {loaders, include, exclude, importCSS = true, ...postCssOptions} = options;
98
98
  const allLoaders = [...(loaders || []), ...defaultLoaders];
99
99
  const filter = createFilter(include, exclude);
100
100
  const getLoader = (filepath) => allLoaders.find((loader) => loader.regex.test(filepath));
@@ -128,7 +128,7 @@ const libStylePlugin = (options) => {
128
128
  source: postCssResult.extracted.code,
129
129
  });
130
130
 
131
- const importStr = `import "${MAGIC_PATH}${cssFilePath.replace(loader.regex, ".css")}";\n`;
131
+ const importStr = importCSS ? `import "${MAGIC_PATH}${cssFilePath.replace(loader.regex, ".css")}";\n` : "";
132
132
 
133
133
  // create a new js file with css module
134
134
  return {
@@ -138,9 +138,12 @@ const libStylePlugin = (options) => {
138
138
  },
139
139
 
140
140
  async closeBundle() {
141
+ if (!importCSS) return
142
+
141
143
  const importers = [];
142
144
  modulesIds.forEach((id) => this.getModuleInfo(id).importers.forEach((importer) => importers.push(path.parse(importer).name + ".js"))); // TODO - add number pattern for duplicate name files
143
145
 
146
+ // get all the modules that import CSS files
144
147
  const importersPaths = outputPaths
145
148
  .reduce((result, currentPath) => {
146
149
  result.push(glob.sync(`${currentPath}/**/*(${importers.join("|")})`));
@@ -148,6 +151,7 @@ const libStylePlugin = (options) => {
148
151
  }, [])
149
152
  .flat();
150
153
 
154
+ // replace magic path with relative path
151
155
  await Promise.all(
152
156
  importersPaths.map((currentPath) =>
153
157
  fs
package/lib/index.js CHANGED
@@ -23,15 +23,15 @@ const defaultScopedName = "[local]_[hash:base64:6]";
23
23
 
24
24
  /**
25
25
  * @typedef {object} postCssLoaderOptions
26
- * @property {object[]} postCssPlugins
27
- * @property {string} classNamePrefix
28
- * @property {string} scopedName
26
+ * @property {object[]} postCssPlugins
27
+ * @property {string} classNamePrefix
28
+ * @property {string} scopedName
29
29
  */
30
30
 
31
31
  /**
32
32
  * @typedef {object} postCssLoaderProps
33
- * @property {postCssLoaderOptions} options
34
- * @property {string} fiePath
33
+ * @property {postCssLoaderOptions} options
34
+ * @property {string} fiePath
35
35
  * @property {string} code
36
36
  */
37
37
 
@@ -106,8 +106,8 @@ const defaultLoaders = [
106
106
 
107
107
  const replaceMagicPath = (fileContent) => fileContent.replace(MAGIC_PATH_REGEX, ".");
108
108
 
109
- const libStylePlugin = (options) => {
110
- const {loaders, include, exclude, ...postCssOptions} = options;
109
+ const libStylePlugin = (options = {}) => {
110
+ const {loaders, include, exclude, importCSS = true, ...postCssOptions} = options;
111
111
  const allLoaders = [...(loaders || []), ...defaultLoaders];
112
112
  const filter = rollupPluginutils.createFilter(include, exclude);
113
113
  const getLoader = (filepath) => allLoaders.find((loader) => loader.regex.test(filepath));
@@ -141,7 +141,7 @@ const libStylePlugin = (options) => {
141
141
  source: postCssResult.extracted.code,
142
142
  });
143
143
 
144
- const importStr = `import "${MAGIC_PATH}${cssFilePath.replace(loader.regex, ".css")}";\n`;
144
+ const importStr = importCSS ? `import "${MAGIC_PATH}${cssFilePath.replace(loader.regex, ".css")}";\n` : "";
145
145
 
146
146
  // create a new js file with css module
147
147
  return {
@@ -151,9 +151,12 @@ const libStylePlugin = (options) => {
151
151
  },
152
152
 
153
153
  async closeBundle() {
154
+ if (!importCSS) return
155
+
154
156
  const importers = [];
155
157
  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
156
158
 
159
+ // get all the modules that import CSS files
157
160
  const importersPaths = outputPaths
158
161
  .reduce((result, currentPath) => {
159
162
  result.push(glob__default["default"].sync(`${currentPath}/**/*(${importers.join("|")})`));
@@ -161,6 +164,7 @@ const libStylePlugin = (options) => {
161
164
  }, [])
162
165
  .flat();
163
166
 
167
+ // replace magic path with relative path
164
168
  await Promise.all(
165
169
  importersPaths.map((currentPath) =>
166
170
  fs__default["default"]
package/package.json CHANGED
@@ -1,68 +1,68 @@
1
- {
2
- "name": "rollup-plugin-lib-style",
3
- "version": "1.0.1",
4
- "description": "Rollup plugin that converts CSS and more preprocessor languages into CSS modules and also imports the generated CSS files",
5
- "main": "lib/index.js",
6
- "module": "lib/index.es.js",
7
- "files": [
8
- "lib",
9
- "types/index.d.ts"
10
- ],
11
- "scripts": {
12
- "build": "rollup --input src/index.js --file lib/index.es.js --format es && rollup --input src/index.js --file lib/index.js --format cjs",
13
- "prepublishOnly": "npm run build && npm run test",
14
- "postpublish": "git push && git push --tags",
15
- "publish:beta": "npm version prerelease --preid=beta -m \"beta version - %s\" && npm publish --tag beta",
16
- "publish:patch": "npm version patch -m \"patch version - %s\" && npm publish",
17
- "publish:minor": "npm version minor -m \"minor version - %s\" && npm publish",
18
- "publish:major": "npm version major -m \"major version - %s\" && npm publish",
19
- "lint:fix": "eslint **/*.{js,jsx} --fix",
20
- "lint": "eslint **/*.{js,jsx}",
21
- "test": "jest",
22
- "test:cov": "jest --coverage"
23
- },
24
- "repository": {
25
- "type": "git",
26
- "url": "git+https://github.com/danielamenou/rollup-plugin-lib-style"
27
- },
28
- "keywords": [
29
- "library",
30
- "rollup",
31
- "plugin",
32
- "style",
33
- "sass",
34
- "scss",
35
- "css"
36
- ],
37
- "author": "Daniel Amenou <amenou.daniel@gmail.com>",
38
- "license": "MIT",
39
- "engines": {
40
- "node": ">=16"
41
- },
42
- "types": "./types/index.d.ts",
43
- "devDependencies": {
44
- "@babel/core": "^7.19.3",
45
- "@babel/eslint-parser": "^7.19.1",
46
- "@babel/preset-env": "^7.19.3",
47
- "@types/jest": "^29.1.2",
48
- "babel-core": "^6.26.3",
49
- "babel-jest": "^29.1.2",
50
- "eslint": "^8.25.0",
51
- "eslint-config-prettier": "^8.5.0",
52
- "eslint-config-rem": "^4.0.0",
53
- "eslint-plugin-import": "^2.26.0",
54
- "eslint-plugin-prettier": "^4.2.1",
55
- "eslint-plugin-promise": "^6.0.1",
56
- "fs-extra": "^10.1.0",
57
- "jest": "^29.1.2",
58
- "jest-environment-node-single-context": "^29.0.0",
59
- "prettier": "^2.7.1",
60
- "rollup": "^2.79.1"
61
- },
62
- "dependencies": {
63
- "postcss": "^8.4.17",
64
- "postcss-modules": "^4.0.0",
65
- "rollup-pluginutils": "^2.8.2",
66
- "sass": "^1.55.0"
67
- }
68
- }
1
+ {
2
+ "name": "rollup-plugin-lib-style",
3
+ "version": "1.1.0",
4
+ "description": "A Rollup plugin that converts CSS and extensions for CSS into CSS modules and imports the generated CSS files",
5
+ "main": "lib/index.js",
6
+ "module": "lib/index.es.js",
7
+ "files": [
8
+ "lib",
9
+ "types/index.d.ts"
10
+ ],
11
+ "scripts": {
12
+ "build": "rollup --input src/index.js --file lib/index.es.js --format es && rollup --input src/index.js --file lib/index.js --format cjs",
13
+ "prepublishOnly": "npm run build && npm run test",
14
+ "postpublish": "git push && git push --tags",
15
+ "publish:beta": "npm version prerelease --preid=beta -m \"beta version - %s\" && npm publish --tag beta",
16
+ "publish:patch": "npm version patch -m \"patch version - %s\" && npm publish",
17
+ "publish:minor": "npm version minor -m \"minor version - %s\" && npm publish",
18
+ "publish:major": "npm version major -m \"major version - %s\" && npm publish",
19
+ "lint:fix": "eslint **/*.{js,jsx} --fix",
20
+ "lint": "eslint **/*.{js,jsx}",
21
+ "test": "jest",
22
+ "test:cov": "jest --coverage"
23
+ },
24
+ "repository": {
25
+ "type": "git",
26
+ "url": "git+https://github.com/danielamenou/rollup-plugin-lib-style"
27
+ },
28
+ "keywords": [
29
+ "library",
30
+ "rollup",
31
+ "plugin",
32
+ "style",
33
+ "sass",
34
+ "scss",
35
+ "css"
36
+ ],
37
+ "author": "Daniel Amenou <amenou.daniel@gmail.com>",
38
+ "license": "MIT",
39
+ "engines": {
40
+ "node": ">=16"
41
+ },
42
+ "types": "./types/index.d.ts",
43
+ "devDependencies": {
44
+ "@babel/core": "^7.19.3",
45
+ "@babel/eslint-parser": "^7.19.1",
46
+ "@babel/preset-env": "^7.19.3",
47
+ "@types/jest": "^29.1.2",
48
+ "babel-core": "^6.26.3",
49
+ "babel-jest": "^29.1.2",
50
+ "eslint": "^8.25.0",
51
+ "eslint-config-prettier": "^8.5.0",
52
+ "eslint-config-rem": "^4.0.0",
53
+ "eslint-plugin-import": "^2.26.0",
54
+ "eslint-plugin-prettier": "^4.2.1",
55
+ "eslint-plugin-promise": "^6.0.1",
56
+ "fs-extra": "^10.1.0",
57
+ "jest": "^29.1.2",
58
+ "jest-environment-node-single-context": "^29.0.0",
59
+ "prettier": "^2.7.1",
60
+ "rollup": "^2.79.1"
61
+ },
62
+ "dependencies": {
63
+ "postcss": "^8.4.17",
64
+ "postcss-modules": "^4.0.0",
65
+ "rollup-pluginutils": "^2.8.2",
66
+ "sass": "^1.55.0"
67
+ }
68
+ }
package/types/index.d.ts CHANGED
@@ -15,9 +15,10 @@ declare interface Options {
15
15
  include?: string | string[]
16
16
  exclude?: string | string[]
17
17
  loaders?: Loader[]
18
- postCssPlugins: object[]
19
- classNamePrefix: string
20
- scopedName: string
18
+ importCSS?: boolean
19
+ postCssPlugins?: object[]
20
+ classNamePrefix?: string
21
+ scopedName?: string
21
22
  }
22
23
 
23
24
  type onwarn = (warning: RollupWarning, defaultHandler: (warning: string | RollupWarning) => void) => void