refactor: use store in parser

packages/atomic-props/index.js

@@ -0,0 +1 @@
+module.exports = {}

packages/atomic-props/package.json

@@ -2,7 +2,7 @@
     "name": "@fower/atomic-props",
     "version": "1.38.0",
     "license": "MIT",
-    "main": "",
+    "main": "index.js",
     "types": "index.d.ts",
     "scripts": {
         "build": "echo 'build'",

packages/core/src/parser.ts

@@ -53,6 +53,10 @@ export class Parser {
     return this.atoms.some((i) => !!i.meta.breakpoint)
   }
 
+  get store() {
+    return store
+  }
+
   get config() {
     return store.config
   }
@@ -146,7 +150,6 @@ export class Parser {
 
       try {
         this.mutateAtom(atom)
-
         if (atom.handled) this.addAtom(atom)
       } catch (error) {
         continue
@@ -390,14 +393,14 @@ export class Parser {
     }
 
     for (const plugin of this.plugins) {
-      if (!plugin.isMatch?.(atom.key)) continue
+      if (!plugin.isMatch?.(atom.key, this)) continue
 
       if (plugin.beforeHandleAtom) {
-        atom = plugin.beforeHandleAtom(atom, this as any)
+        atom = plugin.beforeHandleAtom(atom, this)
       }
 
       if (plugin.handleAtom) {
-        atom = plugin.handleAtom?.(atom, this as any)
+        atom = plugin.handleAtom?.(atom, this)
       }
 
       atom.handled = true

packages/core/src/typings.ts

@@ -44,7 +44,7 @@ export type CSSObject<T = any> =
     }
 
 export interface FowerPlugin {
-  isMatch(key: string): boolean
+  isMatch(key: string, parser?: Parser): boolean
 
   init?(props: Props): void
 

packages/core/test/createStyle.test.ts

@@ -1,6 +1,5 @@
 import { presetWeb } from '@fower/preset-web'
-import { store } from '@fower/core'
-
+import { store } from '../src/store'
 import { createStyle } from '../src'
 
 beforeAll(() => {

packages/core/test/css.test.ts

@@ -1,5 +1,5 @@
 import { presetWeb } from '@fower/preset-web'
-import { store } from '@fower/core'
+import { store } from '../src/store'
 import { css } from '../src/css'
 
 afterEach(() => {

packages/core/test/injectGlobalStyle.test.ts

@@ -1,5 +1,5 @@
 import { presetWeb } from '@fower/preset-web'
-import { store } from '@fower/core'
+import { store } from '../src/store'
 import { injectGlobalStyle } from '../src/injectGlobalStyle'
 
 beforeAll(() => {

packages/core/test/parser.test.ts

@@ -1,7 +1,7 @@
+import { presetWeb } from '@fower/preset-web'
 import { setConfig } from '../src'
 import { store } from '../src/store'
 import { Atom } from '../src/atom'
-import { presetWeb } from '@fower/preset-web'
 import { Parser } from '../src/parser'
 
 const atomCache = store.atomCache
@@ -390,7 +390,7 @@ describe('Auto dark mode', () => {
     expect(atom2.meta.mode).toEqual('dark')
   })
 
-  test('color with custo mapping', () => {
+  test('color with custom mapping', () => {
     const props = { red800: true }
     const parser = new Parser(props)
     const [atom1, atom2] = parser.atoms
@@ -408,7 +408,7 @@ describe('Auto dark mode', () => {
     expect(atom2.meta.mode).toEqual('dark')
   })
 
-  test('background color with custo mapping', () => {
+  test('background color with custom mapping', () => {
     const props = { bgRed800: true }
     const parser = new Parser(props)
     const [atom1, atom2] = parser.atoms
@@ -426,7 +426,7 @@ describe('Auto dark mode', () => {
     expect(atom2.meta.mode).toEqual('dark')
   })
 
-  test('border color with custo mapping', () => {
+  test('border color with custom mapping', () => {
     const props = { borderRed800: true }
     const parser = new Parser(props)
     const [atom1, atom2] = parser.atoms

packages/core/test/store.test.ts

@@ -1,9 +1,9 @@
-import { FowerPlugin } from '../src/typings'
+import { presetWeb } from '@fower/preset-web'
 import deepmerge from 'deepmerge'
+import { FowerPlugin } from '../src/typings'
 import { store, Store } from '../src/store'
 import { setConfig } from '../src'
 import { Parser } from '../src/parser'
-import { presetWeb } from '@fower/preset-web'
 import { Atom } from '../src/atom'
 
 setConfig(presetWeb)
@@ -99,6 +99,7 @@ test('use()', () => {
 })
 
 describe('addAtom()', () => {
+  store.config.plugins = []
   test('with string matcher', () => {
     const { isMatch, handleAtom } = store.addAtom('textBody', {
       fontSize: 30,
@@ -159,8 +160,8 @@ describe('addAtom()', () => {
 
 test('getAtomIds', () => {
   const ids = store.getAtomIds()
-  expect(ids.length).toEqual(1)
-  expect(ids[0]).toEqual('p-8')
+  expect(ids.length).toEqual(2)
+  expect(ids[1]).toEqual('p-8')
 })
 
 describe('composeAtom()', () => {

packages/fower-plugin-border/src/index.ts

@@ -1,4 +1,4 @@
-import { Atom, store } from '@fower/core'
+import { Atom, Parser } from '@fower/core'
 import { FowerPlugin } from '@fower/core'
 import { downFirst } from '@fower/utils'
 
@@ -13,14 +13,14 @@ function isMatch(key: string) {
   return key.startsWith('border')
 }
 
-function toStyle({ key, value }: Atom) {
+function toStyle({ key, value }: Atom, parser: Parser) {
   if (key === 'border') {
     if (typeof value === 'boolean') return { borderWidth: 1 }
     if (value === 'none') return { border: 'none' }
     return { borderWidth: value }
   }
 
-  const colors: any = store.theme.colors
+  const colors: any = parser.config.theme.colors
   const postfix = key.replace(/^border/, '')
 
   /** @example borderSolid,borderDashed */
@@ -50,8 +50,8 @@ function toStyle({ key, value }: Atom) {
 export default (): FowerPlugin => {
   return {
     isMatch,
-    handleAtom(atom) {
-      atom.style = toStyle(atom)
+    handleAtom(atom, parser) {
+      atom.style = toStyle(atom, parser)
       return atom
     },
   }

packages/fower-plugin-color/src/index.ts

@@ -1,10 +1,10 @@
-import { FowerPlugin, store } from '@fower/core'
+import { FowerPlugin, Parser } from '@fower/core'
 
-export function isMatch(key: string) {
+export function isMatch(key: string, parser: Parser) {
   if (key === 'color') return true
 
   // color in theme
-  const colors: any = store.theme.colors
+  const colors: any = parser.config.theme.colors
   return !!colors[key]
 }
 

packages/fower-plugin-font-family/src/index.ts

@@ -1,4 +1,4 @@
-import { FowerPlugin, store } from '@fower/core'
+import { FowerPlugin } from '@fower/core'
 import { downFirst } from '@fower/utils'
 
 export function isMatch(key: string) {
@@ -8,9 +8,9 @@ export function isMatch(key: string) {
 export default (): FowerPlugin => {
   return {
     isMatch,
-    handleAtom(atom) {
+    handleAtom(atom, parser) {
       const { key } = atom
-      const fontFamilies: any = store.getTheme().fontFamilies
+      const fontFamilies: any = parser.config.theme.fontFamilies
       const posfix = key.replace(/^font/i, '')
       const styleValue = fontFamilies[downFirst(posfix)]
       atom.style = { fontFamily: styleValue }

packages/fower-plugin-font-weight/src/index.ts

@@ -1,4 +1,4 @@
-import { FowerPlugin, store } from '@fower/core'
+import { FowerPlugin } from '@fower/core'
 import { downFirst } from '@fower/utils'
 
 export function isMatch(key: string) {
@@ -10,9 +10,9 @@ export function isMatch(key: string) {
 export default (): FowerPlugin => {
   return {
     isMatch,
-    handleAtom(atom) {
+    handleAtom(atom, parser) {
       const { key, value } = atom
-      const weights: any = store.getTheme().fontWeights
+      const weights: any = parser.config.theme.fontWeights
       const posfix = key.replace(/^font/i, '')
       const styleValue = /^weight$/i.test(posfix) ? value : weights[downFirst(posfix)]
       atom.style = { fontWeight: styleValue }

packages/fower-plugin-gradient/src/index.ts

@@ -1,4 +1,4 @@
-import { FowerPlugin, store } from '@fower/core'
+import { FowerPlugin } from '@fower/core'
 
 function isMatch(key: string) {
   return /^gradient[XY]$/i.test(key)
@@ -7,9 +7,9 @@ function isMatch(key: string) {
 export default (): FowerPlugin => {
   return {
     isMatch,
-    handleAtom(atom) {
+    handleAtom(atom, parser) {
       const { key, value } = atom
-      const { colors } = store.theme
+      const { colors } = parser.config.theme
       const postfix = key.replace(/^gradient/, '').toLowerCase()
       const direction = postfix === 'x' ? 'right' : 'bottom'
 

packages/fower-plugin-layout/src/index.ts

@@ -1,5 +1,5 @@
 import { FowerPlugin } from '@fower/core'
-import { Atom, store } from '@fower/core'
+import { Atom } from '@fower/core'
 
 const row = 'row'
 const column = 'column'
@@ -177,7 +177,7 @@ export default (): FowerPlugin => {
 
       const direction = getFlexDirection(parser.props)
       const directionKey = 'flexDirection-' + direction
-      const directionAtom = store.atomCache.get(directionKey)
+      const directionAtom = parser.store.atomCache.get(directionKey)
 
       if (directionAtom) {
         parser.addAtom(directionAtom)
@@ -196,7 +196,7 @@ export default (): FowerPlugin => {
       if (findDisplay) return
 
       const flexKey = 'flex'
-      const flexAtom = store.atomCache.get(flexKey)
+      const flexAtom = parser.store.atomCache.get(flexKey)
 
       if (flexAtom) {
         parser.addAtom(flexAtom)

packages/fower-plugin-line-height/src/index.ts

@@ -1,15 +1,15 @@
-import { Atom, store } from '@fower/core'
+import { Atom, Parser } from '@fower/core'
 import { FowerPlugin } from '@fower/core'
 import { downFirst } from '@fower/utils'
 
 export function isMatch(key: string) {
   return /^leading(None|Tight|Snug|Normal|Relaxed|Loose)?$/i.test(key)
 }
 
-export function toStyle({ key, value, isValueProp }: Atom): any {
+export function toStyle({ key, value, isValueProp }: Atom, parser: Parser): any {
   if (isValueProp) return { lineHeight: value }
 
-  const lineHeights: any = store.getTheme().lineHeights
+  const lineHeights: any = parser.store.getTheme().lineHeights
   const type = key.replace(/^leading/, '')
   const presetValue = lineHeights[downFirst(type)]
 
@@ -21,8 +21,8 @@ export function toStyle({ key, value, isValueProp }: Atom): any {
 export default (): FowerPlugin => {
   return {
     isMatch,
-    handleAtom(atom) {
-      atom.style = toStyle(atom)
+    handleAtom(atom, parser) {
+      atom.style = toStyle(atom, parser)
       return atom
     },
   }

packages/fower-plugin-placeholder/src/index.ts

@@ -1,13 +1,13 @@
-import { Atom, store } from '@fower/core'
+import { Atom, Parser } from '@fower/core'
 import { FowerPlugin } from '@fower/core'
 import { downFirst } from '@fower/utils'
 
 function isMatch(key: string) {
   return /^placeholder.+/i.test(key)
 }
 
-function toStyle({ key }: Atom): any {
-  const colors: any = store.theme.colors
+function toStyle({ key }: Atom, parser: Parser): any {
+  const colors: any = parser.store.theme.colors
   const postfix = key.replace(/^placeholder/, '')
 
   const colorName = downFirst(postfix)
@@ -19,10 +19,10 @@ function toStyle({ key }: Atom): any {
 export default (): FowerPlugin => {
   return {
     isMatch,
-    handleAtom(atom) {
+    handleAtom(atom, parser) {
       atom.meta.pseudo = 'placeholder'
       atom.meta.pseudoPrefix = '::'
-      atom.style = toStyle(atom)
+      atom.style = toStyle(atom, parser)
       return atom
     },
   }

packages/fower-plugin-ring/src/index.ts

@@ -1,5 +1,5 @@
 import { FowerPlugin } from '@fower/core'
-import { store, Atom } from '@fower/core'
+import { Parser, Atom } from '@fower/core'
 import { downFirst } from '@fower/utils'
 import { formatColor } from '@fower/color-helper'
 
@@ -9,8 +9,8 @@ function isMatch(key: string) {
   return ringReg.test(key)
 }
 
-function toStyle(atom: Atom): any {
-  const { colors } = store.theme
+function toStyle(atom: Atom, parser: Parser): any {
+  const { colors } = parser.store.theme
   type ColorKey = keyof typeof colors
   let width: string = '1'
   let color: ColorKey = 'brand500'
@@ -41,8 +41,8 @@ function toStyle(atom: Atom): any {
 export default (): FowerPlugin => {
   return {
     isMatch,
-    handleAtom(atom) {
-      atom.style = toStyle(atom)
+    handleAtom(atom, parser) {
+      atom.style = toStyle(atom, parser)
 
       return atom
     },

packages/fower-plugin-rounded/src/index.ts

@@ -1,4 +1,4 @@
-import { FowerPlugin, store } from '@fower/core'
+import { FowerPlugin, Parser } from '@fower/core'
 
 const Top = 'Top'
 const Left = 'Left'
@@ -26,9 +26,9 @@ export function isMatch(key: string) {
  * @param value
  * @returns
  */
-export function toStyle(atomKey: string, value: any) {
+export function toStyle(atomKey: string, value: any, parser: Parser) {
   let style: any = {}
-  const radii: any = store.getTheme().radii || {}
+  const radii: any = parser.config.theme.radii || {}
   const radiiKeys = Object.keys(radii) || []
   const presetReg = new RegExp(`(${radiiKeys.join('|')})$`, 'i')
 
@@ -67,8 +67,8 @@ export function toStyle(atomKey: string, value: any) {
 export default (): FowerPlugin => {
   return {
     isMatch,
-    handleAtom(atom) {
-      atom.style = toStyle(atom.key, atom.value)
+    handleAtom(atom, parser) {
+      atom.style = toStyle(atom.key, atom.value, parser)
       return atom
     },
   }