@stylable/module-utils - npm Package Compare versions

Comparing version 4.10.2 to 4.10.3

dist/dts-rough-tokenizer.js

@@ -32,2 +32,6 @@ "use strict";
 exports.getLocalClassStates = getLocalClassStates;
+const parenthesesClosures = {
+    '}': '{',
+    ']': '[',
+};
 const isDelimiter = (char) => char === ':' ||
@@ -148,2 +152,4 @@ char === ';' ||
             isRelevantKey(s.peek(2).value)) {
+            const levels = {};
+            const values = new WeakSet();
             const start = t.start;
@@ -155,5 +161,21 @@ s.next(); // const
             while ((t = s.next())) {
-                if (!t.type || t.type === '}') {
+                if (values.has(t)) {
+                    // registered as value of token
+                    continue;
+                }
+                if (!t.type) {
                     break;
                 }
+                if (t.type === '{' || t.type === '[') {
+                    if (!levels[t.type]) {
+                        levels[t.type] = 0;
+                    }
+                    levels[t.type]++;
+                }
+                if (t.type === '}' || t.type === ']') {
+                    levels[parenthesesClosures[t.type]]--;
+                    if (Object.values(levels).every((level) => level <= 0)) {
+                        break;
+                    }
+                }
                 if (t.type === '\n') {
@@ -163,16 +185,19 @@ lastNewLinePosition.line += 1;
                 }
-                else if (t.type === 'string') {
-                    s.next(); // :
-                    const value = s.next(); // value
-                    s.next(); // ;
-                    resTokens.push({
+                if (t.type === 'string') {
+                    const token = {
                         ...t,
                         line: lastNewLinePosition.line,
                         column: t.start - lastNewLinePosition.columm,
-                        outputValue: {
+                    };
+                    // in case this token has a string value token we add it to current token object
+                    const value = s.peek(2);
+                    if (value.type === 'string' || value.type === 'text') {
+                        values.add(value);
+                        token.outputValue = {
                             ...value,
                             line: lastNewLinePosition.line,
                             column: value.start - lastNewLinePosition.columm,
-                        },
-                    });
+                        };
+                    }
+                    resTokens.push(token);
                 }
@@ -179,0 +204,0 @@ }

dist/generate-dts-sourcemaps.js

@@ -7,4 +7,6 @@ "use strict";
 const features_1 = require("@stylable/core/dist/features");
+const process_declaration_functions_1 = require("@stylable/core/dist/process-declaration-functions");
 const vlq_1 = require("vlq");
 const dts_rough_tokenizer_1 = require("./dts-rough-tokenizer");
+const generate_dts_1 = require("./generate-dts");
 function getClassSrcPosition(className, meta) {
@@ -40,13 +42,42 @@ const cls = meta.getClass(className);
 function getStVarsSrcPosition(varName, meta) {
+    var _a;
     const stVar = meta.vars.find((v) => v.name === varName);
-    let res;
-    if (stVar) {
+    if ((_a = stVar === null || stVar === void 0 ? void 0 : stVar.node.source) === null || _a === void 0 ? void 0 : _a.start) {
+        return {
+            line: stVar.node.source.start.line - 1,
+            column: stVar.node.source.start.column - 1,
+        };
+    }
+    else {
+        // TODO: move this logic to Stylable core and enhance it. The meta should provide the API to get to the inner parts of the st-var
+        let res;
         meta.rawAst.walkRules(':vars', (rule) => {
-            return rule.walkDecls(varName, (decl) => {
-                if (decl.source && decl.source.start) {
-                    res = {
-                        line: decl.source.start.line - 1,
-                        column: decl.source.start.column - 1,
-                    };
-                    return false;
+            return rule.walkDecls((decl) => {
+                var _a;
+                if ((_a = decl.source) === null || _a === void 0 ? void 0 : _a.start) {
+                    if (decl.prop === varName) {
+                        res = {
+                            line: decl.source.start.line - 1,
+                            column: decl.source.start.column - 1,
+                        };
+                    }
+                    else {
+                        (0, process_declaration_functions_1.processDeclarationFunctions)(decl, (node, level) => {
+                            var _a, _b;
+                            if (node.type === 'item' && node.name === varName) {
+                                const rawDeclaration = `${(_a = decl.raws.before) !== null && _a !== void 0 ? _a : ''}${decl.prop}${(_b = decl.raws.between) !== null && _b !== void 0 ? _b : ''}${decl.value}`;
+                                const rootPosition = {
+                                    line: rule.source.start.line - 1,
+                                    column: rule.source.start.column - 1,
+                                };
+                                res = {
+                                    ...calculateEstimatedPosition(rawDeclaration, node.name, node.after, rootPosition),
+                                    generatedOffsetLevel: level,
+                                };
+                            }
+                        });
+                    }
+                    if (res) {
+                        return false;
+                    }
                 }
@@ -56,4 +87,4 @@ return;
         });
+        return res;
     }
-    return res;
 }
@@ -150,2 +181,3 @@ function getKeyframeSrcPosition(keyframeName, meta) {
 function generateDTSSourceMap(dtsContent, meta) {
+    var _a;
     const tokens = (0, dts_rough_tokenizer_1.tokenizeDTS)(dtsContent);
@@ -178,4 +210,7 @@ const mapping = {};
                 if (currentSrcPosition) {
-                    mapping[dtsLine] = createLineMapping(4, // top-level object property offset
-                    currentSrcPosition.line - lastSrcPosition.line, currentSrcPosition.column - lastSrcPosition.column);
+                    const lineDelta = currentSrcPosition.line - lastSrcPosition.line;
+                    const columnDelta = currentSrcPosition.column - lastSrcPosition.column;
+                    mapping[dtsLine] = createLineMapping(generate_dts_1.SPACING.repeat((_a = currentSrcPosition.generatedOffsetLevel) !== null && _a !== void 0 ? _a : 1).length, lineDelta, columnDelta);
+                    // reset to default offset level
+                    currentSrcPosition.generatedOffsetLevel = undefined;
                     lastSrcPosition = { ...currentSrcPosition };
@@ -209,2 +244,13 @@ }
 exports.generateDTSSourceMap = generateDTSSourceMap;
+function calculateEstimatedPosition(rawValue, name, after = '', rootPosition) {
+    var _a, _b;
+    const valueLength = rawValue.indexOf(name + after) + name.length - after.length;
+    const value = rawValue.slice(0, valueLength);
+    const byLines = value.split(/\n/g);
+    const lastLine = byLines[byLines.length - 1];
+    return {
+        line: byLines.length - 1 + ((_a = rootPosition === null || rootPosition === void 0 ? void 0 : rootPosition.line) !== null && _a !== void 0 ? _a : 0),
+        column: lastLine.length + ((_b = rootPosition === null || rootPosition === void 0 ? void 0 : rootPosition.column) !== null && _b !== void 0 ? _b : 0),
+    };
+}
 //# sourceMappingURL=generate-dts-sourcemaps.js.map

dist/generate-dts.d.ts

 import { StylableResults } from '@stylable/core';
+export declare const SPACING: string;
 export declare function generateDTSContent({ exports, meta }: StylableResults): string;
 //# sourceMappingURL=generate-dts.d.ts.map

dist/generate-dts.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateDTSContent = void 0;
+exports.generateDTSContent = exports.SPACING = void 0;
 const core_1 = require("@stylable/core");
-const SPACING = ' '.repeat(4);
+exports.SPACING = ' '.repeat(4);
 const asString = (v) => JSON.stringify(v);
@@ -41,12 +41,29 @@ function addStatesEntries(stateEntries, stStates) {
         const states = collectLocalStates(symbol);
-        out += states ? `${SPACING}${asString(scope(name, meta.namespace))}: { ${states}};\n` : '';
+        out += states ? `${exports.SPACING}${asString(scope(name, meta.namespace))}: { ${states}};\n` : '';
     }
     return out;
 }
-function stringifyStringRecord(record, indent = SPACING) {
-    return Object.keys(record)
-        .map((k) => `${indent}${asString(k)}: string;`)
-        .join('\n');
+function stringifyStringRecord(record, addParentheses = false, indent = exports.SPACING, delimiter = '\n') {
+    const s = Object.entries(record)
+        .map(([key, value]) => `${indent}${asString(key)}: ${stringifyTypedValue(value, indent + exports.SPACING, delimiter)};`)
+        .join(delimiter);
+    return addParentheses ? `{${wrapNL(s)}${indent.replace(exports.SPACING, '')}}` : s;
 }
-function stringifyClasses(classes, namespace, indent = SPACING) {
+function stringifyStringArray(array, indent = exports.SPACING, delimiter = '\n') {
+    return `[${wrapNL(array
+        .map((value) => `${indent}${stringifyTypedValue(value, indent + exports.SPACING, delimiter)},`)
+        .join(delimiter))}${indent.replace(exports.SPACING, '')}]`;
+}
+function stringifyTypedValue(value, indent = exports.SPACING, delimiter = '\n') {
+    if (typeof value === 'string') {
+        return 'string';
+    }
+    else if (Array.isArray(value)) {
+        return stringifyStringArray(value, indent, delimiter);
+    }
+    else {
+        return stringifyStringRecord(value, true, indent, delimiter);
+    }
+}
+function stringifyClasses(classes, namespace, indent = exports.SPACING) {
     // this uses the scoped names from the exported stylesheet, but they may change in a future build
@@ -53,0 +70,0 @@ return Object.keys(classes)

package.json

 {
   "name": "@stylable/module-utils",
-  "version": "4.10.2",
+  "version": "4.10.3",
   "description": "Stylable module creation utilities",
@@ -10,3 +10,3 @@ "main": "dist/index.js",
   "dependencies": {
-    "@stylable/core": "^4.10.2",
+    "@stylable/core": "^4.10.3",
     "@tokey/core": "^1.2.1",
@@ -13,0 +13,0 @@ "vlq": "^2.0.4"

src/dts-rough-tokenizer.ts

@@ -73,2 +73,7 @@ import {
 
+const parenthesesClosures = {
+    '}': '{',
+    ']': '[',
+} as const;
+
 const isDelimiter = (char: string) =>
@@ -225,2 +230,4 @@ char === ':' ||
         ) {
+            const levels: { [key in '{' | '[']?: number } = {};
+            const values = new WeakSet<DTSCodeToken>();
             const start = t.start;
@@ -233,23 +240,49 @@ s.next(); // const
             while ((t = s.next())) {
-                if (!t.type || t.type === '}') {
+                if (values.has(t)) {
+                    // registered as value of token
+                    continue;
+                }
+                if (!t.type) {
                     break;
                 }
+                if (t.type === '{' || t.type === '[') {
+                    if (!levels[t.type]) {
+                        levels[t.type] = 0;
+                    }
 
+                    levels[t.type]!++;
+                }
+
+                if (t.type === '}' || t.type === ']') {
+                    levels[parenthesesClosures[t.type]]!--;
+
+                    if (Object.values(levels).every((level) => level <= 0)) {
+                        break;
+                    }
+                }
+
                 if (t.type === '\n') {
                     lastNewLinePosition.line += 1;
                     lastNewLinePosition.columm = t.end;
-                } else if (t.type === 'string') {
-                    s.next(); // :
-                    const value = s.next(); // value
-                    s.next(); // ;
-                    resTokens.push({
+                }
+                if (t.type === 'string') {
+                    const token: DtsToken = {
                         ...t,
                         line: lastNewLinePosition.line,
                         column: t.start - lastNewLinePosition.columm,
-                        outputValue: {
+                    };
+
+                    // in case this token has a string value token we add it to current token object
+                    const value = s.peek(2);
+                    if (value.type === 'string' || value.type === 'text') {
+                        values.add(value);
+
+                        token.outputValue = {
                             ...value,
                             line: lastNewLinePosition.line,
                             column: value.start - lastNewLinePosition.columm,
-                        },
-                    });
+                        };
+                    }
+
+                    resTokens.push(token);
                 }
@@ -256,0 +289,0 @@ }

src/generate-dts-sourcemaps.ts

 import { basename } from 'path';
 import { ClassSymbol, StylableMeta, valueMapping } from '@stylable/core';
 import { CSSKeyframes } from '@stylable/core/dist/features';
+import { processDeclarationFunctions } from '@stylable/core/dist/process-declaration-functions';
 import { encode } from 'vlq';
@@ -11,2 +12,3 @@ import {
 } from './dts-rough-tokenizer';
+import { SPACING } from './generate-dts';
 
@@ -54,13 +56,46 @@ type LineMapping = Array<Array<number>>;
     const stVar = meta.vars.find((v) => v.name === varName);
-    let res;
 
-    if (stVar) {
+    if (stVar?.node.source?.start) {
+        return {
+            line: stVar.node.source.start.line - 1,
+            column: stVar.node.source.start.column - 1,
+        };
+    } else {
+        // TODO: move this logic to Stylable core and enhance it. The meta should provide the API to get to the inner parts of the st-var
+        let res: Position;
         meta.rawAst.walkRules(':vars', (rule) => {
-            return rule.walkDecls(varName, (decl) => {
-                if (decl.source && decl.source.start) {
-                    res = {
-                        line: decl.source.start.line - 1,
-                        column: decl.source.start.column - 1,
-                    };
-                    return false;
+            return rule.walkDecls((decl) => {
+                if (decl.source?.start) {
+                    if (decl.prop === varName) {
+                        res = {
+                            line: decl.source.start.line - 1,
+                            column: decl.source.start.column - 1,
+                        };
+                    } else {
+                        processDeclarationFunctions(decl, (node, level) => {
+                            if (node.type === 'item' && node.name === varName) {
+                                const rawDeclaration = `${decl.raws.before ?? ''}${decl.prop}${
+                                    decl.raws.between ?? ''
+                                }${decl.value}`;
+                                const rootPosition = {
+                                    line: rule.source!.start!.line - 1,
+                                    column: rule.source!.start!.column - 1,
+                                };
+
+                                res = {
+                                    ...calculateEstimatedPosition(
+                                        rawDeclaration,
+                                        node.name,
+                                        node.after,
+                                        rootPosition
+                                    ),
+                                    generatedOffsetLevel: level,
+                                };
+                            }
+                        });
+                    }
+
+                    if (res) {
+                        return false;
+                    }
                 }
@@ -71,5 +106,4 @@
         });
+        return res!;
     }
-
-    return res;
 }
@@ -113,2 +147,3 @@
     column: number;
+    generatedOffsetLevel?: number;
 };
@@ -243,7 +278,14 @@
                 if (currentSrcPosition) {
+                    const lineDelta = currentSrcPosition.line - lastSrcPosition.line;
+                    const columnDelta = currentSrcPosition.column - lastSrcPosition.column;
+
                     mapping[dtsLine] = createLineMapping(
-                        4, // top-level object property offset
-                        currentSrcPosition.line - lastSrcPosition.line,
-                        currentSrcPosition.column - lastSrcPosition.column
+                        SPACING.repeat(currentSrcPosition.generatedOffsetLevel ?? 1).length,
+                        lineDelta,
+                        columnDelta
                     );
+
+                    // reset to default offset level
+                    currentSrcPosition.generatedOffsetLevel = undefined;
+
                     lastSrcPosition = { ...currentSrcPosition };
@@ -288,1 +330,18 @@ }
 }
+
+function calculateEstimatedPosition(
+    rawValue: string,
+    name: string,
+    after = '',
+    rootPosition?: Position
+): Position {
+    const valueLength = rawValue.indexOf(name + after) + name.length - after.length;
+    const value = rawValue.slice(0, valueLength);
+    const byLines = value.split(/\n/g);
+    const lastLine = byLines[byLines.length - 1];
+
+    return {
+        line: byLines.length - 1 + (rootPosition?.line ?? 0),
+        column: lastLine.length + (rootPosition?.column ?? 0),
+    };
+}

src/generate-dts.ts

@@ -11,3 +11,3 @@ import {
 
-const SPACING = ' '.repeat(4);
+export const SPACING = ' '.repeat(4);
 const asString = (v: string) => JSON.stringify(v);
@@ -67,8 +67,44 @@
 
-function stringifyStringRecord(record: Record<string, string>, indent = SPACING) {
-    return Object.keys(record)
-        .map((k) => `${indent}${asString(k)}: string;`)
-        .join('\n');
+function stringifyStringRecord(
+    record: Record<string, any>,
+    addParentheses = false,
+    indent = SPACING,
+    delimiter = '\n'
+): string {
+    const s = Object.entries(record)
+        .map(
+            ([key, value]) =>
+                `${indent}${asString(key)}: ${stringifyTypedValue(
+                    value,
+                    indent + SPACING,
+                    delimiter
+                )};`
+        )
+        .join(delimiter);
+
+    return addParentheses ? `{${wrapNL(s)}${indent.replace(SPACING, '')}}` : s;
 }
 
+function stringifyStringArray(array: any[], indent = SPACING, delimiter = '\n') {
+    return `[${wrapNL(
+        array
+            .map((value) => `${indent}${stringifyTypedValue(value, indent + SPACING, delimiter)},`)
+            .join(delimiter)
+    )}${indent.replace(SPACING, '')}]`;
+}
+
+function stringifyTypedValue(
+    value: string | any[] | Record<string, any>,
+    indent = SPACING,
+    delimiter = '\n'
+): string {
+    if (typeof value === 'string') {
+        return 'string';
+    } else if (Array.isArray(value)) {
+        return stringifyStringArray(value, indent, delimiter);
+    } else {
+        return stringifyStringRecord(value, true, indent, delimiter);
+    }
+}
+
 function stringifyClasses(classes: Record<string, string>, namespace: string, indent = SPACING) {
@@ -75,0 +111,0 @@ // this uses the scoped names from the exported stylesheet, but they may change in a future build

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

93035

increased by15.82%

Lines of code

1602

increased by14.35%

Dependency changes

• Updated@stylable/core@^4.10.3