@servicetitan/stylelint-config 16.0.1 → 17.0.1

package/dist/function-url-no-absolute.js

@@ -18,7 +18,7 @@ const plugin = actual => {
         }
         root.walkDecls(decl => {
             functionArgumentsSearch(decl.toString().toLowerCase(), 'url', (args, index) => {
-                const url = trim_1.default(args, ' \'"');
+                const url = (0, trim_1.default)(args, ' \'"');
                 if (!isAbsoluteUrl(url)) {
                     return;
                 }
@@ -33,5 +33,5 @@ const plugin = actual => {
         });
     };
 };
-module.exports = Object.assign(stylelint_1.createPlugin(ruleName, plugin), { ruleName, messages });
+module.exports = Object.assign((0, stylelint_1.createPlugin)(ruleName, plugin), { ruleName, messages });
 //# sourceMappingURL=function-url-no-absolute.js.map

package/dist/function-url-no-absolute.js.map

@@ -1 +1 @@
-{"version":3,"file":"function-url-no-absolute.js","sourceRoot":"","sources":["../src/function-url-no-absolute.ts"],"names":[],"mappings":";;;;AAAA,yCAAwD;AAExD,uDAA+B;AAE/B,MAAM,uBAAuB,GAAG,OAAO,CAAC,6CAA6C,CAI5E,CAAC;AAEV,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAE7E,MAAM,QAAQ,GAAG,wCAAwC,CAAC;AAC1D,MAAM,QAAQ,GAAG,iBAAK,CAAC,YAAY,CAAC,QAAQ,EAAE;IAC1C,QAAQ,EAAE,yBAAyB;CACtC,CAAC,CAAC;AAEH,MAAM,MAAM,GAAW,MAAM,CAAC,EAAE;IAC5B,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE;QACpB,MAAM,YAAY,GAAG,iBAAK,CAAC,eAAe,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;QAEzE,IAAI,CAAC,YAAY,EAAE;YACf,OAAO;SACV;QAED,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE;YAClB,uBAAuB,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBAC1E,MAAM,GAAG,GAAG,cAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;gBAE/B,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE;oBACrB,OAAO;iBACV;gBAED,iBAAK,CAAC,MAAM,CAAC;oBACT,OAAO,EAAE,QAAQ,CAAC,QAAQ;oBAC1B,IAAI,EAAE,IAAI;oBACV,KAAK;oBACL,MAAM;oBACN,QAAQ;iBACX,CAAC,CAAC;YACP,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;AACN,CAAC,CAAC;AAEF,iBAAS,MAAM,CAAC,MAAM,CAAC,wBAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC"}
+{"version":3,"file":"function-url-no-absolute.js","sourceRoot":"","sources":["../src/function-url-no-absolute.ts"],"names":[],"mappings":";;;;AAAA,yCAAwD;AAExD,uDAA+B;AAE/B,MAAM,uBAAuB,GAAG,OAAO,CAAC,6CAA6C,CAI5E,CAAC;AAEV,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAE7E,MAAM,QAAQ,GAAG,wCAAwC,CAAC;AAC1D,MAAM,QAAQ,GAAG,iBAAK,CAAC,YAAY,CAAC,QAAQ,EAAE;IAC1C,QAAQ,EAAE,yBAAyB;CACtC,CAAC,CAAC;AAEH,MAAM,MAAM,GAAW,MAAM,CAAC,EAAE;IAC5B,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE;QACpB,MAAM,YAAY,GAAG,iBAAK,CAAC,eAAe,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;QAEzE,IAAI,CAAC,YAAY,EAAE;YACf,OAAO;SACV;QAED,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE;YAClB,uBAAuB,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBAC1E,MAAM,GAAG,GAAG,IAAA,cAAI,EAAC,IAAI,EAAE,MAAM,CAAC,CAAC;gBAE/B,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE;oBACrB,OAAO;iBACV;gBAED,iBAAK,CAAC,MAAM,CAAC;oBACT,OAAO,EAAE,QAAQ,CAAC,QAAQ;oBAC1B,IAAI,EAAE,IAAI;oBACV,KAAK;oBACL,MAAM;oBACN,QAAQ;iBACX,CAAC,CAAC;YACP,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;AACN,CAAC,CAAC;AAEF,iBAAS,MAAM,CAAC,MAAM,CAAC,IAAA,wBAAY,EAAC,QAAQ,EAAE,MAAM,CAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC"}

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;;AAE1C,kBAa4B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;;AAE1C,kBAc4B"}

package/dist/index.js

@@ -1,7 +1,7 @@
 "use strict";
 module.exports = {
     extends: ['stylelint-config-recommended', 'stylelint-prettier/recommended'],
-    plugins: ['./function-url-no-absolute'],
+    plugins: ['./function-url-no-absolute', './use-tokens'],
     rules: {
         'selector-pseudo-class-no-unknown': [
             true,
@@ -10,6 +10,7 @@ module.exports = {
             },
         ],
         '@servicetitan/function-url-no-absolute': true,
+        '@servicetitan/use-tokens': true,
         'no-invalid-position-at-import-rule': null, // Not supported for LESS/SASS. Enable for CSS when https://github.com/stylelint/stylelint/issues/3128 is implemented.
     },
 };

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAEA,iBAAS;IACL,OAAO,EAAE,CAAC,8BAA8B,EAAE,gCAAgC,CAAC;IAC3E,OAAO,EAAE,CAAC,4BAA4B,CAAC;IACvC,KAAK,EAAE;QACH,kCAAkC,EAAE;YAChC,IAAI;YACJ;gBACI,mBAAmB,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;aAC3C;SACJ;QACD,wCAAwC,EAAE,IAAI;QAC9C,oCAAoC,EAAE,IAAI,EAAE,sHAAsH;KACrK;CACsB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAEA,iBAAS;IACL,OAAO,EAAE,CAAC,8BAA8B,EAAE,gCAAgC,CAAC;IAC3E,OAAO,EAAE,CAAC,4BAA4B,EAAE,cAAc,CAAC;IACvD,KAAK,EAAE;QACH,kCAAkC,EAAE;YAChC,IAAI;YACJ;gBACI,mBAAmB,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;aAC3C;SACJ;QACD,wCAAwC,EAAE,IAAI;QAC9C,0BAA0B,EAAE,IAAI;QAChC,oCAAoC,EAAE,IAAI,EAAE,sHAAsH;KACrK;CACsB,CAAC"}

package/dist/use-tokens/index.d.ts

@@ -0,0 +1,3 @@
+declare const _default: any;
+export = _default;
+//# sourceMappingURL=index.d.ts.map

package/dist/use-tokens/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/use-tokens/index.ts"],"names":[],"mappings":";AAmKA,kBAAiG"}

package/dist/use-tokens/index.js

@@ -0,0 +1,111 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+const stylelint_1 = require("stylelint");
+const color_1 = __importDefault(require("color"));
+const values_1 = require("./values");
+const ruleName = '@servicetitan/use-tokens';
+const messages = stylelint_1.utils.ruleMessages(ruleName, {
+    variableExpected: (expected, found) => `You should use "${expected}" variable from the \`@servicetitan/tokens\` instead of "${found}".`,
+});
+const plugin = (_0, _1, context) => {
+    return (root, result) => {
+        var _a, _b, _c;
+        const extension = (_c = (_b = (_a = result.opts) === null || _a === void 0 ? void 0 : _a.from) === null || _b === void 0 ? void 0 : _b.split('.').pop()) === null || _c === void 0 ? void 0 : _c.toLowerCase();
+        function convertToVariable(key) {
+            switch (extension) {
+                case 'less':
+                    return `@${key}`;
+                case 'sass':
+                case 'scss':
+                    return `$${key}`;
+                default:
+                    return `var(--${key})`;
+            }
+        }
+        root.walkDecls(decl => {
+            function lint(collection, { condition, transformer, solid, } = {}) {
+                var _a;
+                if (condition && !condition(decl.prop)) {
+                    return true;
+                }
+                const values = !solid ? decl.value.split(' ') : [decl.value];
+                let reported = false;
+                for (const rawValue of values) {
+                    const value = (_a = transformer === null || transformer === void 0 ? void 0 : transformer(rawValue)) !== null && _a !== void 0 ? _a : rawValue;
+                    if (collection[value]) {
+                        const variable = convertToVariable(collection[value]);
+                        if (context.fix) {
+                            values[values.indexOf(rawValue)] = variable;
+                        }
+                        else {
+                            stylelint_1.utils.report({
+                                node: decl,
+                                message: messages.variableExpected(variable, rawValue),
+                                word: value,
+                                ruleName,
+                                result,
+                            });
+                        }
+                        reported = true;
+                    }
+                }
+                if (context.fix) {
+                    decl.value = values.join(' ');
+                }
+                return !reported;
+            }
+            const linters = {
+                colors: () => lint(values_1.colors, {
+                    transformer: value => {
+                        try {
+                            return new color_1.default(value).hex();
+                        }
+                        catch (_a) {
+                            return '';
+                        }
+                    },
+                }),
+                typescales: () => lint(values_1.typescales, {
+                    condition: property => property === 'font-size',
+                    solid: true,
+                }),
+                borderRadiuses: () => lint(values_1.borderRadiuses, {
+                    condition: property => property.startsWith('border-') && property.endsWith('-radius'),
+                    transformer: value => (value === '0px' ? '0' : value),
+                }),
+                lintSpacings: () => lint(values_1.spacings, {
+                    // other spacings like "top"?
+                    condition: property => property.startsWith('margin') || property.startsWith('padding'),
+                    transformer: value => value === '0px' ? '0' : value.startsWith('-') ? value.slice(1) : value,
+                }),
+                fontWeights: () => lint(values_1.fontWeights, {
+                    condition: property => property === 'font-weight',
+                    solid: true,
+                }),
+                opacities: () => lint(values_1.opacities, {
+                    condition: property => property === 'opacity',
+                    transformer: value => (value.startsWith('0.') ? value.slice(1) : value),
+                    solid: true,
+                }),
+                zIndexes: () => lint(values_1.zIndexes, { condition: property => property === 'z-index', solid: true }),
+                lineHeights: () => lint(values_1.lineHeights, {
+                    condition: property => property === 'line-height',
+                    solid: true,
+                }),
+                fontFamilies: () => lint(values_1.fontFamilies, {
+                    condition: property => property === 'font-family',
+                    solid: true,
+                }),
+            };
+            for (const handler of Object.values(linters)) {
+                if (!handler()) {
+                    return;
+                }
+            }
+        });
+    };
+};
+module.exports = Object.assign((0, stylelint_1.createPlugin)(ruleName, plugin), { ruleName, messages });
+//# sourceMappingURL=index.js.map

package/dist/use-tokens/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/use-tokens/index.ts"],"names":[],"mappings":";;;;AAAA,yCAA0E;AAE1E,kDAA0B;AAE1B,qCAUkB;AAMlB,MAAM,QAAQ,GAAG,0BAA0B,CAAC;AAC5C,MAAM,QAAQ,GAAG,iBAAK,CAAC,YAAY,CAAC,QAAQ,EAAE;IAC1C,gBAAgB,EAAE,CAAC,QAAgB,EAAE,KAAa,EAAE,EAAE,CAClD,mBAAmB,QAAQ,4DAA4D,KAAK,IAAI;CACvG,CAAC,CAAC;AAEH,MAAM,MAAM,GAAW,CAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE;IACvC,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE;;QACpB,MAAM,SAAS,GAAG,MAAA,MAAA,MAAA,MAAM,CAAC,IAAI,0CAAE,IAAI,0CAAE,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,0CAAE,WAAW,EAAE,CAAC;QAErE,SAAS,iBAAiB,CAAC,GAAW;YAClC,QAAQ,SAAS,EAAE;gBACf,KAAK,MAAM;oBACP,OAAO,IAAI,GAAG,EAAE,CAAC;gBAErB,KAAK,MAAM,CAAC;gBACZ,KAAK,MAAM;oBACP,OAAO,IAAI,GAAG,EAAE,CAAC;gBAErB;oBACI,OAAO,SAAS,GAAG,GAAG,CAAC;aAC9B;QACL,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE;YAClB,SAAS,IAAI,CACT,UAAkC,EAClC,EACI,SAAS,EACT,WAAW,EACX,KAAK,MAKL,EAAE;;gBAEN,IAAI,SAAS,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;oBACpC,OAAO,IAAI,CAAC;iBACf;gBAED,MAAM,MAAM,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAE7D,IAAI,QAAQ,GAAG,KAAK,CAAC;gBACrB,KAAK,MAAM,QAAQ,IAAI,MAAM,EAAE;oBAC3B,MAAM,KAAK,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAG,QAAQ,CAAC,mCAAI,QAAQ,CAAC;oBAClD,IAAI,UAAU,CAAC,KAAK,CAAC,EAAE;wBACnB,MAAM,QAAQ,GAAG,iBAAiB,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC;wBAEtD,IAAI,OAAO,CAAC,GAAG,EAAE;4BACb,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,QAAQ,CAAC;yBAC/C;6BAAM;4BACH,iBAAK,CAAC,MAAM,CAAC;gCACT,IAAI,EAAE,IAAI;gCACV,OAAO,EAAE,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC;gCACtD,IAAI,EAAE,KAAK;gCACX,QAAQ;gCACR,MAAM;6BACT,CAAC,CAAC;yBACN;wBACD,QAAQ,GAAG,IAAI,CAAC;qBACnB;iBACJ;gBAED,IAAI,OAAO,CAAC,GAAG,EAAE;oBACb,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;iBACjC;gBAED,OAAO,CAAC,QAAQ,CAAC;YACrB,CAAC;YAED,MAAM,OAAO,GAAG;gBACZ,MAAM,EAAE,GAAG,EAAE,CACT,IAAI,CAAC,eAAM,EAAE;oBACT,WAAW,EAAE,KAAK,CAAC,EAAE;wBACjB,IAAI;4BACA,OAAO,IAAI,eAAK,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,CAAC;yBACjC;wBAAC,WAAM;4BACJ,OAAO,EAAE,CAAC;yBACb;oBACL,CAAC;iBACJ,CAAC;gBAEN,UAAU,EAAE,GAAG,EAAE,CACb,IAAI,CAAC,mBAAU,EAAE;oBACb,SAAS,EAAE,QAAQ,CAAC,EAAE,CAAC,QAAQ,KAAK,WAAW;oBAC/C,KAAK,EAAE,IAAI;iBACd,CAAC;gBAEN,cAAc,EAAE,GAAG,EAAE,CACjB,IAAI,CAAC,uBAAc,EAAE;oBACjB,SAAS,EAAE,QAAQ,CAAC,EAAE,CAClB,QAAQ,CAAC,UAAU,CAAC,SAAS,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC;oBAClE,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;iBACxD,CAAC;gBAEN,YAAY,EAAE,GAAG,EAAE,CACf,IAAI,CAAC,iBAAQ,EAAE;oBACX,6BAA6B;oBAC7B,SAAS,EAAE,QAAQ,CAAC,EAAE,CAClB,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,UAAU,CAAC,SAAS,CAAC;oBACnE,WAAW,EAAE,KAAK,CAAC,EAAE,CACjB,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK;iBAC7E,CAAC;gBAEN,WAAW,EAAE,GAAG,EAAE,CACd,IAAI,CAAC,oBAAW,EAAE;oBACd,SAAS,EAAE,QAAQ,CAAC,EAAE,CAAC,QAAQ,KAAK,aAAa;oBACjD,KAAK,EAAE,IAAI;iBACd,CAAC;gBAEN,SAAS,EAAE,GAAG,EAAE,CACZ,IAAI,CAAC,kBAAS,EAAE;oBACZ,SAAS,EAAE,QAAQ,CAAC,EAAE,CAAC,QAAQ,KAAK,SAAS;oBAC7C,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;oBACvE,KAAK,EAAE,IAAI;iBACd,CAAC;gBAEN,QAAQ,EAAE,GAAG,EAAE,CACX,IAAI,CAAC,iBAAQ,EAAE,EAAE,SAAS,EAAE,QAAQ,CAAC,EAAE,CAAC,QAAQ,KAAK,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;gBAElF,WAAW,EAAE,GAAG,EAAE,CACd,IAAI,CAAC,oBAAW,EAAE;oBACd,SAAS,EAAE,QAAQ,CAAC,EAAE,CAAC,QAAQ,KAAK,aAAa;oBACjD,KAAK,EAAE,IAAI;iBACd,CAAC;gBAEN,YAAY,EAAE,GAAG,EAAE,CACf,IAAI,CAAC,qBAAY,EAAE;oBACf,SAAS,EAAE,QAAQ,CAAC,EAAE,CAAC,QAAQ,KAAK,aAAa;oBACjD,KAAK,EAAE,IAAI;iBACd,CAAC;aACT,CAAC;YAEF,KAAK,MAAM,OAAO,IAAI,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE;gBAC1C,IAAI,CAAC,OAAO,EAAE,EAAE;oBACZ,OAAO;iBACV;aACJ;QACL,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;AACN,CAAC,CAAC;AAEF,iBAAS,MAAM,CAAC,MAAM,CAAC,IAAA,wBAAY,EAAC,QAAQ,EAAE,MAAwB,CAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC"}

package/dist/use-tokens/values.d.ts

@@ -0,0 +1,10 @@
+export declare const colors: Record<string, string>;
+export declare const typescales: Record<string, string>;
+export declare const borderRadiuses: Record<string, string>;
+export declare const spacings: Record<string, string>;
+export declare const fontWeights: Record<string, string>;
+export declare const opacities: Record<string, string>;
+export declare const zIndexes: Record<string, string>;
+export declare const lineHeights: Record<string, string>;
+export declare const fontFamilies: Record<string, string>;
+//# sourceMappingURL=values.d.ts.map

package/dist/use-tokens/values.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"values.d.ts","sourceRoot":"","sources":["../../src/use-tokens/values.ts"],"names":[],"mappings":"AAiCA,eAAO,MAAM,MAAM,wBAGlB,CAAC;AACF,eAAO,MAAM,UAAU,wBAA0D,CAAC;AAClF,eAAO,MAAM,cAAc,wBAA6D,CAAC;AACzF,eAAO,MAAM,QAAQ,wBAAwD,CAAC;AAC9E,eAAO,MAAM,WAAW,wBAA2D,CAAC;AACpF,eAAO,MAAM,SAAS,wBAAwD,CAAC;AAC/E,eAAO,MAAM,QAAQ,wBAAuD,CAAC;AAC7E,eAAO,MAAM,WAAW,wBAAyD,CAAC;AAClF,eAAO,MAAM,YAAY,wBAGxB,CAAC"}

