@viewfly/scoped-css 0.0.2 → 0.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/bundles/css-modules.d.ts +3 -2
- package/bundles/index.esm.js +14 -11
- package/bundles/index.js +13 -9
- package/package.json +3 -3
package/bundles/css-modules.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { ComponentSetup } from '@viewfly/core';
|
|
1
|
+
import { ComponentSetup, JSX } from '@viewfly/core';
|
|
2
2
|
declare module '@viewfly/core' {
|
|
3
3
|
namespace JSX {
|
|
4
4
|
interface Attributes<T extends object> {
|
|
5
|
-
css?:
|
|
5
|
+
css?: JSX.ClassNames;
|
|
6
6
|
}
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
|
+
export declare function getClassNames(config: JSX.ClassNames, cssRecord: Record<string, string>): string;
|
|
9
10
|
export declare function scopedCSS<T extends ComponentSetup>(css: Record<string, string>, factory: T): T;
|
package/bundles/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { JSXElement } from '@viewfly/core';
|
|
1
|
+
import { JSXElement, JSXComponent } from '@viewfly/core';
|
|
2
2
|
|
|
3
3
|
function cssNamesToArray(config) {
|
|
4
4
|
const classes = [];
|
|
@@ -28,18 +28,11 @@ function cssNamesToArray(config) {
|
|
|
28
28
|
return classes;
|
|
29
29
|
}
|
|
30
30
|
function replaceCSSClass(template, cssMap) {
|
|
31
|
-
if (template instanceof JSXElement) {
|
|
31
|
+
if (template instanceof JSXElement || template instanceof JSXComponent) {
|
|
32
32
|
let { class: className, children } = template.props;
|
|
33
33
|
const css = template.props.css;
|
|
34
34
|
Reflect.deleteProperty(template.props, 'css');
|
|
35
|
-
const
|
|
36
|
-
cssNamesToArray(css).forEach(i => {
|
|
37
|
-
const klass = cssMap[i];
|
|
38
|
-
if (klass) {
|
|
39
|
-
scopedClasses.push(klass);
|
|
40
|
-
}
|
|
41
|
-
});
|
|
42
|
-
const c = scopedClasses.join(' ');
|
|
35
|
+
const c = getClassNames(css, cssMap);
|
|
43
36
|
if (c) {
|
|
44
37
|
if (className) {
|
|
45
38
|
className += ' ' + c;
|
|
@@ -61,6 +54,16 @@ function replaceCSSClass(template, cssMap) {
|
|
|
61
54
|
}
|
|
62
55
|
}
|
|
63
56
|
}
|
|
57
|
+
function getClassNames(config, cssRecord) {
|
|
58
|
+
const scopedClasses = [];
|
|
59
|
+
cssNamesToArray(config).forEach(i => {
|
|
60
|
+
const klass = cssRecord[i];
|
|
61
|
+
if (klass) {
|
|
62
|
+
scopedClasses.push(klass);
|
|
63
|
+
}
|
|
64
|
+
});
|
|
65
|
+
return scopedClasses.join(' ');
|
|
66
|
+
}
|
|
64
67
|
function scopedCSS(css, factory) {
|
|
65
68
|
return function (props) {
|
|
66
69
|
const componentRender = factory(props);
|
|
@@ -72,4 +75,4 @@ function scopedCSS(css, factory) {
|
|
|
72
75
|
};
|
|
73
76
|
}
|
|
74
77
|
|
|
75
|
-
export { scopedCSS };
|
|
78
|
+
export { getClassNames, scopedCSS };
|
package/bundles/index.js
CHANGED
|
@@ -30,18 +30,11 @@ function cssNamesToArray(config) {
|
|
|
30
30
|
return classes;
|
|
31
31
|
}
|
|
32
32
|
function replaceCSSClass(template, cssMap) {
|
|
33
|
-
if (template instanceof core.JSXElement) {
|
|
33
|
+
if (template instanceof core.JSXElement || template instanceof core.JSXComponent) {
|
|
34
34
|
let { class: className, children } = template.props;
|
|
35
35
|
const css = template.props.css;
|
|
36
36
|
Reflect.deleteProperty(template.props, 'css');
|
|
37
|
-
const
|
|
38
|
-
cssNamesToArray(css).forEach(i => {
|
|
39
|
-
const klass = cssMap[i];
|
|
40
|
-
if (klass) {
|
|
41
|
-
scopedClasses.push(klass);
|
|
42
|
-
}
|
|
43
|
-
});
|
|
44
|
-
const c = scopedClasses.join(' ');
|
|
37
|
+
const c = getClassNames(css, cssMap);
|
|
45
38
|
if (c) {
|
|
46
39
|
if (className) {
|
|
47
40
|
className += ' ' + c;
|
|
@@ -63,6 +56,16 @@ function replaceCSSClass(template, cssMap) {
|
|
|
63
56
|
}
|
|
64
57
|
}
|
|
65
58
|
}
|
|
59
|
+
function getClassNames(config, cssRecord) {
|
|
60
|
+
const scopedClasses = [];
|
|
61
|
+
cssNamesToArray(config).forEach(i => {
|
|
62
|
+
const klass = cssRecord[i];
|
|
63
|
+
if (klass) {
|
|
64
|
+
scopedClasses.push(klass);
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
return scopedClasses.join(' ');
|
|
68
|
+
}
|
|
66
69
|
function scopedCSS(css, factory) {
|
|
67
70
|
return function (props) {
|
|
68
71
|
const componentRender = factory(props);
|
|
@@ -74,4 +77,5 @@ function scopedCSS(css, factory) {
|
|
|
74
77
|
};
|
|
75
78
|
}
|
|
76
79
|
|
|
80
|
+
exports.getClassNames = getClassNames;
|
|
77
81
|
exports.scopedCSS = scopedCSS;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@viewfly/scoped-css",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"description": "A library for supporting scoped style sheets in the Viewfly framework。",
|
|
5
5
|
"main": "./bundles/index.js",
|
|
6
6
|
"module": "./bundles/index.esm.js",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"license": "MIT",
|
|
13
13
|
"keywords": [],
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@viewfly/core": "^0.0.
|
|
15
|
+
"@viewfly/core": "^0.0.3"
|
|
16
16
|
},
|
|
17
17
|
"devDependencies": {
|
|
18
18
|
"@rollup/plugin-commonjs": "^23.0.2",
|
|
@@ -32,5 +32,5 @@
|
|
|
32
32
|
"bugs": {
|
|
33
33
|
"url": "https://github.com/viewfly/viewfly.git/issues"
|
|
34
34
|
},
|
|
35
|
-
"gitHead": "
|
|
35
|
+
"gitHead": "55152a4c7db778d22e4ed1d8cd648f9800a01992"
|
|
36
36
|
}
|