feat: support justify-content, align-self in linear container (#37)

* feat: support `justify-content`, `align-self` in linear container

Now these two properties could work in a linear container.

We don't transforms the `justify-content` and `align-self` to css vars any more.

The previous version of `@lynx-js/web-core` won't work with current `@lynx-js/web-core` after this change.

* update

.changeset/rude-parks-dig.md

@@ -0,0 +1,13 @@
+---
+"@lynx-js/web-elements": minor
+"@lynx-js/web-style-transformer": patch
+"@lynx-js/web-elements-compat": patch
+---
+
+feat: support `justify-content`, `align-self` in linear container
+
+Now these two properties could work in a linear container.
+
+We don't transforms the `justify-content` and `align-self` to css vars any more.
+
+The previous version of `@lynx-js/web-core` won't work with current `@lynx-js/web-core` after this change.

packages/web-platform/web-constants/tsconfig.json

@@ -5,7 +5,6 @@
     "rootDir": "./src",
     "outDir": "./dist",
     "lib": ["ESNext"],
-    "verbatimModuleSyntax": true,
   },
   "include": ["src"],
   "references": [

packages/web-platform/web-core/tsconfig.json

@@ -7,7 +7,6 @@
     "lib": ["DOM", "ESNext", "WebWorker"],
     "noUnusedParameters": false,
     "noImplicitReturns": false,
-    "verbatimModuleSyntax": true,
   },
   "include": ["src"],
   "references": [

packages/web-platform/web-elements-compat/src/LinearContainer/linear-compat.css

@@ -77,22 +77,22 @@
 
 [lynx-computed-display="linear"][lynx-linear-orientation="vertical"] {
   flex-direction: column !important;
-  justify-content: var(--justify-content-column) !important;
+  justify-content: var(--justify-content-column);
 }
 
 [lynx-computed-display="linear"][lynx-linear-orientation="horizontal"] {
   flex-direction: row !important;
-  justify-content: var(--justify-content-row) !important;
+  justify-content: var(--justify-content-row);
 }
 
 [lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"] {
   flex-direction: column-reverse !important;
-  justify-content: var(--justify-content-column-reverse) !important;
+  justify-content: var(--justify-content-column-reverse);
 }
 
 [lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"] {
   flex-direction: row-reverse !important;
-  justify-content: var(--justify-content-row-reverse) !important;
+  justify-content: var(--justify-content-row-reverse);
 }
 
 [lynx-computed-display="linear"][lynx-linear-orientation="vertical"] > *,
@@ -103,7 +103,7 @@
 [lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"]
   > lynx-wrapper
   > * {
-  align-self: var(--align-self-column) !important;
+  align-self: var(--align-self-column);
 }
 [lynx-computed-display="linear"][lynx-linear-orientation="horizontal"] > *,
 [lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"],
@@ -113,5 +113,5 @@
 [lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"]
   > lynx-wrapper
   > * {
-  align-self: var(--align-self-row) !important;
+  align-self: var(--align-self-row);
 }

packages/web-platform/web-elements/src/common-css/linear.css

@@ -66,14 +66,6 @@
   syntax: "*";
   inherits: false;
 }
-@property --justify-content {
-  syntax: "*";
-  inherits: false;
-}
-@property --align-self {
-  syntax: "*";
-  inherits: false;
-}
 @property --flex-grow {
   syntax: "<number>";
   inherits: false;
@@ -207,8 +199,7 @@ x-viewpager-ng {
     --lynx-display-flex,
     var(--flex-direction)
   );
-  justify-content: var(--lynx-display-linear, var(--linear-justify-content))
-    var(--lynx-display-flex, var(--justify-content));
+  justify-content: var(--lynx-display-linear, var(--linear-justify-content));
 }
 
 /** For @container
@@ -318,7 +309,6 @@ x-viewpager-ng {
       flex-grow: var(--flex-grow);
       flex-shrink: var(--flex-shrink);
       flex-basis: var(--flex-basis);
-      align-self: var(--align-self);
     }
   }
 

packages/web-platform/web-style-transformer/src/transformLynxStyles.ts

@@ -2,6 +2,10 @@
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 import { parseFlexShorthand } from './parseFlexShorthand.js';
+/**
+ * replace values of the property
+ * if one value is not listed, it will be ignored and kept as is.
+ */
 const replaceRules: {
   [declarationPropertyName: string]: {
     [plainValue: string]:
@@ -210,6 +214,16 @@ const replaceRules: {
       ['--align-self-column', 'stretch'],
     ],
   },
+  'justify-content': {
+    left: [],
+    right: [],
+    start: [
+      ['justify-content', 'flex-start'],
+    ],
+    end: [
+      ['justify-content', 'flex-end'],
+    ],
+  },
 };
 
 const renameRules: {
@@ -245,12 +259,6 @@ const renameRules: {
   'flex-wrap': [
     '--flex-wrap',
   ],
-  'justify-content': [
-    '--justify-content',
-  ],
-  'align-self': [
-    '--align-self',
-  ],
   'flex-grow': [
     '--flex-grow',
   ],

packages/web-platform/web-tests/tests/react.spec.ts

@@ -3341,6 +3341,24 @@ test.describe('reactlynx3 tests', () => {
         await diffScreenShot(page, title, 'index');
       },
     );
+    test(
+      'basic-linear-row-container-main-axis-justify-content-right-left-with-direction-rtl',
+      async ({
+        page,
+      }, { title }) => {
+        await goto(page, title);
+        await diffScreenShot(page, title, 'index');
+      },
+    );
+    test(
+      'basic-linear-row-container-main-axis-justify-content-start-end-with-direction-rtl',
+      async ({
+        page,
+      }, { title }) => {
+        await goto(page, title);
+        await diffScreenShot(page, title, 'index');
+      },
+    );
     test(
       'basic-linear-row-container-main-axis-graverty-top-bottom-with-direction-rtl',
       async ({
@@ -3416,13 +3434,26 @@ test.describe('reactlynx3 tests', () => {
       await goto(page, title);
       await diffScreenShot(page, title, 'index');
     });
+    test('basic-linear-column-align-items', async ({ page }, { title }) => {
+      await goto(page, title);
+      await diffScreenShot(page, title, 'index');
+    });
+    test(
+      'basic-linear-column-container-items-layout-gravity',
+      async ({ page }, {
+        title,
+      }) => {
+        await goto(page, title);
+        await diffScreenShot(page, title, 'index');
+      },
+    );
     test('basic-linear-column-container-items-align-self', async ({ page }, {
       title,
     }) => {
       await goto(page, title);
       await diffScreenShot(page, title, 'index');
     });
-    test('basic-linear-row-container-items-align-self', async ({ page }, {
+    test('basic-linear-row-container-items-layout-gravity', async ({ page }, {
       title,
     }) => {
       await goto(page, title);
@@ -3440,6 +3471,27 @@ test.describe('reactlynx3 tests', () => {
       await goto(page, title);
       await diffScreenShot(page, title, 'index');
     });
+    test(
+      'basic-linear-column-container-main-axis-justify-content-right-left-with-direction-rtl',
+      async ({ page }, { title }) => {
+        await goto(page, title);
+        await diffScreenShot(page, title, 'index');
+      },
+    );
+    test(
+      'basic-linear-column-container-main-axis-justify-content-center',
+      async ({ page }, { title }) => {
+        await goto(page, title);
+        await diffScreenShot(page, title, 'index');
+      },
+    );
+    test(
+      'basic-linear-column-container-main-axis-justify-content-start-end-with-direction-rtl',
+      async ({ page }, { title }) => {
+        await goto(page, title);
+        await diffScreenShot(page, title, 'index');
+      },
+    );
 
     test(
       'config-css-default-display-linear-false',
@@ -3484,6 +3536,31 @@ test.describe('reactlynx3 tests', () => {
       await goto(page, title);
       await diffScreenShot(page, title, 'index');
     });
+    test(
+      'basic-flex-column-container-main-axis-justify-content-start-end-with-direction-rtl',
+      async ({ page }, { title }) => {
+        await goto(page, title);
+        await diffScreenShot(page, title, 'index');
+      },
+    );
+    test(
+      'basic-flex-column-container-items-align-self',
+      async ({ page }, { title }) => {
+        await goto(page, title);
+        await diffScreenShot(page, title, 'index');
+      },
+    );
+    test('basic-flex-column-align-items', async ({ page }, { title }) => {
+      await goto(page, title);
+      await diffScreenShot(page, title, 'index');
+    });
+    test(
+      'basic-flex-row-container-main-axis-justify-content-start-end-with-direction-rtl',
+      async ({ page }, { title }) => {
+        await goto(page, title);
+        await diffScreenShot(page, title, 'index');
+      },
+    );
   });
 
   test.afterEach(async ({ page, browserName, baseURL, browser }, { title }) => {

packages/web-platform/web-tests/tests/react/basic-flex-column-align-items/index.css

@@ -0,0 +1,58 @@
+/*
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+.container {
+  display: flex;
+}
+.vertical {
+  flex-direction: column;
+  width: 200px;
+  height: 150px;
+  background-color: pink;
+}
+.vertical-reverse {
+  flex-direction: column-reverse;
+  width: 200px;
+  height: 150px;
+  background-color: #99ddaa;
+}
+.horizontal {
+  flex-direction: row;
+  width: 150px;
+  height: 100px;
+  background-color: pink;
+}
+.horizontal-reverse {
+  flex-direction: row-reverse;
+  width: 150px;
+  height: 100px;
+  background-color: #99ddaa;
+}
+.start {
+  align-items: start;
+}
+.end {
+  align-items: end;
+}
+.flex-start {
+  align-items: flex-start;
+}
+.flex-end {
+  align-items: flex-end;
+}
+.center {
+  align-items: center;
+}
+.stretch {
+  align-items: stretch;
+}
+.container-item {
+  linear-weight: 0;
+  width: 50px;
+  height: 50px;
+}
+.rtl {
+  direction: lynx-rtl;
+}

packages/web-platform/web-tests/tests/react/basic-flex-column-align-items/index.jsx

@@ -0,0 +1,60 @@
+/*
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+import { Component, root } from '@lynx-js/react';
+import './index.css';
+class Page extends Component {
+  render() {
+    return (
+      <view style='display:flex;flex-direction:column;'>
+        <view class='container start horizontal'>
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+
+        <view class='container end horizontal'>
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+
+        <view class='container flex-start horizontal'>
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+
+        <view class='container flex-end horizontal'>
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+
+        <view class='container center horizontal'>
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+
+        <view class='container stretch horizontal'>
+          <view
+            class='container-item'
+            style='background-color:red; height:auto'
+          />
+          <view
+            class='container-item'
+            style='background-color:green; height:auto'
+          />
+          <view
+            class='container-item'
+            style='background-color:blue; height:auto'
+          />
+        </view>
+      </view>
+    );
+  }
+}
+root.render(<Page></Page>);