gulp-stacksvg 2.0.1 → 2.0.3

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 (4) hide show
  1. package/{LICENSE → LICENSE.md} +3 -4
  2. package/README.md +21 -17
  3. package/{index.js → lib/index.js} +33 -8
  4. package/package.json +52 -56
package/{LICENSE → LICENSE.md} RENAMED
@@ -1,8 +1,7 @@
1
- MIT License
2
- ===========
1
+ # MIT License
3
2
 
4
- Copyright 2022 Sergey Artemov <firefoxic.dev@gmail.com>
5
- Copyright 2014–2021 Andrey Kuzmin <unsoundscapes@gmail.com>
3
+ Copyright © 2022-2023 Sergey Artemov <firefoxic.dev@gmail.com>
4
+ Copyright © 2014–2021 Andrey Kuzmin <unsoundscapes@gmail.com>
6
5
 
7
6
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
8
7
 
package/README.md CHANGED
@@ -1,3 +1,4 @@
1
+ <!-- markdownlint-disable MD007 -->
1
2
  # gulp-stacksvg
2
3
 
3
4
  [![Test Status][test-image]][test-url]
@@ -5,7 +6,7 @@
5
6
  [![NPM version][npm-image]][npm-url]
6
7
  [![Vulnerabilities count][vulnerabilities-image]][vulnerabilities-url]
7
8
 
8
- Combine SVG icon files into one with the stack method.
9
+ The gulp plugin to combine svg files into one using the stack method.
9
10
 
10
11
  ## Installation
11
12
 
