react-native-css 2.1.1 → 3.0.0-nightly.19372e8

package/src/runtime/web/api.ts

@@ -0,0 +1,88 @@
+import { createElement, type ComponentProps } from "react";
+import { Appearance } from "react-native";
+
+import type {
+  ColorScheme,
+  Props,
+  StyledConfiguration,
+  StyledOptions,
+  StyledProps,
+} from "../runtime.types";
+import type { ReactComponent } from "../utils";
+import { assignStyle } from "./assign-style";
+
+export const styled = <
+  const C extends ReactComponent,
+  const M extends StyledConfiguration<C>,
+>(
+  baseComponent: C,
+  mapping: M,
+  _options?: StyledOptions,
+) => {
+  return (props: StyledProps<ComponentProps<C>, M>) => {
+    return useCssElement(baseComponent, mapping, props);
+  };
+};
+
+export const useCssElement = <const C extends ReactComponent>(
+  component: C,
+  incomingProps: Props,
+  mapping: StyledConfiguration<C>,
+) => {
+  let props = { ...incomingProps };
+
+  for (const [key, value] of Object.entries(mapping)) {
+    const source: unknown = props[key];
+    if (!source) {
+      continue;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+    delete props[key];
+
+    let target: string | boolean =
+      typeof value === "object" ? value.target : value;
+
+    if (typeof target === "boolean") {
+      target = key;
+    }
+
+    props = assignStyle(
+      { $$css: true, [key]: source },
+      target.split("."),
+      props,
+    );
+  }
+
+  return createElement(component, props);
+};
+
+export const colorScheme: ColorScheme = {
+  get() {
+    return Appearance.getColorScheme();
+  },
+  set(name) {
+    Appearance.setColorScheme(name);
+  },
+};
+
+export function vars(variables: Record<`--${string}`, string | number>) {
+  const $variables: Record<string, string> = {};
+
+  for (const [key, value] of Object.entries(variables)) {
+    if (key.startsWith("--")) {
+      $variables[key] = value.toString();
+    } else {
+      $variables[`--${key}`] = value.toString();
+    }
+  }
+  return $variables;
+}
+
+export const useNativeVariable = () => {
+  throw new Error("useNativeVariable is not supported in web");
+};
+
+export const useUnstableNativeVariable = () => {
+  throw new Error("useUnstableNativeVariable is not supported in web");
+};

package/src/runtime/web/assign-style.ts

@@ -0,0 +1,26 @@
+/* eslint-disable */
+export function assignStyle(
+  value: Record<string, any>,
+  targets: string[],
+  props: Record<string, any>,
+) {
+  const target = targets.shift();
+
+  if (!target) return {};
+
+  if (targets.length === 0) {
+    if (typeof props[target] === "function") {
+      const cb = props[target];
+      props[target] = (...args: any[]) => {
+        return [cb(...args), value];
+      };
+    } else {
+      props[target] = [props[target], value];
+    }
+    return props;
+  } else {
+    props[target] ??= {};
+    assignStyle(value, targets, props[target]);
+    return props;
+  }
+}

package/src/runtime/web/index.ts

@@ -0,0 +1,5 @@
+// Import this file for Metro to override
+import "./metro";
+
+export type * from "../runtime.types";
+export * from "./api";

package/src/runtime/web/metro.ts

@@ -0,0 +1,2 @@
+// This file will be overwritten by Metro
+export {};

package/types.d.ts

@@ -0,0 +1,70 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import type {
+  ScrollViewProps,
+  ScrollViewPropsAndroid,
+  ScrollViewPropsIOS,
+  Touchable,
+  VirtualizedListProps,
+} from "react-native";
+
+declare module "@react-native/virtualized-lists" {
+  export interface VirtualizedListWithoutRenderItemProps<ItemT>
+    extends ScrollViewProps {
+    ListFooterComponentClassName?: string;
+    ListHeaderComponentClassName?: string;
+  }
+}
+
+declare module "react-native" {
+  interface ScrollViewProps
+    extends ViewProps,
+      ScrollViewPropsIOS,
+      ScrollViewPropsAndroid,
+      Touchable {
+    contentContainerClassName?: string;
+    indicatorClassName?: string;
+  }
+  interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
+    columnWrapperClassName?: string;
+  }
+  interface ImageBackgroundProps extends ImagePropsBase {
+    imageClassName?: string;
+  }
+  interface ImagePropsBase {
+    className?: string;
+    cssInterop?: boolean;
+  }
+  interface ViewProps {
+    className?: string;
+    cssInterop?: boolean;
+  }
+  interface TextInputProps {
+    placeholderClassName?: string;
+  }
+  interface TextProps {
+    className?: string;
+    cssInterop?: boolean;
+  }
+  interface SwitchProps {
+    className?: string;
+    cssInterop?: boolean;
+  }
+  interface InputAccessoryViewProps {
+    className?: string;
+    cssInterop?: boolean;
+  }
+  interface TouchableWithoutFeedbackProps {
+    className?: string;
+    cssInterop?: boolean;
+  }
+  interface StatusBarProps {
+    className?: string;
+    cssInterop?: boolean;
+  }
+  interface KeyboardAvoidingViewProps extends ViewProps {
+    contentContainerClassName?: string;
+  }
+  interface ModalBaseProps {
+    presentationClassName?: string;
+  }
+}

