@lucca-front/ng 10.0.2 → 10.0.3
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/package.json +3 -3
- package/schematics/lib/angular-template.js +46 -0
- package/schematics/lib/html-ast.js +8 -1
- package/schematics/migrations/css-vars/css-class-registry.js +71 -63
- package/schematics/migrations/css-vars/index.js +14 -1
- package/schematics/migrations/css-vars/migration.js +21 -10
- package/schematics/migrations/css-vars/migration.spec.js +20 -1
- package/schematics/migrations/css-vars/updaters/elevation.js +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lucca-front/ng",
|
|
3
|
-
"version": "10.0.
|
|
3
|
+
"version": "10.0.3",
|
|
4
4
|
"description": "A library of icons made by the team @Lucca",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
"@angular/common": "^14.0.0",
|
|
30
30
|
"@angular/core": "^14.0.0",
|
|
31
31
|
"@angular/cdk": "^14.0.0",
|
|
32
|
-
"@lucca-front/icons": "v10.0.
|
|
33
|
-
"@lucca-front/scss": "v10.0.
|
|
32
|
+
"@lucca-front/icons": "v10.0.3",
|
|
33
|
+
"@lucca-front/scss": "v10.0.3",
|
|
34
34
|
"rxjs": "^6.0.0 || ^7.0.0"
|
|
35
35
|
},
|
|
36
36
|
"bugs": {
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.extractNgTemplates = void 0;
|
|
4
|
+
const typescript_1 = require("typescript");
|
|
5
|
+
function extractNgTemplates(fileName, content) {
|
|
6
|
+
const sourcefile = (0, typescript_1.createSourceFile)(fileName, content, typescript_1.ScriptTarget.ESNext);
|
|
7
|
+
const templates = [];
|
|
8
|
+
(0, typescript_1.forEachChild)(sourcefile, createVisitor(sourcefile, typescript_1.isDecorator, (decorator) => {
|
|
9
|
+
if (!(0, typescript_1.isCallExpression)(decorator.expression)) {
|
|
10
|
+
return;
|
|
11
|
+
}
|
|
12
|
+
if (!(0, typescript_1.isIdentifier)(decorator.expression.expression)) {
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
if (decorator.expression.expression.escapedText !== 'Component') {
|
|
16
|
+
return;
|
|
17
|
+
}
|
|
18
|
+
const argument = decorator.expression.arguments[0];
|
|
19
|
+
if (!argument || !(0, typescript_1.isObjectLiteralExpression)(argument)) {
|
|
20
|
+
return;
|
|
21
|
+
}
|
|
22
|
+
templates.push(...argument.properties
|
|
23
|
+
.filter(typescript_1.isPropertyAssignment)
|
|
24
|
+
.filter((prop) => (0, typescript_1.isIdentifier)(prop.name) && prop.name.text === 'template')
|
|
25
|
+
.map((prop) => prop.initializer)
|
|
26
|
+
.filter(orGuard(typescript_1.isStringLiteral, typescript_1.isNoSubstitutionTemplateLiteral))
|
|
27
|
+
.map((initializer) => ({
|
|
28
|
+
offsetStart: initializer.getStart(sourcefile) + initializer.getLeadingTriviaWidth(sourcefile),
|
|
29
|
+
offsetEnd: initializer.getEnd(),
|
|
30
|
+
content: initializer.text,
|
|
31
|
+
})));
|
|
32
|
+
}));
|
|
33
|
+
return templates;
|
|
34
|
+
}
|
|
35
|
+
exports.extractNgTemplates = extractNgTemplates;
|
|
36
|
+
function createVisitor(sourcefile, predicate, callback) {
|
|
37
|
+
return function visit(node) {
|
|
38
|
+
if (predicate(node)) {
|
|
39
|
+
callback(node);
|
|
40
|
+
}
|
|
41
|
+
(0, typescript_1.forEachChild)(node, visit);
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
function orGuard(guard1, guard2) {
|
|
45
|
+
return (item) => guard1(item) || guard2(item);
|
|
46
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.extractAllCssClassNames = exports.updateCssClassNames = exports.HtmlAst = void 0;
|
|
3
|
+
exports.extractAllHtmlElementNames = exports.extractAllCssClassNames = exports.updateCssClassNames = exports.HtmlAst = void 0;
|
|
4
4
|
const file_update_js_1 = require("./file-update.js");
|
|
5
5
|
class HtmlAst {
|
|
6
6
|
constructor(content, lib) {
|
|
@@ -118,3 +118,10 @@ function extractAllCssClassNames(content, lib) {
|
|
|
118
118
|
return [...allClasses];
|
|
119
119
|
}
|
|
120
120
|
exports.extractAllCssClassNames = extractAllCssClassNames;
|
|
121
|
+
function extractAllHtmlElementNames(content, lib) {
|
|
122
|
+
const allElements = new Set();
|
|
123
|
+
const root = new HtmlAst(content, lib);
|
|
124
|
+
root.visitElements(/.*/, (element) => allElements.add(element.name));
|
|
125
|
+
return [...allElements];
|
|
126
|
+
}
|
|
127
|
+
exports.extractAllHtmlElementNames = extractAllHtmlElementNames;
|
|
@@ -2,79 +2,87 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.getCssImports = void 0;
|
|
4
4
|
const classWithImports = [
|
|
5
|
-
{ cssClass: 'actionIcon', cssImport: '@lucca-front/scss/src/components/actionIcon' },
|
|
6
|
-
{ cssClass: 'box', cssImport: '@lucca-front/scss/src/components/box' },
|
|
7
|
-
{ cssClass: 'breadcrumbs', cssImport: '@lucca-front/scss/src/components/breadcrumbs' },
|
|
8
|
-
{ cssClass: 'button', cssImport: '@lucca-front/scss/src/components/button' },
|
|
9
|
-
{ cssClass: 'button-group', cssImport: '@lucca-front/scss/src/components/buttonGroup' },
|
|
10
|
-
{ cssClass: 'callout', cssImport: '@lucca-front/scss/src/components/callout' },
|
|
11
|
-
{ cssClass: 'card', cssImport: '@lucca-front/scss/src/components/card' },
|
|
12
|
-
{ cssClass: 'checkbox', cssImport: '@lucca-front/scss/src/components/checkbox' },
|
|
13
|
-
{ cssClass: 'chip', cssImport: '@lucca-front/scss/src/components/chip' },
|
|
14
|
-
{ cssClass: 'code', cssImport: '@lucca-front/scss/src/components/code' },
|
|
15
|
-
{ cssClass: 'collapse', cssImport: '@lucca-front/scss/src/components/collapse' },
|
|
16
|
-
{ cssClass: 'container', cssImport: '@lucca-front/scss/src/components/container' },
|
|
17
|
-
{ cssClass: 'contentSection', cssImport: '@lucca-front/scss/src/components/contentSection' },
|
|
18
|
-
{ cssClass: 'titleSection', cssImport: '@lucca-front/scss/src/components/titleSection' },
|
|
19
|
-
{ cssClass: 'divider', cssImport: '@lucca-front/scss/src/components/divider' },
|
|
20
|
-
{ cssClass: 'emptyState', cssImport: '@lucca-front/scss/src/components/emptyState' },
|
|
21
|
-
{ cssClass: 'errorPage', cssImport: '@lucca-front/scss/src/components/errorPage' },
|
|
22
|
-
{ cssClass: 'textfield', cssImport: '@lucca-front/scss/src/components/field' },
|
|
23
|
-
{ cssClass: 'radiosfield', cssImport: '@lucca-front/scss/src/components/field' },
|
|
24
|
-
{ cssClass: 'checkboxesfield', cssImport: '@lucca-front/scss/src/components/field' },
|
|
25
|
-
{ cssClass: 'file', cssImport: '@lucca-front/scss/src/components/file' },
|
|
26
|
-
{ cssClass: 'filters', cssImport: '@lucca-front/scss/src/components/filters' },
|
|
27
|
-
{ cssClass: 'form-group', cssImport: '@lucca-front/scss/src/components/form' },
|
|
28
|
-
{ cssClass: 'gauge', cssImport: '@lucca-front/scss/src/components/gauge' },
|
|
29
|
-
{ cssClass: 'grid', cssImport: '@lucca-front/scss/src/components/grid' },
|
|
30
|
-
{ cssClass: 'header', cssImport: '@lucca-front/scss/src/components/header' },
|
|
31
|
-
{ cssClass: 'label', cssImport: '@lucca-front/scss/src/components/label' },
|
|
32
|
-
{ cssClass: 'layout', cssImport: '@lucca-front/scss/src/components/layout' },
|
|
33
|
-
{ cssClass: 'link', cssImport: '@lucca-front/scss/src/components/link' },
|
|
34
|
-
{ cssClass: 'list', cssImport: '@lucca-front/scss/src/components/list' },
|
|
35
|
-
{ cssClass: 'loading', cssImport: '@lucca-front/scss/src/components/loading' },
|
|
36
|
-
{ cssClass: 'main-content', cssImport: '@lucca-front/scss/src/components/main' },
|
|
37
|
-
{ cssClass: 'menu', cssImport: '@lucca-front/scss/src/components/menu' },
|
|
38
|
-
{ cssClass: 'navSide', cssImport: '@lucca-front/scss/src/components/navside' },
|
|
39
|
-
{ cssClass: 'pageHeader', cssImport: '@lucca-front/scss/src/components/pageHeader' },
|
|
40
|
-
{ cssClass: 'pagination', cssImport: '@lucca-front/scss/src/components/pagination' },
|
|
41
|
-
{ cssClass: 'progress', cssImport: '@lucca-front/scss/src/components/progress' },
|
|
42
|
-
{ cssClass: 'radio', cssImport: '@lucca-front/scss/src/components/radio' },
|
|
43
|
-
{ cssClass: 'radioButtons', cssImport: '@lucca-front/scss/src/components/radioButtons' },
|
|
44
|
-
{ cssClass: 'section', cssImport: '@lucca-front/scss/src/components/section' },
|
|
45
|
-
{ cssClass: 'switch', cssImport: '@lucca-front/scss/src/components/switch' },
|
|
46
|
-
{ cssClass: 'table', cssImport: '@lucca-front/scss/src/components/table' },
|
|
47
|
-
{ cssClass: /^mod-layoutFixed
|
|
48
|
-
{ cssClass: 'mod-sortable', cssImport: '@lucca-front/scss/src/components/tableSorted' },
|
|
49
|
-
{ cssClass: '
|
|
50
|
-
{ cssClass: '
|
|
51
|
-
{ cssClass: '
|
|
52
|
-
{ cssClass: '
|
|
53
|
-
{
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
{ cssClass:
|
|
5
|
+
{ cssClass: ['actionIcon'], cssImport: ['@lucca-front/scss/src/components/actionIcon'] },
|
|
6
|
+
{ cssClass: ['box'], cssImport: ['@lucca-front/scss/src/components/box'] },
|
|
7
|
+
{ cssClass: ['breadcrumbs'], cssImport: ['@lucca-front/scss/src/components/breadcrumbs'] },
|
|
8
|
+
{ cssClass: ['button'], cssImport: ['@lucca-front/scss/src/components/button'] },
|
|
9
|
+
{ cssClass: ['button-group'], cssImport: ['@lucca-front/scss/src/components/buttonGroup'] },
|
|
10
|
+
{ cssClass: ['callout'], cssImport: ['@lucca-front/scss/src/components/callout'] },
|
|
11
|
+
{ cssClass: ['card'], cssImport: ['@lucca-front/scss/src/components/card'] },
|
|
12
|
+
{ cssClass: ['checkbox'], cssImport: ['@lucca-front/scss/src/components/checkbox'] },
|
|
13
|
+
{ cssClass: ['chip'], cssImport: ['@lucca-front/scss/src/components/chip'] },
|
|
14
|
+
{ cssClass: ['code'], cssImport: ['@lucca-front/scss/src/components/code'] },
|
|
15
|
+
{ cssClass: ['collapse'], cssImport: ['@lucca-front/scss/src/components/collapse'] },
|
|
16
|
+
{ cssClass: ['container'], cssImport: ['@lucca-front/scss/src/components/container'] },
|
|
17
|
+
{ cssClass: ['contentSection'], cssImport: ['@lucca-front/scss/src/components/contentSection'] },
|
|
18
|
+
{ cssClass: ['titleSection'], cssImport: ['@lucca-front/scss/src/components/titleSection'] },
|
|
19
|
+
{ cssClass: ['divider'], cssImport: ['@lucca-front/scss/src/components/divider'] },
|
|
20
|
+
{ cssClass: ['emptyState'], cssImport: ['@lucca-front/scss/src/components/emptyState'] },
|
|
21
|
+
{ cssClass: ['errorPage'], cssImport: ['@lucca-front/scss/src/components/errorPage'] },
|
|
22
|
+
{ cssClass: ['textfield'], cssImport: ['@lucca-front/scss/src/components/field', '@lucca-front/scss/src/components/textfield'] },
|
|
23
|
+
{ cssClass: ['radiosfield'], cssImport: ['@lucca-front/scss/src/components/field', '@lucca-front/scss/src/components/radio'] },
|
|
24
|
+
{ cssClass: ['checkboxesfield'], cssImport: ['@lucca-front/scss/src/components/field', '@lucca-front/scss/src/components/checkbox'] },
|
|
25
|
+
{ cssClass: ['file'], cssImport: ['@lucca-front/scss/src/components/file'] },
|
|
26
|
+
{ cssClass: ['filters'], cssImport: ['@lucca-front/scss/src/components/filters'] },
|
|
27
|
+
{ cssClass: ['form-group'], cssImport: ['@lucca-front/scss/src/components/form'] },
|
|
28
|
+
{ cssClass: ['gauge'], cssImport: ['@lucca-front/scss/src/components/gauge'] },
|
|
29
|
+
{ cssClass: ['grid'], cssImport: ['@lucca-front/scss/src/components/grid'] },
|
|
30
|
+
{ cssClass: ['header'], cssImport: ['@lucca-front/scss/src/components/header'] },
|
|
31
|
+
{ cssClass: ['label'], cssImport: ['@lucca-front/scss/src/components/label'] },
|
|
32
|
+
{ cssClass: ['layout'], cssImport: ['@lucca-front/scss/src/components/layout'] },
|
|
33
|
+
{ cssClass: ['link'], cssImport: ['@lucca-front/scss/src/components/link'] },
|
|
34
|
+
{ cssClass: ['list'], cssImport: ['@lucca-front/scss/src/components/list'] },
|
|
35
|
+
{ cssClass: ['loading'], cssImport: ['@lucca-front/scss/src/components/loading'] },
|
|
36
|
+
{ cssClass: ['main-content'], cssImport: ['@lucca-front/scss/src/components/main'] },
|
|
37
|
+
{ cssClass: ['menu'], cssImport: ['@lucca-front/scss/src/components/menu'] },
|
|
38
|
+
{ cssClass: ['navSide'], cssImport: ['@lucca-front/scss/src/components/navside'], elements: ['lucca-sitemap'] },
|
|
39
|
+
{ cssClass: ['pageHeader'], cssImport: ['@lucca-front/scss/src/components/pageHeader'] },
|
|
40
|
+
{ cssClass: ['pagination'], cssImport: ['@lucca-front/scss/src/components/pagination'] },
|
|
41
|
+
{ cssClass: ['progress'], cssImport: ['@lucca-front/scss/src/components/progress'] },
|
|
42
|
+
{ cssClass: ['radio'], cssImport: ['@lucca-front/scss/src/components/radio'] },
|
|
43
|
+
{ cssClass: ['radioButtons'], cssImport: ['@lucca-front/scss/src/components/radioButtons'] },
|
|
44
|
+
{ cssClass: ['section'], cssImport: ['@lucca-front/scss/src/components/section'] },
|
|
45
|
+
{ cssClass: ['switch'], cssImport: ['@lucca-front/scss/src/components/switch'] },
|
|
46
|
+
{ cssClass: ['table'], cssImport: ['@lucca-front/scss/src/components/table'] },
|
|
47
|
+
{ cssClass: [/^mod-layoutFixed-.*/], cssImport: ['@lucca-front/scss/src/components/tableFixed'] },
|
|
48
|
+
{ cssClass: ['mod-sortable', 'table-head-row-cell-sortableButton'], cssImport: ['@lucca-front/scss/src/components/tableSorted'] },
|
|
49
|
+
{ cssClass: ['mod-stickyColumn', 'mod-stickyHeader'], cssImport: ['@lucca-front/scss/src/components/tableSticked'] },
|
|
50
|
+
{ cssClass: ['tag'], cssImport: ['@lucca-front/scss/src/components/tag'] },
|
|
51
|
+
{ cssClass: ['textfield'], cssImport: ['@lucca-front/scss/src/components/textfield'] },
|
|
52
|
+
{ cssClass: ['timeline'], cssImport: ['@lucca-front/scss/src/components/timeline'] },
|
|
53
|
+
{
|
|
54
|
+
cssClass: ['u-h1', 'u-h2', 'u-h3', 'u-h4', 'u-h5', 'u-h6'],
|
|
55
|
+
cssImport: ['@lucca-front/scss/src/components/title'],
|
|
56
|
+
elements: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
|
|
57
|
+
},
|
|
58
|
+
{ cssClass: ['toasts'], cssImport: ['@lucca-front/scss/src/components/toast'] },
|
|
59
|
+
{ cssClass: ['tableOfContent'], cssImport: ['@lucca-front/scss/src/components/tableOfContent'] },
|
|
60
|
+
{ cssClass: [/^u-.*/], cssImport: ['@lucca-front/scss/src/components/util'] },
|
|
59
61
|
];
|
|
60
|
-
function getCssImports(allVisitedClasses) {
|
|
62
|
+
function getCssImports(allVisitedClasses, allVisitedElements) {
|
|
61
63
|
const exactCssClasses = {};
|
|
64
|
+
const exactCssElements = {};
|
|
62
65
|
const regexpCssTests = [];
|
|
63
66
|
// Pre-compute classWithImports for performance optimization
|
|
64
67
|
for (const classWithImport of classWithImports) {
|
|
65
|
-
|
|
66
|
-
|
|
68
|
+
for (const cssClass of classWithImport.cssClass) {
|
|
69
|
+
if (typeof cssClass === 'string') {
|
|
70
|
+
exactCssClasses[cssClass] = classWithImport.cssImport;
|
|
71
|
+
}
|
|
72
|
+
else {
|
|
73
|
+
regexpCssTests.push((css) => (css.match(cssClass) ? classWithImport.cssImport : null));
|
|
74
|
+
}
|
|
67
75
|
}
|
|
68
|
-
|
|
69
|
-
|
|
76
|
+
for (const element of classWithImport.elements || []) {
|
|
77
|
+
exactCssElements[element] = classWithImport.cssImport;
|
|
70
78
|
}
|
|
71
79
|
}
|
|
72
80
|
const imports = new Set();
|
|
73
81
|
for (const visitedClass of allVisitedClasses) {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
82
|
+
(exactCssClasses[visitedClass] || regexpCssTests.map((test) => test(visitedClass)).find(Boolean))?.forEach((newImport) => imports.add(newImport));
|
|
83
|
+
}
|
|
84
|
+
for (const visitedElement of allVisitedElements) {
|
|
85
|
+
exactCssElements[visitedElement]?.forEach((newImport) => imports.add(newImport));
|
|
78
86
|
}
|
|
79
87
|
return [...imports].sort();
|
|
80
88
|
}
|
|
@@ -25,6 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
26
|
const child_process_1 = require("child_process");
|
|
27
27
|
const path = __importStar(require("path"));
|
|
28
|
+
const angular_template_1 = require("../../lib/angular-template");
|
|
28
29
|
const html_ast_1 = require("../../lib/html-ast");
|
|
29
30
|
const css_class_registry_1 = require("./css-class-registry");
|
|
30
31
|
const migration_1 = require("./migration");
|
|
@@ -50,6 +51,7 @@ exports.default = (options) => {
|
|
|
50
51
|
const angularCompiler = await import('@angular/compiler');
|
|
51
52
|
const { postcssValueParser } = await import('../../lib/local-deps/postcss-value-parser.js');
|
|
52
53
|
const allCssClasses = new Set();
|
|
54
|
+
const allHtmlElements = new Set();
|
|
53
55
|
tree.visit((path, entry) => {
|
|
54
56
|
if (path.includes('node_modules') || !entry) {
|
|
55
57
|
return;
|
|
@@ -74,13 +76,24 @@ exports.default = (options) => {
|
|
|
74
76
|
migrateFile((content) => {
|
|
75
77
|
if (!skipGlobalImportOptimization) {
|
|
76
78
|
(0, html_ast_1.extractAllCssClassNames)(content, angularCompiler).forEach((c) => allCssClasses.add(c));
|
|
79
|
+
(0, html_ast_1.extractAllHtmlElementNames)(content, angularCompiler).forEach((c) => allHtmlElements.add(c));
|
|
77
80
|
}
|
|
78
81
|
return (0, migration_1.migrateHTMLFile)(path, content, angularCompiler);
|
|
79
82
|
});
|
|
80
83
|
}
|
|
84
|
+
if (path.endsWith('.ts')) {
|
|
85
|
+
migrateFile((content) => {
|
|
86
|
+
const ngTemplates = (0, angular_template_1.extractNgTemplates)(path, content);
|
|
87
|
+
if (!skipGlobalImportOptimization) {
|
|
88
|
+
ngTemplates.flatMap((tpl) => (0, html_ast_1.extractAllCssClassNames)(tpl.content, angularCompiler)).forEach((c) => allCssClasses.add(c));
|
|
89
|
+
ngTemplates.flatMap((tpl) => (0, html_ast_1.extractAllHtmlElementNames)(tpl.content, angularCompiler)).forEach((c) => allHtmlElements.add(c));
|
|
90
|
+
}
|
|
91
|
+
return (0, migration_1.migrateTsFile)(content, ngTemplates, angularCompiler);
|
|
92
|
+
});
|
|
93
|
+
}
|
|
81
94
|
});
|
|
82
95
|
if (!skipGlobalImportOptimization) {
|
|
83
|
-
const cssImports = (0, css_class_registry_1.getCssImports)([...allCssClasses]);
|
|
96
|
+
const cssImports = (0, css_class_registry_1.getCssImports)([...allCssClasses], [...allHtmlElements]);
|
|
84
97
|
tree.visit((path, entry) => {
|
|
85
98
|
if (path.includes('node_modules') || !entry || !path.endsWith('.scss')) {
|
|
86
99
|
return;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.migrateAngularJsonFile = exports.migrateIndexHTMLFile = exports.migrateHTMLFile = exports.optimizeScssGlobalImport = exports.migrateScssFile = void 0;
|
|
3
|
+
exports.migrateAngularJsonFile = exports.migrateIndexHTMLFile = exports.migrateTsFile = exports.migrateHTMLFile = exports.optimizeScssGlobalImport = exports.migrateScssFile = void 0;
|
|
4
4
|
const file_update_js_1 = require("../../lib/file-update.js");
|
|
5
5
|
const html_ast_js_1 = require("../../lib/html-ast.js");
|
|
6
6
|
const scss_ast_js_1 = require("../../lib/scss-ast.js");
|
|
@@ -17,7 +17,7 @@ const theme_js_1 = require("./updaters/theme.js");
|
|
|
17
17
|
function migrateScssFile(content, postCss, postCssScss, postcssValueParser) {
|
|
18
18
|
const root = postCssScss.parse(content);
|
|
19
19
|
root.walkAtRules('import', (rule) => {
|
|
20
|
-
['@lucca-front/scss/src/mixins', '@lucca-front/icons/src/mixins', '@lucca-front/scss/src/icons', 'theming'].some((name) => (0, scss_ast_js_1.removeImportNode)(rule, name, postcssValueParser));
|
|
20
|
+
['@lucca-front/scss/src/mixins', '@lucca-front/icons/src/mixins', '@lucca-front/scss/src/_mixins', '@lucca-front/icons/src/_mixins', '@lucca-front/scss/src/icons', 'theming'].some((name) => (0, scss_ast_js_1.removeImportNode)(rule, name, postcssValueParser));
|
|
21
21
|
});
|
|
22
22
|
(0, remove_scss_placeholder_js_1.removeScssPlaceholders)(root, postcssValueParser);
|
|
23
23
|
(0, ie11_js_1.removeIE11ThemeSupport)(root, postcssValueParser);
|
|
@@ -69,16 +69,27 @@ function optimizeScssGlobalImport(content, cssImports, postCss, postCssScss) {
|
|
|
69
69
|
return root.toResult({ syntax: { stringify: postCssScss.stringify } }).css;
|
|
70
70
|
}
|
|
71
71
|
exports.optimizeScssGlobalImport = optimizeScssGlobalImport;
|
|
72
|
+
const classMigrationMap = {
|
|
73
|
+
'u-fontWeightBold': 'u-fontWeight600',
|
|
74
|
+
'u-order1': 'u-flexOrder1',
|
|
75
|
+
'u-order-1': 'u-flexOrderMinus1',
|
|
76
|
+
};
|
|
72
77
|
function migrateHTMLFile(path, content, angularCompiler) {
|
|
73
|
-
return path.endsWith('index.html')
|
|
74
|
-
? migrateIndexHTMLFile(content, angularCompiler)
|
|
75
|
-
: (0, html_ast_js_1.updateCssClassNames)(content, {
|
|
76
|
-
'u-fontWeightBold': 'u-fontWeight600',
|
|
77
|
-
'u-order1': 'u-flexOrder1',
|
|
78
|
-
'u-order-1': 'u-flexOrderMinus1',
|
|
79
|
-
}, angularCompiler);
|
|
78
|
+
return path.endsWith('index.html') ? migrateIndexHTMLFile(content, angularCompiler) : (0, html_ast_js_1.updateCssClassNames)(content, classMigrationMap, angularCompiler);
|
|
80
79
|
}
|
|
81
80
|
exports.migrateHTMLFile = migrateHTMLFile;
|
|
81
|
+
function migrateTsFile(content, templates, angularCompiler) {
|
|
82
|
+
if (!templates.length) {
|
|
83
|
+
return content;
|
|
84
|
+
}
|
|
85
|
+
const updates = templates.map((tpl) => ({
|
|
86
|
+
position: tpl.offsetStart,
|
|
87
|
+
oldContent: tpl.content,
|
|
88
|
+
newContent: (0, html_ast_js_1.updateCssClassNames)(tpl.content, classMigrationMap, angularCompiler),
|
|
89
|
+
}));
|
|
90
|
+
return (0, file_update_js_1.applyUpdates)(content, updates);
|
|
91
|
+
}
|
|
92
|
+
exports.migrateTsFile = migrateTsFile;
|
|
82
93
|
function migrateIndexHTMLFile(content, angularCompiler) {
|
|
83
94
|
const root = new html_ast_js_1.HtmlAst(content, angularCompiler);
|
|
84
95
|
const updates = [];
|
|
@@ -117,7 +128,7 @@ function migrateAngularJsonFile(content) {
|
|
|
117
128
|
const architect = project.architect[architectNode];
|
|
118
129
|
const options = architect?.options?.stylePreprocessorOptions;
|
|
119
130
|
if (options?.includePaths) {
|
|
120
|
-
options.includePaths = options.includePaths.filter((p) => !p.
|
|
131
|
+
options.includePaths = options.includePaths.filter((p) => !p.includes('@lucca-front/'));
|
|
121
132
|
if (!options.includePaths.length) {
|
|
122
133
|
delete architect.options?.stylePreprocessorOptions;
|
|
123
134
|
}
|
|
@@ -88,7 +88,7 @@ describe('Migration Angular JSON file', () => {
|
|
|
88
88
|
});
|
|
89
89
|
});
|
|
90
90
|
describe('CSS Vars Migration', () => {
|
|
91
|
-
it('should update
|
|
91
|
+
it('should update files', async () => {
|
|
92
92
|
const tree = new testing_1.UnitTestTree(schematics_1.Tree.empty());
|
|
93
93
|
const inputs = files.filter((f) => f.includes('.input.'));
|
|
94
94
|
const outputs = files.filter((f) => f.includes('.output.'));
|
|
@@ -109,6 +109,23 @@ describe('CSS Vars Migration', () => {
|
|
|
109
109
|
});
|
|
110
110
|
it('should add optimized global imports', async () => {
|
|
111
111
|
const tree = new testing_1.UnitTestTree(schematics_1.Tree.empty());
|
|
112
|
+
tree.create('app.component.ts', `
|
|
113
|
+
@Component({
|
|
114
|
+
selector: 'clp-root',
|
|
115
|
+
template: \`
|
|
116
|
+
<clp-accessibility-nav></clp-accessibility-nav>
|
|
117
|
+
<lucca-sitemap id="navSide" class="mod-withBanner"></lucca-sitemap>
|
|
118
|
+
<main role="main" class="main-content" id="main-content">
|
|
119
|
+
<router-outlet></router-outlet>
|
|
120
|
+
</main>
|
|
121
|
+
<clf-feature-toggle feature="inbox">
|
|
122
|
+
<clp-documents-satellite enabled></clp-documents-satellite>
|
|
123
|
+
</clf-feature-toggle>
|
|
124
|
+
<clf-toast [sources]="[message$, toastError$]"></clf-toast>
|
|
125
|
+
\`,
|
|
126
|
+
})
|
|
127
|
+
export class AppComponent {}
|
|
128
|
+
`);
|
|
112
129
|
tree.create('app.component.html', '<button type="button" class="button">Test</button>');
|
|
113
130
|
tree.create('table.component.html', '<table class="table mod-sortable" [class.mod-stickyColumn]="true"></table>');
|
|
114
131
|
tree.create('util.component.html', '<div class="u-marginTopStandard">LOL</div>');
|
|
@@ -120,6 +137,8 @@ describe('CSS Vars Migration', () => {
|
|
|
120
137
|
`@forward '@lucca-front/icons/src/main';`,
|
|
121
138
|
`@forward '@lucca-front/scss/src/main';`,
|
|
122
139
|
`@forward '@lucca-front/scss/src/components/button';`,
|
|
140
|
+
`@forward '@lucca-front/scss/src/components/main';`,
|
|
141
|
+
`@forward '@lucca-front/scss/src/components/navside';`,
|
|
123
142
|
`@forward '@lucca-front/scss/src/components/table';`,
|
|
124
143
|
`@forward '@lucca-front/scss/src/components/tableSorted';`,
|
|
125
144
|
`@forward '@lucca-front/scss/src/components/tableSticked';`,
|
|
@@ -9,7 +9,7 @@ function updateElevation(root, postCss, postCssValueParser) {
|
|
|
9
9
|
const level = funcNode.nodes[0].value;
|
|
10
10
|
atRule.before(new postCss.Declaration({
|
|
11
11
|
prop: 'box-shadow',
|
|
12
|
-
value: `var(--commons-
|
|
12
|
+
value: `var(--commons-elevations-elevation-${level})`,
|
|
13
13
|
}));
|
|
14
14
|
atRule.remove();
|
|
15
15
|
});
|