@@ -32,11 +33,11 @@ function makeStack () {
32
33
 
33
34
  ### Available options
34
35
 
35
- | Option | Description | Default |
36
- |-------------|--------------------------------------------------------------------------------------|-------------|
37
- | `output` | Sets the stack file name. Accepts values ​both with and without the `.svg` extension. | `stack.svg` |
38
- | `separator` | Replaces the directory separator for the `id` attribute. | `_` |
39
- | `spacer` | Joins space-separated words for the `id` attribute. | `-` |
36
+ | Option | Description | Default |
37
+ |-------------|--------------------------------------------------------------------------------------|---------|
38
+ | `output` | Sets the stack file name. Accepts values ​both with and without the `.svg` extension. | `stack` |
39
+ | `separator` | Replaces the directory separator for the `id` attribute. | `_` |
40
+ | `spacer` | Joins space-separated words for the `id` attribute. | `-` |
40
41
 
41
42
  ### Inlining stacksvg result into markup
42
43
 
@@ -49,13 +50,16 @@ Unlike all other methods for assembling a sprite, the stack does not limit us in
49
50
  We can use the stack in all four possible ways:
50
51
 
51
52
  - in markup:
52
- - in `src` of `img` tag — static,
53
- - in the `href` of the `use` tag — with the possibility of repainting,
53
+
54
+ - in `src` of `img` tag — static,
55
+ - in the `href` of the `use` tag — with the possibility of repainting,
56
+
54
57
  - in styles:
55
- - in `url()` properties `background` — static,
56
- - in `url()` properties `mask` — with the possibility of repainting.
57
58
 
58
- [Demo page](https://firefoxic.github.io/gulp-stacksvg/test/) to prove it.
59
+ - in `url()` properties `background` — static,
60
+ - in `url()` properties `mask` — with the possibility of repainting.
61
+
62
+ [Demo page](https://firefoxic.github.io/gulp-stacksvg/example/) to prove it.
59
63
 
60
64
  ## Stack under the hood
61
65
 
@@ -69,7 +73,7 @@ This can be done much easier. In general, the stack is arranged almost like a sy
69
73
  <style>:root svg:not(:target) { display: none }</style>
70
74
  ```
71
75
 
72
- <img align="left" width="90" height="90" title="sun" src="https://raw.githubusercontent.com/firefoxic/gulp-stacksvg/main/test/stack.svg#sun-alpha">
76
+ <img align="left" width="90" height="90" title="sun" src="https://raw.githubusercontent.com/firefoxic/gulp-stacksvg/main/docs/example/stack.svg#sun-alpha">
73
77
 
74
78
  ```xml
75
79
  <svg id="sun" viewBox="0 0 24 24">
@@ -77,7 +81,7 @@ This can be done much easier. In general, the stack is arranged almost like a sy
77
81
  </svg>
78
82
  ```
79
83
 
80
- <img align="left" width="90" height="90" title="heart" src="https://raw.githubusercontent.com/firefoxic/gulp-stacksvg/main/test/stack.svg#heart-red">
84
+ <img align="left" width="90" height="90" title="heart" src="https://raw.githubusercontent.com/firefoxic/gulp-stacksvg/main/docs/example/stack.svg#heart-red">
81
85
 
82
86
  ```xml
83
87
  <svg id="heart" viewBox="0 0 24 24">
@@ -85,7 +89,7 @@ This can be done much easier. In general, the stack is arranged almost like a sy
85
89
  </svg>
86
90
  ```
87
91
 
88
- <img align="left" width="90" height="90" title="thumbup" src="https://raw.githubusercontent.com/firefoxic/gulp-stacksvg/main/test/stack.svg#thumbup-alpha">
92
+ <img align="left" width="90" height="90" title="thumbup" src="https://raw.githubusercontent.com/firefoxic/gulp-stacksvg/main/docs/example/stack.svg#thumbup-alpha">
89
93
 
90
94
  ```xml
91
95
  <svg id="thumbup" viewBox="0 0 24 24">
@@ -103,7 +107,7 @@ The magic is in the stack inner style, which shows only the fragment requested b
103
107
  :root svg:not(:target) { display: none }
104
108
  ```
105
109
 
106
- And now the icons from the external sprite are available in the styles <img width="16" height="16" title="heart" src="https://raw.githubusercontent.com/firefoxic/gulp-stacksvg/main/test/stack.svg#heart-red" alt="heart">
110
+ And now the icons from the external sprite are available in the styles <img width="16" height="16" title="heart" src="https://raw.githubusercontent.com/firefoxic/gulp-stacksvg/main/docs/example/stack.svg#heart-red" alt="heart">
107
111
 
108
112
  ```html
109
113
  <button class="button button--icon_heart" type="button">
@@ -137,7 +141,7 @@ And now the icons from the external sprite are available in the styles <img widt
137
141
  }
138
142
  ```
139
143
 
140
- > ⚠️ Note:
144
+ > ⚠️ Note:
141
145
  > We still need the [autoprefixer](https://github.com/postcss/autoprefixer) for the mask property.
142
146
 
143
147
  For an icon inserted via `mask`, simply change the `background`. Moreover, unlike `use`, you can draw anything in the background under the mask, for example, a gradient.
@@ -151,7 +155,7 @@ For an icon inserted via `mask`, simply change the `background`. Moreover, unlik
151
155
  [test-url]: https://github.com/firefoxic/gulp-stacksvg/actions
152
156
  [test-image]: https://github.com/firefoxic/gulp-stacksvg/actions/workflows/test.yml/badge.svg?branch=main
153
157
 
154
- [npm-url]: https://npmjs.org/package/gulp-stacksvg
158
+ [npm-url]: https://www.npmjs.com/package/gulp-stacksvg
155
159
  [npm-image]: https://badge.fury.io/js/gulp-stacksvg.svg
156
160
 
157
161
  [license-url]: https://github.com/firefoxic/gulp-stacksvg/blob/main/LICENSE
package/{index.js → lib/index.js} RENAMED
@@ -1,7 +1,8 @@
1
+ import { basename, extname, sep } from "node:path"
2
+ import { Transform } from "node:stream"
3
+ import { createHmac } from "node:crypto"
4
+
1
5
  import { parse } from "node-html-parser"
2
- import { basename, extname, sep } from "path"
3
- import { Transform } from "stream"
4
- import { createHmac } from "crypto"
5
6
  import PluginError from "plugin-error"
6
7
  import Vinyl from "vinyl"
7
8
 
@@ -12,12 +13,22 @@ const excessAttrs = [
12
13
  `width`,
13
14
  `x`,
14
15
  `xml:space`,
15
- `y`
16
+ `y`,
16
17
  ]
17
18
 
18
19
  const xlink = `http://www.w3.org/1999/xlink`
19
20
 
20
- export function stacksvg ({ output = `stack.svg`, separator = `_`, spacer = `-` } = {}) {
21
+ /**
22
+ * Combine svg files into one using the stack method.
23
+ *
24
+ * @param {Object} [options] - The option object.
25
+ * @param {string} [options.output=stack] - The name of the output file.
26
+ * @param {string} [options.separator=_] - The symbol that will replace the directory separator for the fragment id.
27
+ * @param {string} [options.spacer=-] - The character that will replace the whitespace characters for the fragment id.
28
+ *
29
+ * @returns {Object} A stream containing a stack of svg icons.
30
+ */
31
+ export function stacksvg ( { output = `stack`, separator = `_`, spacer = `-` } = {}) {
21
32
 
22
33
  let isEmpty = true
23
34
  const ids = {}
@@ -43,7 +54,7 @@ export function stacksvg ({ output = `stack.svg`, separator = `_`, spacer = `-`
43
54
 
44
55
  const iconId = basename(
45
56
  file.relative.split(sep).join(separator).replace(/\s/g, spacer),
46
- extname(file.relative)
57
+ extname(file.relative),
47
58
  )
48
59
 
49
60
  if (iconId in ids) {
@@ -146,8 +157,15 @@ export function stacksvg ({ output = `stack.svg`, separator = `_`, spacer = `-`
146
157
  return stream
147
158
  }
148
159
 
149
- function changeNsAlias (elems, oldAlias, newAlias) {
150
- elems.querySelectorAll(`*`).forEach((elem) => {
160
+ /**
161
+ * Change the old namespace alias to the new one for the elements and attributes of the icon.
162
+ *
163
+ * @param {object} iconDom - The DOM of the icon.
164
+ * @param {string} oldAlias - The old namespace alias.
165
+ * @param {string} newAlias - The new namespace alias.
166
+ */
167
+ function changeNsAlias (iconDom, oldAlias, newAlias) {
168
+ iconDom.querySelectorAll(`*`).forEach((elem) => {
151
169
  let prefix = newAlias === `` ? `` : `${newAlias}:`
152
170
  if (elem.rawTagName.startsWith(`${oldAlias}:`)) {
153
171
  elem.rawTagName = `${prefix}${elem.rawTagName.slice((oldAlias.length + 1))}`
@@ -161,6 +179,13 @@ function changeNsAlias (elems, oldAlias, newAlias) {
161
179
  })
162
180
  }
163
181
 
182
+ /**
183
+ * Get the hash sum of the passed string.
184
+ *
185
+ * @param {string} str - An arbitrary line of code.
186
+ *
187
+ * @returns {string} The first 7 characters of the hash sum.
188
+ */
164
189
  function getHash (str) {
165
190
  return createHmac(`sha1`, `xmlns`)
166
191
  .update(str)
package/package.json CHANGED
@@ -1,57 +1,53 @@
1
1
  {
2
- "name": "gulp-stacksvg",
3
- "version": "2.0.1",
4
- "type": "module",
5
- "description": "Combine svg files into one with stack method",
6
- "main": "index.js",
7
- "files": [
8
- "index.js"
9
- ],
10
- "scripts": {
11
- "lint": "eslint ./",
12
- "test": "gulp test && mocha",
13
- "pretest": "npm run lint",
14
- "preversion": "npm test",
15
- "postversion": "npm publish",
16
- "postpublish": "git push origin --all; git push origin --tags"
17
- },
18
- "repository": {
19
- "type": "git",
20
- "url": "git://github.com/firefoxic/gulp-stacksvg"
21
- },
22
- "author": {
23
- "name": "Sergey Artemov",
24
- "email": "firefoxic.dev@gmail.com"
25
- },
26
- "license": "MIT",
27
- "bugs": {
28
- "url": "https://github.com/firefoxic/gulp-stacksvg/issues"
29
- },
30
- "homepage": "https://github.com/firefoxic/gulp-stacksvg",
31
- "dependencies": {
32
- "node-html-parser": "^6.1.5",
33
- "plugin-error": "^2.0.1",
34
- "vinyl": "^3.0.0"
35
- },
36
- "devDependencies": {
37
- "eslint": "^8.36.0",
38
- "fancy-log": "^2.0.0",
39
- "finalhandler": "^1.2.0",
40
- "gulp": "^4.0.2",
41
- "mocha": "^10.2.0",
42
- "puppeteer": "^19.7.5",
43
- "serve-static": "^1.15.0",
44
- "sinon": "^15.0.2"
45
- },
46
- "engines": {
47
- "node": ">=16"
48
- },
49
- "engineStrict": true,
50
- "keywords": [
51
- "gulpplugin",
52
- "svg",
53
- "icon",
54
- "stack",
55
- "sprite"
56
- ]
57
- }
2
+ "name": "gulp-stacksvg",
3
+ "description": "The gulp plugin to combine svg files into one using the stack method.",
4
+ "version": "2.0.3",
5
+ "type": "module",
6
+ "exports": "./lib/index.js",
7
+ "files": [
8
+ "./lib/index.js"
9
+ ],
10
+ "dependencies": {
11
+ "node-html-parser": "^6.1.11",
12
+ "plugin-error": "^2.0.1",
13
+ "vinyl": "^3.0.0"
14
+ },
15
+ "engines": {
16
+ "node": "^16.20.0 || ^18.16.0"
17
+ },
18
+ "license": "MIT",
19
+ "author": {
20
+ "name": "Sergey Artemov",
21
+ "email": "firefoxic.dev@gmail.com"
22
+ },
23
+ "homepage": "https://github.com/firefoxic/gulp-stacksvg",
24
+ "bugs": {
25
+ "url": "https://github.com/firefoxic/gulp-stacksvg/issues"
26
+ },
27
+ "repository": {
28
+ "type": "git",
29
+ "url": "git://github.com/firefoxic/gulp-stacksvg"
30
+ },
31
+ "keywords": [
32
+ "gulpplugin",
33
+ "svg",
34
+ "icon",
35
+ "stack",
36
+ "sprite"
37
+ ],
38
+ "devDependencies": {
39
+ "editorconfig-checker": "^5.1.1",
40
+ "eslint": "^8.52.0",
41
+ "gulp": "^4.0.2",
42
+ "husky": "^8.0.3"
43
+ },
44
+ "scripts": {
45
+ "lint:ec": "ec",
46
+ "lint:es": "eslint ./",
47
+ "lint": "pnpm /^lint:/",
48
+ "test": "node --test",
49
+ "pretest": "pnpm lint",
50
+ "preversion": "pnpm test",
51
+ "postversion": "pnpm publish"
52
+ }
53
+ }