@atlaskit/codemod-cli 0.14.0 → 0.15.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.
- package/CHANGELOG.md +66 -53
- package/dist/cjs/main.js +3 -3
- package/dist/cjs/presets/css-to-design-tokens/css-to-design-tokens.js +52 -133
- package/dist/cjs/presets/css-to-design-tokens/lib/colors.js +49 -0
- package/dist/cjs/presets/css-to-design-tokens/lib/declaration.js +29 -0
- package/dist/cjs/presets/css-to-design-tokens/{utils → lib}/legacy-colors.js +13 -17
- package/dist/cjs/presets/css-to-design-tokens/lib/logger.js +18 -0
- package/dist/cjs/presets/css-to-design-tokens/lib/meta.js +157 -0
- package/dist/cjs/presets/css-to-design-tokens/lib/tokens.js +47 -0
- package/dist/cjs/presets/css-to-design-tokens/lib/value.js +80 -0
- package/dist/cjs/presets/index.js +1 -2
- package/dist/cjs/presets/styled-to-emotion/styled-to-emotion.js +1 -2
- package/dist/cjs/presets/theme-remove-deprecated-mixins/utils/replacements.js +2 -3
- package/dist/cjs/presets/theme-to-design-tokens/theme-to-design-tokens.js +2 -2
- package/dist/cjs/presets/theme-to-design-tokens/utils/color.js +4 -8
- package/dist/cjs/presets/theme-to-design-tokens/utils/css-utils.js +2 -2
- package/dist/cjs/presets/theme-to-design-tokens/utils/fuzzy-search.js +1 -2
- package/dist/cjs/presets/theme-to-design-tokens/utils/legacy-colors.js +4 -7
- package/dist/cjs/presets/theme-to-design-tokens/utils/named-colors.js +1 -2
- package/dist/cjs/presets/theme-to-design-tokens/utils/string-utils.js +1 -2
- package/dist/cjs/presets/theme-to-design-tokens/utils/tokens.js +3 -5
- package/dist/cjs/sinceRef.js +1 -2
- package/dist/cjs/transforms.js +6 -12
- package/dist/cjs/types.js +3 -5
- package/dist/cjs/utils.js +2 -3
- package/dist/es2019/presets/css-to-design-tokens/css-to-design-tokens.js +52 -116
- package/dist/es2019/presets/css-to-design-tokens/lib/colors.js +34 -0
- package/dist/es2019/presets/css-to-design-tokens/lib/declaration.js +17 -0
- package/dist/es2019/presets/css-to-design-tokens/{utils → lib}/legacy-colors.js +9 -10
- package/dist/es2019/presets/css-to-design-tokens/lib/logger.js +11 -0
- package/dist/es2019/presets/css-to-design-tokens/lib/meta.js +133 -0
- package/dist/es2019/presets/css-to-design-tokens/lib/tokens.js +24 -0
- package/dist/es2019/presets/css-to-design-tokens/lib/value.js +68 -0
- package/dist/es2019/presets/theme-to-design-tokens/utils/css-utils.js +2 -2
- package/dist/esm/main.js +3 -3
- package/dist/esm/presets/css-to-design-tokens/css-to-design-tokens.js +52 -132
- package/dist/esm/presets/css-to-design-tokens/lib/colors.js +38 -0
- package/dist/esm/presets/css-to-design-tokens/lib/declaration.js +19 -0
- package/dist/esm/presets/css-to-design-tokens/{utils → lib}/legacy-colors.js +9 -10
- package/dist/esm/presets/css-to-design-tokens/lib/logger.js +11 -0
- package/dist/esm/presets/css-to-design-tokens/lib/meta.js +146 -0
- package/dist/esm/presets/css-to-design-tokens/lib/tokens.js +40 -0
- package/dist/esm/presets/css-to-design-tokens/lib/value.js +73 -0
- package/dist/esm/presets/theme-to-design-tokens/theme-to-design-tokens.js +2 -2
- package/dist/esm/presets/theme-to-design-tokens/utils/css-utils.js +2 -2
- package/dist/types/main.d.ts +0 -1
- package/dist/types/presets/css-to-design-tokens/css-to-design-tokens.d.ts +0 -1
- package/dist/types/presets/css-to-design-tokens/lib/colors.d.ts +6 -0
- package/dist/types/presets/css-to-design-tokens/lib/declaration.d.ts +5 -0
- package/dist/types/presets/css-to-design-tokens/{utils → lib}/legacy-colors.d.ts +1 -1
- package/dist/types/presets/css-to-design-tokens/lib/logger.d.ts +4 -0
- package/dist/types/presets/css-to-design-tokens/lib/meta.d.ts +6 -0
- package/dist/types/presets/css-to-design-tokens/lib/tokens.d.ts +7 -0
- package/dist/types/presets/css-to-design-tokens/lib/value.d.ts +6 -0
- package/dist/types-ts4.5/main.d.ts +0 -1
- package/dist/types-ts4.5/presets/css-to-design-tokens/css-to-design-tokens.d.ts +0 -1
- package/dist/types-ts4.5/presets/css-to-design-tokens/lib/colors.d.ts +6 -0
- package/dist/types-ts4.5/presets/css-to-design-tokens/lib/declaration.d.ts +5 -0
- package/dist/types-ts4.5/presets/css-to-design-tokens/{utils → lib}/legacy-colors.d.ts +1 -1
- package/dist/types-ts4.5/presets/css-to-design-tokens/lib/logger.d.ts +4 -0
- package/dist/types-ts4.5/presets/css-to-design-tokens/lib/meta.d.ts +6 -0
- package/dist/types-ts4.5/presets/css-to-design-tokens/lib/tokens.d.ts +7 -0
- package/dist/types-ts4.5/presets/css-to-design-tokens/lib/value.d.ts +6 -0
- package/package.json +2 -2
- package/report.api.md +0 -2
- package/tmp/api-report-tmp.d.ts +0 -2
- package/dist/cjs/presets/css-to-design-tokens/utils/meta.js +0 -53
- package/dist/es2019/presets/css-to-design-tokens/utils/meta.js +0 -33
- package/dist/esm/presets/css-to-design-tokens/utils/meta.js +0 -46
- package/dist/types/presets/css-to-design-tokens/utils/meta.d.ts +0 -1
- package/dist/types-ts4.5/presets/css-to-design-tokens/utils/meta.d.ts +0 -1
|
@@ -5,91 +5,21 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.default = transformer;
|
|
8
|
-
exports.isColorProperty = isColorProperty;
|
|
9
8
|
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
10
9
|
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
11
10
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
12
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
11
|
var _postcss = _interopRequireDefault(require("postcss"));
|
|
14
12
|
var _postcssLess = _interopRequireDefault(require("postcss-less"));
|
|
15
|
-
var
|
|
16
|
-
var
|
|
17
|
-
var
|
|
18
|
-
var
|
|
19
|
-
var _meta = require("./utils/meta");
|
|
13
|
+
var _declaration = require("./lib/declaration");
|
|
14
|
+
var _meta = require("./lib/meta");
|
|
15
|
+
var _tokens = _interopRequireDefault(require("./lib/tokens"));
|
|
16
|
+
var _value = _interopRequireDefault(require("./lib/value"));
|
|
20
17
|
// @ts-ignore
|
|
21
18
|
|
|
22
|
-
var
|
|
19
|
+
var POSTCSS_OPTIONS = {
|
|
23
20
|
syntax: _postcssLess.default,
|
|
24
21
|
from: undefined
|
|
25
22
|
};
|
|
26
|
-
var tokens = _tokensRaw.light.filter(function (t) {
|
|
27
|
-
return t.attributes.state === 'active';
|
|
28
|
-
}).map(function (t) {
|
|
29
|
-
return t.name.replace(/\.\[default\]/g, '');
|
|
30
|
-
}).filter(function (t) {
|
|
31
|
-
return !t.includes('UNSAFE') && !t.includes('interaction');
|
|
32
|
-
});
|
|
33
|
-
var search = (0, _fuzzySearch.default)(tokens, false);
|
|
34
|
-
function isRule(node) {
|
|
35
|
-
return node.type === 'rule';
|
|
36
|
-
}
|
|
37
|
-
function getParentSelectors(node) {
|
|
38
|
-
if (isRule(node)) {
|
|
39
|
-
// @ts-expect-error
|
|
40
|
-
return getParentSelectors(node.parent) + ' ' + node.selector;
|
|
41
|
-
}
|
|
42
|
-
if (node.parent) {
|
|
43
|
-
return getParentSelectors(node.parent);
|
|
44
|
-
}
|
|
45
|
-
return '';
|
|
46
|
-
}
|
|
47
|
-
function stripVar(prop) {
|
|
48
|
-
return prop.substring(prop.indexOf('(') + 1).split(/\,|\)/)[0];
|
|
49
|
-
}
|
|
50
|
-
function stripLessVar(prop) {
|
|
51
|
-
return prop.substring(1);
|
|
52
|
-
}
|
|
53
|
-
function isColorProperty(prop) {
|
|
54
|
-
return prop === 'color' || prop === 'background' || prop === 'background-color' || prop === 'box-shadow' || prop === 'border' || prop === 'border-left' || prop === 'border-right' || prop === 'border-top' || prop === 'border-bottom' || prop === 'border-color' || prop === 'outline';
|
|
55
|
-
}
|
|
56
|
-
function getDeclarationMeta(decl) {
|
|
57
|
-
if (decl.prop === 'color') {
|
|
58
|
-
return 'text';
|
|
59
|
-
}
|
|
60
|
-
if (decl.prop.startsWith('background')) {
|
|
61
|
-
return 'background';
|
|
62
|
-
}
|
|
63
|
-
if (decl.prop.includes('shadow')) {
|
|
64
|
-
return 'shadow';
|
|
65
|
-
}
|
|
66
|
-
if (decl.prop.includes('border')) {
|
|
67
|
-
return 'border';
|
|
68
|
-
}
|
|
69
|
-
return '';
|
|
70
|
-
}
|
|
71
|
-
function isDesignToken(tokenName) {
|
|
72
|
-
return Boolean(Object.entries(_tokenNames.default).find(function (_ref) {
|
|
73
|
-
var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
|
|
74
|
-
_ = _ref2[0],
|
|
75
|
-
value = _ref2[1];
|
|
76
|
-
return tokenName === value;
|
|
77
|
-
}));
|
|
78
|
-
}
|
|
79
|
-
function getMetaFromCssVar(tokenName) {
|
|
80
|
-
var meta = _legacyColors.knownVariables[tokenName];
|
|
81
|
-
if (!meta || meta.length === 0) {
|
|
82
|
-
return tokenName.split('-');
|
|
83
|
-
}
|
|
84
|
-
return meta;
|
|
85
|
-
}
|
|
86
|
-
function getMetaFromRawColor(rawColor) {
|
|
87
|
-
var cleanColor = rawColor.toLowerCase();
|
|
88
|
-
if (cleanColor.length === 4) {
|
|
89
|
-
cleanColor = cleanColor + cleanColor.substring(cleanColor.indexOf('#') + 1);
|
|
90
|
-
}
|
|
91
|
-
return _legacyColors.knownRawColors[cleanColor];
|
|
92
|
-
}
|
|
93
23
|
|
|
94
24
|
// https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md
|
|
95
25
|
// https://astexplorer.net/#/2uBU1BLuJ1
|
|
@@ -97,73 +27,62 @@ var plugin = function plugin() {
|
|
|
97
27
|
var processed = Symbol('processed');
|
|
98
28
|
return {
|
|
99
29
|
postcssPlugin: 'UsingTokens',
|
|
100
|
-
|
|
30
|
+
AtRule: function AtRule(atRule, helper) {
|
|
101
31
|
// @ts-expect-error
|
|
102
|
-
if (
|
|
32
|
+
if (atRule[processed]) {
|
|
103
33
|
return;
|
|
104
34
|
}
|
|
105
|
-
|
|
35
|
+
|
|
36
|
+
// @ts-expect-error: The 'variable' property does not exist on 'AtRule' according to the TypeScript definitions.
|
|
37
|
+
// However, the 'postcss-less' library adds a 'variable' property to 'AtRule' when parsing LESS variables.
|
|
38
|
+
// This property indicates whether the 'AtRule' is a LESS variable.
|
|
39
|
+
if (atRule.variable) {
|
|
40
|
+
// TODO https://hello.atlassian.net/browse/DCA11Y-637
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
// @ts-expect-error
|
|
44
|
+
atRule[processed] = true;
|
|
45
|
+
},
|
|
46
|
+
Declaration: function Declaration(decl) {
|
|
47
|
+
// @ts-expect-error
|
|
48
|
+
if (decl[processed]) {
|
|
106
49
|
return;
|
|
107
50
|
}
|
|
108
51
|
if (decl.value === 'none') {
|
|
109
52
|
return;
|
|
110
53
|
}
|
|
111
|
-
var
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
// CSS variables
|
|
120
|
-
var cssVarMatch = decl.value.match(cssVarRe);
|
|
121
|
-
if (cssVarMatch) {
|
|
122
|
-
var _getMetaFromCssVar;
|
|
123
|
-
match = cssVarMatch[0];
|
|
124
|
-
if (isDesignToken(stripVar(match))) {
|
|
54
|
+
var baseMeta = (0, _meta.getBaseDeclarationMeta)(decl);
|
|
55
|
+
if ((0, _declaration.isCssDeclaration)(decl.prop)) {
|
|
56
|
+
// TODO https://hello.atlassian.net/browse/DCA11Y-637
|
|
57
|
+
}
|
|
58
|
+
if ((0, _declaration.isColorRelatedProperty)(decl.prop)) {
|
|
59
|
+
var values = (0, _declaration.splitCssValue)(decl.value);
|
|
60
|
+
if (!values) {
|
|
125
61
|
return;
|
|
126
62
|
}
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
searchTerms.push.apply(searchTerms, (0, _toConsumableArray2.default)((_knownColors$decl$val = _legacyColors.knownColors[decl.value.toLowerCase()]) !== null && _knownColors$decl$val !== void 0 ? _knownColors$decl$val : []));
|
|
151
|
-
}
|
|
152
|
-
if (!match) {
|
|
153
|
-
// eslint-disable-next-line no-console
|
|
154
|
-
console.warn("Unable to find match for declaration: ".concat(decl.prop, ": ").concat(decl.value));
|
|
155
|
-
return;
|
|
156
|
-
}
|
|
157
|
-
var cleanSearchTerms = (0, _meta.cleanMeta)(searchTerms).join(' ');
|
|
158
|
-
var results = search.get(cleanSearchTerms);
|
|
159
|
-
var candidates = results.map(function (result) {
|
|
160
|
-
return result[1];
|
|
161
|
-
});
|
|
162
|
-
var replacement = candidates.length ? _tokenNames.default[candidates[0]] : 'MISSING_TOKEN';
|
|
163
|
-
if (decl.prop === 'box-shadow') {
|
|
164
|
-
decl.value = "var(".concat(replacement, ", ").concat(decl.value, ")");
|
|
165
|
-
} else {
|
|
166
|
-
decl.value = decl.value.split(match).join("var(".concat(replacement, ", ").concat(match, ")"));
|
|
63
|
+
switch (decl.prop) {
|
|
64
|
+
case 'box-shadow':
|
|
65
|
+
var meta = values.reduce(function (acc, curr) {
|
|
66
|
+
var parsedValue = (0, _value.default)(curr);
|
|
67
|
+
if (!parsedValue) {
|
|
68
|
+
return acc;
|
|
69
|
+
}
|
|
70
|
+
return [].concat((0, _toConsumableArray2.default)(acc), (0, _toConsumableArray2.default)(parsedValue.getMeta()));
|
|
71
|
+
}, baseMeta);
|
|
72
|
+
var token = (0, _tokens.default)(meta);
|
|
73
|
+
decl.value = "var(".concat(token, ", ").concat(decl.value, ")");
|
|
74
|
+
break;
|
|
75
|
+
default:
|
|
76
|
+
var replacedValues = values.map(function (value) {
|
|
77
|
+
var parsedValue = (0, _value.default)(value);
|
|
78
|
+
if (!parsedValue) {
|
|
79
|
+
return value;
|
|
80
|
+
}
|
|
81
|
+
return parsedValue.getReplacement(baseMeta);
|
|
82
|
+
});
|
|
83
|
+
decl.value = replacedValues.join(' ');
|
|
84
|
+
break;
|
|
85
|
+
}
|
|
167
86
|
}
|
|
168
87
|
|
|
169
88
|
// @ts-expect-error
|
|
@@ -183,7 +102,7 @@ function _transformer() {
|
|
|
183
102
|
processor = (0, _postcss.default)([plugin()]);
|
|
184
103
|
src = typeof file === 'string' ? file : file.source;
|
|
185
104
|
_context.next = 4;
|
|
186
|
-
return processor.process(src,
|
|
105
|
+
return processor.process(src, POSTCSS_OPTIONS);
|
|
187
106
|
case 4:
|
|
188
107
|
_yield$processor$proc = _context.sent;
|
|
189
108
|
css = _yield$processor$proc.css;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.extractBetweenParentheses = extractBetweenParentheses;
|
|
7
|
+
exports.isGradient = isGradient;
|
|
8
|
+
exports.isKnownCssVariable = isKnownCssVariable;
|
|
9
|
+
exports.isLessFunction = isLessFunction;
|
|
10
|
+
exports.isNamedColor = isNamedColor;
|
|
11
|
+
exports.isRawColor = isRawColor;
|
|
12
|
+
var _legacyColors = require("./legacy-colors");
|
|
13
|
+
var NAMED_COLORS = Object.keys(_legacyColors.knownNamedColors);
|
|
14
|
+
var GRADIENT_TYPES = ['linear', 'radial', 'conic'];
|
|
15
|
+
var LESS_COLOR_FUNCTIONS = ['lighten', 'darken', 'saturate', 'desaturate', 'fadein', 'fadeout', 'fade', 'spin', 'mix', 'greyscale', 'contrast', 'multiply', 'screen', 'overlay', 'softlight', 'hardlight', 'difference', 'exclusion', 'average', 'negation', 'tint', 'shade', 'luma', 'hue', 'saturation', 'lightness', 'alpha', 'red', 'green', 'blue'];
|
|
16
|
+
var REGEXES = {
|
|
17
|
+
// The CSS regular expression matches CSS variable declarations.
|
|
18
|
+
// It looks for the string "var(" followed by any characters except a closing parenthesis, and ending with a closing parenthesis.
|
|
19
|
+
CSS: /var\([^\)]+\)/g,
|
|
20
|
+
// The RAW_COLOR regular expression matches various CSS color formats including hexadecimal, RGB(A), HSL(A), LAB, LCH, and HWB.
|
|
21
|
+
// It allows for optional leading and trailing white spaces.
|
|
22
|
+
// For RGBA and HSLA, it allows any number (including negative numbers and numbers greater than 1) for the alpha channel.
|
|
23
|
+
// For RGB, HSL, LAB, LCH, and HWB, it expects three comma-separated values.
|
|
24
|
+
// It also allows optional white spaces around the commas and the values.
|
|
25
|
+
RAW_COLOR: /^\s*(#([0-9a-f]{3}){1,2}|(rgba|hsla)\(\s*\d{1,3}%?\s*(,\s*\d{1,3}%?\s*){2},\s*-?\d*\.?\d+\s*\)|(rgb|hsl)\(\s*\d{1,3}%?\s*(,\s*\d{1,3}%?\s*){2}\)\s*|(lab|lch)\(\s*\d{1,3}%?\s+\d{1,3}%?\s+\d{1,3}%?\s*\)|hwb\(\s*\d{1,3}\s+\d{1,3}%?\s+\d{1,3}%?\s*\))\s*$/i
|
|
26
|
+
};
|
|
27
|
+
function isKnownCssVariable(value) {
|
|
28
|
+
return value in _legacyColors.knownVariables;
|
|
29
|
+
}
|
|
30
|
+
function isRawColor(value) {
|
|
31
|
+
return REGEXES.RAW_COLOR.test(value);
|
|
32
|
+
}
|
|
33
|
+
function isNamedColor(value) {
|
|
34
|
+
return NAMED_COLORS.includes(value);
|
|
35
|
+
}
|
|
36
|
+
function isGradient(value) {
|
|
37
|
+
return GRADIENT_TYPES.some(function (gradient) {
|
|
38
|
+
return value.startsWith("".concat(gradient, "-gradient("));
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
function extractBetweenParentheses(value) {
|
|
42
|
+
var match = value.match(/\((.*?)\)/);
|
|
43
|
+
return match ? match[1] : '';
|
|
44
|
+
}
|
|
45
|
+
function isLessFunction(value) {
|
|
46
|
+
return LESS_COLOR_FUNCTIONS.some(function (func) {
|
|
47
|
+
return value.startsWith("".concat(func, "("));
|
|
48
|
+
});
|
|
49
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.extractCssVarName = extractCssVarName;
|
|
7
|
+
exports.extractLessVarName = extractLessVarName;
|
|
8
|
+
exports.isColorRelatedProperty = isColorRelatedProperty;
|
|
9
|
+
exports.isCssDeclaration = isCssDeclaration;
|
|
10
|
+
exports.splitCssValue = splitCssValue;
|
|
11
|
+
var COLOR_PROPERTIES = ['color', 'background', 'background-color', 'box-shadow', 'border', 'border-left', 'border-right', 'border-top', 'border-bottom', 'border-color', 'border-left-color', 'border-right-color', 'border-top-color', 'border-bottom-color', 'outline', 'outline-color', 'accent-color', 'caret-color', 'scrollbar-color', 'text-stroke'];
|
|
12
|
+
function isColorRelatedProperty(prop) {
|
|
13
|
+
return COLOR_PROPERTIES.some(function (property) {
|
|
14
|
+
return property === prop;
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
function isCssDeclaration(prop) {
|
|
18
|
+
return prop.startsWith('--');
|
|
19
|
+
}
|
|
20
|
+
function extractCssVarName(prop) {
|
|
21
|
+
return prop.substring(prop.indexOf('(') + 1).split(/\,|\)/)[0];
|
|
22
|
+
}
|
|
23
|
+
function extractLessVarName(prop) {
|
|
24
|
+
return prop.substring(1);
|
|
25
|
+
}
|
|
26
|
+
function splitCssValue(value) {
|
|
27
|
+
var regex = /(?:[^\s()]+|\((?:[^()]+|\([^()]*\))*\))+/g;
|
|
28
|
+
return value.match(regex);
|
|
29
|
+
}
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.knownVariables = exports.knownRawColors = exports.
|
|
7
|
-
var knownVariables = {
|
|
6
|
+
exports.knownVariables = exports.knownRawColors = exports.knownNamedColors = void 0;
|
|
7
|
+
var knownVariables = exports.knownVariables = {
|
|
8
8
|
'--adg3-color-R50': ['danger'],
|
|
9
9
|
'--adg3-color-R75': ['danger'],
|
|
10
10
|
'--adg3-color-R100': ['danger'],
|
|
@@ -169,8 +169,7 @@ var knownVariables = {
|
|
|
169
169
|
'--jpo-border-default-color': ['border'],
|
|
170
170
|
'--jpo-border-secondary-color': ['border', 'subtle']
|
|
171
171
|
};
|
|
172
|
-
exports.
|
|
173
|
-
var knownColors = {
|
|
172
|
+
var knownNamedColors = exports.knownNamedColors = {
|
|
174
173
|
aliceblue: ['blue'],
|
|
175
174
|
antiquewhite: [],
|
|
176
175
|
aqua: ['teal'],
|
|
@@ -190,7 +189,7 @@ var knownColors = {
|
|
|
190
189
|
coral: [],
|
|
191
190
|
cornflowerblue: ['blue'],
|
|
192
191
|
cornsilk: [],
|
|
193
|
-
crimson: ['
|
|
192
|
+
crimson: ['red'],
|
|
194
193
|
cyan: ['accent', 'teal', 'subtle'],
|
|
195
194
|
darkblue: ['accent', 'blue', 'bold'],
|
|
196
195
|
darkcyan: ['accent', 'teal', 'bold'],
|
|
@@ -244,11 +243,11 @@ var knownColors = {
|
|
|
244
243
|
lightgoldenrodyellow: [],
|
|
245
244
|
lightgray: [],
|
|
246
245
|
lightgrey: [],
|
|
247
|
-
lightgreen: ['green'],
|
|
246
|
+
lightgreen: ['green', 'accent'],
|
|
248
247
|
lightpink: ['magenta'],
|
|
249
248
|
lightsalmon: ['pink', 'subtler'],
|
|
250
249
|
lightseagreen: ['green'],
|
|
251
|
-
lightskyblue: ['blue'],
|
|
250
|
+
lightskyblue: ['blue', 'accent'],
|
|
252
251
|
lightslategray: [],
|
|
253
252
|
lightslategrey: [],
|
|
254
253
|
lightsteelblue: ['blue'],
|
|
@@ -290,7 +289,8 @@ var knownColors = {
|
|
|
290
289
|
plum: [],
|
|
291
290
|
powderblue: ['blue', 'subtle'],
|
|
292
291
|
purple: ['purple'],
|
|
293
|
-
|
|
292
|
+
rebeccapurple: ['purple', 'accent'],
|
|
293
|
+
red: ['red', 'accent'],
|
|
294
294
|
rosybrown: [],
|
|
295
295
|
royalblue: [],
|
|
296
296
|
saddlebrown: [],
|
|
@@ -319,12 +319,10 @@ var knownColors = {
|
|
|
319
319
|
yellow: ['yellow'],
|
|
320
320
|
yellowgreen: ['yellow']
|
|
321
321
|
};
|
|
322
|
-
exports.
|
|
323
|
-
|
|
324
|
-
'#
|
|
325
|
-
'#
|
|
326
|
-
'#aaaaaa': ['border'],
|
|
327
|
-
'#bbbbbb': ['border'],
|
|
322
|
+
var knownRawColors = exports.knownRawColors = {
|
|
323
|
+
'#cccccc': ['gray'],
|
|
324
|
+
'#aaaaaa': ['gray', 'subtlest'],
|
|
325
|
+
'#bbbbbb': ['gray', 'subtle'],
|
|
328
326
|
'#ffffff': ['elevation', 'surface'],
|
|
329
327
|
'#f0f0f0': ['elevation', 'surface'],
|
|
330
328
|
'#eeeeee': ['elevation', 'surface', 'sunken'],
|
|
@@ -333,10 +331,8 @@ var knownRawColors = {
|
|
|
333
331
|
'#c00c00': ['danger'],
|
|
334
332
|
'#5243aa': ['discovery'],
|
|
335
333
|
'#ffc712': ['warning'],
|
|
336
|
-
'#292929': ['text'],
|
|
337
334
|
'#00f00f': ['brand'],
|
|
338
335
|
'#3b73af': ['brand'],
|
|
339
336
|
'#326ca6': ['brand'],
|
|
340
337
|
'#0052cc': ['brand']
|
|
341
|
-
};
|
|
342
|
-
exports.knownRawColors = knownRawColors;
|
|
338
|
+
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.logger = void 0;
|
|
8
|
+
var _chalk = _interopRequireDefault(require("chalk"));
|
|
9
|
+
var logger = exports.logger = {
|
|
10
|
+
warn: function warn(message) {
|
|
11
|
+
// eslint-disable-next-line no-console
|
|
12
|
+
console.warn(_chalk.default.yellow('WARNING'), message);
|
|
13
|
+
},
|
|
14
|
+
error: function error(message) {
|
|
15
|
+
// eslint-disable-next-line no-console
|
|
16
|
+
console.error(_chalk.default.red('ERROR'), message);
|
|
17
|
+
}
|
|
18
|
+
};
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.cleanMeta = cleanMeta;
|
|
8
|
+
exports.getBaseDeclarationMeta = getBaseDeclarationMeta;
|
|
9
|
+
exports.getCssVarMeta = getCssVarMeta;
|
|
10
|
+
exports.getNamedColorMeta = getNamedColorMeta;
|
|
11
|
+
exports.getRawColorMeta = getRawColorMeta;
|
|
12
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
13
|
+
var _tokenNames = _interopRequireDefault(require("@atlaskit/tokens/token-names"));
|
|
14
|
+
var _declaration = require("./declaration");
|
|
15
|
+
var _legacyColors = require("./legacy-colors");
|
|
16
|
+
var getUniqueWordsFromTokens = Object.keys(_tokenNames.default).reduce(function (accum, val) {
|
|
17
|
+
return [].concat((0, _toConsumableArray2.default)(accum), (0, _toConsumableArray2.default)(val.split('.')));
|
|
18
|
+
}, []).reduce(function (accum, val) {
|
|
19
|
+
return [].concat((0, _toConsumableArray2.default)(accum), (0, _toConsumableArray2.default)(val.split(/(?=[A-Z])/g).map(function (e) {
|
|
20
|
+
return e.toLowerCase();
|
|
21
|
+
})));
|
|
22
|
+
}, []).reduce(function (accum, val) {
|
|
23
|
+
if (!accum.includes(val)) {
|
|
24
|
+
accum.push(val);
|
|
25
|
+
}
|
|
26
|
+
return accum;
|
|
27
|
+
}, []);
|
|
28
|
+
function filterDuplciateFoundations(meta) {
|
|
29
|
+
var foundations = ['text', 'background', 'shadow', 'border'];
|
|
30
|
+
var hasFoundation = false;
|
|
31
|
+
return meta.filter(function (val) {
|
|
32
|
+
if (!hasFoundation && foundations.includes(val)) {
|
|
33
|
+
hasFoundation = true;
|
|
34
|
+
return true;
|
|
35
|
+
}
|
|
36
|
+
if (hasFoundation && foundations.includes(val)) {
|
|
37
|
+
return false;
|
|
38
|
+
}
|
|
39
|
+
return true;
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
var REPLACEMENTS = {
|
|
43
|
+
':': '',
|
|
44
|
+
',': '',
|
|
45
|
+
texts: 'text',
|
|
46
|
+
error: 'danger',
|
|
47
|
+
invalid: 'danger',
|
|
48
|
+
removed: 'danger',
|
|
49
|
+
removal: 'danger',
|
|
50
|
+
remove: 'danger',
|
|
51
|
+
focus: 'focused',
|
|
52
|
+
valid: 'success',
|
|
53
|
+
successful: 'success',
|
|
54
|
+
risk: 'warning',
|
|
55
|
+
caution: 'warning',
|
|
56
|
+
warn: 'warning',
|
|
57
|
+
primary: 'bold',
|
|
58
|
+
info: 'bold',
|
|
59
|
+
secondary: 'subtle',
|
|
60
|
+
hyperlink: 'link',
|
|
61
|
+
anchor: 'link',
|
|
62
|
+
active: 'pressed',
|
|
63
|
+
hover: 'hovered',
|
|
64
|
+
dragged: 'overlay',
|
|
65
|
+
dragging: 'overlay',
|
|
66
|
+
drag: 'overlay',
|
|
67
|
+
'background-color': 'background',
|
|
68
|
+
color: 'text',
|
|
69
|
+
icons: 'icon',
|
|
70
|
+
arrow: 'icon',
|
|
71
|
+
glyph: 'icon',
|
|
72
|
+
stroke: 'border',
|
|
73
|
+
'border-left': 'border',
|
|
74
|
+
'border-right': 'border',
|
|
75
|
+
'border-top': 'border',
|
|
76
|
+
'border-bottom': 'border',
|
|
77
|
+
'box-shadow': 'shadow'
|
|
78
|
+
};
|
|
79
|
+
var ADDITIONAL_META = {
|
|
80
|
+
grey: 'neutral',
|
|
81
|
+
red: 'danger'
|
|
82
|
+
};
|
|
83
|
+
function cleanMeta(meta) {
|
|
84
|
+
var cleanMeta = meta.reduce(function (accum, val) {
|
|
85
|
+
return [].concat((0, _toConsumableArray2.default)(accum), (0, _toConsumableArray2.default)(typeof val === 'string' ? val.split(/(?=[A-Z])/g).map(function (e) {
|
|
86
|
+
return e.toLowerCase();
|
|
87
|
+
}) : []));
|
|
88
|
+
}, []).reduce(function (accum, val) {
|
|
89
|
+
if (val in ADDITIONAL_META) {
|
|
90
|
+
accum.push(val, ADDITIONAL_META[val]);
|
|
91
|
+
} else {
|
|
92
|
+
accum.push(val);
|
|
93
|
+
}
|
|
94
|
+
accum.push(val in REPLACEMENTS ? REPLACEMENTS[val] : val);
|
|
95
|
+
return accum;
|
|
96
|
+
}, []).filter(function (val) {
|
|
97
|
+
return getUniqueWordsFromTokens.includes(val);
|
|
98
|
+
}).reduce(function (accum, val) {
|
|
99
|
+
if (!accum.includes(val)) {
|
|
100
|
+
accum.push(val);
|
|
101
|
+
}
|
|
102
|
+
return accum;
|
|
103
|
+
}, []);
|
|
104
|
+
return filterDuplciateFoundations(cleanMeta);
|
|
105
|
+
}
|
|
106
|
+
function getBaseDeclarationMeta(decl) {
|
|
107
|
+
var parentSelectors = getParentSelectors(decl).split(/\-|\.|\,|\ |\:|\&/).filter(Boolean);
|
|
108
|
+
return [getPropertyMeta(decl.prop)].concat((0, _toConsumableArray2.default)(parentSelectors));
|
|
109
|
+
}
|
|
110
|
+
function getPropertyMeta(prop) {
|
|
111
|
+
if (prop === 'color') {
|
|
112
|
+
return 'text';
|
|
113
|
+
}
|
|
114
|
+
if (prop.startsWith('background')) {
|
|
115
|
+
return 'background';
|
|
116
|
+
}
|
|
117
|
+
if (prop.includes('shadow')) {
|
|
118
|
+
return 'shadow';
|
|
119
|
+
}
|
|
120
|
+
if (prop.includes('border')) {
|
|
121
|
+
return 'border';
|
|
122
|
+
}
|
|
123
|
+
return '';
|
|
124
|
+
}
|
|
125
|
+
function isRule(node) {
|
|
126
|
+
return node.type === 'rule';
|
|
127
|
+
}
|
|
128
|
+
function getParentSelectors(node) {
|
|
129
|
+
if (isRule(node)) {
|
|
130
|
+
// @ts-expect-error
|
|
131
|
+
return getParentSelectors(node.parent) + ' ' + node.selector;
|
|
132
|
+
}
|
|
133
|
+
if (node.parent) {
|
|
134
|
+
return getParentSelectors(node.parent);
|
|
135
|
+
}
|
|
136
|
+
return '';
|
|
137
|
+
}
|
|
138
|
+
function getCssVarMeta(cssVariable) {
|
|
139
|
+
var tokenName = (0, _declaration.extractCssVarName)(cssVariable);
|
|
140
|
+
var meta = _legacyColors.knownVariables[tokenName];
|
|
141
|
+
if (!meta || meta.length === 0) {
|
|
142
|
+
return tokenName.split('-');
|
|
143
|
+
}
|
|
144
|
+
return meta;
|
|
145
|
+
}
|
|
146
|
+
function getRawColorMeta(rawColor) {
|
|
147
|
+
var _knownRawColors$clean;
|
|
148
|
+
var cleanColor = rawColor.toLowerCase();
|
|
149
|
+
if (cleanColor.length === 4) {
|
|
150
|
+
cleanColor = cleanColor + cleanColor.substring(cleanColor.indexOf('#') + 1);
|
|
151
|
+
}
|
|
152
|
+
return (_knownRawColors$clean = _legacyColors.knownRawColors[cleanColor]) !== null && _knownRawColors$clean !== void 0 ? _knownRawColors$clean : [];
|
|
153
|
+
}
|
|
154
|
+
function getNamedColorMeta(namedColor) {
|
|
155
|
+
var _knownNamedColors$nam;
|
|
156
|
+
return (_knownNamedColors$nam = _legacyColors.knownNamedColors[namedColor]) !== null && _knownNamedColors$nam !== void 0 ? _knownNamedColors$nam : [];
|
|
157
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = findToken;
|
|
8
|
+
var _tokenNames = _interopRequireDefault(require("@atlaskit/tokens/token-names"));
|
|
9
|
+
var _tokensRaw = require("@atlaskit/tokens/tokens-raw");
|
|
10
|
+
var _fuzzySearch = _interopRequireDefault(require("../../theme-to-design-tokens/utils/fuzzy-search"));
|
|
11
|
+
var _meta = require("./meta");
|
|
12
|
+
var MISSING_TOKEN_NAME = 'MISSING_TOKEN';
|
|
13
|
+
var ACTIVE_TOKENS = _tokensRaw.light.filter(function (token) {
|
|
14
|
+
return token.attributes.state === 'active';
|
|
15
|
+
}).map(function (token) {
|
|
16
|
+
return token.name.replace(/\.\[default\]/g, '');
|
|
17
|
+
}).filter(function (token) {
|
|
18
|
+
return !token.includes('UNSAFE') && !token.includes('interaction');
|
|
19
|
+
});
|
|
20
|
+
var COLOR_TOKEN_SEARCH_TYPES = ['text', 'link', 'icon', 'border', 'background', 'blanket', 'skeleton', 'chart', 'surface', 'shadow'];
|
|
21
|
+
var createFuzzySearch = function createFuzzySearch(tokens) {
|
|
22
|
+
return (0, _fuzzySearch.default)(tokens, false);
|
|
23
|
+
};
|
|
24
|
+
function filterTokens(meta) {
|
|
25
|
+
var commonSearchTypes = COLOR_TOKEN_SEARCH_TYPES.filter(function (type) {
|
|
26
|
+
return meta.includes(type);
|
|
27
|
+
});
|
|
28
|
+
return commonSearchTypes.length !== 0 ? ACTIVE_TOKENS.filter(function (token) {
|
|
29
|
+
return commonSearchTypes.some(function (type) {
|
|
30
|
+
return token.startsWith("color.".concat(type)) || token.startsWith("elevation.".concat(type));
|
|
31
|
+
});
|
|
32
|
+
}) : ACTIVE_TOKENS;
|
|
33
|
+
}
|
|
34
|
+
function findToken(meta) {
|
|
35
|
+
var filteredTokens = filterTokens(meta);
|
|
36
|
+
var tokenFuzzySearch = createFuzzySearch(filteredTokens);
|
|
37
|
+
var cleanSearchTerms = (0, _meta.cleanMeta)(meta).join(' ');
|
|
38
|
+
var results = tokenFuzzySearch.get(cleanSearchTerms);
|
|
39
|
+
if (!results) {
|
|
40
|
+
return MISSING_TOKEN_NAME;
|
|
41
|
+
}
|
|
42
|
+
var candidates = results.map(function (result) {
|
|
43
|
+
return result[1];
|
|
44
|
+
});
|
|
45
|
+
var bestCandidate = _tokenNames.default[candidates[0]];
|
|
46
|
+
return bestCandidate;
|
|
47
|
+
}
|