@viewfly/scoped-css 0.0.1-alpha.10 → 0.0.1-alpha.12

package/README.md

@@ -1,4 +1,39 @@
 Viewfly
 ================================
 
-Viewfly 是一个简单、数据驱动的前端视图库，完整文档请参考官方网站：[viewfly.org](https://viewfly.org)
+Viewfly 是一个简单、数据驱动的前端视图库。此包为 Viewfly 组件提供了 css 模块化的能力。
+
+要使用 css 模块化能力，还需要在 webpack 配置中 css loader 的模块化支持，具体可参考相关文档。
+
+## 安装
+```
+npm install @viewfly/scoped-css
+```
+
+## API
+
+### scopedCSS()
+
+```css
+/* app.module.css */
+.app {
+  color: blue
+}
+```
+
+```jsx
+import { scopedCSS } from '@viewfly/scoped-css'
+
+import css from './app.module.css'
+
+const App = scopedCSS(css, () => {
+  return () => {
+    return <div css="app">App</div>
+  }
+})
+```
+
+scopedCSS 通过会识别标签的 css 属性，并替换为模拟化的 css class 类名。css 不仅可以支持字符串，还可以支持对象、数组、或数组内对象的组合。
+
+
+完整文档请参考官方网站：[viewfly.org](https://viewfly.org)

package/bundles/css-modules.d.ts

@@ -1,2 +1,2 @@
 import { ComponentSetup } from '@viewfly/core';
-export declare function scopedCss<T extends ComponentSetup>(css: Record<string, string>, factory: T): T;
+export declare function scopedCSS<T extends ComponentSetup>(css: Record<string, string>, factory: T): T;

package/bundles/index.esm.js

@@ -61,7 +61,7 @@ function replaceCSSClass(template, cssMap) {
         }
     }
 }
-function scopedCss(css, factory) {
+function scopedCSS(css, factory) {
     return function (props) {
         const componentRender = factory(props);
         return function () {
@@ -72,4 +72,4 @@ function scopedCss(css, factory) {
     };
 }
 
-export { scopedCss };
+export { scopedCSS };

package/bundles/index.js

@@ -63,7 +63,7 @@ function replaceCSSClass(template, cssMap) {
         }
     }
 }
-function scopedCss(css, factory) {
+function scopedCSS(css, factory) {
     return function (props) {
         const componentRender = factory(props);
         return function () {
@@ -74,4 +74,4 @@ function scopedCss(css, factory) {
     };
 }
 
-exports.scopedCss = scopedCss;
+exports.scopedCSS = scopedCSS;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/scoped-css",
-  "version": "0.0.1-alpha.10",
+  "version": "0.0.1-alpha.12",
   "description": "Viewfly is a simple and easy-to-use JavaScript framework with an intuitive development experience",
   "main": "./bundles/index.js",
   "module": "./bundles/index.esm.js",
@@ -15,7 +15,7 @@
   "license": "MIT",
   "keywords": [],
   "dependencies": {
-    "@viewfly/core": "^0.0.1-alpha.10"
+    "@viewfly/core": "^0.0.1-alpha.12"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^23.0.2",
@@ -35,5 +35,5 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "6e542df7602aec6a451b2db9a89928ad8bb9f05a"
+  "gitHead": "e5fdc69779bbfd6a1128b98a30d8732dbda7fcd3"
 }

package/src/css-modules.ts

@@ -59,7 +59,7 @@ function replaceCSSClass(template, cssMap: Record<string, string>) {
   }
 }
 
-export function scopedCss<T extends ComponentSetup>(css: Record<string, string>, factory: T): T {
+export function scopedCSS<T extends ComponentSetup>(css: Record<string, string>, factory: T): T {
   return function (props: any) {
     const componentRender = factory(props)
     return function () {