rn-css 1.4.1 → 1.5.0

package/README.md

@@ -2,6 +2,8 @@
 
 This is basically [styled-components](https://github.com/styled-components/styled-components) with a much better support for React-Native, and some awesome additional features. You can check the docs of [styled-components](https://github.com/styled-components/styled-components) for more details about the basic API. I'll focus here on the differences.
 
+**Current version: 1.5** [See the Changelog](./CHANGELOG.md)
+
 ---
 
 ## Purpose
@@ -331,6 +333,14 @@ const View = styled.View`
 
 ---
 
+## Theming:
+
+To match the API of styled-components, we offer the same abilities for theming [See the documentation](https://styled-components.com/docs/advanced).
+
+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.
+
+---
+
 ## Coming later:
 
 linear-gradient, background-repeat, transitions, animations

package/dist/convertStyle.js

@@ -41,8 +41,8 @@ const convertStyle = (rnStyle, units) => {
                 height: convertUnits_1.convertValue(key, rnStyle.textShadowOffset.height || '0', units)
             };
         }
-        // Font family should not be transformed
-        else if (key === 'fontFamily') {
+        // Font family should not be transformed (same as cursor for web in case of base64 value)
+        else if (['cursor', 'fontFamily'].includes(key)) {
             convertedStyle[key] = value;
         }
         else {

package/dist/cssToRN/index.js

@@ -61,8 +61,9 @@ function cssToRNStyle(css, units = {}) {
 exports.cssToRNStyle = cssToRNStyle;
 function cssChunkToStyle(css) {
     const result = {};
-    css.split(/\s*;\s*/mg).forEach((entry) => {
-        const [rawKey, rawValue] = entry.split(':');
+    css.split(/\s*;\s*(?!base64)/mg).forEach((entry) => {
+        const [rawKey, ...rest] = entry.split(':');
+        const rawValue = rest.join(':');
         if (!rawValue)
             return;
         const key = kebab2camel(rawKey.trim());

package/dist/features.js

@@ -59,9 +59,8 @@ const useLayout = (onLayout) => {
         if (unmounted.current)
             return;
         const { width, height } = event.nativeEvent.layout;
-        if (width !== layout.width || height !== layout.height)
-            setLayout({ width, height });
-    }, [onLayout, layout.width, layout.height]);
+        setLayout(layout => layout.width === width && layout.height === height ? layout : { width, height });
+    }, [onLayout]);
     return { onLayout: updateLayout, ...layout };
 };
 exports.useLayout = useLayout;

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import * as RN from 'react-native';
 export { cssToRNStyle } from './cssToRN';
 export { FontSizeContext } from './features';
 export { SharedValue } from './styleComponent';
+export * from './useTheme';
 declare const styled: {
     <T>(Component: React.ComponentType<T>): {
         <S>(chunks: TemplateStringsArray, ...functs: ((string | number | boolean | null | undefined) | ((arg: S & T & {

package/dist/index.js

@@ -18,6 +18,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SharedValue = exports.FontSizeContext = exports.cssToRNStyle = void 0;
 const RN = __importStar(require("react-native"));
@@ -28,6 +31,7 @@ var features_1 = require("./features");
 Object.defineProperty(exports, "FontSizeContext", { enumerable: true, get: function () { return features_1.FontSizeContext; } });
 var styleComponent_2 = require("./styleComponent");
 Object.defineProperty(exports, "SharedValue", { enumerable: true, get: function () { return styleComponent_2.SharedValue; } });
+__exportStar(require("./useTheme"), exports);
 const styled = (Component) => styleComponent_1.default(Component);
 styled.ActivityIndicator = styled(RN.ActivityIndicator);
 styled.Button = styled(RN.Button);

package/dist/useTheme.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const ThemeProvider: ({ theme, children }: {
+    theme: unknown;
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const useTheme: () => unknown;
+export declare const withTheme: <T>(Component: React.ComponentType<T>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<T> & React.RefAttributes<React.Component<{}, {}, any>>>;

package/dist/useTheme.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withTheme = exports.useTheme = exports.ThemeProvider = void 0;
+const react_1 = __importDefault(require("react"));
+const styleComponent_1 = require("./styleComponent");
+const ThemeProvider = ({ theme, children }) => {
+    return react_1.default.createElement(styleComponent_1.SharedValue.Provider, { value: theme }, children);
+};
+exports.ThemeProvider = ThemeProvider;
+const useTheme = () => react_1.default.useContext(styleComponent_1.SharedValue);
+exports.useTheme = useTheme;
+const withTheme = (Component) => {
+    const theme = exports.useTheme();
+    const ThemedComponent = react_1.default.forwardRef((props, ref) => react_1.default.createElement(Component, { ref: ref, theme: theme, ...props }));
+    ThemedComponent.displayName = 'ThemedComponent';
+    return ThemedComponent;
+};
+exports.withTheme = withTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-css",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "scripts": {
     "test": "jest",
     "prepare": "tsc",

package/src/convertStyle.tsx

@@ -42,9 +42,9 @@ const convertStyle = (rnStyle: PartialStyle, units: Units) => {
         height: convertValue(key, rnStyle.textShadowOffset!.height || '0', units) as number
       }
     }
-    // Font family should not be transformed
-    else if (key === 'fontFamily') {
-      convertedStyle[key] = value
+    // Font family should not be transformed (same as cursor for web in case of base64 value)
+    else if (['cursor', 'fontFamily'].includes(key)) {
+      convertedStyle[key as 'fontFamily'] = value
     }
     else {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment

package/src/cssToRN/index.ts

@@ -59,8 +59,9 @@ export function cssToRNStyle (css: string, units: { em?: number, width?: number,
 
 function cssChunkToStyle (css: string) {
   const result: PartialStyle = {}
-  css.split(/\s*;\s*/mg).forEach((entry: string) => {
-    const [rawKey, rawValue] = entry.split(':')
+  css.split(/\s*;\s*(?!base64)/mg).forEach((entry: string) => {
+    const [rawKey, ...rest] = entry.split(':')
+    const rawValue = rest.join(':')
     if (!rawValue) return
     const key = kebab2camel(rawKey.trim())
     const value = stripSpaces(rawValue.trim())// We need this to correctly read calc() values

package/src/features.tsx

@@ -51,8 +51,8 @@ export const useLayout = (onLayout?: (event: LayoutChangeEvent) => void) => {
     if (onLayout) onLayout(event)
     if (unmounted.current) return
     const { width, height } = event.nativeEvent.layout
-    if (width !== layout.width || height !== layout.height) setLayout({ width, height })
-  }, [onLayout, layout.width, layout.height])
+    setLayout(layout => layout.width === width && layout.height === height ? layout : { width, height })
+  }, [onLayout])
   return { onLayout: updateLayout, ...layout }
 }
 

package/src/index.tsx

@@ -4,6 +4,7 @@ import styledComponent, { styledFlatList, styledSectionList, styledVirtualizedLi
 export { cssToRNStyle } from './cssToRN'
 export { FontSizeContext } from './features'
 export { SharedValue } from './styleComponent'
+export * from './useTheme'
 
 const styled = <T, >(Component: React.ComponentType<T>) => styledComponent<T>(Component)
 

package/src/useTheme.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { SharedValue } from './styleComponent'
+
+export const ThemeProvider = ({ theme, children }: { theme: unknown; children: React.ReactNode }) => {
+  return <SharedValue.Provider value={theme}>
+    {children}
+  </SharedValue.Provider>
+}
+
+export const useTheme = () => React.useContext(SharedValue)
+
+export const withTheme = <T, >(Component: React.ComponentType<T>) => {
+  const theme = useTheme()
+  const ThemedComponent = React.forwardRef<React.Component, T>((props: T, ref) => <Component ref={ref} theme={theme} {...props} />)
+  ThemedComponent.displayName = 'ThemedComponent'
+  return ThemedComponent
+}