fix icon accordion and style calcul

.changeset/friendly-kangaroos-allow.md

@@ -0,0 +1,5 @@
+---
+'@crossed/styled': patch
+---
+
+fix logical style for rnw

.changeset/slow-penguins-hang.md

@@ -0,0 +1,5 @@
+---
+'@crossed/ui': patch
+---
+
+change icon

packages/styled/__tests__/createStyles.spec.ts

@@ -85,8 +85,8 @@ describe('createStyles', () => {
       style: [
         {
           '$$css': true,
-          'color-[white]': 'color-[white]',
-          'border-color-[red]': 'border-color-[red]',
+          'color': 'color-[white]',
+          'borderColor': 'border-color-[red]',
         },
         {},
       ],
@@ -99,8 +99,8 @@ describe('createStyles', () => {
       style: [
         {
           '$$css': true,
-          'border-color-[red]': 'border-color-[red]',
-          'color-[white]': 'color-[white]',
+          'borderColor': 'border-color-[red]',
+          'color': 'color-[white]',
         },
         { color: 'black', backgroundColor: 'white' },
         {},
@@ -115,9 +115,8 @@ describe('createStyles', () => {
       style: [
         {
           '$$css': true,
-          'border-color-[red]': 'border-color-[red]',
-          'color-[white]': 'color-[white]',
-          'toto': 'toto',
+          'borderColor': 'border-color-[red]',
+          'color': 'color-[white]',
         },
         { color: 'black', backgroundColor: 'white' },
         {},

packages/styled/__tests__/plugins/pseudoClass.spec.ts

@@ -84,9 +84,7 @@ describe('PseudoClassPlugin', () => {
       style: [
         {
           '$$css': true,
-          'active:color-[red]': 'active:color-[red]',
-          'color-[black]': 'color-[black]',
-          'hover:color-[white]': 'hover:color-[white]',
+          'color': 'color-[black] hover:color-[white] active:color-[red]',
         },
         {},
       ],
@@ -95,9 +93,7 @@ describe('PseudoClassPlugin', () => {
       style: [
         {
           '$$css': true,
-          'active:color-[red]': 'active:color-[red]',
-          'color-[black]': 'color-[black]',
-          'hover:color-[white]': 'hover:color-[white]',
+          'color': 'color-[black] hover:color-[white] active:color-[red]',
         },
         {},
       ],
@@ -106,9 +102,7 @@ describe('PseudoClassPlugin', () => {
       style: [
         {
           '$$css': true,
-          'active:color-[red]': 'active:color-[red]',
-          'hover:color-[white]': 'hover:color-[white]',
-          'color-[white]': 'color-[white]',
+          'color': 'hover:color-[white] color-[white] active:color-[red]',
         },
         {},
       ],
@@ -117,9 +111,7 @@ describe('PseudoClassPlugin', () => {
       style: [
         {
           '$$css': true,
-          'active:color-[red]': 'active:color-[red]',
-          'hover:color-[white]': 'hover:color-[white]',
-          'color-[red]': 'color-[red]',
+          'color': 'hover:color-[white] active:color-[red] color-[red]',
         },
         {},
       ],
@@ -128,9 +120,7 @@ describe('PseudoClassPlugin', () => {
       style: [
         {
           '$$css': true,
-          'active:color-[red]': 'active:color-[red]',
-          'hover:color-[white]': 'hover:color-[white]',
-          'color-[red]': 'color-[red]',
+          'color': 'hover:color-[white] active:color-[red] color-[red]',
         },
         {},
       ],

packages/styled/__tests__/plugins/web.spec.ts

@@ -37,16 +37,16 @@ describe('WebPlugin', () => {
       style: [
         {
           '$$css': true,
-          'align-items-[center]': 'align-items-[center]',
-          'border-radius-[8px]': 'border-radius-[8px]',
-          'border-style-[solid]': 'border-style-[solid]',
-          'border-width-[1px]': 'border-width-[1px]',
-          'box-sizing-[border-box]': 'box-sizing-[border-box]',
-          'flex-[1]': 'flex-[1]',
-          'focus-visible:outline-width-[0]': 'focus-visible:outline-width-[0]',
-          'height-[44px]': 'height-[44px]',
-          'justify-content-[center]': 'justify-content-[center]',
-          'flex-direction-[row]': 'flex-direction-[row]',
+          'alignItems': 'align-items-[center]',
+          'borderRadius': 'border-radius-[8px]',
+          'borderStyle': 'border-style-[solid]',
+          'borderWidth': 'border-width-[1px]',
+          'boxSizing': 'box-sizing-[border-box]',
+          'flex': 'flex-[1]',
+          'outlineWidth': 'focus-visible:outline-width-[0]',
+          'height': 'height-[44px]',
+          'justifyContent': 'justify-content-[center]',
+          'flexDirection': 'flex-direction-[row]',
         },
         {},
       ],

packages/styled/src/createMethods/apply.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Paymium.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root of this projects source tree.
+ */
+
+import { CrossedPropsExtended, PluginContext } from '../types';
+import { Registry } from '../Registry';
+import { isWeb } from '../isWeb';
+import { cache } from './cache';
+
+export const apply = <S>(
+  style: Record<string, any>,
+  props: CrossedPropsExtended,
+  addClassname: PluginContext<S>['addClassname']
+) => {
+  Registry.apply(() => style, {
+    isWeb,
+    props,
+    addClassname,
+    cache,
+  });
+};

packages/styled/src/createMethods/cache.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Paymium.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root of this projects source tree.
+ */
+
+export const cache = new Map();

packages/styled/src/createMethods/cleanClassName.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Paymium.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root of this projects source tree.
+ */
+
+export const cleanClassName = (classNames: string[]) => {
+  return classNames.reduce((acc, className) => {
+    const [property] = className.match(/^([a-z\-:]+)\[/g) || [];
+
+    if (property) {
+      acc.forEach((accKey) => {
+        const [same] =
+          accKey.match(new RegExp(`^${property.replace('[', '\\[')}`, 'g')) ||
+          [];
+
+        if (same) {
+          acc.delete(accKey);
+        }
+      });
+    }
+    acc.add(className);
+    return acc;
+  }, new Set<string>());
+};