@viewfly/scoped-css 0.0.1-alpha.1 → 0.0.1-alpha.11
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/bundles/index.esm.js +56 -14
- package/bundles/index.js +55 -13
- package/package.json +3 -3
- package/src/css-modules.ts +53 -14
package/bundles/index.esm.js
CHANGED
|
@@ -1,22 +1,64 @@
|
|
|
1
|
-
import { JSXElement
|
|
1
|
+
import { JSXElement } from '@viewfly/core';
|
|
2
2
|
|
|
3
|
-
function
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
function cssNamesToArray(config) {
|
|
4
|
+
const classes = [];
|
|
5
|
+
if (!config) {
|
|
6
|
+
return classes;
|
|
7
|
+
}
|
|
8
|
+
if (typeof config === 'string') {
|
|
9
|
+
const items = config.match(/\S+/g);
|
|
10
|
+
return items || classes;
|
|
11
|
+
}
|
|
12
|
+
else if (Array.isArray(config)) {
|
|
13
|
+
for (const i of config) {
|
|
14
|
+
classes.push(...cssNamesToArray(i));
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
else if (typeof config === 'object') {
|
|
18
|
+
if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
|
|
19
|
+
classes.push(config.toString());
|
|
20
|
+
return classes;
|
|
8
21
|
}
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
22
|
+
for (const key in config) {
|
|
23
|
+
if ({}.hasOwnProperty.call(config, key) && config[key]) {
|
|
24
|
+
classes.push(key);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
return classes;
|
|
29
|
+
}
|
|
30
|
+
function replaceCSSClass(template, cssMap) {
|
|
31
|
+
if (template instanceof JSXElement) {
|
|
32
|
+
let { class: className, children } = template.props;
|
|
33
|
+
const css = template.props.css;
|
|
34
|
+
Reflect.deleteProperty(template.props, 'css');
|
|
35
|
+
const scopedClasses = [];
|
|
36
|
+
cssNamesToArray(css).forEach(i => {
|
|
37
|
+
const klass = cssMap[i];
|
|
13
38
|
if (klass) {
|
|
14
|
-
|
|
39
|
+
scopedClasses.push(klass);
|
|
15
40
|
}
|
|
16
41
|
});
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
42
|
+
const c = scopedClasses.join(' ');
|
|
43
|
+
if (c) {
|
|
44
|
+
if (className) {
|
|
45
|
+
className += ' ' + c;
|
|
46
|
+
}
|
|
47
|
+
else {
|
|
48
|
+
className = c;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
if (className) {
|
|
52
|
+
template.props.class = className;
|
|
53
|
+
}
|
|
54
|
+
if (Array.isArray(children)) {
|
|
55
|
+
children.forEach(child => {
|
|
56
|
+
replaceCSSClass(child, cssMap);
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
else {
|
|
60
|
+
replaceCSSClass(children, cssMap);
|
|
61
|
+
}
|
|
20
62
|
}
|
|
21
63
|
}
|
|
22
64
|
function scopedCss(css, factory) {
|
package/bundles/index.js
CHANGED
|
@@ -2,23 +2,65 @@
|
|
|
2
2
|
|
|
3
3
|
var core = require('@viewfly/core');
|
|
4
4
|
|
|
5
|
-
function
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
5
|
+
function cssNamesToArray(config) {
|
|
6
|
+
const classes = [];
|
|
7
|
+
if (!config) {
|
|
8
|
+
return classes;
|
|
9
|
+
}
|
|
10
|
+
if (typeof config === 'string') {
|
|
11
|
+
const items = config.match(/\S+/g);
|
|
12
|
+
return items || classes;
|
|
13
|
+
}
|
|
14
|
+
else if (Array.isArray(config)) {
|
|
15
|
+
for (const i of config) {
|
|
16
|
+
classes.push(...cssNamesToArray(i));
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
else if (typeof config === 'object') {
|
|
20
|
+
if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
|
|
21
|
+
classes.push(config.toString());
|
|
22
|
+
return classes;
|
|
10
23
|
}
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
24
|
+
for (const key in config) {
|
|
25
|
+
if ({}.hasOwnProperty.call(config, key) && config[key]) {
|
|
26
|
+
classes.push(key);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
return classes;
|
|
31
|
+
}
|
|
32
|
+
function replaceCSSClass(template, cssMap) {
|
|
33
|
+
if (template instanceof core.JSXElement) {
|
|
34
|
+
let { class: className, children } = template.props;
|
|
35
|
+
const css = template.props.css;
|
|
36
|
+
Reflect.deleteProperty(template.props, 'css');
|
|
37
|
+
const scopedClasses = [];
|
|
38
|
+
cssNamesToArray(css).forEach(i => {
|
|
39
|
+
const klass = cssMap[i];
|
|
15
40
|
if (klass) {
|
|
16
|
-
|
|
41
|
+
scopedClasses.push(klass);
|
|
17
42
|
}
|
|
18
43
|
});
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
44
|
+
const c = scopedClasses.join(' ');
|
|
45
|
+
if (c) {
|
|
46
|
+
if (className) {
|
|
47
|
+
className += ' ' + c;
|
|
48
|
+
}
|
|
49
|
+
else {
|
|
50
|
+
className = c;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
if (className) {
|
|
54
|
+
template.props.class = className;
|
|
55
|
+
}
|
|
56
|
+
if (Array.isArray(children)) {
|
|
57
|
+
children.forEach(child => {
|
|
58
|
+
replaceCSSClass(child, cssMap);
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
else {
|
|
62
|
+
replaceCSSClass(children, cssMap);
|
|
63
|
+
}
|
|
22
64
|
}
|
|
23
65
|
}
|
|
24
66
|
function scopedCss(css, factory) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@viewfly/scoped-css",
|
|
3
|
-
"version": "0.0.1-alpha.
|
|
3
|
+
"version": "0.0.1-alpha.11",
|
|
4
4
|
"description": "Viewfly is a simple and easy-to-use JavaScript framework with an intuitive development experience",
|
|
5
5
|
"main": "./bundles/index.js",
|
|
6
6
|
"module": "./bundles/index.esm.js",
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"license": "MIT",
|
|
16
16
|
"keywords": [],
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@viewfly/core": "^0.0.1-alpha.
|
|
18
|
+
"@viewfly/core": "^0.0.1-alpha.11"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
21
|
"@rollup/plugin-commonjs": "^23.0.2",
|
|
@@ -35,5 +35,5 @@
|
|
|
35
35
|
"bugs": {
|
|
36
36
|
"url": "https://github.com/viewfly/viewfly.git/issues"
|
|
37
37
|
},
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "38e6182b1ae82b0f9626742507ca7a4583d182f9"
|
|
39
39
|
}
|
package/src/css-modules.ts
CHANGED
|
@@ -1,22 +1,61 @@
|
|
|
1
|
-
import { JSXElement, ComponentSetup
|
|
1
|
+
import { JSXElement, ComponentSetup } from '@viewfly/core'
|
|
2
2
|
|
|
3
|
-
function
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
function cssNamesToArray(config: unknown) {
|
|
4
|
+
const classes: string[] = []
|
|
5
|
+
if (!config) {
|
|
6
|
+
return classes
|
|
7
|
+
}
|
|
8
|
+
if (typeof config === 'string') {
|
|
9
|
+
const items = config.match(/\S+/g)
|
|
10
|
+
return items || classes
|
|
11
|
+
} else if (Array.isArray(config)) {
|
|
12
|
+
for (const i of config) {
|
|
13
|
+
classes.push(...cssNamesToArray(i))
|
|
8
14
|
}
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
15
|
+
} else if (typeof config === 'object') {
|
|
16
|
+
if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
|
|
17
|
+
classes.push(config.toString())
|
|
18
|
+
return classes
|
|
19
|
+
}
|
|
20
|
+
for (const key in config) {
|
|
21
|
+
if ({}.hasOwnProperty.call(config, key) && config[key]) {
|
|
22
|
+
classes.push(key)
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
return classes
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
function replaceCSSClass(template, cssMap: Record<string, string>) {
|
|
30
|
+
if (template instanceof JSXElement) {
|
|
31
|
+
let { class: className, children } = template.props
|
|
32
|
+
const css = template.props.css
|
|
33
|
+
Reflect.deleteProperty(template.props, 'css')
|
|
34
|
+
const scopedClasses: string[] = []
|
|
35
|
+
cssNamesToArray(css).forEach(i => {
|
|
36
|
+
const klass = cssMap[i]
|
|
13
37
|
if (klass) {
|
|
14
|
-
|
|
38
|
+
scopedClasses.push(klass)
|
|
15
39
|
}
|
|
16
40
|
})
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
41
|
+
const c = scopedClasses.join(' ')
|
|
42
|
+
if (c) {
|
|
43
|
+
if (className) {
|
|
44
|
+
className += ' ' + c
|
|
45
|
+
} else {
|
|
46
|
+
className = c
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
if (className) {
|
|
50
|
+
template.props.class = className
|
|
51
|
+
}
|
|
52
|
+
if (Array.isArray(children)) {
|
|
53
|
+
children.forEach(child => {
|
|
54
|
+
replaceCSSClass(child, cssMap)
|
|
55
|
+
})
|
|
56
|
+
} else {
|
|
57
|
+
replaceCSSClass(children, cssMap)
|
|
58
|
+
}
|
|
20
59
|
}
|
|
21
60
|
}
|
|
22
61
|
|