diff --git a/packages/fower-plugin-layout/src/index.test.ts b/packages/fower-plugin-layout/src/index.test.ts
index 9700d1444..e232c428f 100644
--- a/packages/fower-plugin-layout/src/index.test.ts
+++ b/packages/fower-plugin-layout/src/index.test.ts
@@ -2,7 +2,9 @@ import { Parser } from '@fower/parser'
 import { Atom } from '@fower/atom'
 import plugin, { getFlexDirection } from '.'
 
-const { isMatch, handleAtom } = plugin()
+const { isMatch, handleAtom, beforeHandleAtom, afterAtomStyleCreate } = plugin()
+
+const parser = new Parser({ row: true })
 
 test('isMatch', () => {
   expect(isMatch!('toCenter')).toEqual(true)
@@ -24,6 +26,33 @@ test('getFlexDirection', () => {
   expect(getFlexDirection({})).toBe('row')
 })
 
+describe('beforeHandleAtom()', () => {
+  test('atom starts with row', () => {
+    const atom = handleAtom!(
+      new Atom({
+        propKey: 'toCenter',
+        propValue: true,
+      }),
+      parser,
+    )
+    beforeHandleAtom?.(atom, parser)
+    expect(atom.id).toEqual('row-toCenter')
+  })
+
+  test('not start with row', () => {
+    const atom = handleAtom!(
+      new Atom({
+        propKey: 'toCenter',
+        propValue: true,
+      }),
+      parser,
+    )
+    atom.id = 'row-' + atom.id
+    beforeHandleAtom?.(atom, parser)
+    expect(atom.id).toEqual('row-toCenter')
+  })
+})
+
 describe('row', () => {
   const parser = new Parser({ row: true })
   test('toCenter', () => {
@@ -281,3 +310,103 @@ describe('row or column props', () => {
     expect(atom.handled).toEqual(true)
   })
 })
+
+test('selfTop', () => {
+  const atom = handleAtom!(
+    new Atom({
+      propKey: 'selfTop',
+      propValue: true,
+    }),
+    parser,
+  )
+  expect(atom.style.alignSelf).toEqual('flex-start')
+})
+
+test('selfRight', () => {
+  const atom = handleAtom!(
+    new Atom({
+      propKey: 'selfRight',
+      propValue: true,
+    }),
+    parser,
+  )
+  expect(atom.style.alignSelf).toEqual('flex-end')
+})
+
+test('selfBottom', () => {
+  const atom = handleAtom!(
+    new Atom({
+      propKey: 'selfBottom',
+      propValue: true,
+    }),
+    parser,
+  )
+  expect(atom.style.alignSelf).toEqual('flex-end')
+})
+
+test('selfLeft', () => {
+  const atom = handleAtom!(
+    new Atom({
+      propKey: 'selfLeft',
+      propValue: true,
+    }),
+    parser,
+  )
+  expect(atom.style.alignSelf).toEqual('flex-start')
+})
+
+test('selfCenter', () => {
+  const atom = handleAtom!(
+    new Atom({
+      propKey: 'selfCenter',
+      propValue: true,
+    }),
+    parser,
+  )
+  expect(atom.style.alignSelf).toEqual('center')
+})
+
+test('selfAuto', () => {
+  const atom = handleAtom!(
+    new Atom({
+      propKey: 'selfAuto',
+      propValue: true,
+    }),
+    parser,
+  )
+  expect(atom.style.alignSelf).toEqual('auto')
+})
+
+describe('afterAtomStyleCreate', () => {
+  test('no atoms', () => {
+    parser.atoms = []
+    afterAtomStyleCreate?.(parser)
+    expect(parser.atoms.length).toEqual(0)
+  })
+
+  test('no matched atoms', () => {
+    const atom = handleAtom!(
+      new Atom({
+        propKey: 'foo',
+        propValue: true,
+      }),
+      parser,
+    )
+    parser.atoms = [atom]
+    afterAtomStyleCreate?.(parser)
+    expect(parser.atoms.length).toEqual(1)
+  })
+
+  test('no matched atoms', () => {
+    const atom = handleAtom!(
+      new Atom({
+        propKey: 'toCenter',
+        propValue: true,
+      }),
+      parser,
+    )
+    parser.atoms = [atom]
+    afterAtomStyleCreate?.(parser)
+    expect(parser.atoms.length).toEqual(3)
+  })
+})
diff --git a/packages/fower-plugin-layout/src/index.ts b/packages/fower-plugin-layout/src/index.ts
index 4902f80a3..82f893ddd 100644
--- a/packages/fower-plugin-layout/src/index.ts
+++ b/packages/fower-plugin-layout/src/index.ts
@@ -151,7 +151,6 @@ export default (): FowerPlugin => {
     isMatch,
     beforeHandleAtom(atom, parser) {
       const direction = getFlexDirection(parser.props)
-      // TODO:
       if (atom.id.startsWith('row-') || atom.id.startsWith('column-')) {
         return atom
       }
diff --git a/packages/parser/src/parser.ts b/packages/parser/src/parser.ts
index dc9913f87..7247a4d0e 100644
--- a/packages/parser/src/parser.ts
+++ b/packages/parser/src/parser.ts
@@ -376,14 +376,6 @@ export class Parser {
    * @param atom
    */
   mutateAtom(atom: Atom): void {
-    for (const plugin of this.plugins) {
-      if (!plugin.isMatch?.(atom.key)) continue
-
-      if (plugin.beforeHandleAtom) {
-        atom = plugin.beforeHandleAtom(atom, this as any)
-      }
-    }
-
     const cachedAtom = store.atomCache.get(atom.id)
 
     if (cachedAtom) {