@vitus-labs/unistyle 2.0.0-alpha.27 → 2.0.0-alpha.28

package/README.md

@@ -1,6 +1,6 @@
 # @vitus-labs/unistyle
 
-Responsive CSS engine for React and styled-components.
+Responsive CSS engine for React.
 
 [![npm](https://img.shields.io/npm/v/@vitus-labs/unistyle)](https://www.npmjs.com/package/@vitus-labs/unistyle)
 [![license](https://img.shields.io/npm/l/@vitus-labs/unistyle)](https://github.com/vitus-labs/ui-system/blob/main/LICENSE)
@@ -186,12 +186,17 @@ Every property in the theme object supports three formats:
 
 When using `normalize: true` (default), missing breakpoints inherit from the previous one.
 
+## React Native
+
+On React Native, CSS `@media` queries are not available. When initialized with `@vitus-labs/connector-native`, unistyle uses `Dimensions.get('window').width` to evaluate breakpoints at render time (mobile-first). This is handled automatically via `createMediaQueries` passed to `init()`.
+
 ## Peer Dependencies
 
 | Package | Version |
 | ------- | ------- |
 | react | >= 19 |
 | @vitus-labs/core | * |
+| react-native | >= 0.76 (optional) |
 
 ## License
 

package/lib/index.js

@@ -220,7 +220,7 @@ const Provider = ({ theme, children, ...props }) => {
 		if (breakpoints && !isEmpty(breakpoints)) return sortBreakpoints(breakpoints);
 	}, [breakpoints]);
 	const media = useMemo(() => {
-		if (breakpoints && !isEmpty(breakpoints)) return createMediaQueries({
+		if (breakpoints && !isEmpty(breakpoints)) return (config.createMediaQueries ?? createMediaQueries)({
 			breakpoints,
 			css: config.css,
 			rootSize
@@ -296,6 +296,7 @@ const extendCss = (styles) => {
 
 //#endregion
 //#region src/units/stripUnit.ts
+const CSS_UNIT_REGEX = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/;
 /**
 * Strips the CSS unit suffix from a value.
 * With `unitReturn=true`, returns a `[number, unit]` tuple.
@@ -303,9 +304,8 @@ const extendCss = (styles) => {
 * Non-string inputs are passed through unchanged.
 */
 const stripUnit = (value, unitReturn) => {
-	const cssRegex = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/;
 	if (typeof value !== "string") return unitReturn ? [value, void 0] : value;
-	const matchedValue = value.match(cssRegex);
+	const matchedValue = value.match(CSS_UNIT_REGEX);
 	if (unitReturn) {
 		if (matchedValue) return [parseFloat(value), matchedValue[2]];
 		return [value, void 0];

package/lib/vitus-labs-unistyle.native.js

@@ -220,7 +220,7 @@ const Provider = ({ theme, children, ...props }) => {
 		if (breakpoints && !isEmpty(breakpoints)) return sortBreakpoints(breakpoints);
 	}, [breakpoints]);
 	const media = useMemo(() => {
-		if (breakpoints && !isEmpty(breakpoints)) return createMediaQueries({
+		if (breakpoints && !isEmpty(breakpoints)) return (config.createMediaQueries ?? createMediaQueries)({
 			breakpoints,
 			css: config.css,
 			rootSize
@@ -296,6 +296,7 @@ const extendCss = (styles) => {
 
 //#endregion
 //#region src/units/stripUnit.ts
+const CSS_UNIT_REGEX = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/;
 /**
 * Strips the CSS unit suffix from a value.
 * With `unitReturn=true`, returns a `[number, unit]` tuple.
@@ -303,9 +304,8 @@ const extendCss = (styles) => {
 * Non-string inputs are passed through unchanged.
 */
 const stripUnit = (value, unitReturn) => {
-	const cssRegex = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/;
 	if (typeof value !== "string") return unitReturn ? [value, void 0] : value;
-	const matchedValue = value.match(cssRegex);
+	const matchedValue = value.match(CSS_UNIT_REGEX);
 	if (unitReturn) {
 		if (matchedValue) return [parseFloat(value), matchedValue[2]];
 		return [value, void 0];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitus-labs/unistyle",
-  "version": "2.0.0-alpha.27",
+  "version": "2.0.0-alpha.28",
   "license": "MIT",
   "author": "Vit Bokisch <vit@bokisch.cz>",
   "maintainers": [
@@ -10,11 +10,13 @@
   "sideEffects": false,
   "exports": {
     "source": "./src/index.ts",
+    "react-native": "./lib/vitus-labs-unistyle.native.js",
     "import": "./lib/index.js",
     "types": "./lib/index.d.ts"
   },
   "types": "./lib/index.d.ts",
-  "react-native": "lib/vitus-labs-unistyle.native.js",
+  "react-native": "./lib/vitus-labs-unistyle.native.js",
+  "main": "./lib/index.js",
   "files": [
     "lib",
     "!lib/**/*.map",
@@ -49,13 +51,18 @@
     "node": ">= 18"
   },
   "peerDependencies": {
-    "@vitus-labs/core": "2.0.0-alpha.26",
-    "react": ">= 19"
+    "@vitus-labs/core": "2.0.0-alpha.28",
+    "react": ">= 19",
+    "react-native": ">= 0.76"
   },
-  "devDependencies": {
-    "@vitus-labs/core": "2.0.0-alpha.27",
-    "@vitus-labs/tools-rolldown": "1.9.1-alpha.19",
-    "@vitus-labs/tools-typescript": "1.9.1-alpha.19"
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    }
   },
-  "gitHead": "6230c7b4eb1f8fe52bd47275cf72cdcab706cb45"
+  "devDependencies": {
+    "@vitus-labs/core": "workspace:*",
+    "@vitus-labs/tools-rolldown": "2.0.0",
+    "@vitus-labs/tools-typescript": "2.0.0"
+  }
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023-present Vit Bokisch
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.