@lucca-front/ng 10.0.0 → 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.
Files changed (9) hide show
  1. package/package.json +3 -3
  2. package/schematics/lib/angular-template.js +46 -0
  3. package/schematics/lib/html-ast.js +22 -2
  4. package/schematics/migrations/css-vars/css-class-registry.js +71 -63
  5. package/schematics/migrations/css-vars/index.js +14 -1
  6. package/schematics/migrations/css-vars/migration.js +21 -10
  7. package/schematics/migrations/css-vars/migration.spec.js +25 -2
  8. package/schematics/migrations/css-vars/updaters/elevation.js +1 -1
  9. package/schematics/migrations/css-vars/updaters/main-import.js +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lucca-front/ng",
3
- "version": "10.0.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.0",
33
- "@lucca-front/scss": "v10.0.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": {
package/schematics/lib/angular-template.js ADDED
@@ -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
+ }
package/schematics/lib/html-ast.js CHANGED
@@ -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) {
@@ -58,8 +58,13 @@ function updateCssClassNames(content, oldClassToNewClass, lib) {
58
58
  const updates = [];
59
59
  const root = new HtmlAst(content, lib);
60
60
  const classesToFind = Object.keys(oldClassToNewClass);
61
+ const visitedAttributes = new Set();
61
62
  root.visitAttribute('class', (classAttr) => {
62
63
  const offset = classAttr.valueSpan?.start.offset;
64
+ if (visitedAttributes.has(classAttr)) {
65
+ return;
66
+ }
67
+ visitedAttributes.add(classAttr);
63
68
  if (classesToFind.some((cl) => classAttr.value.includes(cl)) && offset !== undefined) {
64
69
  updates.push({
65
70
  position: offset,
@@ -70,6 +75,10 @@ function updateCssClassNames(content, oldClassToNewClass, lib) {
70
75
  });
71
76
  for (const cl of classesToFind) {
72
77
  root.visitBoundAttribute(cl, (boundAttr) => {
78
+ if (visitedAttributes.has(boundAttr)) {
79
+ return;
80
+ }
81
+ visitedAttributes.add(boundAttr);
73
82
  updates.push({
74
83
  position: boundAttr.keySpan.start.offset,
75
84
  oldContent: boundAttr.keySpan.details || '',
@@ -81,6 +90,10 @@ function updateCssClassNames(content, oldClassToNewClass, lib) {
81
90
  if (!(boundAttr.value instanceof lib.ASTWithSource)) {
82
91
  return;
83
92
  }
93
+ if (visitedAttributes.has(boundAttr)) {
94
+ return;
95
+ }
96
+ visitedAttributes.add(boundAttr);
84
97
  const { source } = boundAttr.value;
85
98
  if (classesToFind.some((cl) => source?.includes(cl))) {
86
99
  updates.push({
@@ -96,7 +109,7 @@ exports.updateCssClassNames = updateCssClassNames;
96
109
  function extractAllCssClassNames(content, lib) {
97
110
  const allClasses = new Set();
98
111
  const root = new HtmlAst(content, lib);
99
- root.visitAttribute('class', (classAttr) => allClasses.add(classAttr.value));
112
+ root.visitAttribute('class', (classAttr) => classAttr.value.split(' ').forEach((cls) => allClasses.add(cls)));
100
113
  root.visitBoundAttribute(/.*/, (boundAttr) => {
101
114
  if (boundAttr.keySpan.details?.startsWith('class.')) {
102
115
  allClasses.add(boundAttr.name);
@@ -105,3 +118,10 @@ function extractAllCssClassNames(content, lib) {
105
118
  return [...allClasses];
106
119
  }
107
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;
package/schematics/migrations/css-vars/css-class-registry.js CHANGED
@@ -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-*/, cssImport: '@lucca-front/scss/src/components/tableFixed' },
48
- { cssClass: 'mod-sortable', cssImport: '@lucca-front/scss/src/components/tableSorted' },
49
- { cssClass: 'table-head-row-cell-sortableButton', cssImport: '@lucca-front/scss/src/components/tableSorted' },
50
- { cssClass: 'mod-stickyColumn', cssImport: '@lucca-front/scss/src/components/tableSticked' },
51
- { cssClass: 'mod-stickyHeader', cssImport: '@lucca-front/scss/src/components/tableSticked' },
52
- { cssClass: 'tag', cssImport: '@lucca-front/scss/src/components/tag' },
53
- { cssClass: 'textfield', cssImport: '@lucca-front/scss/src/components/textfield' },
54
- { cssClass: 'timeline', cssImport: '@lucca-front/scss/src/components/timeline' },
55
- { cssClass: 'title', cssImport: '@lucca-front/scss/src/components/title' },
56
- { cssClass: 'toasts', cssImport: '@lucca-front/scss/src/components/toasts' },
57
- { cssClass: 'tableOfContent', cssImport: '@lucca-front/scss/src/components/tableOfContent' },
58
- { cssClass: /^u-/, cssImport: '@lucca-front/scss/src/components/util' },
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
- if (typeof classWithImport.cssClass === 'string') {
66
- exactCssClasses[classWithImport.cssClass] = classWithImport.cssImport;
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
- else {
69
- regexpCssTests.push((cssClass) => (cssClass.match(classWithImport.cssClass) ? classWithImport.cssImport : null));
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
- const newImport = exactCssClasses[visitedClass] || regexpCssTests.map((test) => test(visitedClass))[0];
75
- if (newImport) {
76
- imports.add(newImport);
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
  }
package/schematics/migrations/css-vars/index.js CHANGED
@@ -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;
package/schematics/migrations/css-vars/migration.js CHANGED
@@ -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.startsWith('@lucca-front/'));
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
  }
package/schematics/migrations/css-vars/migration.spec.js CHANGED
@@ -88,7 +88,7 @@ describe('Migration Angular JSON file', () => {
88
88
  });
89
89
  });
90
90
  describe('CSS Vars Migration', () => {
91
- it('should update style files', async () => {
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,17 +109,40 @@ 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
- tree.create('table.component.html', '<table class="table" [class.mod-stickyColumn]="true"></table>');
130
+ tree.create('table.component.html', '<table class="table mod-sortable" [class.mod-stickyColumn]="true"></table>');
131
+ tree.create('util.component.html', '<div class="u-marginTopStandard">LOL</div>');
114
132
  tree.create('styles.scss', "@import '@lucca-front/scss/src/main.overridable';");
115
133
  const schematicRunner = new testing_1.SchematicTestRunner('migrations', collectionPath);
116
134
  // migration-v10-css-vars is the name of the migration, which is defined in the migration.json file
117
135
  await schematicRunner.runSchematicAsync('migration-v10-css-vars', { skipInstallation: true }, tree).toPromise();
118
136
  const expectedImports = [
137
+ `@forward '@lucca-front/icons/src/main';`,
119
138
  `@forward '@lucca-front/scss/src/main';`,
120
139
  `@forward '@lucca-front/scss/src/components/button';`,
140
+ `@forward '@lucca-front/scss/src/components/main';`,
141
+ `@forward '@lucca-front/scss/src/components/navside';`,
121
142
  `@forward '@lucca-front/scss/src/components/table';`,
143
+ `@forward '@lucca-front/scss/src/components/tableSorted';`,
122
144
  `@forward '@lucca-front/scss/src/components/tableSticked';`,
145
+ `@forward '@lucca-front/scss/src/components/util';`,
123
146
  ];
124
147
  expect(tree.readContent('styles.scss')).toBe(expectedImports.join('\n'));
125
148
  });
package/schematics/migrations/css-vars/updaters/elevation.js CHANGED
@@ -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-elevation-elevation-${level})`,
12
+ value: `var(--commons-elevations-elevation-${level})`,
13
13
  }));
14
14
  atRule.remove();
15
15
  });
package/schematics/migrations/css-vars/updaters/main-import.js CHANGED
@@ -30,6 +30,7 @@ function updateMainImport(root, postCss, postCssValueParser) {
30
30
  }
31
31
  });
32
32
  if (hasMainScss) {
33
+ (0, scss_ast_js_1.addForwardRule)(root, '@lucca-front/icons/src/main', postCss);
33
34
  (0, scss_ast_js_1.addForwardRule)(root, '@lucca-front/scss/src/main', postCss);
34
35
  }
35
36
  if (hasMainNg) {