@gem-sdk/hash-class-names 1.23.0 → 1.25.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 (4) hide show
  1. package/dist/cjs/index.js +30 -9
  2. package/dist/esm/index.js +30 -9
  3. package/dist/types/index.d.ts +8 -2
  4. package/package.json +1 -1
package/dist/cjs/index.js CHANGED
@@ -5,7 +5,8 @@ var cssEscape = require('./css-escape.js');
5
5
  var cssParser = require('./css-parser.js');
6
6
 
7
7
  const hashClassNames = (html, css, options)=>{
8
- const { html: htmlWithoutLiquid, arrayMatch } = replaceLiquidToBKPlaceholder(html);
8
+ const stringBreak = '<!-- End extra file -->';
9
+ const { html: htmlWithoutLiquid, arrayMatch } = replaceLiquidToBKPlaceholder(html.join(stringBreak));
9
10
  const documentFragment = parse5.parseFragment(htmlWithoutLiquid);
10
11
  const jsonHTML = documentFragment.childNodes;
11
12
  if (jsonHTML?.length) {
@@ -37,9 +38,13 @@ const hashClassNames = (html, css, options)=>{
37
38
  for(let i = 0; i < nodeClasses.length; i++){
38
39
  let nodeClass = nodeClasses[i]?.trim() || '';
39
40
  nodeClass = nodeClass.replace(/bk-liquid.*?bk-liquid/g, '');
41
+ nodeClass = replacePseudoClasses(nodeClass);
40
42
  if (options?.ignoreClasses?.includes(nodeClass)) {
41
43
  continue;
42
44
  }
45
+ if (options?.classList && !options.classList.includes(nodeClass)) {
46
+ continue;
47
+ }
43
48
  if (nodeClass) {
44
49
  const data = classes[nodeClass];
45
50
  if (!data) {
@@ -109,10 +114,8 @@ const hashClassNames = (html, css, options)=>{
109
114
  const selectorClasses = itemSelector.split('.');
110
115
  for(let i = 0; i < selectorClasses.length; i++){
111
116
  let selectorClass = selectorClasses[i];
112
- selectorClass = selectorClass?.trim();
113
- // eslint-disable-next-line prefer-regex-literals, no-useless-escape, regexp/no-useless-flag
114
- selectorClass = selectorClass?.replace(new RegExp(`\[.*?\]`, 'gm'), ''); // Replace [data]
115
- selectorClass = selectorClass?.replace(/:(a(ctive|ny(-link)*)|checked|d(efault|i(r\(\)|sabled))|e(mpty|nabled)|f(irst(-(child|of-type))*|ullscreen|ocus)|hover|in(determinate|valid|-range)|la(ng\(\)|(st-(child|of-type)))|l(eft|ink)|n(ot\(\)|th-((last-)*(child|of-type)\(\)))|o(nly-(child|of-type)|ptional|ut-of-range)|r(e(ad-(only|write)|quired)|ight|oot)|scope|target|v(alid|isited))/g, '');
117
+ selectorClass = replacePseudoClasses(selectorClass || '');
118
+ if (options?.classList && !options.classList.includes(selectorClass)) continue;
116
119
  if (selectorClass) {
117
120
  for(let index = 0; index < orderClasses.length; index++){
118
121
  const orderClass = orderClasses[index];
@@ -158,13 +161,21 @@ const hashClassNames = (html, css, options)=>{
158
161
  newCSS = cssParser.jsonToCss(jsonCSS);
159
162
  }
160
163
  newHTML = replaceBKPlaceholderToLiquid(newHTML, arrayMatch);
161
- return {
162
- html: newHTML,
164
+ return options?.getOrderClass ? {
165
+ html: newHTML.split(stringBreak),
166
+ css: newCSS,
167
+ orderClass: options?.getOrderClass ? orderClasses : []
168
+ } : {
169
+ html: newHTML.split(stringBreak),
163
170
  css: newCSS
164
171
  };
165
172
  }
166
173
  // Return default
167
- return {
174
+ return options?.getOrderClass ? {
175
+ html,
176
+ css,
177
+ orderClass: []
178
+ } : {
168
179
  html,
169
180
  css
170
181
  };
@@ -183,7 +194,7 @@ const replaceClass = (node, oldClass, newClass)=>{
183
194
  for(let i = 0; i < values.length; i++){
184
195
  const value = values[i];
185
196
  if (value) {
186
- const valueWithoutLiquid = value?.replace(/bk-liquid.*?bk-liquid/g, '');
197
+ const valueWithoutLiquid = replacePseudoClasses(value?.replace(/bk-liquid.*?bk-liquid/g, ''));
187
198
  if (valueWithoutLiquid == oldClass) {
188
199
  const newValue = value?.replace(oldClass, newClass) || value;
189
200
  values[i] = newValue;
@@ -200,6 +211,16 @@ const replaceSelector = (selector, oldClass, newClass)=>{
200
211
  newSelector = newSelector.replaceAll(cssEscape.cssEscape(oldClass), cssEscape.cssEscape(newClass));
201
212
  return newSelector;
202
213
  };
214
+ const replacePseudoClasses = (selectorClass)=>{
215
+ selectorClass = selectorClass?.trim();
216
+ // eslint-disable-next-line prefer-regex-literals, no-useless-escape, regexp/no-useless-flag
217
+ selectorClass = selectorClass?.replace(new RegExp(`\[.*?\]`, 'gm'), ''); // Replace [data]
218
+ selectorClass = selectorClass?.replace(')', '');
219
+ selectorClass = selectorClass?.replace(/:(a(ctive|ny(-link)*)|checked|d(efault|i(r\(\)|sabled))|e(mpty|nabled)|f(irst(-(child|of-type))*|ullscreen|ocus)|hover|in(determinate|valid|-range)|la(ng\(\)|(st-(child|of-type)))|l(eft|ink)|n(ot\(\)|th-((last-)*(child|of-type)\(\)))|o(nly-(child|of-type)|ptional|ut-of-range)|r(e(ad-(only|write)|quired)|ight|oot)|scope|target|v(alid|isited))/g, '');
220
+ selectorClass = selectorClass?.replace(/(active|hover|focus|disabled|first|last|mobile|tablet)\\:/g, '');
221
+ selectorClass = selectorClass?.replace(/(active|hover|focus|disabled|first|last|mobile|tablet):/g, '');
222
+ return selectorClass;
223
+ };
203
224
  const replaceLiquidToBKPlaceholder = (html)=>{
204
225
  // eslint-disable-next-line regexp/no-dupe-disjunctions
205
226
  const regex = /\{%(.|[\n\r\t])*?%\}|\{\{(.|[\n\r\t])*?\}\}/g;
package/dist/esm/index.js CHANGED
@@ -3,7 +3,8 @@ import { cssEscape } from './css-escape.js';
3
3
  import { cssToJson, jsonToCss } from './css-parser.js';
4
4
 
5
5
  const hashClassNames = (html, css, options)=>{
6
- const { html: htmlWithoutLiquid, arrayMatch } = replaceLiquidToBKPlaceholder(html);
6
+ const stringBreak = '<!-- End extra file -->';
7
+ const { html: htmlWithoutLiquid, arrayMatch } = replaceLiquidToBKPlaceholder(html.join(stringBreak));
7
8
  const documentFragment = parseFragment(htmlWithoutLiquid);
8
9
  const jsonHTML = documentFragment.childNodes;
9
10
  if (jsonHTML?.length) {
@@ -35,9 +36,13 @@ const hashClassNames = (html, css, options)=>{
35
36
  for(let i = 0; i < nodeClasses.length; i++){
36
37
  let nodeClass = nodeClasses[i]?.trim() || '';
37
38
  nodeClass = nodeClass.replace(/bk-liquid.*?bk-liquid/g, '');
39
+ nodeClass = replacePseudoClasses(nodeClass);
38
40
  if (options?.ignoreClasses?.includes(nodeClass)) {
39
41
  continue;
40
42
  }
43
+ if (options?.classList && !options.classList.includes(nodeClass)) {
44
+ continue;
45
+ }
41
46
  if (nodeClass) {
42
47
  const data = classes[nodeClass];
43
48
  if (!data) {
@@ -107,10 +112,8 @@ const hashClassNames = (html, css, options)=>{
107
112
  const selectorClasses = itemSelector.split('.');
108
113
  for(let i = 0; i < selectorClasses.length; i++){
109
114
  let selectorClass = selectorClasses[i];
110
- selectorClass = selectorClass?.trim();
111
- // eslint-disable-next-line prefer-regex-literals, no-useless-escape, regexp/no-useless-flag
112
- selectorClass = selectorClass?.replace(new RegExp(`\[.*?\]`, 'gm'), ''); // Replace [data]
113
- selectorClass = selectorClass?.replace(/:(a(ctive|ny(-link)*)|checked|d(efault|i(r\(\)|sabled))|e(mpty|nabled)|f(irst(-(child|of-type))*|ullscreen|ocus)|hover|in(determinate|valid|-range)|la(ng\(\)|(st-(child|of-type)))|l(eft|ink)|n(ot\(\)|th-((last-)*(child|of-type)\(\)))|o(nly-(child|of-type)|ptional|ut-of-range)|r(e(ad-(only|write)|quired)|ight|oot)|scope|target|v(alid|isited))/g, '');
115
+ selectorClass = replacePseudoClasses(selectorClass || '');
116
+ if (options?.classList && !options.classList.includes(selectorClass)) continue;
114
117
  if (selectorClass) {
115
118
  for(let index = 0; index < orderClasses.length; index++){
116
119
  const orderClass = orderClasses[index];
@@ -156,13 +159,21 @@ const hashClassNames = (html, css, options)=>{
156
159
  newCSS = jsonToCss(jsonCSS);
157
160
  }
158
161
  newHTML = replaceBKPlaceholderToLiquid(newHTML, arrayMatch);
159
- return {
160
- html: newHTML,
162
+ return options?.getOrderClass ? {
163
+ html: newHTML.split(stringBreak),
164
+ css: newCSS,
165
+ orderClass: options?.getOrderClass ? orderClasses : []
166
+ } : {
167
+ html: newHTML.split(stringBreak),
161
168
  css: newCSS
162
169
  };
163
170
  }
164
171
  // Return default
165
- return {
172
+ return options?.getOrderClass ? {
173
+ html,
174
+ css,
175
+ orderClass: []
176
+ } : {
166
177
  html,
167
178
  css
168
179
  };
@@ -181,7 +192,7 @@ const replaceClass = (node, oldClass, newClass)=>{
181
192
  for(let i = 0; i < values.length; i++){
182
193
  const value = values[i];
183
194
  if (value) {
184
- const valueWithoutLiquid = value?.replace(/bk-liquid.*?bk-liquid/g, '');
195
+ const valueWithoutLiquid = replacePseudoClasses(value?.replace(/bk-liquid.*?bk-liquid/g, ''));
185
196
  if (valueWithoutLiquid == oldClass) {
186
197
  const newValue = value?.replace(oldClass, newClass) || value;
187
198
  values[i] = newValue;
@@ -198,6 +209,16 @@ const replaceSelector = (selector, oldClass, newClass)=>{
198
209
  newSelector = newSelector.replaceAll(cssEscape(oldClass), cssEscape(newClass));
199
210
  return newSelector;
200
211
  };
212
+ const replacePseudoClasses = (selectorClass)=>{
213
+ selectorClass = selectorClass?.trim();
214
+ // eslint-disable-next-line prefer-regex-literals, no-useless-escape, regexp/no-useless-flag
215
+ selectorClass = selectorClass?.replace(new RegExp(`\[.*?\]`, 'gm'), ''); // Replace [data]
216
+ selectorClass = selectorClass?.replace(')', '');
217
+ selectorClass = selectorClass?.replace(/:(a(ctive|ny(-link)*)|checked|d(efault|i(r\(\)|sabled))|e(mpty|nabled)|f(irst(-(child|of-type))*|ullscreen|ocus)|hover|in(determinate|valid|-range)|la(ng\(\)|(st-(child|of-type)))|l(eft|ink)|n(ot\(\)|th-((last-)*(child|of-type)\(\)))|o(nly-(child|of-type)|ptional|ut-of-range)|r(e(ad-(only|write)|quired)|ight|oot)|scope|target|v(alid|isited))/g, '');
218
+ selectorClass = selectorClass?.replace(/(active|hover|focus|disabled|first|last|mobile|tablet)\\:/g, '');
219
+ selectorClass = selectorClass?.replace(/(active|hover|focus|disabled|first|last|mobile|tablet):/g, '');
220
+ return selectorClass;
221
+ };
201
222
  const replaceLiquidToBKPlaceholder = (html)=>{
202
223
  // eslint-disable-next-line regexp/no-dupe-disjunctions
203
224
  const regex = /\{%(.|[\n\r\t])*?%\}|\{\{(.|[\n\r\t])*?\}\}/g;
package/dist/types/index.d.ts CHANGED
@@ -5,11 +5,17 @@ type Node = {
5
5
  }[];
6
6
  childNodes?: Node[];
7
7
  };
8
- declare const hashClassNames: (html: string, css: string, options?: {
8
+ declare const hashClassNames: (html: string[], css: string, options?: {
9
9
  ignoreClasses?: string[];
10
+ classList?: string[];
11
+ getOrderClass?: boolean;
10
12
  }) => {
11
- html: string;
13
+ html: string[];
12
14
  css: string;
15
+ orderClass?: {
16
+ oldClass: string;
17
+ newClass: string;
18
+ }[] | undefined;
13
19
  };
14
20
 
15
21
  export { Node, hashClassNames };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/hash-class-names",
3
- "version": "1.23.0",
3
+ "version": "1.25.0",
4
4
  "license": "MIT",
5
5
  "main": "dist/cjs/index.js",
6
6
  "scripts": {