ink-zone / fower Goto Github PK
View Code? Open in Web Editor NEWA utility-first CSS in JS library
Home Page: https://fower.vercel.app
License: MIT License
A utility-first CSS in JS library
Home Page: https://fower.vercel.app
License: MIT License
你好, 使用fower后,webpack打包的时候还需要额外配置什么吗?
现在的情况是:
按照文档 安装了fower/vue 和 fower/vue-template-compiler,
和 配置了vue-loader, 开发时启动的devServer, fower的样式能够正常显示, 但是npm run build 打包后, fower相关的样式就丢失了。
fower相关的属性还在,但是class里面不会有对应的class。
vue.config.js的相关配置如下:
parallel: false,
configureWebpack:(config)=>{
config.name=name
if (!production) { // 开发环境配置
config.devtool = 'eval-source-map'
}
Object.assign(config, { // 开发生产共同配置
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': path.resolve(__dirname, './src')//设置路径别名
}
}
})
},
chainWebpack(config) {
// it can improve the speed of the first screen, it is recommended to turn on preload
config.plugin('preload').tap(() => [
{
rel: 'preload',
// to ignore runtime.js
// https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
include: 'initial'
}
])
// when there are many pages, it will cause too many meaningless requests
config.plugins.delete('prefetch')
config.module
.rule('vue')
.use('vue-loader')
.tap((options) => {
options.compiler = require('@fower/vue-template-compiler')
return options
})
.end()
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
//用于配置elementui
config.module
.rule('thejs')
.test(/\.js$/)
.include
.add(path.resolve('src'))
.add(path.resolve('node_modules/element-ui/packages'))
.end()
.use('babel-loader')
.loader('babel-loader')
.end()
config
.when(process.env.NODE_ENV !== 'development',
config => {
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [{
// `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/
}])
.end()
config
.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // only package third parties that are initially dependent
},
elementUI: {
name: 'chunk-elementUI', // split elementUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true
}
}
})
// https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
config.optimization.runtimeChunk('single')
}
)
}
uniapp里面vue文件中,动态添加的类名不起作用,比如 :class={mx-10: isCurrent}, 不知道是不是这种使用方式不对。
A question: how can I add transition and keyframes animation? Is that possible?
Thanks.
https://fower.vercel.app/zh-cn/docs/about-atomic-props
Fower 使用原子属性编写样式,样子
属性最终生成唯一的原子类名,样式只作用当前的 HTML 元素(markup)。
这里样子属性应该为 原子
属性吧
h5和小程序没问题
index.vue里只有一行代码
<template>
<view class="p-20 shadow bgRed">app demo</view>
</template>
23:35:05.886 [Vue warn]: Error in directive css bind hook: "TypeError: Cannot convert undefined or null to object"
23:35:05.927 (found at pages/index/index.vue:1)
23:35:05.948 TypeError: Cannot convert undefined or null to object```
平台:remax
输入: <View text-16 fontBold > Steve Jobs </View>
行为预期:字体是16px或者32rpx
实际行为:字体是8px
描述:比如想让字体是14px,要用font-28写法,这行为下textXL得到的实际值是10px,不知是remax的问题还是@fower/remax的问题?
设置spaceY-10
<View
p="20px 0"
column
alignItems=""
css={{ view: { m: "10px 0" } }}
spaceY-10
>
<View>
<Text text3XL fontBold>
{props.title}
</Text>
</View>
<View>
<Text text3XL mb-20>
扫描下方二维码加入本课程哦
</Text>
</View>
</View>
在微信开发者工具中没有对应的子类
RT
First of all, thank you for this great package :)
When trying to use the @fower/react-native package, i get an declaration missing error with the @fower/react-native types :
In the package.json of the pusblished package, i notice the typings is pointing on an missing file...
The typing types/index.d.ts is missing (seems to be ignored on publish), or located in the wrong folder dist/
Thank you for your help.
可以看到系统使用的单位是rpx。实际是rpx在Taro几个环境中不总是兼容的,例如Taro-H5、Taro-RN就没有这种单位。
看了下源码,貌似有一个没公开的配置叫 transformUnit,taro的preset可能使用transformUnit来转换会比较好:
import { Theme } from '@fower/core'
import { Preset } from '@fower/core'
import Taro from '@tarojs/taro';
import { plugins } from './plugins'
import { theme } from './theme'
export const presetTaro: Preset = {
unit: 'rpx',
transformUnit: Taro.pxTransform,
inline: true,
theme: theme as Theme,
plugins,
}
export default presetTaro
如果一个页面有两个使用同样类的view
,会出现这种情况,比如
<view bgBlue500 w-750>
bgBlue500 p20
</view>
<view bgBlue500 w-375>
bgBlue500 p20
</view>
.bgBlue500 {
background-color: #339af0;
}
.w-375 {
width: 375rpx;
}
.dark .bgBlue400--dark {
background-color: #4dabf7;
}
.bgBlue500 {
background-color: #339af0;
}
.w-750 {
width: 750rpx;
}
.dark .bgBlue400--dark {
background-color: #4dabf7;
}
可以看到生成的bgBlue500
有两个,而且还生成了dark的样式?
如题,在taro中,使用setTheme自定义主题色之后,自定义的标签会存在类型错误提示。如何编写相关类型声明?
setTheme({
colors: {
primaryColor: '#333'
}
})
错误提示:不能将类型“{ children: string; primaryColor: true; "text-36": true; fontBold: true; }”分配给类型“IntrinsicAttributes & ((ViewProps & AtomicProps & InjectedProps) | (ViewProps & { children?: ReactNode; } & AtomicProps & InjectedProps))”。
类型“IntrinsicAttributes & ((ViewProps & AtomicProps & InjectedProps) | (ViewProps & { children?: ReactNode; } & AtomicProps & InjectedProps))”上不存在属性“primaryColor”。
Vue3的编译器更换了
Vue3 's compiler is changed
<View p-10 w-160 bgWhite rounded-10 shadow>
<View ml-10>
<View textXL fontBold>
Steve Jobs
</View>
<Text gray800>Co-founder of Apple Inc.</Text>
</View>
</View>
</View>
写起来是爽了,但是如何优化代码体积那?
能否通过原子类className组合+内联样式的方式来优化代码体积?
能否像taillwind那样可以purge未用到的原子类,进一步精简代码?
这是目前在我们项目中使用fower的几个痛点,还请指教。
报错:
⚠️ Compiled with warnings.
./node_modules/@fower/taro/dist/taro.esm.js 82:37-49
"export 'LivePusher' (imported as 'LivePusher$1') was not found in '@tarojs/components'
./node_modules/@fower/taro/dist/taro.esm.js 92:35-45
"export 'PageMeta' (imported as 'PageMeta$1') was not found in '@tarojs/components'
Taro的H5导出时的确没LivePusher这种组件的,可能要fower这里兼容下
With styled-components if you load a site in Next.js for ex and have it setup correctly, the page will look correct even with JavaScript disabled. Can we get something like that in Fower, is it planned?
On Node.js v15.8.0 npm install
gave me the following log:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vue
npm ERR! vue@"^3.0.5" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^2.6.11" from @fower/[email protected]
npm ERR! node_modules/@fower/vue
npm ERR! @fower/vue@"^1.15.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
I have added the fowerSveltePreprocess in rollup.config.js, but svelte goes to the waiting mode [ waiting for changes... ] and doesn't respond. I am using:
"@fower/svelte-preprocess": "^1.66.0" and "svelte": "^3.0.0"
plugins: [
svelte({
compilerOptions: {
// enable run-time checks when not in production
dev: !production,
},
preprocess: fowerSveltePreprocess(),
}),
目前的类型定义是在plugin包里写死的, 如果对config进行自定义, ts提示就和config不同步了.
是不是可以把生成types放在用户端, 可以根据不同的config生成不同的类型定义文件
@fower/remax下的View、Text等控件没有代码提示,比如toCenterY toCenterX fontBold等基础Props
Hi @forsigner I'm integrating fower into my project and would like to use the babel preset approach.
I noticed that the typings themself were not working as described in the docs as it seems that it does not pickup all AtomicProps interface declarations.
I added import { Box } from "@fower/react"
to index.d.ts
which in turn references
/// <reference types="react" />
/// <reference types="@fower/types" />
/// <reference types="fower-plugin-appearance" />
/// <reference types="fower-plugin-background" />
/// <reference types="fower-plugin-border" />
/// <reference types="fower-plugin-box-alignment" />
/// <reference types="fower-plugin-color" />
/// <reference types="fower-plugin-display" />
...
maybe it is necessary to reference these types in @fower/types as well?
请问支持expo吗, 根据tutorial尝试显示ProfileCard 报错:
`TypeError: Object.entries requires that input parameter not be null or undefined
This error is located at:
in StyledComponent (at FowerTest.js:7)
in ProfileCard (at CustomerDetailScreen.js:213)
in RCTView (at View.js:34)
in View (at CustomerDetailScreen.js:147)
in RCTScrollContentView (at ScrollView.js:1124)
in RCTScrollView (at ScrollView.js:1260)
in ScrollView (at ScrollView.js:1286)
in ScrollView (at KeyboardAwareHOC.js:519)
in KeyboardAwareScrollView (at CustomerDetailScreen.js:146)
in RCTView (at View.js:34)
in View (at CustomerDetailScreen.js:144)
in CustomerDetailScreen (at SceneView.tsx:122)
in StaticContainer
in StaticContainer (at SceneView.tsx:115)
in EnsureSingleNavigator (at SceneView.tsx:114)
in SceneView (at useDescriptors.tsx:153)
in RCTView (at View.js:34)
in View (at CardContainer.tsx:245)
in RCTView (at View.js:34)
in View (at CardContainer.tsx:244)
in RCTView (at View.js:34)
in View (at CardSheet.tsx:33)
in ForwardRef(CardSheet) (at Card.tsx:573)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
in PanGestureHandler (at GestureHandlerNative.tsx:13)
in PanGestureHandler (at Card.tsx:549)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
in RCTView (at View.js:34)
in View (at Card.tsx:538)
in Card (at CardContainer.tsx:206)
in CardContainer (at CardStack.tsx:623)
in RNSScreen (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at src/index.native.tsx:147)
in Screen (at Screens.tsx:74)
in MaybeScreen (at CardStack.tsx:616)
in RNSScreenContainer (at src/index.native.tsx:186)
in ScreenContainer (at Screens.tsx:50)
in MaybeScreenContainer (at CardStack.tsx:498)
in CardStack (at StackView.tsx:462)
in KeyboardManager (at StackView.tsx:458)
in SafeAreaProviderCompat (at StackView.tsx:455)
in RCTView (at View.js:34)
in View (at StackView.tsx:454)
in StackView (at createStackNavigator.tsx:87)
in StackNavigator (at AppNavigator.js:77)
in MainFlow (at SceneView.tsx:122)
in StaticContainer
in StaticContainer (at SceneView.tsx:115)
in EnsureSingleNavigator (at SceneView.tsx:114)
in SceneView (at useDescriptors.tsx:153)
in RCTView (at View.js:34)
in View (at CardContainer.tsx:245)
in RCTView (at View.js:34)
in View (at CardContainer.tsx:244)
in RCTView (at View.js:34)
in View (at CardSheet.tsx:33)
in ForwardRef(CardSheet) (at Card.tsx:573)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
in PanGestureHandler (at GestureHandlerNative.tsx:13)
in PanGestureHandler (at Card.tsx:549)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
in RCTView (at View.js:34)
in View (at Card.tsx:538)
in Card (at CardContainer.tsx:206)
in CardContainer (at CardStack.tsx:623)
in RNSScreen (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at src/index.native.tsx:147)
in Screen (at Screens.tsx:74)
in MaybeScreen (at CardStack.tsx:616)
in RNSScreenContainer (at src/index.native.tsx:186)
in ScreenContainer (at Screens.tsx:50)
in MaybeScreenContainer (at CardStack.tsx:498)
in CardStack (at StackView.tsx:462)
in KeyboardManager (at StackView.tsx:458)
in SafeAreaProviderCompat (at StackView.tsx:455)
in RCTView (at View.js:34)
in View (at StackView.tsx:454)
in StackView (at createStackNavigator.tsx:87)
in StackNavigator (at AppNavigator.js:124)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409)
in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
in ThemeProvider (at NavigationContainer.tsx:90)
in ForwardRef(NavigationContainer) (at AppNavigator.js:116)
in AppNavigator (at RootScreen.js:76)
in RCTView (at View.js:34)
in View (at RootScreen.js:74)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at src/index.tsx:85)
in SafeAreaView (at RootScreen.js:70)
in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)
in SafeAreaProvider (at RootScreen.js:69)
in RCTView (at View.js:34)
in View (at RootScreen.js:68)
in ThemeProvider (at Provider.tsx:83)
in RCTView (at View.js:34)
in View (at PortalHost.tsx:125)
in Portal.Host (at Provider.tsx:81)
in Provider (at RootScreen.js:67)
in RootScreen (at App.js:96)
in Provider (at App.js:95)
in App (created by ExpoRoot)
in ExpoRoot (at renderApplication.js:45)
in RCTView (at View.js:34)
in View (at AppContainer.js:106)
in ChildrenWrapper (at wrapRootComponent.js:9)
in default (at wrapRootComponent.js:8)
in Root (created by PatchedProviderComponent)
in DevAppContainer (created by PatchedProviderComponent)
in PatchedProviderComponent (at AppContainer.js:121)
in RCTView (at View.js:34)
in View (at AppContainer.js:132)
in AppContainer (at renderApplication.js:39)
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:43:2 in showErrorDialog
at [native code]:null in commitRootImpl
at [native code]:null in performSyncWorkOnRoot
at [native code]:null in dispatchAction
at node_modules/@react-navigation/core/src/useSyncState.tsx:39:22 in React.useCallback$argument_0
at node_modules/@react-navigation/core/src/SceneView.tsx:69:14 in React.useCallback$argument_0
at node_modules/@react-navigation/core/src/useOnAction.tsx:105:20 in React.useCallback$argument_0
at node_modules/@react-navigation/core/src/useNavigationHelpers.tsx:45:30 in dispatch
at node_modules/@react-navigation/core/src/BaseNavigationContainer.tsx:144:41 in listeners.focus.$argument_0
at node_modules/@react-navigation/core/src/useFocusedListenersChildrenAdapter.tsx:34:48 in React.useCallback$argument_0
at node_modules/@react-navigation/core/src/useFocusedListenersChildrenAdapter.tsx:27:46 in React.useCallback$argument_0
at node_modules/@react-navigation/core/src/BaseNavigationContainer.tsx:144:6 in dispatch
at src/navigation/RootNavigation.js:8:15 in AppNav.navigate
at src/screens/search/SearchScreen.js:116:20 in searchCustomer
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue`
我们的项目原来使用 emotion
,现在加入了 fower
。
在 emotion
中,所有组件的 css
(https://emotion.sh/docs/css-prop) 属性会被转换为 className
。所以 Box
组件的 css
属性也会被转换,导致 Box
的样式失效。
为了解决这个问题,希望 fower
能够自定义 css
属性的名称,例如可以通过 setConfig
更改为 sx
。
sx
在实际中也有很多类库在使用,例如
长远的看,例如 v2 版,还可以考虑将 css
改为 sx
,sx
表示动态生成的样式。
以为只要按vue的方式就行了,发现不可以,报错了
Failed to compile.
./src/App.vue?vue&type=template&id=472cff63& (./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader??ref--14-0!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/filter-modules-template.js!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/page-meta.js!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib??vue-loader-options!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-scoped-loader!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/wrap-loader??ref--17!./src/App.vue?vue&type=template&id=472cff63&) 14:52
Module parse failed: Export 'components' is not defined (14:52)
File was processed with these loaders:
* ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js
* ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js
* ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/filter-modules-template.js
* ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/page-meta.js
* ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js
* ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-scoped-loader/index.js
* ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/wrap-loader/index.js
You may need an additional loader to handle the result of these loaders.
| render._withStripped = true
|
> export { render, staticRenderFns, recyclableRender, components }
Hi,
any support for the svelte kit? I couldn't find any example template to add fower preprocess to the svelte.config.js.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.