update version

CHANGELOG.md

@@ -75,3 +75,8 @@ All notable changes to the "css-color-collector" extension will be documented in
 ## [1.9.0]
 
 - rename extension name in Title case.
+
+## [2.0.0]  
+
+- in scss file; escape `$` against color name
+- when id, selector name similar to hex color and then escape if selector followed by `{` after selector

package.json

@@ -2,7 +2,7 @@
   "name": "css-color-collector",
   "displayName": "CSS Color Collector",
   "description": "Collect each color values from a css file and replace it with an intuitive variable and add a new :root pseudo selector which contains these variables.",
-  "version": "1.8.0",
+  "version": "2.0.0",
   "publisher": "xkeshav",
   "engines": {
     "vscode": "^1.74.0"
@@ -26,8 +26,8 @@
     "theme": "dark"
   },
   "keywords": [
-    "css", 
-    "color", 
+    "css",
+    "color",
     "collector",
     "css color",
     "color collector",
@@ -62,7 +62,10 @@
         "cssColorCollector.updatePropertyVariable": {
           "type": "object",
           "properties": {
-            "background-color": { "type" : "string", "default": "bg"}
+            "background-color": {
+              "type": "string",
+              "default": "bg"
+            }
           },
           "markdownDescription": "change default property variable name which will be used while generating **:root** variable \n\n *Example* \n\n ``` { \"background-color\": \"bgc\" }``` "
         }

sample/after-command/name.css

@@ -3,6 +3,8 @@
 	--body__bg--1: #123;
 	--black__txt--2: black;
 	--red__border--3: red;
+	--abc__txt--4: #bcd;
+	--bcd__txt--5: #abc;
 }
 body {
   background-color: var(--body__bg--1);
@@ -14,4 +16,16 @@ body {
 
 .class ~ .red {
   border-color: var(--red__border--3);
+}
+
+#feature {
+  color:var(--red__border--3);
+}
+
+#abc {
+	color: var(--abc__txt--4);
+}
+
+#bcd{
+  color: linear-background(to right, var(--bcd__txt--5),var(--abc__txt--4));
 }

sample/before-command/base.css

@@ -0,0 +1,7 @@
+body {
+	color: #abc;
+	background: color(from white srgb 4 6 8);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(top, from), color-stop(#abc), to(#bcd));
+	background: -o-linear-gradient(from top, #abc, #bcd);
+	background: -moz-repeating-linear-gradient(-o-repeating-linear-gradient(red, green));
+}

sample/before-command/name.css

@@ -3,18 +3,21 @@ body {
 }
 
 .black {
-  color:#cde
+  color:BLACK;
 }
 
 .class ~ .red {
   border-color: red;
 }
 
 #feature {
-  color: red;
+  color:Red;
+}
+
+#abc {
+	color: #bcd;
 }
 
-#abc,
 #bcd{
   color: linear-background(to right, #abc,#bcd);
 }

sample/before-command/one.scss

@@ -0,0 +1,5 @@
+@import 'variable';
+
+h1 {
+	color: $white;
+}

src/utils/common.ts

@@ -32,6 +32,8 @@ export const setVariableName = ({ selectorName, propertyName, num }: VariableNam
   const property = PROPERTY_ALIAS_MAPPER.get(propertyName) ?? 'defaultElement'; // default element name if not found
   return `--${selectorName}__${property}--${num}`;
 };
+// input #abc ==? #aabbcc or #abcd ==> #aabbccdd
+const createLongHexValue = (short: string) => [...short].reduce((p, n) => p.concat(n.repeat(2)), '');
 
 /* check all color variation for a given hex value 
   for example below are same color code with different variation
@@ -43,15 +45,18 @@ export const setVariableName = ({ selectorName, propertyName, num }: VariableNam
 
   @return array of all hex color variation 
 */
