@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
|
@@ -163,7 +163,7 @@ export var knownVariables = {
|
|
|
163
163
|
'--jpo-border-default-color': ['border'],
|
|
164
164
|
'--jpo-border-secondary-color': ['border', 'subtle']
|
|
165
165
|
};
|
|
166
|
-
export var
|
|
166
|
+
export var knownNamedColors = {
|
|
167
167
|
aliceblue: ['blue'],
|
|
168
168
|
antiquewhite: [],
|
|
169
169
|
aqua: ['teal'],
|
|
@@ -183,7 +183,7 @@ export var knownColors = {
|
|
|
183
183
|
coral: [],
|
|
184
184
|
cornflowerblue: ['blue'],
|
|
185
185
|
cornsilk: [],
|
|
186
|
-
crimson: ['
|
|
186
|
+
crimson: ['red'],
|
|
187
187
|
cyan: ['accent', 'teal', 'subtle'],
|
|
188
188
|
darkblue: ['accent', 'blue', 'bold'],
|
|
189
189
|
darkcyan: ['accent', 'teal', 'bold'],
|
|
@@ -237,11 +237,11 @@ export var knownColors = {
|
|
|
237
237
|
lightgoldenrodyellow: [],
|
|
238
238
|
lightgray: [],
|
|
239
239
|
lightgrey: [],
|
|
240
|
-
lightgreen: ['green'],
|
|
240
|
+
lightgreen: ['green', 'accent'],
|
|
241
241
|
lightpink: ['magenta'],
|
|
242
242
|
lightsalmon: ['pink', 'subtler'],
|
|
243
243
|
lightseagreen: ['green'],
|
|
244
|
-
lightskyblue: ['blue'],
|
|
244
|
+
lightskyblue: ['blue', 'accent'],
|
|
245
245
|
lightslategray: [],
|
|
246
246
|
lightslategrey: [],
|
|
247
247
|
lightsteelblue: ['blue'],
|
|
@@ -283,7 +283,8 @@ export var knownColors = {
|
|
|
283
283
|
plum: [],
|
|
284
284
|
powderblue: ['blue', 'subtle'],
|
|
285
285
|
purple: ['purple'],
|
|
286
|
-
|
|
286
|
+
rebeccapurple: ['purple', 'accent'],
|
|
287
|
+
red: ['red', 'accent'],
|
|
287
288
|
rosybrown: [],
|
|
288
289
|
royalblue: [],
|
|
289
290
|
saddlebrown: [],
|
|
@@ -313,10 +314,9 @@ export var knownColors = {
|
|
|
313
314
|
yellowgreen: ['yellow']
|
|
314
315
|
};
|
|
315
316
|
export var knownRawColors = {
|
|
316
|
-
'#
|
|
317
|
-
'#
|
|
318
|
-
'#
|
|
319
|
-
'#bbbbbb': ['border'],
|
|
317
|
+
'#cccccc': ['gray'],
|
|
318
|
+
'#aaaaaa': ['gray', 'subtlest'],
|
|
319
|
+
'#bbbbbb': ['gray', 'subtle'],
|
|
320
320
|
'#ffffff': ['elevation', 'surface'],
|
|
321
321
|
'#f0f0f0': ['elevation', 'surface'],
|
|
322
322
|
'#eeeeee': ['elevation', 'surface', 'sunken'],
|
|
@@ -325,7 +325,6 @@ export var knownRawColors = {
|
|
|
325
325
|
'#c00c00': ['danger'],
|
|
326
326
|
'#5243aa': ['discovery'],
|
|
327
327
|
'#ffc712': ['warning'],
|
|
328
|
-
'#292929': ['text'],
|
|
329
328
|
'#00f00f': ['brand'],
|
|
330
329
|
'#3b73af': ['brand'],
|
|
331
330
|
'#326ca6': ['brand'],
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import chalk from 'chalk';
|
|
2
|
+
export var logger = {
|
|
3
|
+
warn: function warn(message) {
|
|
4
|
+
// eslint-disable-next-line no-console
|
|
5
|
+
console.warn(chalk.yellow('WARNING'), message);
|
|
6
|
+
},
|
|
7
|
+
error: function error(message) {
|
|
8
|
+
// eslint-disable-next-line no-console
|
|
9
|
+
console.error(chalk.red('ERROR'), message);
|
|
10
|
+
}
|
|
11
|
+
};
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
|
+
import designTokens from '@atlaskit/tokens/token-names';
|
|
3
|
+
import { extractCssVarName } from './declaration';
|
|
4
|
+
import { knownVariables, knownRawColors, knownNamedColors } from './legacy-colors';
|
|
5
|
+
var getUniqueWordsFromTokens = Object.keys(designTokens).reduce(function (accum, val) {
|
|
6
|
+
return [].concat(_toConsumableArray(accum), _toConsumableArray(val.split('.')));
|
|
7
|
+
}, []).reduce(function (accum, val) {
|
|
8
|
+
return [].concat(_toConsumableArray(accum), _toConsumableArray(val.split(/(?=[A-Z])/g).map(function (e) {
|
|
9
|
+
return e.toLowerCase();
|
|
10
|
+
})));
|
|
11
|
+
}, []).reduce(function (accum, val) {
|
|
12
|
+
if (!accum.includes(val)) {
|
|
13
|
+
accum.push(val);
|
|
14
|
+
}
|
|
15
|
+
return accum;
|
|
16
|
+
}, []);
|
|
17
|
+
function filterDuplciateFoundations(meta) {
|
|
18
|
+
var foundations = ['text', 'background', 'shadow', 'border'];
|
|
19
|
+
var hasFoundation = false;
|
|
20
|
+
return meta.filter(function (val) {
|
|
21
|
+
if (!hasFoundation && foundations.includes(val)) {
|
|
22
|
+
hasFoundation = true;
|
|
23
|
+
return true;
|
|
24
|
+
}
|
|
25
|
+
if (hasFoundation && foundations.includes(val)) {
|
|
26
|
+
return false;
|
|
27
|
+
}
|
|
28
|
+
return true;
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
var REPLACEMENTS = {
|
|
32
|
+
':': '',
|
|
33
|
+
',': '',
|
|
34
|
+
texts: 'text',
|
|
35
|
+
error: 'danger',
|
|
36
|
+
invalid: 'danger',
|
|
37
|
+
removed: 'danger',
|
|
38
|
+
removal: 'danger',
|
|
39
|
+
remove: 'danger',
|
|
40
|
+
focus: 'focused',
|
|
41
|
+
valid: 'success',
|
|
42
|
+
successful: 'success',
|
|
43
|
+
risk: 'warning',
|
|
44
|
+
caution: 'warning',
|
|
45
|
+
warn: 'warning',
|
|
46
|
+
primary: 'bold',
|
|
47
|
+
info: 'bold',
|
|
48
|
+
secondary: 'subtle',
|
|
49
|
+
hyperlink: 'link',
|
|
50
|
+
anchor: 'link',
|
|
51
|
+
active: 'pressed',
|
|
52
|
+
hover: 'hovered',
|
|
53
|
+
dragged: 'overlay',
|
|
54
|
+
dragging: 'overlay',
|
|
55
|
+
drag: 'overlay',
|
|
56
|
+
'background-color': 'background',
|
|
57
|
+
color: 'text',
|
|
58
|
+
icons: 'icon',
|
|
59
|
+
arrow: 'icon',
|
|
60
|
+
glyph: 'icon',
|
|
61
|
+
stroke: 'border',
|
|
62
|
+
'border-left': 'border',
|
|
63
|
+
'border-right': 'border',
|
|
64
|
+
'border-top': 'border',
|
|
65
|
+
'border-bottom': 'border',
|
|
66
|
+
'box-shadow': 'shadow'
|
|
67
|
+
};
|
|
68
|
+
var ADDITIONAL_META = {
|
|
69
|
+
grey: 'neutral',
|
|
70
|
+
red: 'danger'
|
|
71
|
+
};
|
|
72
|
+
export function cleanMeta(meta) {
|
|
73
|
+
var cleanMeta = meta.reduce(function (accum, val) {
|
|
74
|
+
return [].concat(_toConsumableArray(accum), _toConsumableArray(typeof val === 'string' ? val.split(/(?=[A-Z])/g).map(function (e) {
|
|
75
|
+
return e.toLowerCase();
|
|
76
|
+
}) : []));
|
|
77
|
+
}, []).reduce(function (accum, val) {
|
|
78
|
+
if (val in ADDITIONAL_META) {
|
|
79
|
+
accum.push(val, ADDITIONAL_META[val]);
|
|
80
|
+
} else {
|
|
81
|
+
accum.push(val);
|
|
82
|
+
}
|
|
83
|
+
accum.push(val in REPLACEMENTS ? REPLACEMENTS[val] : val);
|
|
84
|
+
return accum;
|
|
85
|
+
}, []).filter(function (val) {
|
|
86
|
+
return getUniqueWordsFromTokens.includes(val);
|
|
87
|
+
}).reduce(function (accum, val) {
|
|
88
|
+
if (!accum.includes(val)) {
|
|
89
|
+
accum.push(val);
|
|
90
|
+
}
|
|
91
|
+
return accum;
|
|
92
|
+
}, []);
|
|
93
|
+
return filterDuplciateFoundations(cleanMeta);
|
|
94
|
+
}
|
|
95
|
+
export function getBaseDeclarationMeta(decl) {
|
|
96
|
+
var parentSelectors = getParentSelectors(decl).split(/\-|\.|\,|\ |\:|\&/).filter(Boolean);
|
|
97
|
+
return [getPropertyMeta(decl.prop)].concat(_toConsumableArray(parentSelectors));
|
|
98
|
+
}
|
|
99
|
+
function getPropertyMeta(prop) {
|
|
100
|
+
if (prop === 'color') {
|
|
101
|
+
return 'text';
|
|
102
|
+
}
|
|
103
|
+
if (prop.startsWith('background')) {
|
|
104
|
+
return 'background';
|
|
105
|
+
}
|
|
106
|
+
if (prop.includes('shadow')) {
|
|
107
|
+
return 'shadow';
|
|
108
|
+
}
|
|
109
|
+
if (prop.includes('border')) {
|
|
110
|
+
return 'border';
|
|
111
|
+
}
|
|
112
|
+
return '';
|
|
113
|
+
}
|
|
114
|
+
function isRule(node) {
|
|
115
|
+
return node.type === 'rule';
|
|
116
|
+
}
|
|
117
|
+
function getParentSelectors(node) {
|
|
118
|
+
if (isRule(node)) {
|
|
119
|
+
// @ts-expect-error
|
|
120
|
+
return getParentSelectors(node.parent) + ' ' + node.selector;
|
|
121
|
+
}
|
|
122
|
+
if (node.parent) {
|
|
123
|
+
return getParentSelectors(node.parent);
|
|
124
|
+
}
|
|
125
|
+
return '';
|
|
126
|
+
}
|
|
127
|
+
export function getCssVarMeta(cssVariable) {
|
|
128
|
+
var tokenName = extractCssVarName(cssVariable);
|
|
129
|
+
var meta = knownVariables[tokenName];
|
|
130
|
+
if (!meta || meta.length === 0) {
|
|
131
|
+
return tokenName.split('-');
|
|
132
|
+
}
|
|
133
|
+
return meta;
|
|
134
|
+
}
|
|
135
|
+
export function getRawColorMeta(rawColor) {
|
|
136
|
+
var _knownRawColors$clean;
|
|
137
|
+
var cleanColor = rawColor.toLowerCase();
|
|
138
|
+
if (cleanColor.length === 4) {
|
|
139
|
+
cleanColor = cleanColor + cleanColor.substring(cleanColor.indexOf('#') + 1);
|
|
140
|
+
}
|
|
141
|
+
return (_knownRawColors$clean = knownRawColors[cleanColor]) !== null && _knownRawColors$clean !== void 0 ? _knownRawColors$clean : [];
|
|
142
|
+
}
|
|
143
|
+
export function getNamedColorMeta(namedColor) {
|
|
144
|
+
var _knownNamedColors$nam;
|
|
145
|
+
return (_knownNamedColors$nam = knownNamedColors[namedColor]) !== null && _knownNamedColors$nam !== void 0 ? _knownNamedColors$nam : [];
|
|
146
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import designTokens from '@atlaskit/tokens/token-names';
|
|
2
|
+
import { light as rawTokens } from '@atlaskit/tokens/tokens-raw';
|
|
3
|
+
import Search from '../../theme-to-design-tokens/utils/fuzzy-search';
|
|
4
|
+
import { cleanMeta } from './meta';
|
|
5
|
+
var MISSING_TOKEN_NAME = 'MISSING_TOKEN';
|
|
6
|
+
var ACTIVE_TOKENS = rawTokens.filter(function (token) {
|
|
7
|
+
return token.attributes.state === 'active';
|
|
8
|
+
}).map(function (token) {
|
|
9
|
+
return token.name.replace(/\.\[default\]/g, '');
|
|
10
|
+
}).filter(function (token) {
|
|
11
|
+
return !token.includes('UNSAFE') && !token.includes('interaction');
|
|
12
|
+
});
|
|
13
|
+
var COLOR_TOKEN_SEARCH_TYPES = ['text', 'link', 'icon', 'border', 'background', 'blanket', 'skeleton', 'chart', 'surface', 'shadow'];
|
|
14
|
+
var createFuzzySearch = function createFuzzySearch(tokens) {
|
|
15
|
+
return Search(tokens, false);
|
|
16
|
+
};
|
|
17
|
+
function filterTokens(meta) {
|
|
18
|
+
var commonSearchTypes = COLOR_TOKEN_SEARCH_TYPES.filter(function (type) {
|
|
19
|
+
return meta.includes(type);
|
|
20
|
+
});
|
|
21
|
+
return commonSearchTypes.length !== 0 ? ACTIVE_TOKENS.filter(function (token) {
|
|
22
|
+
return commonSearchTypes.some(function (type) {
|
|
23
|
+
return token.startsWith("color.".concat(type)) || token.startsWith("elevation.".concat(type));
|
|
24
|
+
});
|
|
25
|
+
}) : ACTIVE_TOKENS;
|
|
26
|
+
}
|
|
27
|
+
export default function findToken(meta) {
|
|
28
|
+
var filteredTokens = filterTokens(meta);
|
|
29
|
+
var tokenFuzzySearch = createFuzzySearch(filteredTokens);
|
|
30
|
+
var cleanSearchTerms = cleanMeta(meta).join(' ');
|
|
31
|
+
var results = tokenFuzzySearch.get(cleanSearchTerms);
|
|
32
|
+
if (!results) {
|
|
33
|
+
return MISSING_TOKEN_NAME;
|
|
34
|
+
}
|
|
35
|
+
var candidates = results.map(function (result) {
|
|
36
|
+
return result[1];
|
|
37
|
+
});
|
|
38
|
+
var bestCandidate = designTokens[candidates[0]];
|
|
39
|
+
return bestCandidate;
|
|
40
|
+
}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
|
+
import { extractBetweenParentheses, isGradient, isKnownCssVariable, isLessFunction, isNamedColor, isRawColor } from './colors';
|
|
3
|
+
import { extractCssVarName } from './declaration';
|
|
4
|
+
import { getCssVarMeta, getNamedColorMeta, getRawColorMeta } from './meta';
|
|
5
|
+
import findToken from './tokens';
|
|
6
|
+
import { logger } from './logger';
|
|
7
|
+
export default function parseValue(value) {
|
|
8
|
+
if (isLessFunction(value)) {
|
|
9
|
+
logger.warn('Cannot parse - less function detected, would cause compilation error');
|
|
10
|
+
return null;
|
|
11
|
+
}
|
|
12
|
+
if (isGradient(value)) {
|
|
13
|
+
return {
|
|
14
|
+
getReplacement: function getReplacement() {
|
|
15
|
+
var additionalMeta = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
16
|
+
var gradientContent = extractBetweenParentheses(value);
|
|
17
|
+
var values = gradientContent.split(',');
|
|
18
|
+
var replacedValues = values.map(function (val) {
|
|
19
|
+
var parsedValue = parseValue(val.trim());
|
|
20
|
+
return parsedValue ? parsedValue.getReplacement(additionalMeta) : val;
|
|
21
|
+
});
|
|
22
|
+
return value.replace(gradientContent, replacedValues.join(', '));
|
|
23
|
+
},
|
|
24
|
+
getMeta: function getMeta() {
|
|
25
|
+
var BASE_META = [];
|
|
26
|
+
var gradientContent = extractBetweenParentheses(value);
|
|
27
|
+
var values = gradientContent.split(',');
|
|
28
|
+
var metas = values.reduce(function (acc, val) {
|
|
29
|
+
var parsedValue = parseValue(val.trim());
|
|
30
|
+
return parsedValue ? [].concat(_toConsumableArray(acc), _toConsumableArray(parsedValue.getMeta())) : acc;
|
|
31
|
+
}, BASE_META);
|
|
32
|
+
return metas;
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
if (isKnownCssVariable(extractCssVarName(value))) {
|
|
37
|
+
return {
|
|
38
|
+
getReplacement: function getReplacement() {
|
|
39
|
+
var additionalMeta = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
40
|
+
var token = findToken([].concat(_toConsumableArray(additionalMeta), _toConsumableArray(this.getMeta())));
|
|
41
|
+
return "var(".concat(token, ", ").concat(value, ")");
|
|
42
|
+
},
|
|
43
|
+
getMeta: function getMeta() {
|
|
44
|
+
return getCssVarMeta(value);
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
if (isRawColor(value)) {
|
|
49
|
+
return {
|
|
50
|
+
getReplacement: function getReplacement() {
|
|
51
|
+
var additionalMeta = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
52
|
+
var token = findToken([].concat(_toConsumableArray(additionalMeta), _toConsumableArray(this.getMeta())));
|
|
53
|
+
return "var(".concat(token, ", ").concat(value, ")");
|
|
54
|
+
},
|
|
55
|
+
getMeta: function getMeta() {
|
|
56
|
+
return getRawColorMeta(value);
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
}
|
|
60
|
+
if (isNamedColor(value)) {
|
|
61
|
+
return {
|
|
62
|
+
getReplacement: function getReplacement() {
|
|
63
|
+
var additionalMeta = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
64
|
+
var token = findToken([].concat(_toConsumableArray(additionalMeta), _toConsumableArray(this.getMeta())));
|
|
65
|
+
return "var(".concat(token, ", ").concat(value, ")");
|
|
66
|
+
},
|
|
67
|
+
getMeta: function getMeta() {
|
|
68
|
+
return getNamedColorMeta(value);
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
}
|
|
72
|
+
return null;
|
|
73
|
+
}
|
|
@@ -332,8 +332,8 @@ function _transformer() {
|
|
|
332
332
|
|
|
333
333
|
// JSX props
|
|
334
334
|
source.find(j.JSXAttribute).forEach(function (path) {
|
|
335
|
-
var _path$value
|
|
336
|
-
if (((_path$value = path.value) === null || _path$value === void 0
|
|
335
|
+
var _path$value;
|
|
336
|
+
if (((_path$value = path.value) === null || _path$value === void 0 || (_path$value = _path$value.value) === null || _path$value === void 0 ? void 0 : _path$value.type) !== 'JSXExpressionContainer') {
|
|
337
337
|
return;
|
|
338
338
|
}
|
|
339
339
|
if (isParentOfToken(j, path)) {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { isColorRelatedProperty } from '../../css-to-design-tokens/lib/declaration';
|
|
2
2
|
export function containsReplaceableCSSDeclarations(input) {
|
|
3
3
|
var cssPattern = /(\S+)\s*:/g;
|
|
4
4
|
var match;
|
|
5
5
|
while ((match = cssPattern.exec(input)) !== null) {
|
|
6
|
-
if (
|
|
6
|
+
if (isColorRelatedProperty(match[1])) {
|
|
7
7
|
return true;
|
|
8
8
|
}
|
|
9
9
|
}
|
package/dist/types/main.d.ts
CHANGED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export declare function isKnownCssVariable(value: string): boolean;
|
|
2
|
+
export declare function isRawColor(value: string): boolean;
|
|
3
|
+
export declare function isNamedColor(value: string): boolean;
|
|
4
|
+
export declare function isGradient(value: string): boolean;
|
|
5
|
+
export declare function extractBetweenParentheses(value: string): string;
|
|
6
|
+
export declare function isLessFunction(value: string): boolean;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export declare function isColorRelatedProperty(prop: string): boolean;
|
|
2
|
+
export declare function isCssDeclaration(prop: string): boolean;
|
|
3
|
+
export declare function extractCssVarName(prop: string): string;
|
|
4
|
+
export declare function extractLessVarName(prop: string): string;
|
|
5
|
+
export declare function splitCssValue(value: string): RegExpMatchArray | null;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { Declaration } from 'postcss';
|
|
2
|
+
export declare function cleanMeta(meta: string[]): string[];
|
|
3
|
+
export declare function getBaseDeclarationMeta(decl: Declaration): string[];
|
|
4
|
+
export declare function getCssVarMeta(cssVariable: string): string[];
|
|
5
|
+
export declare function getRawColorMeta(rawColor: string): string[];
|
|
6
|
+
export declare function getNamedColorMeta(namedColor: string): string[];
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import designTokens from '@atlaskit/tokens/token-names';
|
|
2
|
+
type DesignTokensMap = typeof designTokens;
|
|
3
|
+
type DesignTokenJs = keyof DesignTokensMap;
|
|
4
|
+
type DesignTokenCss = DesignTokensMap[DesignTokenJs];
|
|
5
|
+
declare const MISSING_TOKEN_NAME = "MISSING_TOKEN";
|
|
6
|
+
export default function findToken(meta: string[]): DesignTokenCss | typeof MISSING_TOKEN_NAME;
|
|
7
|
+
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export declare function isKnownCssVariable(value: string): boolean;
|
|
2
|
+
export declare function isRawColor(value: string): boolean;
|
|
3
|
+
export declare function isNamedColor(value: string): boolean;
|
|
4
|
+
export declare function isGradient(value: string): boolean;
|
|
5
|
+
export declare function extractBetweenParentheses(value: string): string;
|
|
6
|
+
export declare function isLessFunction(value: string): boolean;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export declare function isColorRelatedProperty(prop: string): boolean;
|
|
2
|
+
export declare function isCssDeclaration(prop: string): boolean;
|
|
3
|
+
export declare function extractCssVarName(prop: string): string;
|
|
4
|
+
export declare function extractLessVarName(prop: string): string;
|
|
5
|
+
export declare function splitCssValue(value: string): RegExpMatchArray | null;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { Declaration } from 'postcss';
|
|
2
|
+
export declare function cleanMeta(meta: string[]): string[];
|
|
3
|
+
export declare function getBaseDeclarationMeta(decl: Declaration): string[];
|
|
4
|
+
export declare function getCssVarMeta(cssVariable: string): string[];
|
|
5
|
+
export declare function getRawColorMeta(rawColor: string): string[];
|
|
6
|
+
export declare function getNamedColorMeta(namedColor: string): string[];
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import designTokens from '@atlaskit/tokens/token-names';
|
|
2
|
+
type DesignTokensMap = typeof designTokens;
|
|
3
|
+
type DesignTokenJs = keyof DesignTokensMap;
|
|
4
|
+
type DesignTokenCss = DesignTokensMap[DesignTokenJs];
|
|
5
|
+
declare const MISSING_TOKEN_NAME = "MISSING_TOKEN";
|
|
6
|
+
export default function findToken(meta: string[]): DesignTokenCss | typeof MISSING_TOKEN_NAME;
|
|
7
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/codemod-cli",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.15.0",
|
|
4
4
|
"description": "A cli for distributing codemods for atlassian-frontend components and services",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"codemod-cli": "./bin/codemod-cli.js"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@atlaskit/tokens": "^1.
|
|
35
|
+
"@atlaskit/tokens": "^1.25.0",
|
|
36
36
|
"@babel/runtime": "^7.0.0",
|
|
37
37
|
"@codeshift/utils": "^0.2.4",
|
|
38
38
|
"@types/jscodeshift": "^0.11.0",
|
package/report.api.md
CHANGED
package/tmp/api-report-tmp.d.ts
CHANGED
|
@@ -1,53 +0,0 @@
|
|
|
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
|
-
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
9
|
-
var _tokenNames = _interopRequireDefault(require("@atlaskit/tokens/token-names"));
|
|
10
|
-
var getUniqueWordsFromTokens = Object.keys(_tokenNames.default).reduce(function (accum, val) {
|
|
11
|
-
return [].concat((0, _toConsumableArray2.default)(accum), (0, _toConsumableArray2.default)(val.split('.')));
|
|
12
|
-
}, []).reduce(function (accum, val) {
|
|
13
|
-
return [].concat((0, _toConsumableArray2.default)(accum), (0, _toConsumableArray2.default)(val.split(/(?=[A-Z])/g).map(function (e) {
|
|
14
|
-
return e.toLowerCase();
|
|
15
|
-
})));
|
|
16
|
-
}, []).reduce(function (accum, val) {
|
|
17
|
-
if (!accum.includes(val)) {
|
|
18
|
-
accum.push(val);
|
|
19
|
-
}
|
|
20
|
-
return accum;
|
|
21
|
-
}, []);
|
|
22
|
-
function filterDuplciateFoundations(meta) {
|
|
23
|
-
var foundations = ['text', 'background', 'shadow', 'border'];
|
|
24
|
-
var hasFoundation = false;
|
|
25
|
-
return meta.filter(function (val) {
|
|
26
|
-
if (!hasFoundation && foundations.includes(val)) {
|
|
27
|
-
hasFoundation = true;
|
|
28
|
-
return true;
|
|
29
|
-
}
|
|
30
|
-
if (hasFoundation && foundations.includes(val)) {
|
|
31
|
-
return false;
|
|
32
|
-
}
|
|
33
|
-
return true;
|
|
34
|
-
});
|
|
35
|
-
}
|
|
36
|
-
function cleanMeta(meta) {
|
|
37
|
-
var cleanMeta = meta.reduce(function (accum, val) {
|
|
38
|
-
return [].concat((0, _toConsumableArray2.default)(accum), (0, _toConsumableArray2.default)(typeof val === 'string' ? val.split(/(?=[A-Z])/g).map(function (e) {
|
|
39
|
-
return e.toLowerCase();
|
|
40
|
-
}) : []));
|
|
41
|
-
}, []).reduce(function (accum, val) {
|
|
42
|
-
accum.push(val.replace(/:/g, '').replace(/,/g, '').replace('grey', 'neutral').replace('texts', 'text').replace('red', 'danger').replace('error', 'danger').replace('invalid', 'danger').replace('removed', 'danger').replace('removal', 'danger').replace('remove', 'danger').replace('focus', 'focused').replace('valid', 'success').replace('successful', 'success').replace('risk', 'warning').replace('caution', 'warning').replace('warn', 'warning').replace('primary', 'bold').replace('info', 'bold').replace('secondary', 'subtle').replace('hyperlink', 'link').replace('anchor', 'link').replace('active', 'pressed').replace('hover', 'hovered').replace('dragged', 'overlay').replace('dragging', 'overlay').replace('drag', 'overlay').replace('background-color', 'background').replace('color', 'text').replace('icons', 'icon').replace('arrow', 'icon').replace('glyph', 'icon').replace('stroke', 'border').replace('border-left', 'border').replace('border-right', 'border').replace('border-top', 'border').replace('border-bottom', 'border').replace('box-shadow', 'shadow'));
|
|
43
|
-
return accum;
|
|
44
|
-
}, []).filter(function (val) {
|
|
45
|
-
return getUniqueWordsFromTokens.includes(val);
|
|
46
|
-
}).reduce(function (accum, val) {
|
|
47
|
-
if (!accum.includes(val)) {
|
|
48
|
-
accum.push(val);
|
|
49
|
-
}
|
|
50
|
-
return accum;
|
|
51
|
-
}, []);
|
|
52
|
-
return filterDuplciateFoundations(cleanMeta);
|
|
53
|
-
}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import designTokens from '@atlaskit/tokens/token-names';
|
|
2
|
-
const getUniqueWordsFromTokens = Object.keys(designTokens).reduce((accum, val) => [...accum, ...val.split('.')], []).reduce((accum, val) => [...accum, ...val.split(/(?=[A-Z])/g).map(e => e.toLowerCase())], []).reduce((accum, val) => {
|
|
3
|
-
if (!accum.includes(val)) {
|
|
4
|
-
accum.push(val);
|
|
5
|
-
}
|
|
6
|
-
return accum;
|
|
7
|
-
}, []);
|
|
8
|
-
function filterDuplciateFoundations(meta) {
|
|
9
|
-
const foundations = ['text', 'background', 'shadow', 'border'];
|
|
10
|
-
let hasFoundation = false;
|
|
11
|
-
return meta.filter(val => {
|
|
12
|
-
if (!hasFoundation && foundations.includes(val)) {
|
|
13
|
-
hasFoundation = true;
|
|
14
|
-
return true;
|
|
15
|
-
}
|
|
16
|
-
if (hasFoundation && foundations.includes(val)) {
|
|
17
|
-
return false;
|
|
18
|
-
}
|
|
19
|
-
return true;
|
|
20
|
-
});
|
|
21
|
-
}
|
|
22
|
-
export function cleanMeta(meta) {
|
|
23
|
-
const cleanMeta = meta.reduce((accum, val) => [...accum, ...(typeof val === 'string' ? val.split(/(?=[A-Z])/g).map(e => e.toLowerCase()) : [])], []).reduce((accum, val) => {
|
|
24
|
-
accum.push(val.replace(/:/g, '').replace(/,/g, '').replace('grey', 'neutral').replace('texts', 'text').replace('red', 'danger').replace('error', 'danger').replace('invalid', 'danger').replace('removed', 'danger').replace('removal', 'danger').replace('remove', 'danger').replace('focus', 'focused').replace('valid', 'success').replace('successful', 'success').replace('risk', 'warning').replace('caution', 'warning').replace('warn', 'warning').replace('primary', 'bold').replace('info', 'bold').replace('secondary', 'subtle').replace('hyperlink', 'link').replace('anchor', 'link').replace('active', 'pressed').replace('hover', 'hovered').replace('dragged', 'overlay').replace('dragging', 'overlay').replace('drag', 'overlay').replace('background-color', 'background').replace('color', 'text').replace('icons', 'icon').replace('arrow', 'icon').replace('glyph', 'icon').replace('stroke', 'border').replace('border-left', 'border').replace('border-right', 'border').replace('border-top', 'border').replace('border-bottom', 'border').replace('box-shadow', 'shadow'));
|
|
25
|
-
return accum;
|
|
26
|
-
}, []).filter(val => getUniqueWordsFromTokens.includes(val)).reduce((accum, val) => {
|
|
27
|
-
if (!accum.includes(val)) {
|
|
28
|
-
accum.push(val);
|
|
29
|
-
}
|
|
30
|
-
return accum;
|
|
31
|
-
}, []);
|
|
32
|
-
return filterDuplciateFoundations(cleanMeta);
|
|
33
|
-
}
|