package/.babelrc

@@ -1,8 +0,0 @@
-{
-    "presets": [
-        "es2015"
-    ],
-    "plugins": [
-        "transform-object-rest-spread"
-    ]
-}

package/.editorconfig

@@ -1,17 +0,0 @@
-# http://editorconfig.org
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[test/fixtures/*]
-insert_final_newline = false
-trim_trailing_whitespace = false

package/.eslintignore

@@ -1,3 +0,0 @@
-.babelrc
-node_modules
-build

package/.eslintrc

@@ -1,39 +0,0 @@
-{
-  "extends": "airbnb",
-  "parser": "babel-eslint",
-  "rules": {
-    "comma-dangle": 0,
-    "import/no-extraneous-dependencies": 0,
-    "import/extensions": 0,
-    "import/no-unresolved": 0,
-    "import/prefer-default-export": 0,
-		"import/first": 0,
-		"no-loop-func": 0,
-    "strict": 0,
-    "no-plusplus": 0,
-    "no-param-reassign": 0,
-    "no-multi-assign": 0,
-    "no-useless-escape": 0,
-    "no-restricted-syntax": 0,
-    "no-continue": 1,
-    "radix": 1,
-		"no-use-before-define": 0
-  },
-  "ecmaFeatures": {
-    "classes": true
-  },
-  "parserOptions":{
-    "ecmaFeatures": {
-      "experimentalObjectRestSpread": true
-    }
-  },
-  "globals": {
-    "expect": true,
-    "browser": true,
-    "sinon": true
-  },
-  "env": {
-    "mocha": true,
-    "amd": true
-  }
-}

package/.npmignore

@@ -1,7 +0,0 @@
-node_modules
-node_modules/
-test/fixtures/*.js
-.DS_STORE
-.idea
-npm-debug.log
-.vscode

package/build/index.js

@@ -1,294 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = toJSS;
-
-var _parse = require('css/lib/parse');
-
-var _parse2 = _interopRequireDefault(_parse);
-
-var _toCamelCase = require('to-camel-case');
-
-var _toCamelCase2 = _interopRequireDefault(_toCamelCase);
-
-var _lodash = require('lodash.get');
-
-var _lodash2 = _interopRequireDefault(_lodash);
-
-var _lodash3 = require('lodash.set');
-
-var _lodash4 = _interopRequireDefault(_lodash3);
-
-var _utils = require('./utils');
-
-var _utils2 = _interopRequireDefault(_utils);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function toJSS(css) {
-  for (var _len = arguments.length, values = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    values[_key - 1] = arguments[_key];
-  }
-
-  var stylesheetString = Array.isArray(css) ? _utils.handleTags.apply(undefined, [css].concat(values)) : css;
-
-  var _ParseCSS = (0, _parse2.default)(_utils2.default.clean(stylesheetString)),
-      stylesheet = _ParseCSS.stylesheet;
-
-  var directions = ['top', 'right', 'bottom', 'left'];
-  var changeArr = ['margin', 'padding', 'border-width', 'border-radius'];
-  var numberize = ['width', 'height', 'font-size', 'line-height'].concat(directions);
-  // special properties and shorthands that need to be broken down separately
-  var specialProperties = {};
-  ['border', 'border-top', 'border-right', 'border-bottom', 'border-left'].forEach(function (name) {
-    specialProperties[name] = {
-      regex: /^\s*([0-9]+)(px)?\s+(solid|dotted|dashed)?\s*([a-z0-9#,\(\)\.\s]+)\s*$/i,
-      map: {
-        1: name + '-width',
-        3: name === 'border' ? name + '-style' : null,
-        4: name + '-color'
-      }
-    };
-  });
-
-  directions.forEach(function (dir) {
-    numberize.push('border-' + dir + '-width');
-    changeArr.forEach(function (prop) {
-      numberize.push(prop + '-' + dir);
-    });
-  });
-
-  // map of properties that when expanded
-  // use different directions than the default Top,Right,Bottom,Left.
-  var directionMaps = {
-    'border-radius': {
-      Top: 'top-left',
-      Right: 'top-right',
-      Bottom: 'bottom-right',
-      Left: 'bottom-left'
-    }
-  };
-
-  // Convert the shorthand property to the individual directions, handles edge cases,
-  // i.e. border-width and border-radius
-  function directionToPropertyName(property, direction) {
-    var names = property.split('-');
-    names.splice(1, 0, directionMaps[property] ? directionMaps[property][direction] : direction);
-    return (0, _toCamelCase2.default)(names.join('-'));
-  }
-
-  // CSS properties that are not supported by React Native
-  // The list of supported properties is at:
-  // https://facebook.github.io/react-native/docs/style.html#supported-properties
-  var unsupported = ['display'];
-
-  var nonMatching = {
-    'flex-grow': 'flex',
-    'text-decoration': 'textDecorationLine',
-    'vertical-align': 'textVerticalAlign'
-  };
-
-  var JSONResult = {};
-
-  var _iteratorNormalCompletion = true;
-  var _didIteratorError = false;
-  var _iteratorError = undefined;
-
-  try {
-    for (var _iterator = stylesheet.rules[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-      var rule = _step.value;
-
-      if (rule.type !== 'rule') continue;
-
-      var _iteratorNormalCompletion2 = true;
-      var _didIteratorError2 = false;
-      var _iteratorError2 = undefined;
-
-      try {
-        var _loop = function _loop() {
-          var selector = _step2.value;
-
-          selector = selector.replace(/\.|#/g, '');
-
-          var styles = void 0;
-          // check if there are any selectors with empty spaces, meaning they should be nested
-          var composedSelector = selector.match(/\s+(\S)+/g);
-
-          if (composedSelector) {
-            // get the first selector from the nested selector
-            var selectorPath = selector.match(/^\S+/)[0];
-            while (composedSelector.length) {
-              var currentSelector = composedSelector.shift().replace(/\s+/, '');
-              selectorPath += '[' + currentSelector + ']';
-            }
-
-            // we don't have to be smart here. It's either an object or undefined.
-            if (!(0, _lodash2.default)(JSONResult, selectorPath)) {
-              (0, _lodash4.default)(JSONResult, selectorPath, {});
-            }
-            styles = (0, _lodash2.default)(JSONResult, selectorPath);
-          } else {
-            styles = JSONResult[selector] = JSONResult[selector] || {};
-          }
-
-          var _iteratorNormalCompletion3 = true;
-          var _didIteratorError3 = false;
-          var _iteratorError3 = undefined;
-
-          try {
-            var _loop2 = function _loop2() {
-              var declaration = _step3.value;
-
-              if (declaration.type !== 'declaration') return 'continue';
-
-              var value = declaration.value;
-              var property = declaration.property;
-
-              if (specialProperties[property]) {
-                var special = specialProperties[property];
-                var matches = special.regex.exec(value);
-                if (matches) {
-                  if (typeof special.map === 'function') {
-                    special.map(matches, styles, rule.declarations);
-                  } else {
-                    for (var key in special.map) {
-                      if (matches[key] && special.map[key]) {
-                        rule.declarations.push({
-                          property: special.map[key],
-                          value: matches[key],
-                          type: 'declaration'
-                        });
-                      }
-                    }
-                  }
-                  return 'continue';
-                }
-              }
-
-              if (_utils2.default.arrayContains(property, unsupported)) return 'continue';
-
-              if (nonMatching[property]) {
-                rule.declarations.push({
-                  property: nonMatching[property],
-                  value: value,
-                  type: 'declaration'
-                });
-                return 'continue';
-              }
-
-              if (_utils2.default.arrayContains(property, numberize)) {
-                var valueReplaced = value.replace(/px|\s*/g, '');
-                styles[(0, _toCamelCase2.default)(property)] = parseFloat(valueReplaced);
-              } else if (_utils2.default.arrayContains(property, changeArr)) {
-                var _values = value.replace(/px/g, '').split(/[\s,]+/);
-
-                _values.forEach(function (v, index, arr) {
-                  arr[index] = parseInt(v);
-                  return arr;
-                });
-
-                var length = _values.length;
-
-                if (length === 1) {
-                  styles[(0, _toCamelCase2.default)(property)] = _values[0];
-                }
-
-                if (length === 2) {
-                  var _arr = ['Top', 'Bottom'];
-
-                  for (var _i = 0; _i < _arr.length; _i++) {
-                    var prop = _arr[_i];
-                    styles[directionToPropertyName(property, prop)] = _values[0];
-                  }
-
-                  var _arr2 = ['Left', 'Right'];
-                  for (var _i2 = 0; _i2 < _arr2.length; _i2++) {
-                    var _prop = _arr2[_i2];
-                    styles[directionToPropertyName(property, _prop)] = _values[1];
-                  }
-                }
-
-                if (length === 3) {
-                  var _arr3 = ['Left', 'Right'];
-
-                  for (var _i3 = 0; _i3 < _arr3.length; _i3++) {
-                    var _prop2 = _arr3[_i3];
-                    styles[directionToPropertyName(property, _prop2)] = _values[1];
-                  }
-
-                  styles[directionToPropertyName(property, 'Top')] = _values[0];
-                  styles[directionToPropertyName(property, 'Bottom')] = _values[2];
-                }
-
-                if (length === 4) {
-                  ['Top', 'Right', 'Bottom', 'Left'].forEach(function (prop, index) {
-                    styles[directionToPropertyName(property, prop)] = _values[index];
-                  });
-                }
-              } else {
-                if (!isNaN(declaration.value) && property !== 'font-weight') {
-                  declaration.value = parseFloat(declaration.value);
-                }
-
-                styles[(0, _toCamelCase2.default)(property)] = declaration.value;
-              }
-            };
-
-            for (var _iterator3 = rule.declarations[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
-              var _ret2 = _loop2();
-
-              if (_ret2 === 'continue') continue;
-            }
-          } catch (err) {
-            _didIteratorError3 = true;
-            _iteratorError3 = err;
-          } finally {
-            try {
-              if (!_iteratorNormalCompletion3 && _iterator3.return) {
-                _iterator3.return();
-              }
-            } finally {
-              if (_didIteratorError3) {
-                throw _iteratorError3;
-              }
-            }
-          }
-        };
-
-        for (var _iterator2 = rule.selectors[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
-          _loop();
-        }
-      } catch (err) {
-        _didIteratorError2 = true;
-        _iteratorError2 = err;
-      } finally {
-        try {
-          if (!_iteratorNormalCompletion2 && _iterator2.return) {
-            _iterator2.return();
-          }
-        } finally {
-          if (_didIteratorError2) {
-            throw _iteratorError2;
-          }
-        }
-      }
-    }
-  } catch (err) {
-    _didIteratorError = true;
-    _iteratorError = err;
-  } finally {
-    try {
-      if (!_iteratorNormalCompletion && _iterator.return) {
-        _iterator.return();
-      }
-    } finally {
-      if (_didIteratorError) {
-        throw _iteratorError;
-      }
-    }
-  }
-
-  return JSONResult;
-}