package/dist/use-tokens/values.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fontFamilies = exports.lineHeights = exports.zIndexes = exports.opacities = exports.fontWeights = exports.spacings = exports.borderRadiuses = exports.typescales = exports.colors = void 0;
+const fs_1 = __importDefault(require("fs"));
+const color_1 = __importDefault(require("color"));
+const tokens_1 = __importDefault(require("@servicetitan/tokens"));
+const toCamelCase = (str) => str.replace(/(-[a-z])/g, ([, letter]) => letter.toUpperCase());
+const toSnakeCase = (str) => str.replace(/([A-Z]|[a-z][0-9])/g, ([letter, digit]) => digit === undefined ? `-${letter.toLowerCase()}` : `${letter}-${digit}`);
+const aliases = fs_1.default
+    .readFileSync(require.resolve('@servicetitan/tokens/dist/tokens.less'), 'utf8')
+    .split('\n')
+    .filter(row => row.startsWith('@') && row.endsWith('(alias)'))
+    .map(row => toCamelCase(row.split(':')[0].slice(1)));
+function getValues(condition, transformer) {
+    return Object.entries(tokens_1.default)
+        .filter(([variable]) => !aliases.includes(variable) && condition(variable))
+        .reduce((result, [variable, value]) => {
+        var _a;
+        return (Object.assign(Object.assign({}, result), { [(_a = transformer === null || transformer === void 0 ? void 0 : transformer(value)) !== null && _a !== void 0 ? _a : value]: toSnakeCase(variable) }));
+    }, {});
+}
+exports.colors = getValues(variable => variable.startsWith('color'), value => new color_1.default(value).hex());
+exports.typescales = getValues(variable => variable.startsWith('typescale'));
+exports.borderRadiuses = getValues(variable => variable.startsWith('borderRadius'));
+exports.spacings = getValues(variable => variable.startsWith('spacing'));
+exports.fontWeights = getValues(variable => variable.startsWith('fontWeight'));
+exports.opacities = getValues(variable => variable.startsWith('opacity'));
+exports.zIndexes = getValues(variable => variable.startsWith('zIndex'));
+exports.lineHeights = getValues(variable => variable.endsWith('LineHeight'));
+exports.fontFamilies = getValues(variable => variable.endsWith('FontFamily'), value => value.replace(/'/g, "'"));
+//# sourceMappingURL=values.js.map

package/dist/use-tokens/values.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"values.js","sourceRoot":"","sources":["../../src/use-tokens/values.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/stylelint-config",
-    "version": "16.0.1",
+    "version": "17.0.1",
     "description": "",
     "homepage": "https://docs.st.dev/docs/frontend/eslint-stylelint-configurations",
     "repository": {
@@ -15,17 +15,21 @@
         "src"
     ],
     "dependencies": {
+        "color": "~4.0.1",
         "lodash": "~4.17.21",
         "stylelint-config-prettier": "~8.0.2",
         "stylelint-config-standard": "~22.0.0",
         "stylelint-prettier": "~1.2.0"
     },
     "devDependencies": {
-        "@types/lodash": "~4.14.174",
+        "@servicetitan/tokens": "*",
+        "@types/color": "~3.0.2",
+        "@types/lodash": "~4.14.175",
         "@types/stylelint": "~13.13.2",
         "stylelint": "~13.13.1"
     },
     "peerDependencies": {
+        "@servicetitan/tokens": "*",
         "stylelint": "~13.13.1"
     },
     "publishConfig": {
@@ -34,5 +38,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "43d6c7713ae09594d44e7d638d6b8399c5109a93"
+    "gitHead": "32b287da19c96ec114b90d9f27fdead809fe5d75"
 }

package/src/index.ts

@@ -2,7 +2,7 @@ import { Configuration } from 'stylelint';
 
 export = {
     extends: ['stylelint-config-recommended', 'stylelint-prettier/recommended'],
-    plugins: ['./function-url-no-absolute'],
+    plugins: ['./function-url-no-absolute', './use-tokens'],
     rules: {
         'selector-pseudo-class-no-unknown': [
             true,
@@ -11,6 +11,7 @@ export = {
             },
         ],
         '@servicetitan/function-url-no-absolute': true,
+        '@servicetitan/use-tokens': true,
         'no-invalid-position-at-import-rule': null, // Not supported for LESS/SASS. Enable for CSS when https://github.com/stylelint/stylelint/issues/3128 is implemented.
     },
 } as Partial<Configuration>;

package/src/use-tokens/index.ts

@@ -0,0 +1,164 @@
+import { Plugin as OriginalPlugin, createPlugin, utils } from 'stylelint';
+
+import Color from 'color';
+
+import {
+    colors,
+    typescales,
+    borderRadiuses,
+    spacings,
+    fontWeights,
+    opacities,
+    zIndexes,
+    lineHeights,
+    fontFamilies,
+} from './values';
+
+type Plugin = (
+    ...args: [...Parameters<OriginalPlugin>, { fix: boolean }]
+) => ReturnType<OriginalPlugin>;
+
+const ruleName = '@servicetitan/use-tokens';
+const messages = utils.ruleMessages(ruleName, {
+    variableExpected: (expected: string, found: string) =>
+        `You should use "${expected}" variable from the \`@servicetitan/tokens\` instead of "${found}".`,
+});
+
+const plugin: Plugin = (_0, _1, context) => {
+    return (root, result) => {
+        const extension = result.opts?.from?.split('.').pop()?.toLowerCase();
+
+        function convertToVariable(key: string) {
+            switch (extension) {
+                case 'less':
+                    return `@${key}`;
+
+                case 'sass':
+                case 'scss':
+                    return `$${key}`;
+
+                default:
+                    return `var(--${key})`;
+            }
+        }
+
+        root.walkDecls(decl => {
+            function lint(
+                collection: Record<string, string>,
+                {
+                    condition,
+                    transformer,
+                    solid,
+                }: {
+                    condition?: (property: string) => boolean;
+                    transformer?: (value: string) => string;
+                    solid?: boolean;
+                } = {}
+            ) {
+                if (condition && !condition(decl.prop)) {
+                    return true;
+                }
+
+                const values = !solid ? decl.value.split(' ') : [decl.value];
+
+                let reported = false;
+                for (const rawValue of values) {
+                    const value = transformer?.(rawValue) ?? rawValue;
+                    if (collection[value]) {
+                        const variable = convertToVariable(collection[value]);
+
+                        if (context.fix) {
+                            values[values.indexOf(rawValue)] = variable;
+                        } else {
+                            utils.report({
+                                node: decl,
+                                message: messages.variableExpected(variable, rawValue),
+                                word: value,
+                                ruleName,
+                                result,
+                            });
+                        }
+                        reported = true;
+                    }
+                }
+
+                if (context.fix) {
+                    decl.value = values.join(' ');
+                }
+
+                return !reported;
+            }
+
+            const linters = {
+                colors: () =>
+                    lint(colors, {
+                        transformer: value => {
+                            try {
+                                return new Color(value).hex();
+                            } catch {
+                                return '';
+                            }
+                        },
+                    }),
+
+                typescales: () =>
+                    lint(typescales, {
+                        condition: property => property === 'font-size',
+                        solid: true,
+                    }),
+
+                borderRadiuses: () =>
+                    lint(borderRadiuses, {
+                        condition: property =>
+                            property.startsWith('border-') && property.endsWith('-radius'),
+                        transformer: value => (value === '0px' ? '0' : value),
+                    }),
+
+                lintSpacings: () =>
+                    lint(spacings, {
+                        // other spacings like "top"?
+                        condition: property =>
+                            property.startsWith('margin') || property.startsWith('padding'),
+                        transformer: value =>
+                            value === '0px' ? '0' : value.startsWith('-') ? value.slice(1) : value,
+                    }),
+
+                fontWeights: () =>
+                    lint(fontWeights, {
+                        condition: property => property === 'font-weight',
+                        solid: true,
+                    }),
+
+                opacities: () =>
+                    lint(opacities, {
+                        condition: property => property === 'opacity',
+                        transformer: value => (value.startsWith('0.') ? value.slice(1) : value),
+                        solid: true,
+                    }),
+
+                zIndexes: () =>
+                    lint(zIndexes, { condition: property => property === 'z-index', solid: true }),
+
+                lineHeights: () =>
+                    lint(lineHeights, {
+                        condition: property => property === 'line-height',
+                        solid: true,
+                    }),
+
+                fontFamilies: () =>
+                    lint(fontFamilies, {
+                        condition: property => property === 'font-family',
+                        solid: true,
+                    }),
+            };
+
+            for (const handler of Object.values(linters)) {
+                if (!handler()) {
+                    return;
+                }
+            }
+        });
+    };
+};
+
+export = Object.assign(createPlugin(ruleName, plugin as OriginalPlugin), { ruleName, messages });

package/src/use-tokens/values.ts

@@ -0,0 +1,48 @@
+import fs from 'fs';
+
+import Color from 'color';
+
+import tokens from '@servicetitan/tokens';
+
+const toCamelCase = (str: string) => str.replace(/(-[a-z])/g, ([, letter]) => letter.toUpperCase());
+const toSnakeCase = (str: string) =>
+    str.replace(/([A-Z]|[a-z][0-9])/g, ([letter, digit]) =>
+        digit === undefined ? `-${letter.toLowerCase()}` : `${letter}-${digit}`
+    );
+
+const aliases = fs
+    .readFileSync(require.resolve('@servicetitan/tokens/dist/tokens.less'), 'utf8')
+    .split('\n')
+    .filter(row => row.startsWith('@') && row.endsWith('(alias)'))
+    .map(row => toCamelCase(row.split(':')[0].slice(1)));
+
+function getValues(
+    condition: (variable: string) => boolean,
+    transformer?: (value: string) => string
+) {
+    return Object.entries(tokens)
+        .filter(([variable]) => !aliases.includes(variable) && condition(variable))
+        .reduce<Record<string, string>>(
+            (result, [variable, value]) => ({
+                ...result,
+                [transformer?.(value) ?? value]: toSnakeCase(variable),
+            }),
+            {}
+        );
+}
+
+export const colors = getValues(
+    variable => variable.startsWith('color'),
+    value => new Color(value).hex()
+);
+export const typescales = getValues(variable => variable.startsWith('typescale'));
+export const borderRadiuses = getValues(variable => variable.startsWith('borderRadius'));
+export const spacings = getValues(variable => variable.startsWith('spacing'));
+export const fontWeights = getValues(variable => variable.startsWith('fontWeight'));
+export const opacities = getValues(variable => variable.startsWith('opacity'));
+export const zIndexes = getValues(variable => variable.startsWith('zIndex'));
+export const lineHeights = getValues(variable => variable.endsWith('LineHeight'));
+export const fontFamilies = getValues(
+    variable => variable.endsWith('FontFamily'),
+    value => value.replace(/&#x27;/g, "'")
+);