@navita/engine 0.1.0 → 0.1.1
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/helpers/isContainerQuery.cjs +7 -0
- package/helpers/isContainerQuery.mjs +5 -0
- package/package.json +1 -1
- package/printers/printStyleBlocks.cjs +15 -2
- package/printers/printStyleBlocks.mjs +15 -2
- package/processStyles.cjs +50 -29
- package/processStyles.mjs +50 -29
package/package.json
CHANGED
|
@@ -6,7 +6,13 @@ function printStyleBlocks(blocks) {
|
|
|
6
6
|
let stylesheet = '';
|
|
7
7
|
let previousStyle;
|
|
8
8
|
for (const style of blocks){
|
|
9
|
-
if (style.type === 'static' && previousStyle && (previousStyle.selector !== style.selector || previousStyle.pseudo !== style.pseudo || previousStyle.media !== style.media || previousStyle.support !== style.support)) {
|
|
9
|
+
if (style.type === 'static' && previousStyle && (previousStyle.selector !== style.selector || previousStyle.pseudo !== style.pseudo || previousStyle.media !== style.media || previousStyle.support !== style.support || previousStyle.container !== style.container)) {
|
|
10
|
+
stylesheet += '}';
|
|
11
|
+
}
|
|
12
|
+
// Close container queries:
|
|
13
|
+
// 1. When the current style is not a container query, and the previous style was container query
|
|
14
|
+
// 2. When the current style is a container query and the previous style was a container query with a different container query
|
|
15
|
+
if (previousStyle && previousStyle.container && (!style.container || style.container !== previousStyle.container)) {
|
|
10
16
|
stylesheet += '}';
|
|
11
17
|
}
|
|
12
18
|
// Close support queries:
|
|
@@ -29,10 +35,14 @@ function printStyleBlocks(blocks) {
|
|
|
29
35
|
if (style.support && previousStyle?.support !== style.support) {
|
|
30
36
|
stylesheet += `@supports ${style.support}{`;
|
|
31
37
|
}
|
|
38
|
+
// Only add container queries if the previous style was not the same container query
|
|
39
|
+
if (style.container && previousStyle?.container !== style.container) {
|
|
40
|
+
stylesheet += `@container ${style.container}{`;
|
|
41
|
+
}
|
|
32
42
|
if (style.type === 'rule') {
|
|
33
43
|
const className = `.${style.id}`.repeat(helpers_getPropertyPriority.getPropertyPriority(style.property));
|
|
34
44
|
stylesheet += `${className}${style.pseudo}{`;
|
|
35
|
-
} else if (style.type === 'static' && (previousStyle?.selector !== style.selector || previousStyle?.pseudo !== style.pseudo || previousStyle?.media !== style.media || previousStyle?.support !== style.support)) {
|
|
45
|
+
} else if (style.type === 'static' && (previousStyle?.selector !== style.selector || previousStyle?.pseudo !== style.pseudo || previousStyle?.media !== style.media || previousStyle?.support !== style.support || previousStyle?.container !== style.container)) {
|
|
36
46
|
// If static, we don't add pseudo selectors currently
|
|
37
47
|
stylesheet += `${style.selector}${style.pseudo}{`;
|
|
38
48
|
}
|
|
@@ -45,6 +55,9 @@ function printStyleBlocks(blocks) {
|
|
|
45
55
|
}
|
|
46
56
|
previousStyle = style;
|
|
47
57
|
}
|
|
58
|
+
if (previousStyle?.container) {
|
|
59
|
+
stylesheet += '}';
|
|
60
|
+
}
|
|
48
61
|
if (previousStyle?.support) {
|
|
49
62
|
stylesheet += '}';
|
|
50
63
|
}
|
|
@@ -4,7 +4,13 @@ function printStyleBlocks(blocks) {
|
|
|
4
4
|
let stylesheet = '';
|
|
5
5
|
let previousStyle;
|
|
6
6
|
for (const style of blocks){
|
|
7
|
-
if (style.type === 'static' && previousStyle && (previousStyle.selector !== style.selector || previousStyle.pseudo !== style.pseudo || previousStyle.media !== style.media || previousStyle.support !== style.support)) {
|
|
7
|
+
if (style.type === 'static' && previousStyle && (previousStyle.selector !== style.selector || previousStyle.pseudo !== style.pseudo || previousStyle.media !== style.media || previousStyle.support !== style.support || previousStyle.container !== style.container)) {
|
|
8
|
+
stylesheet += '}';
|
|
9
|
+
}
|
|
10
|
+
// Close container queries:
|
|
11
|
+
// 1. When the current style is not a container query, and the previous style was container query
|
|
12
|
+
// 2. When the current style is a container query and the previous style was a container query with a different container query
|
|
13
|
+
if (previousStyle && previousStyle.container && (!style.container || style.container !== previousStyle.container)) {
|
|
8
14
|
stylesheet += '}';
|
|
9
15
|
}
|
|
10
16
|
// Close support queries:
|
|
@@ -27,10 +33,14 @@ function printStyleBlocks(blocks) {
|
|
|
27
33
|
if (style.support && previousStyle?.support !== style.support) {
|
|
28
34
|
stylesheet += `@supports ${style.support}{`;
|
|
29
35
|
}
|
|
36
|
+
// Only add container queries if the previous style was not the same container query
|
|
37
|
+
if (style.container && previousStyle?.container !== style.container) {
|
|
38
|
+
stylesheet += `@container ${style.container}{`;
|
|
39
|
+
}
|
|
30
40
|
if (style.type === 'rule') {
|
|
31
41
|
const className = `.${style.id}`.repeat(getPropertyPriority(style.property));
|
|
32
42
|
stylesheet += `${className}${style.pseudo}{`;
|
|
33
|
-
} else if (style.type === 'static' && (previousStyle?.selector !== style.selector || previousStyle?.pseudo !== style.pseudo || previousStyle?.media !== style.media || previousStyle?.support !== style.support)) {
|
|
43
|
+
} else if (style.type === 'static' && (previousStyle?.selector !== style.selector || previousStyle?.pseudo !== style.pseudo || previousStyle?.media !== style.media || previousStyle?.support !== style.support || previousStyle?.container !== style.container)) {
|
|
34
44
|
// If static, we don't add pseudo selectors currently
|
|
35
45
|
stylesheet += `${style.selector}${style.pseudo}{`;
|
|
36
46
|
}
|
|
@@ -43,6 +53,9 @@ function printStyleBlocks(blocks) {
|
|
|
43
53
|
}
|
|
44
54
|
previousStyle = style;
|
|
45
55
|
}
|
|
56
|
+
if (previousStyle?.container) {
|
|
57
|
+
stylesheet += '}';
|
|
58
|
+
}
|
|
46
59
|
if (previousStyle?.support) {
|
|
47
60
|
stylesheet += '}';
|
|
48
61
|
}
|
package/processStyles.cjs
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var helpers_generateCombinedAtRules = require('./helpers/generateCombinedAtRules.cjs');
|
|
4
4
|
var helpers_hyphenateProperty = require('./helpers/hyphenateProperty.cjs');
|
|
5
|
+
var helpers_isContainerQuery = require('./helpers/isContainerQuery.cjs');
|
|
5
6
|
var helpers_isMediaQuery = require('./helpers/isMediaQuery.cjs');
|
|
6
7
|
var helpers_isNestedSelector = require('./helpers/isNestedSelector.cjs');
|
|
7
8
|
var helpers_isObject = require('./helpers/isObject.cjs');
|
|
@@ -16,7 +17,7 @@ const transformValuePropertyMap = {
|
|
|
16
17
|
content: helpers_transformContentProperty.transformContentProperty
|
|
17
18
|
};
|
|
18
19
|
function processStyles({ cache , type }) {
|
|
19
|
-
return function process({ styles , pseudo ="" , media ="" , support ="" , selector ="" }) {
|
|
20
|
+
return function process({ styles , pseudo ="" , media ="" , support ="" , container ="" , selector ="" }) {
|
|
20
21
|
const result = [];
|
|
21
22
|
for (const [property, value] of Object.entries(styles)){
|
|
22
23
|
if (helpers_isObject.isObject(value)) {
|
|
@@ -27,18 +28,36 @@ function processStyles({ cache , type }) {
|
|
|
27
28
|
pseudo,
|
|
28
29
|
media: combinedMedia,
|
|
29
30
|
support,
|
|
31
|
+
container,
|
|
30
32
|
selector
|
|
31
33
|
}));
|
|
32
|
-
|
|
34
|
+
continue;
|
|
35
|
+
}
|
|
36
|
+
if (helpers_isSupportsQuery.isSupportsQuery(property)) {
|
|
33
37
|
const combinedSupport = helpers_generateCombinedAtRules.generateCombinedAtRules(support, property.slice(9).trim());
|
|
34
38
|
result.push(...process({
|
|
35
39
|
styles: value,
|
|
36
40
|
pseudo,
|
|
37
41
|
media,
|
|
38
42
|
support: combinedSupport,
|
|
43
|
+
container,
|
|
44
|
+
selector
|
|
45
|
+
}));
|
|
46
|
+
continue;
|
|
47
|
+
}
|
|
48
|
+
if (helpers_isContainerQuery.isContainerQuery(property)) {
|
|
49
|
+
const combinedContainer = helpers_generateCombinedAtRules.generateCombinedAtRules(container, property.slice(10).trim());
|
|
50
|
+
result.push(...process({
|
|
51
|
+
styles: value,
|
|
52
|
+
pseudo,
|
|
53
|
+
media,
|
|
54
|
+
support,
|
|
55
|
+
container: combinedContainer,
|
|
39
56
|
selector
|
|
40
57
|
}));
|
|
41
|
-
|
|
58
|
+
continue;
|
|
59
|
+
}
|
|
60
|
+
if (helpers_isNestedSelector.isNestedSelector(property)) {
|
|
42
61
|
// This is only allowed in simple pseudos currently.
|
|
43
62
|
const copies = property.split(',').map((p)=>p.trim());
|
|
44
63
|
for (const copy of copies){
|
|
@@ -47,37 +66,39 @@ function processStyles({ cache , type }) {
|
|
|
47
66
|
pseudo: pseudo + helpers_normalizeNestedProperty.normalizeNestedProperty(copy),
|
|
48
67
|
media,
|
|
49
68
|
support,
|
|
69
|
+
container,
|
|
50
70
|
selector
|
|
51
71
|
}));
|
|
52
72
|
}
|
|
53
|
-
|
|
54
|
-
console.warn("Unknown property", property);
|
|
55
|
-
}
|
|
56
|
-
} else {
|
|
57
|
-
let newProperty = helpers_normalizeCSSVarsProperty.normalizeCSSVarsProperty(property);
|
|
58
|
-
let newValue = value;
|
|
59
|
-
if (typeof value === "string") {
|
|
60
|
-
newValue = value.trim().replace(/;[\n\s]*$/, "");
|
|
61
|
-
newValue = helpers_normalizeCSSVarsValue.normalizeCSSVarsValue(newValue);
|
|
62
|
-
}
|
|
63
|
-
if (typeof value === "number") {
|
|
64
|
-
newValue = helpers_pixelifyProperties.pixelifyProperties(newProperty, value);
|
|
73
|
+
continue;
|
|
65
74
|
}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
75
|
+
console.warn("Unknown property", property);
|
|
76
|
+
continue;
|
|
77
|
+
}
|
|
78
|
+
let newProperty = helpers_normalizeCSSVarsProperty.normalizeCSSVarsProperty(property);
|
|
79
|
+
let newValue = value;
|
|
80
|
+
if (typeof value === "string") {
|
|
81
|
+
newValue = value.trim().replace(/;[\n\s]*$/, "");
|
|
82
|
+
newValue = helpers_normalizeCSSVarsValue.normalizeCSSVarsValue(newValue);
|
|
83
|
+
}
|
|
84
|
+
if (typeof value === "number") {
|
|
85
|
+
newValue = helpers_pixelifyProperties.pixelifyProperties(newProperty, value);
|
|
86
|
+
}
|
|
87
|
+
if (transformValuePropertyMap[newProperty]) {
|
|
88
|
+
newValue = transformValuePropertyMap[newProperty](value);
|
|
80
89
|
}
|
|
90
|
+
newProperty = helpers_hyphenateProperty.hyphenateProperty(newProperty);
|
|
91
|
+
// Remove trailing semicolon and new lines with regex
|
|
92
|
+
result.push(cache.getOrStore({
|
|
93
|
+
type,
|
|
94
|
+
selector,
|
|
95
|
+
property: newProperty,
|
|
96
|
+
value: newValue,
|
|
97
|
+
pseudo,
|
|
98
|
+
media,
|
|
99
|
+
support,
|
|
100
|
+
container
|
|
101
|
+
}));
|
|
81
102
|
}
|
|
82
103
|
return result;
|
|
83
104
|
};
|
package/processStyles.mjs
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { generateCombinedAtRules } from './helpers/generateCombinedAtRules.mjs';
|
|
2
2
|
import { hyphenateProperty } from './helpers/hyphenateProperty.mjs';
|
|
3
|
+
import { isContainerQuery } from './helpers/isContainerQuery.mjs';
|
|
3
4
|
import { isMediaQuery } from './helpers/isMediaQuery.mjs';
|
|
4
5
|
import { isNestedSelector } from './helpers/isNestedSelector.mjs';
|
|
5
6
|
import { isObject } from './helpers/isObject.mjs';
|
|
@@ -14,7 +15,7 @@ const transformValuePropertyMap = {
|
|
|
14
15
|
content: transformContentProperty
|
|
15
16
|
};
|
|
16
17
|
function processStyles({ cache , type }) {
|
|
17
|
-
return function process({ styles , pseudo ="" , media ="" , support ="" , selector ="" }) {
|
|
18
|
+
return function process({ styles , pseudo ="" , media ="" , support ="" , container ="" , selector ="" }) {
|
|
18
19
|
const result = [];
|
|
19
20
|
for (const [property, value] of Object.entries(styles)){
|
|
20
21
|
if (isObject(value)) {
|
|
@@ -25,18 +26,36 @@ function processStyles({ cache , type }) {
|
|
|
25
26
|
pseudo,
|
|
26
27
|
media: combinedMedia,
|
|
27
28
|
support,
|
|
29
|
+
container,
|
|
28
30
|
selector
|
|
29
31
|
}));
|
|
30
|
-
|
|
32
|
+
continue;
|
|
33
|
+
}
|
|
34
|
+
if (isSupportsQuery(property)) {
|
|
31
35
|
const combinedSupport = generateCombinedAtRules(support, property.slice(9).trim());
|
|
32
36
|
result.push(...process({
|
|
33
37
|
styles: value,
|
|
34
38
|
pseudo,
|
|
35
39
|
media,
|
|
36
40
|
support: combinedSupport,
|
|
41
|
+
container,
|
|
42
|
+
selector
|
|
43
|
+
}));
|
|
44
|
+
continue;
|
|
45
|
+
}
|
|
46
|
+
if (isContainerQuery(property)) {
|
|
47
|
+
const combinedContainer = generateCombinedAtRules(container, property.slice(10).trim());
|
|
48
|
+
result.push(...process({
|
|
49
|
+
styles: value,
|
|
50
|
+
pseudo,
|
|
51
|
+
media,
|
|
52
|
+
support,
|
|
53
|
+
container: combinedContainer,
|
|
37
54
|
selector
|
|
38
55
|
}));
|
|
39
|
-
|
|
56
|
+
continue;
|
|
57
|
+
}
|
|
58
|
+
if (isNestedSelector(property)) {
|
|
40
59
|
// This is only allowed in simple pseudos currently.
|
|
41
60
|
const copies = property.split(',').map((p)=>p.trim());
|
|
42
61
|
for (const copy of copies){
|
|
@@ -45,37 +64,39 @@ function processStyles({ cache , type }) {
|
|
|
45
64
|
pseudo: pseudo + normalizeNestedProperty(copy),
|
|
46
65
|
media,
|
|
47
66
|
support,
|
|
67
|
+
container,
|
|
48
68
|
selector
|
|
49
69
|
}));
|
|
50
70
|
}
|
|
51
|
-
|
|
52
|
-
console.warn("Unknown property", property);
|
|
53
|
-
}
|
|
54
|
-
} else {
|
|
55
|
-
let newProperty = normalizeCSSVarsProperty(property);
|
|
56
|
-
let newValue = value;
|
|
57
|
-
if (typeof value === "string") {
|
|
58
|
-
newValue = value.trim().replace(/;[\n\s]*$/, "");
|
|
59
|
-
newValue = normalizeCSSVarsValue(newValue);
|
|
60
|
-
}
|
|
61
|
-
if (typeof value === "number") {
|
|
62
|
-
newValue = pixelifyProperties(newProperty, value);
|
|
71
|
+
continue;
|
|
63
72
|
}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
73
|
+
console.warn("Unknown property", property);
|
|
74
|
+
continue;
|
|
75
|
+
}
|
|
76
|
+
let newProperty = normalizeCSSVarsProperty(property);
|
|
77
|
+
let newValue = value;
|
|
78
|
+
if (typeof value === "string") {
|
|
79
|
+
newValue = value.trim().replace(/;[\n\s]*$/, "");
|
|
80
|
+
newValue = normalizeCSSVarsValue(newValue);
|
|
81
|
+
}
|
|
82
|
+
if (typeof value === "number") {
|
|
83
|
+
newValue = pixelifyProperties(newProperty, value);
|
|
84
|
+
}
|
|
85
|
+
if (transformValuePropertyMap[newProperty]) {
|
|
86
|
+
newValue = transformValuePropertyMap[newProperty](value);
|
|
78
87
|
}
|
|
88
|
+
newProperty = hyphenateProperty(newProperty);
|
|
89
|
+
// Remove trailing semicolon and new lines with regex
|
|
90
|
+
result.push(cache.getOrStore({
|
|
91
|
+
type,
|
|
92
|
+
selector,
|
|
93
|
+
property: newProperty,
|
|
94
|
+
value: newValue,
|
|
95
|
+
pseudo,
|
|
96
|
+
media,
|
|
97
|
+
support,
|
|
98
|
+
container
|
|
99
|
+
}));
|
|
79
100
|
}
|
|
80
101
|
return result;
|
|
81
102
|
};
|