ink-zone/fower

A utility-first CSS in JS library

fower's Issues

Remax: @fower/remax的ts类型问题

@fower/remax下的View、Text等控件没有代码提示，比如toCenterY toCenterX fontBold等基础Props

React Native flexWrap is not work

文档错别字

https://fower.vercel.app/zh-cn/docs/about-atomic-props
Fower 使用原子属性编写样式，样子 属性最终生成唯一的原子类名，样式只作用当前的 HTML 元素(markup)。
这里样子属性应该为 原子 属性吧

uniapp在小程序中生成css重复

如果一个页面有两个使用同样类的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的样式？

vue 项目 Responsive 样式， 大的Postfix 会被小的覆盖

fower 版本 1.30.0

问题：

1. 官网的那个 响应式样例能够正常生效， 但是在自己的vue项目中永远是小尺寸的设置生效。
2. 同一个尺寸的@media 样式会出现多个

本地项目样式截图：

嵌套样式冲突

如下代码，第一个 Box 生成了 CSS .color-deeppink，内容为空，导致第二个没有样式。

考虑生成类时把子元素也加上？例如生成 span-color-deeppink ?

<div>
  <Box
    css={{
      span: {
        color: 'deeppink',
      },
    }}
  >
    <span>Hi, Fower!</span>
  </Box>
  
  <Box color="deeppink">
    粉色
  </Box>
</div>

文档怎么没有中文了？

RT

@fower/taro的 Switch 组件 color样式在微信小程序无法覆盖

这个组件color样式无法覆盖 表现还是原始的颜色 应该是color属性和原始组件的color属性冲突导致的

Could not find a declaration file for module '@fower/react-native'

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.

[BUG] Taro-H5无法使用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这里兼容下

根据用户config动态生成类型定义

目前的类型定义是在plugin包里写死的, 如果对config进行自定义, ts提示就和config不同步了.

是不是可以把生成types放在用户端, 可以根据不同的config生成不同的类型定义文件

小程序中，有什么办法可以使用熟悉的px大小来开发吗？

平台：remax
输入： <View text-16 fontBold > Steve Jobs </View>
行为预期：字体是16px或者32rpx
实际行为：字体是8px
描述：比如想让字体是14px，要用font-28写法，这行为下textXL得到的实际值是10px，不知是remax的问题还是@fower/remax的问题？

taro端使用错误

版本：
@fower/taro:1.39.0
@tarojs/taro:3.2.13
异常：

怎么样在uniapp中使用

以为只要按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 }

uniapp 打包app时会出现错误

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```

Taro H5 单位转换不正确

打印结果是：

可以看到系统使用的单位是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

not work on taro 3.3.0

bug : taro小程序开发中 ，高度和宽度的自定义属性值与预设属性的表现不一致

taro-cli版本：3.2.8

代码

实际表现

希望可以支持vue3.x (Hope to Support Vue 3.x )

Vue3的编译器更换了
Vue3 's compiler is changed

Animation

A question: how can I add transition and keyframes animation? Is that possible?
Thanks.

vue 项目 使用fower后，webpack 打包 样式缺失

你好， 使用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')
        }
      )
  }

vue里面动态添加的类不起作用

uniapp里面vue文件中，动态添加的类名不起作用，比如 :class={mx-10: isCurrent}, 不知道是不是这种使用方式不对。

Taro中Space Between失效

设置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>

在微信开发者工具中没有对应的子类

Typings with babel

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 工程引入 报错

请问支持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`

Extract CSS while server rendering

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?

SvelteKit: any support for svelte kit?

Hi,
any support for the svelte kit? I couldn't find any example template to add fower preprocess to the svelte.config.js.

Taro H5 shadow原子不生效

fower版本：1.65.0

Taro中产生大量内联样式

写起来是爽了，但是如何优化代码体积那？
能否通过原子类className组合+内联样式的方式来优化代码体积？
能否像taillwind那样可以purge未用到的原子类，进一步精简代码？
这是目前在我们项目中使用fower的几个痛点，还请指教。

允许自定义 css 属性的名称

我们的项目原来使用 emotion，现在加入了 fower。

在 emotion 中，所有组件的 css (https://emotion.sh/docs/css-prop) 属性会被转换为 className。所以 Box 组件的 css 属性也会被转换，导致 Box 的样式失效。

为了解决这个问题，希望 fower 能够自定义 css 属性的名称，例如可以通过 setConfig 更改为 sx。

sx 在实际中也有很多类库在使用，例如

• https://theme-ui.com/sx-prop/
• https://mui.com/zh/system/the-sx-prop/
• https://primer.style/react/overriding-styles
• https://chakra-ui.com/docs/features/the-sx-prop

长远的看，例如 v2 版，还可以考虑将 css 改为 sx，sx 表示动态生成的样式。

TS types not working

Simply not working 😄

Versions
"@fower/react-native": "^1.20.0",
"typescript": "~4.3.2"

微信小程序真机调试异常（Taro）

调试工具上显示正常，真机调试时提示异常。

系统：IOS14.3
依赖：

• "@fower/taro": 1.39.1
• "@tarojs/taro": 3.2.13
  

Svelte Rollup waiting for changes forever

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(),
}),

remax中的 web 模式p-10 w-160无效，微信小程序测试有效！

  <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>

example-vue-vite is broken

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.