rn-css 1.6.17 → 1.6.19-0

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# Changelog
+
+## Version 1.6
+
+ * Creation of RemContext to control rem units value
+ * Important performance fix (500% faster!)
+
+## Version 1.5
+
+ * Add Theming features with the same [API](https://styled-components.com/docs/advanced) as `styled-components` lib.
+ * Remove support for deprecated components: *ListView*, *SwipeableListView*, *TabBarIOS*, *ToolbarAndroid* and *ViewPagerAndroid*
+ * Fix font-weight to accept numeric values
+
+## Version 1.4
+
+ * Change the type of `rnCSS` from `string` to `${string};` to ensure that it will end with a semicolon

package/README.md

@@ -347,6 +347,22 @@ To match the API of styled-components, we offer the same abilities for theming [
 
 This relies on the [SharedValue](#shared-value) context. This means that you cannot use the Shared Value system **and** this theming système. Pick the one that best suits your needs.
 
+### Custom theme type for typescript
+
+When you use the theme prop in your components, it is initially typed as `unknown`. But you can make it follow your custom type by extending the type declaration of **rn-css**. You will need to create a file `rncss.d.ts` in the `src` of your project root and add the following lines:
+
+```ts
+import 'rn-css';
+
+declare module 'rn-css' {
+  type MyTheme = {
+    // Describe your theme here.
+    // Alternatively, you can use: `type MyTheme = typeof theme` if you have a fixed `theme` object.
+  }
+  export interface DefaultTheme extends MyTheme {}
+}
+```
+
 ---
 
 ## Coming later:

package/dist/cssToRN/index.js

@@ -48,9 +48,9 @@ function cssToRNStyle(css, units = {}) {
         height: 100,
         rem: 16,
         px: 1,
-        pt: 72 / 96,
+        pt: 96 / 72,
         in: 96,
-        pc: 9,
+        pc: 16,
         cm: 96 / 2.54,
         mm: 96 / 25.4,
         ...units

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import * as RN from 'react-native';
 import './polyfill';
 export { cssToRNStyle } from './cssToRN';
-export { SharedValue, FontSizeContext, RemContext } from './styleComponent';
+export { SharedValue, FontSizeContext, RemContext, DefaultTheme } from './styleComponent';
 export * from './useTheme';
 declare const styled: {
     <T>(Component: React.ComponentType<T>): {

package/dist/styleComponent.d.ts

@@ -5,11 +5,12 @@ export declare const defaultUnits: Units;
 export declare const RemContext: React.Context<number>;
 export declare const FontSizeContext: React.Context<number>;
 export declare const SharedValue: React.Context<unknown>;
+export declare type DefaultTheme = unknown;
 declare type Primitive = number | string | null | undefined | boolean;
 declare type Functs<T> = (arg: T & {
     rnCSS?: string;
     shared: unknown;
-    theme: unknown;
+    theme: DefaultTheme;
 }) => Primitive;
 declare type OptionalProps = {
     rnCSS?: `${string};`;

package/dist/useTheme.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
+import { DefaultTheme } from './styleComponent';
 /** Provider for the theme. */
 export declare const ThemeProvider: ({ theme, children }: {
-    theme: unknown;
+    theme: DefaultTheme;
     children: React.ReactNode;
 }) => JSX.Element;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-css",
-  "version": "1.6.17",
+  "version": "1.6.19-0",
   "scripts": {
     "test": "jest",
     "prepare": "tsc",
@@ -49,7 +49,7 @@
     "react-native-typescript-transformer": "^1.2.13",
     "react-native-web": "^0.17.7",
     "react-test-renderer": "17.0.2",
-    "release-it": "^14.11.8",
+    "release-it": "^15.6.0",
     "ts-jest": "^27.1.1",
     "ts-loader": "^9.2.6",
     "typescript": "^4.5.4",

package/src/cssToRN/index.ts

@@ -46,9 +46,9 @@ export function cssToRNStyle (css: string, units: { em?: number, width?: number,
     height: 100,
     rem: 16,
     px: 1,
-    pt: 72 / 96,
+    pt: 96 / 72,
     in: 96,
-    pc: 9,
+    pc: 16,
     cm: 96 / 2.54,
     mm: 96 / 25.4,
     ...units

package/src/index.tsx

@@ -3,7 +3,7 @@ import * as RN from 'react-native'
 import './polyfill'
 import styledComponent, { styledFlatList, styledSectionList, styledVirtualizedList } from './styleComponent'
 export { cssToRNStyle } from './cssToRN'
-export { SharedValue, FontSizeContext, RemContext } from './styleComponent'
+export { SharedValue, FontSizeContext, RemContext, DefaultTheme } from './styleComponent'
 export * from './useTheme'
 
 const styled = <T, >(Component: React.ComponentType<T>) => styledComponent<T>(Component)

package/src/styleComponent.tsx

@@ -15,8 +15,10 @@ export const FontSizeContext = React.createContext(defaultUnits.em)
 // We use this to share value within the component (Theme, Translation, whatever)
 export const SharedValue = React.createContext<unknown>(undefined)
 
+export type DefaultTheme = unknown
+
 type Primitive = number | string | null | undefined | boolean
-type Functs<T> = (arg: T & { rnCSS?: string; shared: unknown, theme: unknown }) => Primitive
+type Functs<T> = (arg: T & { rnCSS?: string; shared: unknown, theme: DefaultTheme }) => Primitive
 type OptionalProps = {
   rnCSS?: `${string};`;
   onMouseEnter?: (event: MouseEvent) => void;

package/src/useTheme.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { SharedValue } from './styleComponent'
+import { DefaultTheme, SharedValue } from './styleComponent'
 
 /** Provider for the theme. */
-export const ThemeProvider = ({ theme, children }: { theme: unknown; children: React.ReactNode }) => {
+export const ThemeProvider = ({ theme, children }: { theme: DefaultTheme; children: React.ReactNode }) => {
   return <SharedValue.Provider value={theme}>
     {children}
   </SharedValue.Provider>