+
+
+
 export const hexColorVariation = (value: HexString): HexString[] => {
-  const cv = value.slice(1); // remove # from start
+  const cv = value.slice(1); // color value; removed # from start.
   const hexColorList = [cv];
   if (cv.length === 3) {
-    const longHexValue = [...cv].reduce((p: string, n: string) => p.concat(n.repeat(2)), '');
-    hexColorList.push(cv + 'f', longHexValue, longHexValue + 'ff');
+    const longHex = createLongHexValue(cv);
+    hexColorList.push(`${cv}f`, `${longHex}`, `${longHex}ff`);
   }
   if (cv.length === 4) {
-    const longHexValue = [...cv].reduce((p: string, n: string) => p.concat(n.repeat(2)), '');
+    const longHexValue = createLongHexValue(cv);
     if (cv.endsWith('f')) {
       const shortHexValue = longHexValue.slice(0, -2);
       hexColorList.push(cv.slice(0, -1), shortHexValue, longHexValue);
@@ -61,18 +66,18 @@ export const hexColorVariation = (value: HexString): HexString[] => {
     }
   }
   if (cv.length === 6) {
-    const longHexValue = cv + 'ff';
+    const longHexValue = `${cv}ff`;
     if (cv[0] === cv[1] && cv[2] === cv[3] && cv[4] === cv[5]) {
       const shortHexValue = `${cv[1]}${cv[3]}${cv[5]}`;
-      hexColorList.push(shortHexValue, shortHexValue + 'f', longHexValue);
+      hexColorList.push(shortHexValue, `${shortHexValue}f`, longHexValue);
     } else {
       hexColorList.push(longHexValue);
     }
   }
   if (cv.length === 8) {
     if (cv[0] === cv[1] && cv[2] === cv[3] && cv[4] === cv[5] && cv[6] === cv[7]) {
       const shortHexValue = `${cv[1]}${cv[3]}${cv[5]}${cv[7] === 'f' ? '' : cv[7]}`;
-      hexColorList.push(shortHexValue, shortHexValue + 'f');
+      hexColorList.push(shortHexValue, `${shortHexValue}f`);
     }
     if (cv.endsWith('ff')) {
       hexColorList.push(cv.slice(0, -2));

src/utils/constants.ts

@@ -8,13 +8,13 @@ export const DOCUMENT_MINIMUM_LENGTH = 12; // *{color:red} is the minimum color
 export const PATTERN_LIST = {
 	PROPERTY: `(?<PROPERTY>[\\w-]+[^:])(?=:\s*)`,
 	SELECTOR: `(?<SELECTOR>[@:#'"\.\\w\\-\\,\\*\\s\\n\\r\\t\\(\\)\\[\\]]+(?=\\s*\\{))`,
-	COLOR_HEX_FORMAT: '(?<HEX_COLOR>#[0-9a-f]{3,8})\\s*(?!(\\w|\\{))',
+	COLOR_HEX_FORMAT: '(?<HEX_COLOR>#[0-9a-f]{3,8})\\s?(?!(\\w|\\{|\\s{))',
 	COLOR_NON_HEX_FORMAT:`((?<NON_HEX_COLOR>\\b(rgba?|hsla?|hwb|(?:ok)?(?:lab|lch))[ \\t]*\\(([^\)\(]*?\\d[^\)\(]*)\\)))`,
 	COLOR_FUNCTION: '(?<COLOR_FUNCTION>(\\bcolor\\b)\\(.*\\))',
 	WORD: '(\\w+)',
 	IMPORT_STMT: `(?<=@)\\bimport\\b\\s*(?<IMPORT>.*)(?=;)`,
 	/*148 color names */
-	COLOR_NAME: `(?<![\\='"\\.#\\-])\\s*(?<COLOR_NAME>\\b(?:black|silver|gray|whitesmoke|maroon|red|purple|fuchsia|green|lime|olivedrab|yellow|navy|blue|teal|aquamarine|orange|aliceblue|antiquewhite|aqua|azure|beige|bisque|blanchedalmond|blueviolet|brown|burlywood|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|darkblue|darkcyan|darkgoldenrod|darkgray|darkgreen|darkgrey|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen|gainsboro|ghostwhite|goldenrod|gold|greenyellow|grey|honeydew|hotpink|indianred|indigo|ivory|khaki|lavenderblush|lavender|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgray|lightgreen|lightgrey|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray|lightslategrey|lightsteelblue|lightyellow|limegreen|linen|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|oldlace|olive|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|skyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|thistle|tomato|turquoise|violet|wheat|white|yellowgreen|rebeccapurple)\\b\\s*)(?!-|{:)`,
+	COLOR_NAME: `(?<![\\=\\$'"\\.#\\-])\\s*(?<COLOR_NAME>\\b(?:black|silver|gray|whitesmoke|maroon|red|purple|fuchsia|green|lime|olivedrab|yellow|navy|blue|teal|aquamarine|orange|aliceblue|antiquewhite|aqua|azure|beige|bisque|blanchedalmond|blueviolet|brown|burlywood|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|darkblue|darkcyan|darkgoldenrod|darkgray|darkgreen|darkgrey|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen|gainsboro|ghostwhite|goldenrod|gold|greenyellow|grey|honeydew|hotpink|indianred|indigo|ivory|khaki|lavenderblush|lavender|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgray|lightgreen|lightgrey|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray|lightslategrey|lightsteelblue|lightyellow|limegreen|linen|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|oldlace|olive|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|skyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|thistle|tomato|turquoise|violet|wheat|white|yellowgreen|rebeccapurple)\\b\\s*)(?!-|{:)`,
 	ROOT_SELECTOR: `(?<!\\/\\*.*)(?<=:)(?<ROOT_BLOCK>\\b(root)\\b\\s*(?={))`
 };
 

tsconfig.json

@@ -3,7 +3,7 @@
     "module": "commonjs",
     "target": "ES2018",
     "outDir": "out",
-    "lib": ["ES2022", "es2018.regexp"],
+    "lib": ["es2021", "es2018.regexp"],
     "sourceMap": true,
     "rootDir": "src",
     "strict": true,