package/build/utils.js

@@ -1,54 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-var Utils = function () {
-  function Utils() {
-    _classCallCheck(this, Utils);
-  }
-
-  _createClass(Utils, null, [{
-    key: 'arrayContains',
-    value: function arrayContains(value, arr) {
-      for (var i = 0; i < arr.length; i++) {
-        if (value === arr[i]) {
-          return true;
-        }
-      }
-      return false;
-    }
-  }, {
-    key: 'clean',
-    value: function clean(string) {
-      return string.replace(/\r?\n|\r/g, '');
-    }
-  }, {
-    key: 'contains',
-    value: function contains(string, needle) {
-      var search = string.match(needle);
-      return search && search.length > 0;
-    }
-  }]);
-
-  return Utils;
-}();
-
-exports.default = Utils;
-var handleTags = exports.handleTags = function handleTags(strings) {
-  var result = '';
-
-  for (var i = 0; i < strings.length; i++) {
-    result += strings[i];
-    if (i < (arguments.length <= 1 ? 0 : arguments.length - 1)) {
-      result += arguments.length <= i + 1 ? undefined : arguments[i + 1];
-    }
-  }
-
-  return result;
-};

package/circle.yml

@@ -1,31 +0,0 @@
-
----
-dependencies:
-  cache_directories:
-    - ~/.cache/yarn
-  override:
-    - npm install
-  pre:
-    - ls
-    - "sh login.sh"
-deployment:
-  production:
-    branch: master
-    commands:
-      - sh login.sh
-      - git config --global push.default matching
-      - git config --global user.email "thabti.sabeur@gmail.com"
-      - git config --global user.name "Sabeur Thabti"
-      - npm version patch
-      - git commit --amend -m 'automated patching [ci skip]'
-      - git push
-      - npm run start
-      - npm publish ./
-      - echo "doing a patch update!"
-
-machine:
-  node:
-    version: "7.2.1"
-test:
-  override:
-    - "npm run echo"

package/jsconfig.json

@@ -1,9 +0,0 @@
-{
-    "compilerOptions": {
-        "allowJs": true,
-        "allowSyntheticDefaultImports": true
-    },
-    "exclude": [
-        "node_modules"
-    ]
-}

package/login.sh

@@ -1,11 +0,0 @@
-#!/bin/bash
-set -o nounset
-set -o errexit
-
-echo "NPM LOGIN"
-
-npm login <<!
-$NPM_USERNAME
-$NPM_PASSWORD
-$NPM_EMAIL
-!