@lucca-front/ng 10.0.5 → 10.0.7
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/scss-ast.js +10 -9
- package/schematics/migrations/css-vars/css-class-registry.js +56 -57
- package/schematics/migrations/css-vars/migration.js +6 -4
- package/schematics/migrations/css-vars/migration.spec.js +2 -1
- package/schematics/migrations/css-vars/updaters/color.js +10 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lucca-front/ng",
|
|
3
|
-
"version": "10.0.
|
|
3
|
+
"version": "10.0.7",
|
|
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.7",
|
|
33
|
+
"@lucca-front/scss": "v10.0.7",
|
|
34
34
|
"@types/dompurify": "^2.3.0",
|
|
35
35
|
"dompurify": "^2.3.0",
|
|
36
36
|
"rxjs": "^6.0.0 || ^7.0.0"
|
|
@@ -18,7 +18,7 @@ function removeContainerIfEmpty(node) {
|
|
|
18
18
|
nextOrParentNode.raws.semicolon = semicolon;
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
|
-
if (!parent || parent.type === '
|
|
21
|
+
if (!parent || parent.type === 'document') {
|
|
22
22
|
return;
|
|
23
23
|
}
|
|
24
24
|
removeContainerIfEmpty(parent);
|
|
@@ -35,7 +35,7 @@ function addMixinImport(root, mixin, postCss, namespace = '') {
|
|
|
35
35
|
importStr += ` as ${namespace}`;
|
|
36
36
|
}
|
|
37
37
|
const newImportRule = new postCss.AtRule({ name: 'use', params: importStr });
|
|
38
|
-
addImport(root, newImportRule, lastImportRule);
|
|
38
|
+
return addImport(root, newImportRule, lastImportRule);
|
|
39
39
|
}
|
|
40
40
|
exports.addMixinImport = addMixinImport;
|
|
41
41
|
function addImport(root, atRule, afterNode) {
|
|
@@ -53,18 +53,19 @@ function addImport(root, atRule, afterNode) {
|
|
|
53
53
|
root.append(atRule);
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
|
+
return atRule;
|
|
56
57
|
}
|
|
57
58
|
exports.addImport = addImport;
|
|
58
|
-
function addForwardRule(root, name, postCss) {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
59
|
+
function addForwardRule(root, name, postCss, afterNode) {
|
|
60
|
+
if (!afterNode) {
|
|
61
|
+
root.walkAtRules('forward', (rule) => {
|
|
62
|
+
afterNode = rule;
|
|
63
|
+
});
|
|
64
|
+
}
|
|
64
65
|
if (!afterNode && root.first?.type === 'comment') {
|
|
65
66
|
afterNode = root.first;
|
|
66
67
|
}
|
|
67
|
-
addImport(root, new postCss.AtRule({ name: 'forward', params: `'${name}'` }), afterNode);
|
|
68
|
+
return addImport(root, new postCss.AtRule({ name: 'forward', params: `'${name}'` }), afterNode);
|
|
68
69
|
}
|
|
69
70
|
exports.addForwardRule = addForwardRule;
|
|
70
71
|
/**
|
|
@@ -2,62 +2,61 @@
|
|
|
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', '@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
5
|
{
|
|
54
|
-
|
|
55
|
-
|
|
6
|
+
cssClasses: ['u-h1', 'u-h2', 'u-h3', 'u-h4', 'u-h5', 'u-h6'],
|
|
7
|
+
cssImports: ['@lucca-front/scss/src/components/title'],
|
|
56
8
|
elements: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
|
|
57
9
|
},
|
|
58
|
-
{
|
|
59
|
-
{
|
|
60
|
-
{
|
|
10
|
+
{ cssClasses: ['actionIcon'], cssImports: ['@lucca-front/scss/src/components/actionIcon'] },
|
|
11
|
+
{ cssClasses: ['box'], cssImports: ['@lucca-front/scss/src/components/box'] },
|
|
12
|
+
{ cssClasses: ['breadcrumbs'], cssImports: ['@lucca-front/scss/src/components/breadcrumbs'] },
|
|
13
|
+
{ cssClasses: ['button-group'], cssImports: ['@lucca-front/scss/src/components/buttonGroup'] },
|
|
14
|
+
{ cssClasses: ['button'], cssImports: ['@lucca-front/scss/src/components/button'] },
|
|
15
|
+
{ cssClasses: ['callout'], cssImports: ['@lucca-front/scss/src/components/callout'] },
|
|
16
|
+
{ cssClasses: ['card'], cssImports: ['@lucca-front/scss/src/components/card'] },
|
|
17
|
+
{ cssClasses: ['checkbox'], cssImports: ['@lucca-front/scss/src/components/checkbox'] },
|
|
18
|
+
{ cssClasses: ['checkboxesfield'], cssImports: ['@lucca-front/scss/src/components/field', '@lucca-front/scss/src/components/checkbox'] },
|
|
19
|
+
{ cssClasses: ['chip'], cssImports: ['@lucca-front/scss/src/components/chip'] },
|
|
20
|
+
{ cssClasses: ['code'], cssImports: ['@lucca-front/scss/src/components/code'] },
|
|
21
|
+
{ cssClasses: ['collapse'], cssImports: ['@lucca-front/scss/src/components/collapse'] },
|
|
22
|
+
{ cssClasses: ['container'], cssImports: ['@lucca-front/scss/src/components/container'] },
|
|
23
|
+
{ cssClasses: ['contentSection'], cssImports: ['@lucca-front/scss/src/components/contentSection'] },
|
|
24
|
+
{ cssClasses: ['divider'], cssImports: ['@lucca-front/scss/src/components/divider'], elements: ['hr'] },
|
|
25
|
+
{ cssClasses: ['emptyState'], cssImports: ['@lucca-front/scss/src/components/emptyState'] },
|
|
26
|
+
{ cssClasses: ['errorPage'], cssImports: ['@lucca-front/scss/src/components/errorPage'] },
|
|
27
|
+
{ cssClasses: ['file'], cssImports: ['@lucca-front/scss/src/components/file'] },
|
|
28
|
+
{ cssClasses: ['filters'], cssImports: ['@lucca-front/scss/src/components/filters'] },
|
|
29
|
+
{ cssClasses: ['form-group'], cssImports: ['@lucca-front/scss/src/components/form'] },
|
|
30
|
+
{ cssClasses: ['gauge'], cssImports: ['@lucca-front/scss/src/components/gauge'] },
|
|
31
|
+
{ cssClasses: ['grid'], cssImports: ['@lucca-front/scss/src/components/grid'] },
|
|
32
|
+
{ cssClasses: ['header'], cssImports: ['@lucca-front/scss/src/components/header'] },
|
|
33
|
+
{ cssClasses: ['label'], cssImports: ['@lucca-front/scss/src/components/label'] },
|
|
34
|
+
{ cssClasses: ['layout'], cssImports: ['@lucca-front/scss/src/components/layout'] },
|
|
35
|
+
{ cssClasses: ['link'], cssImports: ['@lucca-front/scss/src/components/link'] },
|
|
36
|
+
{ cssClasses: ['list'], cssImports: ['@lucca-front/scss/src/components/list'] },
|
|
37
|
+
{ cssClasses: ['loading'], cssImports: ['@lucca-front/scss/src/components/loading'] },
|
|
38
|
+
{ cssClasses: ['main-content'], cssImports: ['@lucca-front/scss/src/components/main'] },
|
|
39
|
+
{ cssClasses: ['menu'], cssImports: ['@lucca-front/scss/src/components/menu'] },
|
|
40
|
+
{ cssClasses: ['mod-sortable', 'table-head-row-cell-sortableButton'], cssImports: ['@lucca-front/scss/src/components/tableSorted'] },
|
|
41
|
+
{ cssClasses: ['mod-stickyColumn', 'mod-stickyHeader'], cssImports: ['@lucca-front/scss/src/components/tableSticked'] },
|
|
42
|
+
{ cssClasses: ['navSide'], cssImports: ['@lucca-front/scss/src/components/navside'], elements: ['lucca-sitemap'] },
|
|
43
|
+
{ cssClasses: ['pageHeader'], cssImports: ['@lucca-front/scss/src/components/pageHeader'] },
|
|
44
|
+
{ cssClasses: ['pagination'], cssImports: ['@lucca-front/scss/src/components/pagination'] },
|
|
45
|
+
{ cssClasses: ['progress'], cssImports: ['@lucca-front/scss/src/components/progress'] },
|
|
46
|
+
{ cssClasses: ['radio'], cssImports: ['@lucca-front/scss/src/components/radio'] },
|
|
47
|
+
{ cssClasses: ['radioButtons'], cssImports: ['@lucca-front/scss/src/components/radioButtons'] },
|
|
48
|
+
{ cssClasses: ['radiosfield'], cssImports: ['@lucca-front/scss/src/components/field', '@lucca-front/scss/src/components/radio'] },
|
|
49
|
+
{ cssClasses: ['section'], cssImports: ['@lucca-front/scss/src/components/section'] },
|
|
50
|
+
{ cssClasses: ['switch'], cssImports: ['@lucca-front/scss/src/components/switch'] },
|
|
51
|
+
{ cssClasses: ['table'], cssImports: ['@lucca-front/scss/src/components/table'] },
|
|
52
|
+
{ cssClasses: ['tableOfContent'], cssImports: ['@lucca-front/scss/src/components/tableOfContent'] },
|
|
53
|
+
{ cssClasses: ['tag'], cssImports: ['@lucca-front/scss/src/components/tag'] },
|
|
54
|
+
{ cssClasses: ['textfield'], cssImports: ['@lucca-front/scss/src/components/field', '@lucca-front/scss/src/components/textfield'] },
|
|
55
|
+
{ cssClasses: ['timeline'], cssImports: ['@lucca-front/scss/src/components/timeline'] },
|
|
56
|
+
{ cssClasses: ['titleSection'], cssImports: ['@lucca-front/scss/src/components/titleSection'] },
|
|
57
|
+
{ cssClasses: ['toasts'], cssImports: ['@lucca-front/scss/src/components/toast'] },
|
|
58
|
+
{ cssClasses: [/^mod-layoutFixed-.*/], cssImports: ['@lucca-front/scss/src/components/tableFixed'] },
|
|
59
|
+
{ cssClasses: [/^u-.*/], cssImports: ['@lucca-front/scss/src/components/util'] },
|
|
61
60
|
];
|
|
62
61
|
function getCssImports(allVisitedClasses, allVisitedElements) {
|
|
63
62
|
const exactCssClasses = {};
|
|
@@ -65,16 +64,16 @@ function getCssImports(allVisitedClasses, allVisitedElements) {
|
|
|
65
64
|
const regexpCssTests = [];
|
|
66
65
|
// Pre-compute classWithImports for performance optimization
|
|
67
66
|
for (const classWithImport of classWithImports) {
|
|
68
|
-
for (const cssClass of classWithImport.
|
|
67
|
+
for (const cssClass of classWithImport.cssClasses) {
|
|
69
68
|
if (typeof cssClass === 'string') {
|
|
70
|
-
exactCssClasses[cssClass] = classWithImport.
|
|
69
|
+
exactCssClasses[cssClass] = classWithImport.cssImports;
|
|
71
70
|
}
|
|
72
71
|
else {
|
|
73
|
-
regexpCssTests.push((css) => (css.match(cssClass) ? classWithImport.
|
|
72
|
+
regexpCssTests.push((css) => (css.match(cssClass) ? classWithImport.cssImports : null));
|
|
74
73
|
}
|
|
75
74
|
}
|
|
76
75
|
for (const element of classWithImport.elements || []) {
|
|
77
|
-
exactCssElements[element] = classWithImport.
|
|
76
|
+
exactCssElements[element] = classWithImport.cssImports;
|
|
78
77
|
}
|
|
79
78
|
}
|
|
80
79
|
const imports = new Set();
|
|
@@ -55,15 +55,15 @@ function migrateScssFile(content, postCss, postCssScss, postcssValueParser) {
|
|
|
55
55
|
exports.migrateScssFile = migrateScssFile;
|
|
56
56
|
function optimizeScssGlobalImport(content, cssImports, postCss, postCssScss) {
|
|
57
57
|
const root = postCssScss.parse(content);
|
|
58
|
-
let
|
|
58
|
+
let startImport = null;
|
|
59
59
|
root.walkAtRules('forward', (rule) => {
|
|
60
60
|
if (rule.params.includes('@lucca-front/scss/src/main')) {
|
|
61
|
-
|
|
61
|
+
startImport = rule;
|
|
62
62
|
}
|
|
63
63
|
});
|
|
64
|
-
if (
|
|
64
|
+
if (startImport) {
|
|
65
65
|
for (const cssImport of cssImports) {
|
|
66
|
-
(0, scss_ast_js_1.addForwardRule)(root, cssImport, postCss);
|
|
66
|
+
startImport = (0, scss_ast_js_1.addForwardRule)(root, cssImport, postCss, startImport);
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
69
|
return root.toResult({ syntax: { stringify: postCssScss.stringify } }).css;
|
|
@@ -73,6 +73,8 @@ const classMigrationMap = {
|
|
|
73
73
|
'u-fontWeightBold': 'u-fontWeight600',
|
|
74
74
|
'u-order1': 'u-flexOrder1',
|
|
75
75
|
'u-order-1': 'u-flexOrderMinus1',
|
|
76
|
+
'u-right': 'u-floatRight',
|
|
77
|
+
'u-left': 'u-floatLeft',
|
|
76
78
|
};
|
|
77
79
|
function migrateHTMLFile(path, content, angularCompiler) {
|
|
78
80
|
return path.endsWith('index.html') ? migrateIndexHTMLFile(content, angularCompiler) : (0, html_ast_js_1.updateCssClassNames)(content, classMigrationMap, angularCompiler);
|
|
@@ -129,7 +129,7 @@ describe('CSS Vars Migration', () => {
|
|
|
129
129
|
tree.create('app.component.html', '<button type="button" class="button">Test</button>');
|
|
130
130
|
tree.create('table.component.html', '<table class="table mod-sortable" [class.mod-stickyColumn]="true"></table>');
|
|
131
131
|
tree.create('util.component.html', '<div class="u-marginTopStandard">LOL</div>');
|
|
132
|
-
tree.create('styles.scss', "@import '@lucca-front/scss/src/main.overridable';");
|
|
132
|
+
tree.create('styles.scss', "@import '@lucca-front/scss/src/main.overridable';\n@import '@lucca-front/ng/style/main.overridable';");
|
|
133
133
|
const schematicRunner = new testing_1.SchematicTestRunner('migrations', collectionPath);
|
|
134
134
|
// migration-v10-css-vars is the name of the migration, which is defined in the migration.json file
|
|
135
135
|
await schematicRunner.runSchematicAsync('migration-v10-css-vars', { skipInstallation: true }, tree).toPromise();
|
|
@@ -143,6 +143,7 @@ describe('CSS Vars Migration', () => {
|
|
|
143
143
|
`@forward '@lucca-front/scss/src/components/tableSorted';`,
|
|
144
144
|
`@forward '@lucca-front/scss/src/components/tableSticked';`,
|
|
145
145
|
`@forward '@lucca-front/scss/src/components/util';`,
|
|
146
|
+
`@forward '@lucca-front/ng/src/main';`,
|
|
146
147
|
];
|
|
147
148
|
expect(tree.readContent('styles.scss')).toBe(expectedImports.join('\n'));
|
|
148
149
|
});
|
|
@@ -13,6 +13,12 @@ const legacyLevelToLevel = {
|
|
|
13
13
|
lightest: '100',
|
|
14
14
|
default: '700',
|
|
15
15
|
};
|
|
16
|
+
const textLevelToLevel = {
|
|
17
|
+
dark: '900',
|
|
18
|
+
default: '800',
|
|
19
|
+
light: '600',
|
|
20
|
+
placeholder: '400',
|
|
21
|
+
};
|
|
16
22
|
function updateColorMixin(root, postcssValueParser) {
|
|
17
23
|
root.walkDecls((decl) => {
|
|
18
24
|
const valueNode = new scss_value_ast_js_1.ScssValueAst(decl.value, postcssValueParser);
|
|
@@ -22,6 +28,10 @@ function updateColorMixin(root, postcssValueParser) {
|
|
|
22
28
|
if (color === 'white') {
|
|
23
29
|
funcNode.nodes = new scss_value_ast_js_1.ScssValueAst(`--colors-${color}-color`, postcssValueParser).nodes;
|
|
24
30
|
}
|
|
31
|
+
else if (color === 'text') {
|
|
32
|
+
const level = textLevelToLevel[legacyLevel] ?? textLevelToLevel['default'];
|
|
33
|
+
funcNode.nodes = new scss_value_ast_js_1.ScssValueAst(`--palettes-grey-${level}`, postcssValueParser).nodes;
|
|
34
|
+
}
|
|
25
35
|
else {
|
|
26
36
|
let level = legacyLevel ?? funcNode.nodes[2]?.value ?? '700';
|
|
27
37
|
level = legacyLevelToLevel[level] ?? level;
|