alga-css - npm Package Compare versions

alga/backX.alga

alga/backY.alga

alga/columns.alga

alga/offCanvas.alga

alga/slideX.alga

alga/slideY.alga

src/cores/layer.js

src/helpers/calcHelper.js

src/helpers/svgHelper.js

src/properties/alignment.js

src/properties/background.js

src/properties/border.js

src/properties/element.js

src/properties/list.js

src/properties/object.js

src/properties/pad.js

src/properties/page.js

src/properties/position.js

src/properties/size.js

src/properties/text.js

src/properties/transition.js

18

package.json

		{
		"name": "alga-css",
		"version": "1.0.0-beta-5",
		"description": "Alga CSS is a scope or component-first CSS toolkit for quickly mix or compose CSS components and properties",
		"version": "1.0.0-beta-50",
		"description": "Alga CSS is a component oriented CSS framework for quickly inject, reuse or compose the style in a single file and can be called inside JavaScript framework SFC file",
		"main": "./src/index.js",
		"bin": "./bin/algac",
		"bin": {
		"alga-css": "bin/algac"
		},
		"scripts": {
		@@ -34,11 +36,11 @@ "test": "jest",
		"devDependencies": {
		"eslint": "^8.7.0",
		"jest": "^27.4.7",
		"postcss": "^8.4.14"
		"eslint": "^8.53.0",
		"jest": "^29.7.0",
		"postcss": "^8.4.31"
		},
		"dependencies": {
		"chokidar": "^3.5.3",
		"glob": "^7.2.0",
		"minimist": "^1.2.6"
		"glob": "^10.3.10",
		"minimist": "^1.2.8"
		}
		}

185

README.md

		@@ -15,13 +15,10 @@ <p align="center">
		# Alga CSS
		Alga CSS is a scope or component-first CSS toolkit for quickly mix or compose CSS components and properties, visit [https://algacss.com](https://algacss.com 'Alga CSS').
		Alga CSS is a component oriented CSS framework for quickly inject, reuse or compose the style in a single file and can be called inside JavaScript framework SFC file. It can help build any Web Application faster by using defualt component first and then the component or the style can be modified to what the Client/Customer want.

		Older version only work on Unix/Linux based operating system, if you're using Windows, that mean you need to use the newest version otherwise the default directives won't work (I mean all the CSS components from alga directory not being read), this is because of bug that I have fixed now.

		The documentation is still in development stage, so we expected it will finish around 2024. Because of that, if you use this Alga CSS, please check the examples folder, I put all the HTML/UI testing files in that folder and test folder as well.

		All the main features:
		1. Created for scoped CSS
		1. Created for global/scoped CSS
		2. As a PostCSS plugin
		3. Can be store as a CSS component
		4. Extract classes from any major JS Frameworks
		3. Can be stored as an Alga component (`@alga` directive and `.alga` format file)
		4. And then can be converted to CSS component (`@layer` cascading inheritance)
		5. Extract classes from any major JS Frameworks

		@@ -36,3 +33,7 @@ ## Installation and Setup

		yarn add alga-css
		yarn add alga-css --dev

		#or for testing (with next tag)

		npm install alga-css@next --save-dev
		```
		@@ -48,2 +49,5 @@
		algacss({
		important: false, /you may want to render style inside @layer cascading inheritance/
		directive: 'use', /insert 'layer' if you want a valid CSS, @layer instead of @use/
		mode: '[data-mode={theme}]', /you can replace it with '.{theme}-mode' /
		extract: [
		@@ -53,3 +57,4 @@ './src/*/.html',
		],
		src: './src/styles/*.alga'
		src: './src/styles/*.alga',
		plugins: []
		})
		@@ -60,44 +65,26 @@ ]

		## Class Name Structure
		Alga CSS uses special character `-` to gab classes from HTML elements or Vue components, and it uses `:` for breakpoints and states and also `_` as a divider or separator of css values.
		## Compiling to CSS Cascading Inheritance
		Alga CSS support converting component from `.alga` format file to `.css` file and it will compile all the code within `@alga` directive and place it inside `@layer` cascading inheritance and it can be imported directly to another CSS file or maybe injected to JS Framework via specific tools.

		```css
		/* highly recommended */
		<span class="marginTop-0.75rem padding-10px md:marginTop-5pct color-rgb(205,45,67) backgroundColor-hexfff"></span>
		```sh
		npx alga-css navBar ./path/to/navBar.css

		.className {
		ref: marginTop-0.75rem padding-10px color-rgb(205,45,67) backgroundColor-hexfff;
		screen-md: marginTop-5pct;
		}
		#or

		/* class structure: property (camelCase for prop name and prop value separated by - or dash) */
		justifyContent-spaceBetween
		npx alga-css ./folder/navBar.alga ./folder/navBar.css
		```

		/* class structure: unit size (pct is unit size in percent) */
		width-100pct
		height-250px
		padding-1.75rem
		The command line above will generate a new CSS file with `@layer` cascading inheritance inside it after being executed in the terminal.

		/* class structure: screen, ss (extra small), sr (smaller), sm (small), md (medium), lg (large), lr (larger), ls (largest), wd (wide), wr (wider) */
		ss:paddingLeft-3px

		/* class structure: mode */
		dark:backgroundColor-hex242424
		light:backgroundColor-hexf2f2f2

		/* (prefers-color-scheme: light) { [data-mode=dark] .backgroundColor-hex242424 {} } */
		toDark:backgroundColor-hex242424

		/* (prefers-color-scheme: dark) { [data-mode=light] .backgroundColor-hexf2f2f2 {} } */
		toLight:backgroundColor-hexf2f2f2

		mode:backgroundColor-hexfff /* for [data-mode=dark] .backgroundColor-hexfff {} */

		/* class structure: state */
		hover:backgroundColor-hex2f2f2f
		facus:paddingLeft-3px
		```css
		/* ./folder/navBar.css */
		@layer navBar {
		.navBar {
		...
		}
		}
		```

		## CSS Component
		We provide alga format `.alga` for creating CSS component.
		We provide `.alga` format file for storing styles as a component within `@alga` directive and can be converted to `@layer` cascade inheritance within `.css` file, this only happen if the `important` option has been set to `false`, this is because in the pass all utility-classes of Alga CSS rely on `!important` to override the css property value from certain component.

		@@ -122,22 +109,116 @@ ```css

		/* navBar.vue <style scoped> */
		/* navBar.vue <style scoped> or app.css */
		@use navBar {
		size: 20px;
		}

		/* set 'important: false' to render all the style within @layer */
		@layer navBar {
		.navBar {
		position: relative;
		z-index: 3;
		padding-top: 20px; /* 0.75rem is the default that being override via props */
		padding-bottom: 20px;
		}
		}
		```

		## Mixin and Composing CSS Component
		to compose the CSS component.
		## State Management
		Usually we use `props` to permanently changes the specific property value, but sometime we want to change all the values at one without having to replace it one by one, so here is why we provide state management and it must be put on top of all components.

		```css
		/* layout.alga */
		@use base;
		@use container;
		@use componentOne {
		bgActive: red;
		}
		@use componentTwo {
		bgActive: red;
		}
		@use componentThere {
		bgActive: red;
		}
		@use modules;
		@use helpers;
		```

		@import 'navBar.alga'
		Rather than passing value via props to each component one by one, we can use `@define state` instead, so we can rewrite all the component property values by just one line of code.

		@alga layout {
		use: navBar;
		```css
		@define states {
		bgActive: red;
		}

		@use layout;
		@use base;
		@use container;
		@use componentOne;
		@use componentTwo;
		@use componentThere;
		@use modules;
		@use helpers;
		```

		## @layer instead of @use

		Moreover, you may want to use only valid CSS syntax in any style sheets both global style or scoped style, so Alga CSS also provide a customizable directive, but only 2 values accepted which is either `use` or `layer` available.

		```css
		@define states {
		bgActive: red;
		}

		@layer base;
		@layer container;
		@layer componentOne;
		@layer componentTwo;
		@layer componentThere;
		@layer modules;
		@layer helpers;

		/* or */
		@layer base, container, componentOne, componentTwo, componentThere;
		@layer modules;
		@layer helpers;
		```

		Just one caveat, for `@layer modules;` and `@layer helpers;` cannot be stack together with other components and also for `props` only can be passed via state management or `@define states`.

		## Class Name Structure
		Alga CSS uses special character `-` to gab classes from HTML elements or Vue components, and it uses `:` for breakpoints and states and also `_` as a divider or separator of css values.

		```css
		/* highly recommended */
		<span class="marginTop-0.75rem padding-10px md:marginTop-5pct color-rgb(205,45,67) backgroundColor-hexfff"></span>

		.className {
		ref: marginTop-0.75rem padding-10px color-rgb(205,45,67) backgroundColor-hexfff;
		screen-md: marginTop-5pct;
		}

		/* class structure: property (camelCase for prop name and prop value separated by - or dash) */
		justifyContent-spaceBetween

		/* class structure: unit size (pct is unit size in percent) */
		width-100pct
		height-250px
		padding-1.75rem

		/* class structure: screen, ss (extra small), sr (smaller), sm (small), md (medium), lg (large), lr (larger), ls (largest), wd (wide), wr (wider) */
		ss:paddingLeft-3px

		/* class structure: mode */
		dark:backgroundColor-hex242424
		light:backgroundColor-hexf2f2f2

		/* (prefers-color-scheme: light) { [data-mode=dark] .backgroundColor-hex242424 {} } */
		toDark:backgroundColor-hex242424

		/* (prefers-color-scheme: dark) { [data-mode=light] .backgroundColor-hexf2f2f2 {} } */
		toLight:backgroundColor-hexf2f2f2

		/* class structure: state */
		hover:backgroundColor-hex2f2f2f
		facus:paddingLeft-3px
		```

4

src/configs/preset.js

		@@ -19,13 +19,9 @@ module.exports = {
		mt: 'marginTop',
		me: 'marginRight',
		mr: 'marginRight',
		mb: 'marginBottom',
		ms: 'marginLeft',
		ml: 'marginLeft',
		p: 'padding',
		pt: 'paddingTop',
		pe: 'paddingRight',
		pr: 'paddingRight',
		pb: 'paddingBottom',
		ps: 'paddingLeft',
		pl: 'paddingLeft',
		@@ -32,0 +28,0 @@ bd: 'border',

28

src/configs/properties.js

		@@ -1,1 +0,27 @@
		module.exports = ['accentColor', 'alignContent', 'alignItems', 'alignSelf', 'all', 'animation', 'animationDelay', 'animationDirection', 'animationDuration', 'animationFillMode', 'animationIterationCount', 'animationName', 'animationPlayState', 'animationTimingFunction', 'backdropFilter', 'backfaceVisibility', 'background', 'backgroundAttachment', 'backgroundBlendMode', 'backgroundClip', 'backgroundColor', 'backgroundImage', 'backgroundOrigin', 'backgroundPosition', 'backgroundRepeat', 'backgroundSize', 'border', 'borderBottom', 'borderBottomColor', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomStyle', 'borderBottomWidth', 'borderCollapse', 'borderColor', 'borderImage', 'borderImageOutset', 'borderImageRepeat', 'borderImageSlice', 'borderImageSource', 'borderImageWidth', 'borderLeft', 'borderLeftColor', 'borderLeftStyle', 'borderLeftWidth', 'borderRadius', 'borderRight', 'borderRightColor', 'borderRightStyle', 'borderRightWidth', 'borderSpacing', 'borderStyle', 'borderTop', 'borderTopColor', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopStyle', 'borderTopWidth', 'borderWidth', 'bottom', 'boxDecorationBreak', 'boxShadow', 'boxSizing', 'breakAfter', 'breakBefore', 'breakInside', 'captionSide', 'caretColor', 'clear', 'clip', 'clipPath', 'color', 'columnCount', 'columnFill', 'columnGap', 'columnRule', 'columnRuleColor', 'columnRuleStyle', 'columnRuleWidth', 'columnSpan', 'columnWidth', 'columns', 'content', 'counterIncrement', 'counterReset', 'cursor', 'direction', 'display', 'emptyCells', 'filter', 'flex', 'flexBasis', 'flexDirection', 'flexFlow', 'flexGrow', 'flexShrink', 'flexWrap', 'float', 'font', 'fontFamily', 'fontFeatureSettings', 'fontKerning', 'fontSize', 'fontSizeAdjust', 'fontStretch', 'fontStyle', 'fontVariant', 'fontVariantCaps', 'fontWeight', 'gap', 'grid', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridColumn', 'gridColumnEnd', 'gridColumnGap', 'gridColumnStart', 'gridGap', 'gridRow', 'gridRowEnd', 'gridRowGap', 'gridRowStart', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateColumns', 'gridTemplateRows', 'hangingPunctuation', 'height', 'hyphens', 'imageRendering', 'isolation', 'justifyContent', 'justifyItems', 'justifySelf', 'left', 'letterSpacing', 'lineHeight', 'listStyle', 'listStyleImage', 'listStylePosition', 'listStyleType', 'margin', 'marginBottom', 'marginLeft', 'marginRight', 'marginTop', 'maskImage', 'maskMode', 'maskOrigin', 'maskPosition', 'maskRepeat', 'maskSize', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'mixBlendMode', 'objectFit', 'objectPosition', 'opacity', 'order', 'orphans', 'outline', 'outlineColor', 'outlineOffset', 'outlineStyle', 'outlineWidth', 'overflow', 'overflowWrap', 'overflowX', 'overflowY', 'padding', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'pageBreakAfter', 'pageBreakBefore', 'pageBreakInside', 'perspective', 'perspectiveOrigin', 'pointerEvents', 'position', 'quotes', 'resize', 'right', 'rowGap', 'scrollBehavior', 'tabSize', 'tableLayout', 'textAlign', 'textAlignLast', 'textDecoration', 'textDecorationColor', 'textDecorationLine', 'textDecorationStyle', 'textDecorationThickness', 'textIndent', 'textJustify', 'textOverflow', 'textShadow', 'textTransform', 'top', 'transform', 'transformOrigin', 'transformStyle', 'transition', 'transitionDelay', 'transitionDuration', 'transitionProperty', 'transitionTimingFunction', 'unicodeBidi', 'userSelect', 'verticalAlign', 'visibility', 'whiteSpace', 'widows', 'width', 'wordBreak', 'wordSpacing', 'wordWrap', 'writingMode', 'zIndex', 'placeContent', 'placeSelf', 'placeItems', 'inset', 'appearance', 'colorScheme', 'fontSynthesis', 'fontSmoothing', 'osxFontSmoothing', 'textSizeAdjust', 'textRendering', 'willChange']
		const backgroundProperties = require('../properties/background.js')
		const borderProperties = require('../properties/border.js')
		const textProperties = require('../properties/text.js')
		const alignmentProperties = require('../properties/alignment.js')
		const transitionProperties = require('../properties/transition.js')
		const listProperties = require('../properties/list.js')
		const objectProperties = require('../properties/object.js')
		const padProperties = require('../properties/pad.js')
		const pageProperties = require('../properties/page.js')
		const positionProperties = require('../properties/position.js')
		const sizeProperties = require('../properties/size.js')
		const elementProperties = require('../properties/element.js')

		module.exports = [
		...backgroundProperties,
		...borderProperties,
		...textProperties,
		...alignmentProperties,
		...transitionProperties,
		...listProperties,
		...objectProperties,
		...padProperties,
		...pageProperties,
		...positionProperties,
		...sizeProperties,
		...elementProperties
		]

10

src/configs/screen.js

		@@ -27,2 +27,12 @@ module.exports = {
		},
		pd: {
		alias: ['pad'],
		size: '1200px',
		minmax: 'min'
		},
		tb: {
		alias: ['tablet'],
		size: '1200px',
		minmax: 'max'
		},
		lg: {
		@@ -29,0 +39,0 @@ alias: ['large', 'l'],

6

src/configs/state.js

		@@ -19,3 +19,9 @@ module.exports = {
		state: ':checked'
		},
		ltr: {
		state: 'html[dir=ltr]'
		},
		rtl: {
		state: 'html[dir=rtl]'
		}
		}

2

src/configs/units.js

		module.exports = {
		length: ['em', 'ex', 'per', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ch', 'rem', 'vh', 'vw', 'vmin', 'vmax', 'cap', 'ic', 'lh', 'rlh', 'vi', 'vb', 'Q'],
		length: ['em', 'ex', 'pct', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ch', 'rem', 'vh', 'vw', 'vmin', 'vmax', 'cap', 'ic', 'lh', 'rlh', 'vi', 'vb', 'Q'],
		angle: ['deg', 'rad', 'grad', 'turn'],
		@@ -4,0 +4,0 @@ time: ['s', 'ms'],

142

src/cores/atrules.js

		@@ -16,4 +16,5 @@ const postcss = require('postcss')
		const newColor = opts?.color \|\| color
		const newImportant = opts?.important === false ? false : true

		const refs = ref.trim().split(/-\|:/).filter(i => i !== '')
		const refs = ref.replace('--', '-n').replaceAll('_-', '_n').trim().split(/-\|:/).filter(i => i !== '')

		@@ -50,7 +51,7 @@ if(ref.includes(':')) { //Number(refs.length) === 3
		}
		const bgDeclVal = postcss.decl({ prop: 'background-color', value: value(newValue, opts) + ' !important', source: source })
		const bgDeclVal = postcss.decl({ prop: 'background-color', value: value(newValue, opts) + (newImportant ? ' !important' : ''), source: source })
		newRule.append(bgDeclVal)
		const bdDeclVal = postcss.decl({ prop: 'border-color', value: value(newValue, opts) + ' !important', source: source })
		const bdDeclVal = postcss.decl({ prop: 'border-color', value: value(newValue, opts) + (newImportant ? ' !important' : ''), source: source })
		newRule.append(bdDeclVal)
		const fgDeclVal = postcss.decl({ prop: 'color', value: '#fff !important', source: source })
		const fgDeclVal = postcss.decl({ prop: 'color', value: '#fff' + (newImportant ? ' !important' : ''), source: source })
		newRule.append(fgDeclVal)
		@@ -64,3 +65,3 @@ } else if(Object.keys(shorts).includes(refs[2])) {
		}
		const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[3], refOpt) + ' !important', source: source })
		const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[3], refOpt) + (newImportant ? ' !important' : ''), source: source })
		newRule.append(declVal)
		@@ -79,3 +80,3 @@ }

		const declVal = postcss.decl({ prop: camelDash(refs[2]), value: value(refs[3], refOpt) + ' !important', source: source })
		const declVal = postcss.decl({ prop: camelDash(refs[2]), value: value(refs[3], refOpt) + (newImportant ? ' !important' : ''), source: source })
		newRule.append(declVal)
		@@ -87,3 +88,3 @@ }
		} else {
		if([...properties, ...Object.keys(newPreset), ...Object.keys(newColor), ...Object.keys(shorts)].includes(refs[1])) {
		if(['ms', 'me', 'ps', 'pe'].includes(refs[1])) {
		if(!newObj[refs[0]]) {
		@@ -97,2 +98,99 @@ if(newScreen[refs[0]].minmax === 'max') {

		const refDirectionMode = {
		ms: [{ltr: 'marginLeft'}, {rtl: 'marginRight'}],
		me: [{ltr: 'marginRight'}, {rtl: 'marginLeft'}],
		ps: [{ltr: 'paddingLeft'}, {rtl: 'paddingRight'}],
		pe: [{ltr: 'paddingRight'}, {rtl: 'paddingLeft'}]
		}
		let newRule = null
		for(let dirMode of refDirectionMode[refs[1]]) {
		if(dirMode.ltr) {
		newRule = postcss.rule({ selector: opts.state['ltr'].state+' .'+ref.replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\$').replaceAll(')', '\$'), source: source })
		const refOpt = {
		...opts,
		property: dirMode.ltr
		}
		const declVal = postcss.decl({ prop: camelDash(dirMode.ltr), value: value(refs[1], refOpt) + (newImportant ? ' !important' : ''), source: source })
		newRule.append(declVal)
		} else if(dirMode.rtl) {
		newRule = postcss.rule({ selector: opts.state['rtl'].state+' .'+ref.replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\$').replaceAll(')', '\$'), source: source })
		const refOpt = {
		...opts,
		property: dirMode.rtl
		}
		const declVal = postcss.decl({ prop: camelDash(dirMode.rtl), value: value(refs[2], refOpt) + (newImportant ? ' !important' : ''), source: source })
		newRule.append(declVal)
		}
		}
		newObj[refs[0]].append(newRule)
		} else if(['cols', 'col', 'offset'].includes(refs[1])) {
		if(!newObj[refs[0]]) {
		if(newScreen[refs[0]].minmax === 'max') {
		newObj[refs[0]] = postcss.atRule({ name: 'media', params: `(max-width: ${newScreen[refs[0]].size})`, source: source })
		} else {
		newObj[refs[0]] = postcss.atRule({ name: 'media', params: `(min-width: ${newScreen[refs[0]].size})`, source: source })
		}
		}

		if('col' === refs[1]) {
		const newRule = postcss.rule({ selector: '.cols .'+ref.replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\$').replaceAll(')', '\$'), source: source })
		let valNum = 'auto';
		if(isNaN(refs[2]) === false) {
		valNum = 8.33333333 * Number(refs[2])
		valNum = String(valNum)+'%'
		}
		const newCols = [
		{prop: 'flex', value: '0 0 auto'},
		{prop: 'width', value: valNum},
		]
		for(let newCol of newCols) {
		const declVal = postcss.decl({ prop: camelDash(newCol.prop), value: newCol.value + (newImportant ? ' !important' : ''), source: source })
		newRule.append(declVal)
		}
		newObj[refs[0]].append(newRule)
		} else if('offset' === refs[1]) {
		for(let offset = 0; offset < 2; offset++){
		const dirMode = offset >= 1 ? opts.state['rtl'].state+' ' : ''
		const newRule = postcss.rule({ selector: dirMode+'.cols .'+ref.replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\$').replaceAll(')', '\$'), source: source })
		let valNum = 'auto';
		if(isNaN(refs[2]) === false) {
		valNum = 8.33333333 * Number(refs[2])
		valNum = String(valNum)+'%'
		}
		const newCols = [
		{prop: 'flex', value: '0 0 auto'},
		{prop: (offset >= 1 ? 'marginRight' : 'marginLeft'), value: valNum},
		]
		for(let newCol of newCols) {
		const declVal = postcss.decl({ prop: camelDash(newCol.prop), value: newCol.value + (newImportant ? ' !important' : ''), source: source })
		newRule.append(declVal)
		}
		newObj[refs[0]].append(newRule)
		}
		} else {
		const newRule = postcss.rule({ selector: '.'+ref.replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\$').replaceAll(')', '\$')+' > *', source: source })
		let valNum = 'auto';
		if(isNaN(refs[2]) === false) {
		valNum = 100 / Number(refs[2])
		valNum = String(valNum)+'%'
		}
		const newCols = [
		{prop: 'flex', value: '0 0 auto'},
		{prop: 'width', value: valNum},
		]
		for(let newCol of newCols) {
		const declVal = postcss.decl({ prop: camelDash(newCol.prop), value: newCol.value + (newImportant ? ' !important' : ''), source: source })
		newRule.append(declVal)
		}
		newObj[refs[0]].append(newRule)
		}
		} else if([...properties, ...Object.keys(newPreset), ...Object.keys(newColor), ...Object.keys(shorts)].includes(refs[1])) {
		if(!newObj[refs[0]]) {
		if(newScreen[refs[0]].minmax === 'max') {
		newObj[refs[0]] = postcss.atRule({ name: 'media', params: `(max-width: ${newScreen[refs[0]].size})`, source: source })
		} else {
		newObj[refs[0]] = postcss.atRule({ name: 'media', params: `(min-width: ${newScreen[refs[0]].size})`, source: source })
		}
		}

		const newRule = postcss.rule({ selector: '.'+ref.replaceAll(':', '\\:').replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\$').replaceAll(')', '\$'), source: source })
		@@ -110,7 +208,7 @@ /*const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2]) })
		}
		const bgDeclVal = postcss.decl({ prop: 'background-color', value: value(newValue, opts) + ' !important', source: source })
		const bgDeclVal = postcss.decl({ prop: 'background-color', value: value(newValue, opts) + (newImportant ? ' !important' : ''), source: source })
		newRule.append(bgDeclVal)
		const bdDeclVal = postcss.decl({ prop: 'border-color', value: value(newValue, opts) + ' !important', source: source })
		const bdDeclVal = postcss.decl({ prop: 'border-color', value: value(newValue, opts) + (newImportant ? ' !important' : ''), source: source })
		newRule.append(bdDeclVal)
		const fgDeclVal = postcss.decl({ prop: 'color', value: '#fff !important', source: source })
		const fgDeclVal = postcss.decl({ prop: 'color', value: '#fff' + (newImportant ? ' !important' : ''), source: source })
		newRule.append(fgDeclVal)
		@@ -124,3 +222,3 @@ } else if(Object.keys(shorts).includes(refs[1])) {
		}
		const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[2], refOpt) + ' !important', source: source })
		const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[2], refOpt) + (newImportant ? ' !important' : ''), source: source })
		newRule.append(declVal)
		@@ -139,3 +237,3 @@ }

		const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2], refOpt) + ' !important', source: source })
		const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2], refOpt) + (newImportant ? ' !important' : ''), source: source })
		newRule.append(declVal)
		@@ -175,7 +273,7 @@ }
		}
		const bgDeclVal = postcss.decl({ prop: 'background-color', value: value(newValue, opts) + ' !important', source: source })
		const bgDeclVal = postcss.decl({ prop: 'background-color', value: value(newValue, opts) + (newImportant ? ' !important' : ''), source: source })
		newRule.append(bgDeclVal)
		const bdDeclVal = postcss.decl({ prop: 'border-color', value: value(newValue, opts) + ' !important', source: source })
		const bdDeclVal = postcss.decl({ prop: 'border-color', value: value(newValue, opts) + (newImportant ? ' !important' : ''), source: source })
		newRule.append(bdDeclVal)
		const fgDeclVal = postcss.decl({ prop: 'color', value: '#fff !important', source: source })
		const fgDeclVal = postcss.decl({ prop: 'color', value: '#fff' + (newImportant ? ' !important' : ''), source: source })
		newRule.append(fgDeclVal)
		@@ -189,3 +287,3 @@ } else if(Object.keys(shorts).includes(refs[1])) {
		}
		const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[2], refOpt) + ' !important', source: source })
		const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[2], refOpt) + (newImportant ? ' !important' : ''), source: source })
		newRule.append(declVal)
		@@ -204,3 +302,3 @@ }

		const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2], refOpt) + ' !important', source: source })
		const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2], refOpt) + (newImportant ? ' !important' : ''), source: source })
		newRule.append(declVal)
		@@ -239,7 +337,7 @@ }
		}
		const bgDeclVal = postcss.decl({ prop: 'background-color', value: value(newValue, opts) + ' !important', source: source })
		const bgDeclVal = postcss.decl({ prop: 'background-color', value: value(newValue, opts) + (newImportant ? ' !important' : ''), source: source })
		newRule.append(bgDeclVal)
		const bdDeclVal = postcss.decl({ prop: 'border-color', value: value(newValue, opts) + ' !important', source: source })
		const bdDeclVal = postcss.decl({ prop: 'border-color', value: value(newValue, opts) + (newImportant ? ' !important' : ''), source: source })
		newRule.append(bdDeclVal)
		const fgDeclVal = postcss.decl({ prop: 'color', value: '#fff !important', source: source })
		const fgDeclVal = postcss.decl({ prop: 'color', value: '#fff' + (newImportant ? ' !important' : ''), source: source })
		newRule.append(fgDeclVal)
		@@ -253,3 +351,3 @@ } else if(Object.keys(shorts).includes(refs[1])) {
		}
		const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[2], refOpt) + ' !important', source: source })
		const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[2], refOpt) + (newImportant ? ' !important' : ''), source: source })
		newRule.append(declVal)
		@@ -268,3 +366,3 @@ }

		const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2], refOpt) + ' !important', source: source })
		const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2], refOpt) + (newImportant ? ' !important' : ''), source: source })
		newRule.append(declVal)
		@@ -271,0 +369,0 @@ }

290

src/cores/component.js

		@@ -10,17 +10,19 @@ const postcss = require('postcss')
		const recursive = require('./recursive.js')
		const declaration = require('./declaration.js')

		function readPath(rp, opts) {
		function readPath(rp, fileName, componentName, opts) {
		const component = {}
		const data = fs.readFileSync(rp, 'utf8')
		let data = fs.readFileSync(rp, 'utf8')

		const splitFilePath = rp.split('/')[Number(rp.split('/').length) - 1]
		const splitFileName = splitFilePath.split('.')[0]
		let componentName = splitFileName
		component[componentName] = {}
		component[componentName]['modules'] = {}
		component[componentName]['inits'] = []
		component[fileName] = {}
		component[fileName]['modules'] = {}
		component[fileName]['inits'] = []

		const root = postcss.parse(data.replaceAll(/\{([A-Za-z0-9\-\_]+)\.([A-Za-z0-9\-\_]+)\}/g, '$1($2)'), { from: rp }) /* (\w+) */
		component[componentName]['root'] = root
		if(!data) return;
		data = data.replaceAll(/\{\{([A-Za-z0-9\-\_]+)\.([A-Za-z0-9\-\_]+)\}\}/g, '_$1($2)_')
		.replaceAll(/\{([A-Za-z0-9\-\_]+)\.([A-Za-z0-9\-\_]+)\}/g, '$1($2)')

		const root = postcss.parse(data, { from: rp }) /* (\w+) */
		component[fileName]['root'] = root

		for(let rnode of root.nodes) {
		@@ -32,3 +34,3 @@ // Convert define into property
		const paramFileName = paramFilePaths[Number(paramFilePaths.length) - 2]
		component[componentName]['modules'] = Object.assign({}, component[componentName]['modules'], readPath(param, opts))
		component[fileName]['modules'] = Object.assign({}, component[fileName]['modules'], readPath(param, fileName, componentName, opts))
		} else if(rnode.type === 'atrule' && rnode.name === 'define' && 'nodes' in rnode) {
		@@ -43,3 +45,3 @@ const param = rnode.params.trim()
		}
		component[componentName][param] = Object.assign({}, component[componentName][param], defineObj)
		component[fileName][param] = Object.assign({}, component[fileName][param], defineObj)
		// Get all provides and set a new property under provide name
		@@ -50,4 +52,5 @@ } else if(rnode.type === 'atrule' && rnode.name === 'provide' && 'nodes' in rnode) {
		...opts,
		refs: component[componentName]['refs'] \|\| {},
		props: component[componentName]['props'] \|\| {}
		refs: component[fileName]['refs'] \|\| {},
		scopes: component[fileName]['scopes'] \|\| {},
		props: Object.assign({}, component[fileName]['props'], opts.props)
		}
		@@ -59,2 +62,6 @@ const defineObj = {}
		}
		let screenObj = {}
		let stateObj = {}
		let prefersObj = {}
		let printObj = {}
		for(let dnode of rnode.nodes) {
		@@ -75,6 +82,9 @@ // Extracting content of provide
		defineObj[param].value = Object.assign({}, defineObj[param].value, splitRefsObj)
		} else if(dnode.type === 'decl' && dnode.prop.startsWith('props-')) {
		}/* else if(dnode.type === 'decl' && dnode.prop.startsWith('props-')) {
		let splitProps = dnode.prop.split('-')[1]
		if('preset' in opts && Object.keys(opts.preset).includes(splitProps)) {
		splitProps = opts.preset[splitProps]
		}
		let splitPropsObj = {}
		splitPropsObj[camelDash(splitProps)] = {
		splitPropsObj[splitProps] = {
		value: '{'+dnode.value+'}',
		@@ -84,14 +94,14 @@ source: dnode.source
		defineObj[param].value = Object.assign({}, defineObj[param].value, splitPropsObj)
		} else if(dnode.type === 'decl' && dnode.prop.startsWith('screen-')) {
		let screenObj = {}
		}*/ else if(dnode.type === 'decl' && dnode.prop.startsWith('screen-')) {
		screenObj[dnode.prop] = Object.assign({}, screenObj[dnode.prop], reference(dnode, refOpt))
		defineObj[param].value = Object.assign({}, defineObj[param].value, screenObj)
		} else if(dnode.type === 'decl' && dnode.prop.startsWith('state-')) {
		let stateObj = {}
		stateObj[dnode.prop] = Object.assign({}, stateObj[dnode.prop], reference(dnode, refOpt))
		defineObj[param].value = Object.assign({}, defineObj[param].value, stateObj)
		} else if(dnode.type === 'decl' && dnode.prop.startsWith('prefers-')) {
		let prefersObj = {}
		prefersObj[dnode.prop] = Object.assign({}, prefersObj[dnode.prop], reference(dnode, refOpt))
		defineObj[param].value = Object.assign({}, defineObj[param].value, prefersObj)
		} else if(dnode.type === 'decl' && dnode.prop === 'print') {
		printObj[dnode.prop] = Object.assign({}, printObj[dnode.prop], reference(dnode, refOpt))
		defineObj[param].value = Object.assign({}, defineObj[param].value, printObj)
		} else if(dnode.type === 'decl' && dnode.prop.startsWith('webkit-')) {
		@@ -141,8 +151,9 @@ let splitRefs = dnode.prop.split('-')[1]
		}
		component[componentName]['provide'] = Object.assign({}, component[componentName]['provide'], defineObj)
		component[fileName]['provide'] = Object.assign({}, component[fileName]['provide'], defineObj)
		} else if(rnode.type === 'atrule' && rnode.name === 'alga' && 'nodes' in rnode) {
		const refOpt = {
		...opts,
		refs: component[componentName]['refs'] \|\| {},
		props: component[componentName]['props'] \|\| {}
		refs: component[fileName]['refs'] \|\| {},
		scopes: component[fileName]['scopes'] \|\| {},
		props: Object.assign({}, component[fileName]['props'], opts.props)
		}
		@@ -153,3 +164,3 @@
		const arrowParams = param.split(/$\|$/g)
		param = component[componentName][arrowParams[0]][arrowParams[1]].value
		param = component[fileName][arrowParams[0]][arrowParams[1]].value
		}
		@@ -166,6 +177,7 @@ let defineObj = {}
		if('params' in dnode && dnode.params !== '') {
		component[componentName]['refs'] = Object.assign({}, component[componentName]['refs'], component[componentName]['modules'][dnode.params.trim()]['refs'])
		component[componentName]['props'] = Object.assign({}, component[componentName]['props'], component[componentName]['modules'][dnode.params.trim()]['props'])
		component[componentName]['provide'] = Object.assign({}, component[componentName]['provide'], component[componentName]['modules'][dnode.params.trim()]['provide'])
		defineObj['content'][randId].push(component[componentName]['modules'][dnode.params.trim()][dnode.params.trim()]['body'])
		component[fileName]['refs'] = Object.assign({}, component[fileName]['refs'], component[fileName]['modules'][dnode.params.trim()]['refs'])
		component[fileName]['scopes'] = Object.assign({}, component[fileName]['scopes'], component[fileName]['modules'][dnode.params.trim()]['scopes'])
		component[fileName]['props'] = Object.assign({}, component[fileName]['props'], component[fileName]['modules'][dnode.params.trim()]['props'], opts.props)
		component[fileName]['provide'] = Object.assign({}, component[fileName]['provide'], component[fileName]['modules'][dnode.params.trim()]['provide'])
		defineObj['content'][randId].push(component[fileName]['modules'][dnode.params.trim()][dnode.params.trim()]['body'])
		}
		@@ -177,4 +189,9 @@ } else if(dnode.type === 'atrule' && dnode.name === 'keyframes') {
		const arrowDnodeParams = paramDnode.split(/$\|$/g)
		paramDnode = component[componentName][arrowDnodeParams[0]][arrowDnodeParams[1]].value
		paramDnode = component[fileName][arrowDnodeParams[0]][arrowDnodeParams[1]].value
		}
		if(paramDnode.startsWith('scopes(')) {
		const arrowDnodeParams = paramDnode.split(/$\|$/g)
		let scopeParamDnode = component[fileName][arrowDnodeParams[0]][arrowDnodeParams[1]].value
		paramDnode = `var(--scope-${arrowDnodeParams[1]}, ${scopeParamDnode})`
		}
		let keyframeDefineObj = {}
		@@ -184,3 +201,4 @@ keyframeDefineObj['@keyframes '+paramDnode] = []
		let keyframeRecursiveDefineObj = recursive(kfnode, {
		'provide': component[componentName]['provide']
		...refOpt,
		'provide': component[fileName]['provide']
		})
		@@ -192,20 +210,121 @@ keyframeDefineObj['@keyframes '+paramDnode].push(keyframeRecursiveDefineObj.body)
		}
		} else if(dnode.type === 'atrule' && dnode.name === 'if') {
		} else if(dnode.type === 'atrule' && dnode.name === 'paper') {
		if('nodes' in dnode) {
		let ifDefineObj = {}
		ifDefineObj['@if '+dnode.params.trim()] = []
		for(let ifnode of dnode.nodes) {
		let ifRecursiveDefineObj = recursive(ifnode, {
		let paramDnode = dnode.params.trim()
		if(paramDnode.startsWith('refs(') \|\| paramDnode.startsWith('props(')) {
		const arrowDnodeParams = paramDnode.split(/$\|$/g)
		paramDnode = component[fileName][arrowDnodeParams[0]][arrowDnodeParams[1]].value
		}
		if(paramDnode.startsWith('scopes(')) {
		const arrowDnodeParams = paramDnode.split(/$\|$/g)
		let scopeParamDnode = component[fileName][arrowDnodeParams[0]][arrowDnodeParams[1]].value
		paramDnode = `var(--scope-${arrowDnodeParams[1]}, ${scopeParamDnode})`
		}
		let paperDefineObj = {}
		paperDefineObj['@page '+paramDnode] = []
		for(let kfnode of dnode.nodes) {
		let paperRecursiveDefineObj = recursive(kfnode, {
		...refOpt,
		'provide': component[componentName]['provide']
		'provide': component[fileName]['provide']
		})
		ifDefineObj['@if '+dnode.params.trim()].push(ifRecursiveDefineObj.body)
		paperDefineObj['@page '+paramDnode].push(paperRecursiveDefineObj.body)
		}
		ifDefineObj['@if '+dnode.params.trim()] = ifDefineObj['@if '+dnode.params.trim()].flat()
		defineObj['content'][randId].push(ifDefineObj)
		paperDefineObj['@page '+paramDnode] = paperDefineObj['@page '+paramDnode].flat()
		defineObj['content'][randId].push(paperDefineObj)
		}
		} else if(dnode.type === 'atrule' && dnode.name === 'if') {
		if('nodes' in dnode) {
		const ifParams = dnode?.params?.trim() \|\| ''
		const ifProps = Object.assign({}, component[fileName]['props'], opts.props)
		const ifRefs = component[fileName]?.['refs'] \|\| {}

		if(ifParams.includes(' is ')) {
		const splitKey = ifParams.split(/\sis\s/g).filter(i => i !== '')
		if(
		(ifProps?.[splitKey[0].trim()] && ifProps[splitKey[0].trim()].value === splitKey[1].trim()) \|\|
		(ifRefs?.[splitKey[0].trim()] && ifRefs[splitKey[0].trim()].value === splitKey[1].trim())
		) {

		for(let ifnode of dnode.nodes) {
		let ifRecursiveDefineObj = recursive(ifnode, {
		...refOpt,
		'provide': component[fileName]['provide']
		})
		defineObj['content'][randId].push(ifRecursiveDefineObj.body)
		}

		}
		} else if(ifParams.includes(' has ')) {
		const splitKey = ifParams.split(/\shas\s/g).filter(i => i !== '')
		if(
		(ifProps?.[splitKey[0].trim()] && ifProps[splitKey[0].trim()].value.replaceAll(' ', '').split(',').filter(i => i !== '').includes(splitKey[1].trim())) \|\|
		(ifRefs?.[splitKey[0].trim()] && ifRefs[splitKey[0].trim()].value.replaceAll(' ', '').split(',').filter(i => i !== '').includes(splitKey[1].trim()))
		) {

		for(let ifnode of dnode.nodes) {
		let ifRecursiveDefineObj = recursive(ifnode, {
		...refOpt,
		'provide': component[fileName]['provide']
		})
		defineObj['content'][randId].push(ifRecursiveDefineObj.body)
		}

		}
		}

		}
		} else if(dnode.type === 'atrule' && dnode.name === 'for') {
		if('nodes' in dnode) {
		const forParams = dnode?.params?.trim() \|\| ''
		const forProps = Object.assign({}, component[fileName]['props'], opts.props)
		const forRefs = component[fileName]?.['refs'] \|\| {}

		if(forParams.includes(' in ')) {
		const splitKey = forParams.split(/\sin\s/g).filter(i => i !== '')
		if(Number(splitKey.length) === 2) {

		const firstVal = splitKey[0].trim()
		const lastVal = forProps?.[splitKey[1].trim()].value.replaceAll(' ', '').split(',').filter(i => i !== '') \|\| forRefs?.[splitKey[1].trim()].value.replaceAll(' ', '').split(',').filter(i => i !== '') \|\| []
		for(let forItem of lastVal) {
		if(forItem) {
		for(let fornode of dnode.nodes) {
		let forRecursiveDefineObj = recursive(fornode, {
		...refOpt,
		'provide': component[fileName]['provide'],
		'each': firstVal,
		[firstVal]: forItem
		})
		defineObj['content'][randId].push(forRecursiveDefineObj.body)
		}
		}
		}

		}
		} else if(forParams.includes(' of ')) {
		const splitKey = forParams.split(/\sof\s/g).filter(i => i !== '')
		if(Number(splitKey.length) === 2) {

		const firstVal = splitKey[0].trim()
		const lastVal = (isNaN(splitKey[1].trim()) === false) ? Number(splitKey[1].trim()) : 0

		for(let i = 1; i <= Number(lastVal); i++) {
		for(let fornode of dnode.nodes) {
		let forRecursiveDefineObj = recursive(fornode, {
		...refOpt,
		'provide': component[fileName]['provide'],
		'each': firstVal,
		[firstVal]: i
		})
		defineObj['content'][randId].push(forRecursiveDefineObj.body)
		}
		}

		}
		}

		}
		} else {
		let recursiveDefineObj = recursive(dnode, {
		...refOpt,
		'provide': component[componentName]['provide']
		'provide': component[fileName]['provide']
		})
		@@ -219,5 +338,5 @@ defineObj['content'][randId].push(recursiveDefineObj.body)
		defineObj['body'] = Object.values(defineObj['content']).flat()
		component[componentName][param] = Object.assign({}, component[componentName][param], defineObj)
		component[fileName][param] = Object.assign({}, component[fileName][param], defineObj)
		} else if(rnode.type === 'atrule' && rnode.name === 'use') {
		component[componentName]['inits'].push(rnode)
		component[fileName]['inits'].push(rnode)
		} else if(rnode.type === 'atrule' && rnode.name === 'export') {
		@@ -227,5 +346,5 @@ const param = rnode.params?.trim() \|\| ''
		for(let dnode of newParams) {
		if(component[componentName]['modules'][dnode.trim()]) {
		component[componentName]['modules'][dnode.trim()]['inits'].push(rnode.clone({ params: dnode.trim() }))
		component[dnode.trim()] = component[componentName]['modules'][dnode.trim()]
		if(component[fileName]['modules'][dnode.trim()]) {
		component[fileName]['modules'][dnode.trim()]['inits'].push(rnode.clone({ params: dnode.trim() }))
		component[dnode.trim()] = component[fileName]['modules'][dnode.trim()]
		}
		@@ -235,32 +354,63 @@ }
		}
		return component

		let newBodyVar = []
		if(component[fileName]?.[componentName]?.['body']) {
		newBodyVar = component[fileName][componentName]['body']
		}
		let newNodes = [
		...declaration(newBodyVar,
		{
		refs: component[fileName]['refs'],
		scopes: component[fileName]['scopes'],
		props: Object.assign({}, component[fileName]['props'], opts.props),
		provide: component[fileName]['provide']
		},
		{
		screen: opts.screen,
		state: opts.state,
		prefers: opts.prefers,
		color: opts.color
		})
		]

		const newRoot = component[fileName]['root']
		newRoot.removeAll()
		newRoot.append(...newNodes)

		return newRoot
		}

		module.exports = (paths, opts) => {
		let component = {}
		module.exports = (paths, fileName, componentName, opts) => {
		let component = null

		const coreFile = path.resolve(__dirname, './../../alga/'+opts.componentName+'.alga')
		if(fs.existsSync(coreFile)) {
		component = Object.assign({}, component, readPath(coreFile, opts))
		}

		if(typeof paths === 'string') {
		const files = glob.sync(paths, {})
		for(let file of files) {
		if(file.endsWith('alga.css') \|\| file.endsWith('.alga')) {
		if(file.includes(opts.componentName)) {
		component = Object.assign({}, component, readPath(file, opts))
		break;
		if(fileName) {
		const coreFile = path.resolve(__dirname, './../../alga/'+fileName+'.alga')
		if(fs.existsSync(coreFile)) {
		component = readPath(coreFile, fileName, componentName, opts)
		}

		if(typeof paths === 'string') {
		const files = glob.sync(paths, {})
		for(let file of files) {
		if(file.endsWith(fileName+'.alga')) {
		const splitFilePaths = file.split(/\/\|\\/)
		const splitFileName = splitFilePaths[Number(splitFilePaths.length) - 1]
		if(splitFileName === fileName+'.alga') {
		component = readPath(file, fileName, componentName, opts)
		break;
		}
		}
		}
		}
		} else if(Array.isArray(paths)) {
		for(let p of Array.from(paths)) {
		if(typeof p === 'string') {
		const files = glob.sync(p, {})
		for(let file of files) {
		if(file.endsWith('alga.css') \|\| file.endsWith('.alga')) {
		if(file.includes(opts.componentName)) {
		component = Object.assign({}, component, readPath(file, opts))
		break;
		} else if(Array.isArray(paths)) {
		for(let p of Array.from(paths)) {
		if(typeof p === 'string') {
		const files = glob.sync(p, {})
		for(let file of files) {
		if(file.endsWith(fileName+'.alga')) {
		const splitFilePaths = file.split(/\/\|\\/)
		const splitFileName = splitFilePaths[Number(splitFilePaths.length) - 1]
		if(splitFileName === fileName+'.alga') {
		component = readPath(file, fileName, componentName, opts)
		break;
		}
		}
		@@ -267,0 +417,0 @@ }

331

src/cores/declaration.js

		@@ -5,2 +5,5 @@ const postcss = require('postcss')
		const color = require('../configs/color.js')
		const camelDash = require('../helpers/camelDash.js')
		const svgHelper = require('../helpers/svgHelper.js')
		const calcHelper = require('../helpers/calcHelper.js')
		const lightenDarkenColor = require('../helpers/lightenDarkenColor.js')
		@@ -10,2 +13,3 @@
		const refs = defs.refs
		const scopes = defs.scopes
		const props = defs.props
		@@ -16,3 +20,9 @@ const provide = defs.provide
		const prefers = Object.assign({}, statusValue(opts.prefers))
		const print = {
		value: {},
		status: false,
		source: undefined
		}
		const newColor = opts?.color \|\| color
		let atFirstRuleArray = []
		let ruleArray = []
		@@ -23,46 +33,22 @@ let atRuleArray = []
		const itemKey = Object.keys(item)[0]
		if(itemKey.startsWith('@if ')) {
		if(itemKey.startsWith('@keyframes ')) {
		const itemValue = Object.values(item)[0]
		const ifKey = itemKey.replace('@if ', '')
		if(ifKey.includes(' is ')) {
		const splitKey = ifKey.trim().split(/\sis\s/g).filter(i => i !== '')
		if(
		(typeof props === 'object' && props !== null && splitKey[0].trim() in props && props[splitKey[0].trim()].value === splitKey[1].trim()) \|\|
		(typeof refs === 'object' && refs !== null && splitKey[0].trim() in refs && refs[splitKey[0].trim()].value === splitKey[1].trim())
		) {
		ruleArray.push([
		...declaration((itemValue?.value \|\| itemValue), defs, opts)
		])
		}
		} else if(ifKey.includes(' has ')) {
		const splitKey = ifKey.trim().split(/\shas\s/g).filter(i => i !== '')
		if(
		(typeof props === 'object' && props !== null && splitKey[0].trim() in props && props[splitKey[0].trim()].value.replaceAll(' ', '').split(',').filter(i => i !== '').includes(splitKey[1].trim())) \|\|
		(typeof refs === 'object' && refs !== null && splitKey[0].trim() in refs && refs[splitKey[0].trim()].value.replaceAll(' ', '').split(',').filter(i => i !== '').includes(splitKey[1].trim()))
		) {
		ruleArray.push([
		...declaration((itemValue?.value \|\| itemValue), defs, opts)
		])
		}
		}
		} else if(itemKey.startsWith('@keyframes ')) {
		const itemValue = Object.values(item)[0]
		const newAtRule = postcss.atRule({ name: 'keyframes', params: itemKey.replace('@keyframes ', '').trim(), source: Object.values(itemValue[0])[0].source })
		newAtRule.append([...declaration(itemValue, defs, opts)])
		ruleArray.push(newAtRule)
		} else if(itemKey.startsWith('@page ')) {
		const itemValue = Object.values(item)[0]
		let paperValue = itemKey.replace('@page ', '').trim()
		let paperAtRule = postcss.atRule({ name: 'page', source: Object.values(itemValue[0])[0].source })
		if(['blank', 'first', 'left', 'right'].includes(paperValue)) {
		paperValue = ':'+paperValue
		paperAtRule = postcss.atRule({ name: 'page', params: paperValue, source: Object.values(itemValue[0])[0].source })
		} else if(['topLeftCorner', 'topLeft', 'topCenter', 'topRight', 'topRightCorner', 'bottomLeftCorner', 'bottomLeft', 'bottomCenter', 'bottomRight', 'bottomRightCorner', 'leftTop', 'leftMiddle', 'leftBottom', 'rightTop', 'rightMiddle', 'rightBottom'].includes(paperValue)) {
		paperAtRule = postcss.atRule({ name: 'page', params: paperValue, source: Object.values(itemValue[0])[0].source })
		}
		paperAtRule.append([...declaration(itemValue, defs, opts)])
		atFirstRuleArray.push(paperAtRule)
		} else {
		const itemValues = Object.entries(item[itemKey].value)
		let selectorItemKey = itemKey
		if(selectorItemKey.includes('refs(') \|\| selectorItemKey.includes('props(')) {
		selectorItemKey = itemKey
		.replaceAll(/refs$(\w+)$/g, '<=>refs===$1<=>')
		.replaceAll(/props$(\w+)$/g, '<=>props===$1<=>')
		.split('<=>').map(i => {
		if(i.startsWith('refs===') \|\| i.startsWith('props===')) {
		const arrowValues = i.split('===')
		i = defs[arrowValues[0]][arrowValues[1]].value \|\| `${arrowValues[0]}-${arrowValues[1]}`
		}
		return i
		}).filter(i => i !== '').join('')
		}
		const newRule = postcss.rule({ selector: selectorItemKey, source: item[itemKey].source })
		@@ -79,3 +65,3 @@ for(let [key, val] of itemValues) {
		let declVal = undefined
		if(val.value.trim().startsWith('{') && val.value.trim().endsWith('}')) {
		/*if(val.value.trim().startsWith('{') && val.value.trim().endsWith('}')) {
		let newDeclVal = val.value.replace('{', '').replace('}', '').trim()
		@@ -93,10 +79,21 @@ const splitDeclVal = newDeclVal.split(/$\|$\|\s\|,/g).filter(i => i !== '')
		}
		} else {
		declVal = postcss.decl({ prop: key.trim(), value: val.value.trim().split(' ').map(i => {
		if(i.startsWith('refs(') \|\| i.startsWith('props(')) {
		} else {*/
		let checkDeclVal = val.value.trim().replaceAll('_', ' ').split(' ').map(i => {
		if(i.startsWith('refs(') \|\| i.startsWith('props(') \|\| i.startsWith('scopes(')) {
		const arrowValues = i.split(/$\|$/g)
		i = defs[arrowValues[0]][arrowValues[1]].value \|\| i
		if(i.startsWith('scopes(')) {
		i = `var(--scope-${arrowValues[1]}, ${defs[arrowValues[0]][arrowValues[1]].value \|\| i})`
		} else {
		i = defs[arrowValues[0]][arrowValues[1]].value \|\| i
		}
		if(arrowValues[2]) {
		i = i + arrowValues[2]
		}
		} else if(i.startsWith('nrefs(') \|\| i.startsWith('nprops(')) {
		const arrowValues = i.split(/$\|$/g)
		i = defs[arrowValues[0].replace('n', '')][arrowValues[1]].value \|\| i
		if(arrowValues[2]) {
		i = i + arrowValues[2]
		}
		i = '-'+i
		} else if(i.startsWith('lighten(') \|\| i.startsWith('darken(')) {
		@@ -116,38 +113,14 @@ const splitValues = i.split(/$\|$\|\,/g)
		i = '#'+ lightenDarkenColor(colorValue.replaceAll('#', ''), Number(amtValue))
		} else if(i.startsWith('calc(')) {
		i = i.replaceAll('props(', '_props(').replaceAll('refs(', '_refs(').replaceAll(')', ')_').split('_').map(item => {
		if(item.trim().startsWith('refs(') \|\| item.trim().startsWith('props(')) {
		const splitValues = item.trim().split(/$\|$/g)
		item = defs[splitValues[0]][splitValues[1]].value \|\| item
		if(splitValues[2]) {
		item = item + splitValues[2]
		}
		}
		return item
		}).join('')
		} else if(i.startsWith('add(') \|\| i.startsWith('sub(') \|\| i.startsWith('div(') \|\| i.startsWith('times(')) {
		i = i.replaceAll('props(', '_props(').replaceAll('refs(', '_refs(').replaceAll(')', ')_').split('_').map(item => {
		if(item.trim().startsWith('refs(') \|\| item.trim().startsWith('props(')) {
		const splitValues = item.trim().split(/$\|$/g)
		item = defs[splitValues[0]][splitValues[1]].value \|\| item
		if(splitValues[2]) {
		item = item + splitValues[2]
		}
		}
		return item
		}).join('')

		if(i.startsWith('add(')) {
		i = i.replace('add', 'calc').replace(/\,\|\s\,/g, ' + ')
		} else if(i.startsWith('sub(')) {
		i = i.replace('sub', 'calc').replace(/\,\|\s\,/g, ' - ')
		} else if(i.startsWith('div(')) {
		i = i.replace('div', 'calc').replace(/\,\|\s\,/g, ' / ')
		} else if(i.startsWith('times(')) {
		i = i.replace('times', 'calc').replace(/\,\|\s\,/g, ' * ')
		}
		}
		return i
		}).join(' ').trim(), source: sourceItemVal })
		}
		}).join(' ').trim()

		if(checkDeclVal.startsWith('svg(')) {
		checkDeclVal = svgHelper(checkDeclVal)
		} else if(checkDeclVal.startsWith('add(') \|\| checkDeclVal.startsWith('sub(') \|\| checkDeclVal.startsWith('div(') \|\| checkDeclVal.startsWith('times(')) {
		checkDeclVal = calcHelper(checkDeclVal)
		}

		declVal = postcss.decl({ prop: key.trim(), value: checkDeclVal, source: sourceItemVal })
		//}
		newRule.append(declVal)
		@@ -172,3 +145,10 @@ }
		}
		} else {
		if(key === 'print') {
		print['value'][itemKey] = Object.assign({}, print['value'][itemKey], val)
		print['status'] = true
		print['source'] = sourceItemVal
		}
		}

		}
		@@ -193,14 +173,2 @@ }
		let selectorItemKey = itemKey
		if(selectorItemKey.includes('refs(') \|\| selectorItemKey.includes('props(')) {
		selectorItemKey = itemKey
		.replaceAll(/refs$(\w+)$/g, '<=>refs===$1<=>')
		.replaceAll(/props$(\w+)$/g, '<=>props===$1<=>')
		.split('<=>').map(i => {
		if(i.startsWith('refs===') \|\| i.startsWith('props===')) {
		const arrowValues = i.split('===')
		i = defs[arrowValues[0]][arrowValues[1]].value \|\| `${arrowValues[0]}-${arrowValues[1]}`
		}
		return i
		}).filter(i => i !== '').join('')
		}
		const newRule = postcss.rule({ selector: selectorItemKey, source: entryVal.source })
		@@ -210,6 +178,6 @@ for(let [key, val] of Object.entries(itemValue)) {
		let declVal = undefined
		if(val.value.trim().startsWith('{') && val.value.trim().endsWith('}')) {
		/*if(val.value.trim().startsWith('{') && val.value.trim().endsWith('}')) {
		declVal = postcss.decl({ prop: key.trim(), value: props[val.value.replace('{', '').replace('}', '').trim()].value, source: props[val.value.replace('{', '').replace('}', '').trim()].source })
		} else {
		declVal = postcss.decl({ prop: key.trim(), value: val.value.split(' ').map(i => {
		} else {*/
		let checkDeclVal = val.value.replaceAll('_', ' ').split(' ').map(i => {
		if(i.startsWith('props(')) {
		@@ -221,2 +189,9 @@ const arrowValues = i.split(/$\|$/g)
		}
		} else if(i.startsWith('nprops(')) {
		const arrowValues = i.split(/$\|$/g)
		i = defs[arrowValues[0].replace('n', '')][arrowValues[1]].value \|\| i
		if(arrowValues[2]) {
		i = i + arrowValues[2]
		}
		i = '-'+i
		} else if(i.startsWith('lighten(') \|\| i.startsWith('darken(')) {
		@@ -236,38 +211,14 @@ const splitValues = i.split(/$\|$\|\,/g)
		i = '#'+ lightenDarkenColor(colorValue.replaceAll('#', ''), Number(amtValue))
		} else if(i.startsWith('calc(')) {
		i = i.replaceAll('props(', '_props(').replaceAll(')', ')_').split('_').map(item => {
		if(item.trim().startsWith('props(')) {
		const splitValues = item.trim().split(/$\|$/g)
		item = defs[splitValues[0]][splitValues[1]].value \|\| item
		if(splitValues[2]) {
		item = item + splitValues[2]
		}
		}
		return item
		}).join('')
		} else if(i.startsWith('add(') \|\| i.startsWith('sub(') \|\| i.startsWith('div(') \|\| i.startsWith('times(')) {
		i = i.replaceAll('props(', '_props(').replaceAll(')', ')_').split('_').map(item => {
		if(item.trim().startsWith('props(')) {
		const splitValues = item.trim().split(/$\|$/g)
		item = defs[splitValues[0]][splitValues[1]].value \|\| item
		if(splitValues[2]) {
		item = item + splitValues[2]
		}
		}
		return item
		}).join('')

		if(i.startsWith('add(')) {
		i = i.replace('add', 'calc').replace(/\,\|\s\,/g, ' + ')
		} else if(i.startsWith('sub(')) {
		i = i.replace('sub', 'calc').replace(/\,\|\s\,/g, ' - ')
		} else if(i.startsWith('div(')) {
		i = i.replace('div', 'calc').replace(/\,\|\s\,/g, ' / ')
		} else if(i.startsWith('times(')) {
		i = i.replace('times', 'calc').replace(/\,\|\s\,/g, ' * ')
		}
		}
		return i
		}).join(' ').trim(), source: val.source })
		}
		}).join(' ').trim()

		if(checkDeclVal.startsWith('svg(')) {
		checkDeclVal = svgHelper(checkDeclVal)
		} else if(checkDeclVal.startsWith('add(') \|\| checkDeclVal.startsWith('sub(') \|\| checkDeclVal.startsWith('div(') \|\| checkDeclVal.startsWith('times(')) {
		checkDeclVal = calcHelper(checkDeclVal)
		}

		declVal = postcss.decl({ prop: key.trim(), value: checkDeclVal, source: val.source })
		//}
		newRule.append(declVal)
		@@ -287,14 +238,2 @@ }
		let selectorItemKey = itemKey
		if(selectorItemKey.includes('refs(') \|\| selectorItemKey.includes('props(')) {
		selectorItemKey = itemKey
		.replaceAll(/refs$(\w+)$/g, '<=>refs===$1<=>')
		.replaceAll(/props$(\w+)$/g, '<=>props===$1<=>')
		.split('<=>').map(i => {
		if(i.startsWith('refs===') \|\| i.startsWith('props===')) {
		const arrowValues = i.split('===')
		i = defs[arrowValues[0]][arrowValues[1]].value \|\| `${arrowValues[0]}-${arrowValues[1]}`
		}
		return i
		}).filter(i => i !== '').join('')
		}
		let newRule = postcss.rule({ selector: selectorItemKey, source: entryVal.source })
		@@ -314,6 +253,6 @@ if(entryVal?.selector) {
		let declVal = undefined
		if(val.value.trim().startsWith('{') && val.value.trim().endsWith('}')) {
		/*if(val.value.trim().startsWith('{') && val.value.trim().endsWith('}')) {
		declVal = postcss.decl({ prop: key.trim(), value: props[val.value.replace('{', '').replace('}', '').trim()].value, source: props[val.value.replace('{', '').replace('}', '').trim()].source })
		} else {
		declVal = postcss.decl({ prop: key.trim(), value: val.value.split(' ').map(i => {
		} else {*/
		let checkDeclVal = val.value.replaceAll('_', ' ').split(' ').map(i => {
		if(i.startsWith('props(')) {
		@@ -325,2 +264,9 @@ const arrowValues = i.split(/$\|$/g)
		}
		} else if(i.startsWith('nprops(')) {
		const arrowValues = i.split(/$\|$/g)
		i = defs[arrowValues[0].replace('n', '')][arrowValues[1]].value \|\| i
		if(arrowValues[2]) {
		i = i + arrowValues[2]
		}
		i = '-'+i
		} else if(i.startsWith('lighten(') \|\| i.startsWith('darken(')) {
		@@ -340,38 +286,14 @@ const splitValues = i.split(/$\|$\|\,/g)
		i = '#'+ lightenDarkenColor(colorValue.replaceAll('#', ''), Number(amtValue))
		} else if(i.startsWith('calc(')) {
		i = i.replaceAll('props(', '_props(').replaceAll(')', ')_').split('_').map(item => {
		if(item.trim().startsWith('props(')) {
		const splitValues = item.trim().split(/$\|$/g)
		item = defs[splitValues[0]][splitValues[1]].value \|\| item
		if(splitValues[2]) {
		item = item + splitValues[2]
		}
		}
		return item
		}).join('')
		} else if(i.startsWith('add(') \|\| i.startsWith('sub(') \|\| i.startsWith('div(') \|\| i.startsWith('times(')) {
		i = i.replaceAll('props(', '_props(').replaceAll(')', ')_').split('_').map(item => {
		if(item.trim().startsWith('props(')) {
		const splitValues = item.trim().split(/$\|$/g)
		item = defs[splitValues[0]][splitValues[1]].value \|\| item
		if(splitValues[2]) {
		item = item + splitValues[2]
		}
		}
		return item
		}).join('')

		if(i.startsWith('add(')) {
		i = i.replace('add', 'calc').replace(/\,\|\s\,/g, ' + ')
		} else if(i.startsWith('sub(')) {
		i = i.replace('sub', 'calc').replace(/\,\|\s\,/g, ' - ')
		} else if(i.startsWith('div(')) {
		i = i.replace('div', 'calc').replace(/\,\|\s\,/g, ' / ')
		} else if(i.startsWith('times(')) {
		i = i.replace('times', 'calc').replace(/\,\|\s\,/g, ' * ')
		}
		}
		return i
		}).join(' ').trim(), source: val.source })
		}
		}).join(' ').trim()

		if(checkDeclVal.startsWith('svg(')) {
		checkDeclVal = svgHelper(checkDeclVal)
		} else if(checkDeclVal.startsWith('add(') \|\| checkDeclVal.startsWith('sub(') \|\| checkDeclVal.startsWith('div(') \|\| checkDeclVal.startsWith('times(')) {
		checkDeclVal = calcHelper(checkDeclVal)
		}

		declVal = postcss.decl({ prop: key.trim(), value: checkDeclVal, source: val.source })
		//}
		newRule.append(declVal)
		@@ -386,5 +308,64 @@ }

		return [...ruleArray.flat(), ...atRuleArray]
		if(print['status']) {
		let newAtRule = postcss.atRule({ name: 'media', params: 'print', source: print['source'] })
		for(let [itemKey, itemValue] of Object.entries(print['value'])) {
		let selectorItemKey = itemKey
		let newRule = postcss.rule({ selector: selectorItemKey, source: print['source'] })
		for(let [key, val] of Object.entries(itemValue)) {
		if(typeof val.value === 'string') {
		let declVal = undefined
		/*if(val.value.trim().startsWith('{') && val.value.trim().endsWith('}')) {
		declVal = postcss.decl({ prop: key.trim(), value: props[val.value.replace('{', '').replace('}', '').trim()].value, source: props[val.value.replace('{', '').replace('}', '').trim()].source })
		} else {*/
		let checkDeclVal = val.value.replaceAll('_', ' ').split(' ').map(i => {
		if(i.startsWith('props(')) {
		const arrowValues = i.split(/$\|$/g)
		i = defs[arrowValues[0]][arrowValues[1]].value \|\| i
		if(arrowValues[2]) {
		i = i + arrowValues[2]
		}
		} else if(i.startsWith('nprops(')) {
		const arrowValues = i.split(/$\|$/g)
		i = defs[arrowValues[0].replace('n', '')][arrowValues[1]].value \|\| i
		if(arrowValues[2]) {
		i = i + arrowValues[2]
		}
		i = '-'+i
		} else if(i.startsWith('lighten(') \|\| i.startsWith('darken(')) {
		const splitValues = i.split(/$\|$\|\,/g)
		let colorValue = splitValues[1]
		let amtValue = splitValues[2]
		if(colorValue.includes('hex')) {
		colorValue = colorValue.replaceAll('hex', '')
		}
		if(Object.keys(newColor).includes(colorValue)) {
		colorValue = newColor[colorValue]
		}
		if(splitValues[0] === 'darken') {
		amtValue = '-' + amtValue
		}
		i = '#'+ lightenDarkenColor(colorValue.replaceAll('#', ''), Number(amtValue))
		}
		return i
		}).join(' ').trim()

		if(checkDeclVal.startsWith('svg(')) {
		checkDeclVal = svgHelper(checkDeclVal)
		} else if(checkDeclVal.startsWith('add(') \|\| checkDeclVal.startsWith('sub(') \|\| checkDeclVal.startsWith('div(') \|\| checkDeclVal.startsWith('times(')) {
		checkDeclVal = calcHelper(checkDeclVal)
		}

		declVal = postcss.decl({ prop: key.trim(), value: checkDeclVal, source: val.source })
		//}
		newRule.append(declVal)
		}
		}
		newAtRule.append(newRule)
		}
		atRuleArray.push(newAtRule)
		}

		return [...atFirstRuleArray, ...ruleArray.flat(), ...atRuleArray]
		}

		module.exports = declaration

6

src/cores/extraction.js

		@@ -61,3 +61,5 @@ const glob = require('glob')
		let newStateExtract = {}
		for(let ref of Array.from(new Set(extract))) {
		const refs = Array.from(new Set(extract))

		for(let ref of refs) {
		if(!options.extract.raws.includes(ref)) {
		@@ -70,5 +72,5 @@ newExtract.push(...rules(ref, source, options))
		return {
		raws: Array.from(new Set([...options.extract.raws, ...extract])),
		raws: Array.from(new Set([...options.extract.raws, ...refs])),
		rules: [...options.extract.rules, ...newExtract, ...Object.values(newStateExtract)]
		}
		}

133

src/cores/package.js

		@@ -13,3 +13,3 @@ const postcss = require('postcss')
		const component = {}
		const data = fs.readFileSync(rp, 'utf8')
		let data = fs.readFileSync(rp, 'utf8')

		@@ -23,3 +23,7 @@ const splitFilePath = rp.split('/')[Number(rp.split('/').length) - 1]

		const root = postcss.parse(data.replaceAll(/\{([A-Za-z0-9\-\_]+)\.([A-Za-z0-9\-\_]+)\}/g, '$1($2)'), { from: rp })
		if(!data) return;
		data = data.replaceAll(/\{\{([A-Za-z0-9\-\_]+)\.([A-Za-z0-9\-\_]+)\}\}/g, '_$1($2)_')
		.replaceAll(/\{([A-Za-z0-9\-\_]+)\.([A-Za-z0-9\-\_]+)\}/g, '$1($2)')

		const root = postcss.parse(data, { from: rp })
		component[componentName]['root'] = root
		@@ -59,2 +63,3 @@
		refs: component[componentName]['refs'] \|\| {},
		scopes: component[componentName]['scopes'] \|\| {},
		props: component[componentName]['props'] \|\| {}
		@@ -151,2 +156,3 @@ }
		refs: component[componentName]['refs'] \|\| {},
		scopes: component[componentName]['scopes'] \|\| {},
		props: component[componentName]['props'] \|\| {}
		@@ -171,2 +177,3 @@ }
		component[componentName]['refs'] = Object.assign({}, component[componentName]['refs'], component[componentName]['modules'][dnode.params.trim()]['refs'])
		component[componentName]['scopes'] = Object.assign({}, component[componentName]['scopes'], component[componentName]['modules'][dnode.params.trim()]['scopes'])
		component[componentName]['props'] = Object.assign({}, component[componentName]['props'], component[componentName]['modules'][dnode.params.trim()]['props'])
		@@ -183,2 +190,7 @@ component[componentName]['provide'] = Object.assign({}, component[componentName]['provide'], component[componentName]['modules'][dnode.params.trim()]['provide'])
		}
		if(paramDnode.startsWith('scopes(')) {
		const arrowDnodeParams = paramDnode.split(/$\|$/g)
		let scopeParamDnode = component[componentName][arrowDnodeParams[0]][arrowDnodeParams[1]].value
		paramDnode = `var(--scope-${arrowDnodeParams[1]}, ${scopeParamDnode})`
		}
		let keyframeDefineObj = {}
		@@ -195,16 +207,117 @@ keyframeDefineObj['@keyframes '+paramDnode] = []
		}
		} else if(dnode.type === 'atrule' && dnode.name === 'if') {
		} else if(dnode.type === 'atrule' && dnode.name === 'paper') {
		if('nodes' in dnode) {
		let ifDefineObj = {}
		ifDefineObj['@if '+dnode.params.trim()] = []
		for(let ifnode of dnode.nodes) {
		let ifRecursiveDefineObj = recursive(ifnode, {
		let paramDnode = dnode.params.trim()
		if(paramDnode.startsWith('refs(') \|\| paramDnode.startsWith('props(')) {
		const arrowDnodeParams = paramDnode.split(/$\|$/g)
		paramDnode = component[componentName][arrowDnodeParams[0]][arrowDnodeParams[1]].value
		}
		if(paramDnode.startsWith('scopes(')) {
		const arrowDnodeParams = paramDnode.split(/$\|$/g)
		let scopeParamDnode = component[componentName][arrowDnodeParams[0]][arrowDnodeParams[1]].value
		paramDnode = `var(--scope-${arrowDnodeParams[1]}, ${scopeParamDnode})`
		}
		let paperDefineObj = {}
		paperDefineObj['@page '+paramDnode] = []
		for(let kfnode of dnode.nodes) {
		let paperRecursiveDefineObj = recursive(kfnode, {
		...refOpt,
		'provide': component[componentName]['provide']
		})
		ifDefineObj['@if '+dnode.params.trim()].push(ifRecursiveDefineObj.body)
		paperDefineObj['@page '+paramDnode].push(paperRecursiveDefineObj.body)
		}
		ifDefineObj['@if '+dnode.params.trim()] = ifDefineObj['@if '+dnode.params.trim()].flat()
		defineObj['content'][randId].push(ifDefineObj)
		paperDefineObj['@page '+paramDnode] = paperDefineObj['@page '+paramDnode].flat()
		defineObj['content'][randId].push(paperDefineObj)
		}
		} else if(dnode.type === 'atrule' && dnode.name === 'if') {
		if('nodes' in dnode) {
		const ifParams = dnode?.params?.trim() \|\| ''
		const ifProps = Object.assign({}, component[componentName]['props'], opts.props)
		const ifRefs = component[componentName]?.['refs'] \|\| {}

		if(ifParams.includes(' is ')) {
		const splitKey = ifParams.split(/\sis\s/g).filter(i => i !== '')
		if(
		(ifProps?.[splitKey[0].trim()] && ifProps[splitKey[0].trim()].value === splitKey[1].trim()) \|\|
		(ifRefs?.[splitKey[0].trim()] && ifRefs[splitKey[0].trim()].value === splitKey[1].trim())
		) {

		for(let ifnode of dnode.nodes) {
		let ifRecursiveDefineObj = recursive(ifnode, {
		...refOpt,
		'provide': component[componentName]['provide']
		})
		defineObj['content'][randId].push(ifRecursiveDefineObj.body)
		}

		}
		} else if(ifParams.includes(' has ')) {
		const splitKey = ifParams.split(/\shas\s/g).filter(i => i !== '')
		if(
		(ifProps?.[splitKey[0].trim()] && ifProps[splitKey[0].trim()].value.replaceAll(' ', '').split(',').filter(i => i !== '').includes(splitKey[1].trim())) \|\|
		(ifRefs?.[splitKey[0].trim()] && ifRefs[splitKey[0].trim()].value.replaceAll(' ', '').split(',').filter(i => i !== '').includes(splitKey[1].trim()))
		) {

		for(let ifnode of dnode.nodes) {
		let ifRecursiveDefineObj = recursive(ifnode, {
		...refOpt,
		'provide': component[componentName]['provide']
		})
		defineObj['content'][randId].push(ifRecursiveDefineObj.body)
		}

		}
		}

		}
		} else if(dnode.type === 'atrule' && dnode.name === 'for') {
		if('nodes' in dnode) {
		const forParams = dnode?.params?.trim() \|\| ''
		const forProps = Object.assign({}, component[componentName]['props'], opts.props)
		const forRefs = component[componentName]?.['refs'] \|\| {}

		if(forParams.includes(' in ')) {
		const splitKey = forParams.split(/\sin\s/g).filter(i => i !== '')
		if(Number(splitKey.length) === 2) {

		const firstVal = splitKey[0].trim()
		const lastVal = forProps?.[splitKey[1].trim()].value.replaceAll(' ', '').split(',').filter(i => i !== '') \|\| forRefs?.[splitKey[1].trim()].value.replaceAll(' ', '').split(',').filter(i => i !== '') \|\| []
		for(let forItem of lastVal) {
		if(forItem) {
		for(let fornode of dnode.nodes) {
		let forRecursiveDefineObj = recursive(fornode, {
		...refOpt,
		'provide': component[componentName]['provide'],
		'each': firstVal,
		[firstVal]: forItem
		})
		defineObj['content'][randId].push(forRecursiveDefineObj.body)
		}
		}
		}

		}
		} else if(forParams.includes(' of ')) {
		const splitKey = forParams.split(/\sof\s/g).filter(i => i !== '')
		if(Number(splitKey.length) === 2) {

		const firstVal = splitKey[0].trim()
		const lastVal = (isNaN(splitKey[1].trim()) === false) ? Number(splitKey[1].trim()) : 0

		for(let i = 1; i <= Number(lastVal); i++) {
		for(let fornode of dnode.nodes) {
		let forRecursiveDefineObj = recursive(fornode, {
		...refOpt,
		'provide': component[componentName]['provide'],
		'each': firstVal,
		[firstVal]: i
		})
		defineObj['content'][randId].push(forRecursiveDefineObj.body)
		}
		}

		}
		}

		}
		} else {
		@@ -211,0 +324,0 @@ let recursiveDefineObj = recursive(dnode, {

124

src/cores/recursive.js

		@@ -7,3 +7,3 @@ const screen = require('../configs/screen.js')
		function recursiveFunc(root, prm, opt = {}) {
		let param = (root.type === 'rule') ? selector(root, prm) : ''
		let param = (root.type === 'rule') ? selector(root, prm, opt) : ''
		const recursiveArr = []
		@@ -16,2 +16,6 @@ const recursiveObj = {}
		if('nodes' in root && Array.isArray(root.nodes) && root.nodes.length >= 1) {
		let screenObj = {}
		let stateObj = {}
		let prefersObj = {}
		let printObj = {}
		for(let node of root.nodes) {
		@@ -22,2 +26,4 @@ if(node.type === 'decl' && node.prop === 'ref') {
		let splitRefs = node.prop.split('-')[1]
		let replacedEachValue = node.value.replaceAll(/(?=each$\|cap\(\|lower\(\|upper\(\|camel\().*?($)/gs, opt[opt.each])
		replacedEachValue = replacedEachValue.replaceAll('hex', '#').replaceAll('pct', '%')
		if('preset' in opt && Object.keys(opt.preset).includes(splitRefs)) {
		@@ -28,8 +34,11 @@ splitRefs = opt.preset[splitRefs]
		splitRefsObj[camelDash(splitRefs)] = {
		value: node.value,
		value: replacedEachValue,
		source: node.source
		}
		recursiveObj[param].value = Object.assign({}, recursiveObj[param].value, splitRefsObj)
		} else if(node.type === 'decl' && node.prop.startsWith('props-')) {
		}/* else if(node.type === 'decl' && node.prop.startsWith('props-')) {
		let splitProps = node.prop.split('-')[1]
		if('preset' in opt && Object.keys(opt.preset).includes(splitProps)) {
		splitProps = opt.preset[splitProps]
		}
		let splitPropsObj = {}
		@@ -41,3 +50,3 @@ splitPropsObj[camelDash(splitProps)] = {
		recursiveObj[param].value = Object.assign({}, recursiveObj[param].value, splitPropsObj)
		} else if(node.type === 'decl' && node.prop === 'inject') {
		}*/ else if(node.type === 'decl' && node.prop === 'inject') {
		recursiveObj[param].value = Object.assign({}, recursiveObj[param].value, opt.provide[node.value].value)
		@@ -52,13 +61,13 @@ } else if(node.type === 'decl' && node.prop === 'inject-props') {
		} else if(node.type === 'decl' && node.prop.startsWith('screen-')) {
		let screenObj = {}
		screenObj[node.prop] = Object.assign({}, screenObj[node.prop], reference(node, opt))
		recursiveObj[param].value = Object.assign({}, recursiveObj[param].value, screenObj)
		} else if(node.type === 'decl' && node.prop.startsWith('state-')) {
		let stateObj = {}
		stateObj[node.prop] = Object.assign({}, stateObj[node.prop], reference(node, opt))
		recursiveObj[param].value = Object.assign({}, recursiveObj[param].value, stateObj)
		} else if(node.type === 'decl' && node.prop.startsWith('prefers-')) {
		let prefersObj = {}
		prefersObj[node.prop] = Object.assign({}, prefersObj[node.prop], reference(node, opt))
		recursiveObj[param].value = Object.assign({}, recursiveObj[param].value, prefersObj)
		} else if(node.type === 'decl' && node.prop === 'print') {
		printObj[node.prop] = Object.assign({}, printObj[node.prop], reference(node, opt))
		recursiveObj[param].value = Object.assign({}, recursiveObj[param].value, printObj)
		} else if(node.type === 'decl' && node.prop.startsWith('webkit-')) {
		@@ -85,24 +94,87 @@ let splitRefs = node.prop.split('-')[1]
		} else if(node.type === 'atrule' && node.name === 'if' && 'nodes' in node) {
		const paramConditional = node.params.split(/is\|has/)
		const valueConditional = paramConditional[0]?.trim() \|\| ''
		const propsConditional = paramConditional[1]?.trim() \|\| ''
		let conditionalObj = {
		value: {},
		source: node.source
		const ifParams = node?.params?.trim() \|\| ''
		const ifProps = opt.props
		const ifRefs = opt.refs

		if(ifParams.includes(' is ')) {
		const splitKey = ifParams.split(/\sis\s/g).filter(i => i !== '')
		if(
		(ifProps?.[splitKey[0].trim()] && ifProps[splitKey[0].trim()].value === splitKey[1].trim()) \|\|
		(ifRefs?.[splitKey[0].trim()] && ifRefs[splitKey[0].trim()].value === splitKey[1].trim())
		) {

		for(let ifnode of node.nodes) {
		if(ifnode.type === 'rule') {
		for(let par of selector(ifnode, param, opt).split(',')) {
		recursiveArr.push(recursiveFunc(ifnode, par.trim(), opt))
		}
		}
		}

		}
		} else if(ifParams.includes(' has ')) {
		const splitKey = ifParams.split(/\shas\s/g).filter(i => i !== '')
		if(
		(ifProps?.[splitKey[0].trim()] && ifProps[splitKey[0].trim()].value.replaceAll(' ', '').split(',').filter(i => i !== '').includes(splitKey[1].trim())) \|\|
		(ifRefs?.[splitKey[0].trim()] && ifRefs[splitKey[0].trim()].value.replaceAll(' ', '').split(',').filter(i => i !== '').includes(splitKey[1].trim()))
		) {

		for(let ifnode of node.nodes) {
		if(ifnode.type === 'rule') {
		for(let par of selector(ifnode, param, opt).split(',')) {
		recursiveArr.push(recursiveFunc(ifnode, par.trim(), opt))
		}
		}
		}

		}
		}
		for(let condVal of node.nodes) {
		if(condVal.type === 'decl' && condVal.prop === 'ref') {
		conditionalObj.value['if-'+propsConditional+'-'+valueConditional] = Object.assign({}, conditionalObj.value['if-'+propsConditional+'-'+valueConditional], reference(condVal, opt))
		} else if(condVal.type === 'decl' && condVal.prop.startsWith('ref-')) {
		let splitRefs = condVal.prop.split('-')[1]
		let splitRefsObj = {}
		splitRefsObj[camelDash(splitRefs)] = {
		value: condVal.value,
		source: condVal.source

		} else if(node.type === 'atrule' && node.name === 'for') {
		if('nodes' in node) {
		const forParams = node?.params?.trim() \|\| ''
		const forProps = opt.props
		const forRefs = opt.refs

		if(forParams.includes(' in ')) {
		const splitKey = forParams.split(/\sin\s/g).filter(i => i !== '')
		if(Number(splitKey.length) === 2) {

		const firstVal = splitKey[0].trim()
		const lastVal = forProps?.[splitKey[1].trim()]?.value.replaceAll(' ', '').split(',').filter(i => i !== '') \|\| forRefs?.[splitKey[1].trim()]?.value.replaceAll(' ', '').split(',').filter(i => i !== '') \|\| []
		for(let forItem of lastVal) {
		if(forItem) {
		for(let fornode of node.nodes) {
		if(fornode.type === 'rule') {
		for(let par of selector(fornode, param, {...opt, 'each': firstVal, [firstVal]: forItem}).split(',')) {
		recursiveArr.push(recursiveFunc(fornode, par.trim(), {...opt, [firstVal]: forItem}))
		}
		}
		}
		}
		}

		}
		} else if(forParams.includes(' of ')) {
		const splitKey = forParams.split(/\sof\s/g).filter(i => i !== '')
		if(Number(splitKey.length) === 2) {

		const firstVal = splitKey[0].trim()
		const lastVal = (isNaN(splitKey[1].trim()) === false) ? Number(splitKey[1].trim()) : 0

		for(let i = 1; i <= lastVal; i++) {
		for(let fornode of node.nodes) {
		if(fornode.type === 'rule') {
		for(let par of selector(fornode, param, {...opt, 'each': firstVal, [firstVal]: i}).split(',')) {
		recursiveArr.push(recursiveFunc(fornode, par.trim(), {...opt, [firstVal]: i}))
		}
		}
		}
		}

		}
		}
		conditionalObj.value['if-'+propsConditional+'-'+valueConditional] = Object.assign({}, conditionalObj.value['if-'+propsConditional+'-'+valueConditional], splitRefsObj)

		}
		}
		recursiveObj[param].value = Object.assign({}, recursiveObj[param].value, conditionalObj)
		} else if(node.type === 'rule') {
		} else if(node.type === 'rule') {
		for(let par of param.split(',')) {
		@@ -109,0 +181,0 @@ recursiveArr.push(recursiveFunc(node, par.trim(), opt))

28

src/cores/reference.js

		@@ -10,7 +10,20 @@ const preset = require('../configs/preset.js')

		const refs = ref.value.split(' ').filter(i => i !== '')
		const refs = ref.value.split(' ').filter(i => i !== '').map(item => {
		if(item.startsWith('mx-')) {
		item = [item.replace('mx-', 'mr-'), item.replace('mx-', 'ml-')]
		} else if(item.startsWith('my-')) {
		item = [item.replace('my-', 'mt-'), item.replace('my-', 'mb-')]
		} else if(item.startsWith('px-')) {
		item = [item.replace('px-', 'pr-'), item.replace('px-', 'pl-')]
		} else if(item.startsWith('py-')) {
		item = [item.replace('py-', 'pt-'), item.replace('py-', 'pb-')]
		}
		return item
		}).flat()

		for(let rf of refs) {
		const props = rf.trim().split('-').filter(i => i !== '')
		rf = rf.replaceAll(/(?=each$\|cap\(\|lower\(\|upper\(\|camel\().*?($)/gs, opt[opt.each])
		const props = rf.replace('--', '-n').replaceAll('_-', '_n').trim().split('-').filter(i => i !== '')

		if(!rf.includes(':')) { // && Number(props.length) === 2
		if(!rf.includes(':') && props.length >= 2) { // && Number(props.length) === 2
		if([...properties, ...Object.keys(newPreset)].includes(props[0])) {
		@@ -23,8 +36,13 @@ // Switch from preset to real property like m to margin
		...opt,
		property: props[0]
		property: props[0],
		value: props[1]
		}

		const valueWithoutUnderscore = props[1].split('_').map(item => {
		return value(item, refOpt)
		}).join(' ')

		const refObj = {}
		refObj[camelDash(props[0])] = {
		value: value(props[1], refOpt),
		value: valueWithoutUnderscore,
		source: ref.source
		@@ -31,0 +49,0 @@ }

124

src/cores/rules.js

		@@ -15,6 +15,13 @@ const postcss = require('postcss')
		const newColor = opts?.color \|\| color
		const newImportant = opts?.important === false ? false : true

		const refs = ref.trim().split(/-\|:/).filter(i => i !== '')
		const refs = ref.replace('--', '-n').replaceAll('_-', '_n').trim().split(/-\|:/).filter(i => i !== '')

		if(ref.includes(':') && [...properties, ...Object.keys(newPreset), ...Object.keys(newColor), ...Object.keys(shorts)].includes(refs[1])) { // for state colon like hover or active
		if(ref.includes(':') && refs[0] === 'scope') {
		const newReplacedSelector = '.'+ref.replaceAll(':', '\\:').replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\$').replaceAll(')', '\$')
		const newRule = postcss.rule({ selector: newReplacedSelector, source: source })
		const declVal = postcss.decl({ prop: '--scope-'+refs[1], value: refs[2], source: source })
		newRule.append(declVal)
		arr.push(newRule)
		} else if(ref.includes(':') && [...properties, ...Object.keys(newPreset), ...Object.keys(newColor), ...Object.keys(shorts)].includes(refs[1])) { // for state colon like hover or active
		/*if('preset' in opts && Object.keys(opts.preset).includes(refs[1])) {
		@@ -24,4 +31,8 @@ refs[1] = opts.preset[refs[1]]

		if(Object.keys(newState).includes(refs[0])) {
		const newRule = postcss.rule({ selector: '.'+ref.replaceAll(':', '\\:').replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\$').replaceAll(')', '\$')+''+opts.state[refs[0]].state, source: source })
		if(['rtl', 'ltr', ...Object.keys(newState)].includes(refs[0])) {
		const newReplacedSelector = '.'+ref.replaceAll(':', '\\:').replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\$').replaceAll(')', '\$')
		let newRule = postcss.rule({ selector: newReplacedSelector+''+opts.state[refs[0]].state, source: source })
		if(['rtl', 'ltr'].includes(refs[0])) {
		newRule = postcss.rule({ selector: opts.state[refs[0]].state+' '+newReplacedSelector, source: source })
		}
		//const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2]) })
		@@ -38,7 +49,7 @@ //newRule.append(declVal)
		}
		const bgDeclVal = postcss.decl({ prop: 'background-color', value: value(newValue, opts) + ' !important', source: source })
		const bgDeclVal = postcss.decl({ prop: 'background-color', value: value(newValue, opts) + (newImportant ? ' !important' : ''), source: source })
		newRule.append(bgDeclVal)
		const bdDeclVal = postcss.decl({ prop: 'border-color', value: value(newValue, opts) + ' !important', source: source })
		const bdDeclVal = postcss.decl({ prop: 'border-color', value: value(newValue, opts) + (newImportant ? ' !important' : ''), source: source })
		newRule.append(bdDeclVal)
		const fgDeclVal = postcss.decl({ prop: 'color', value: '#fff !important', source: source })
		const fgDeclVal = postcss.decl({ prop: 'color', value: '#fff' + (newImportant ? ' !important' : ''), source: source })
		newRule.append(fgDeclVal)
		@@ -52,3 +63,3 @@ } else if(Object.keys(shorts).includes(refs[1])) {
		}
		const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[2], refOpt) + ' !important', source: source })
		const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[2], refOpt) + (newImportant ? ' !important' : ''), source: source })
		newRule.append(declVal)
		@@ -67,3 +78,3 @@ }

		const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2], refOpt) + ' !important', source: source })
		const declVal = postcss.decl({ prop: camelDash(refs[1]), value: value(refs[2], refOpt) + (newImportant ? ' !important' : ''), source: source })
		newRule.append(declVal)
		@@ -74,4 +85,85 @@ }
		}
		} else { // for class that not have colon
		if([...properties, ...Object.keys(newPreset), ...Object.keys(newColor), ...Object.keys(shorts)].includes(refs[0])) {
		} else { // for a class that not have a colon in it
		if(['ms', 'me', 'ps', 'pe'].includes(refs[0])) {
		const refDirectionMode = {
		ms: [{ltr: 'marginLeft'}, {rtl: 'marginRight'}],
		me: [{ltr: 'marginRight'}, {rtl: 'marginLeft'}],
		ps: [{ltr: 'paddingLeft'}, {rtl: 'paddingRight'}],
		pe: [{ltr: 'paddingRight'}, {rtl: 'paddingLeft'}]
		}
		let newRule = null
		for(let dirMode of refDirectionMode[refs[0]]) {
		if(dirMode.ltr) {
		newRule = postcss.rule({ selector: opts.state['ltr'].state+' .'+ref.replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\$').replaceAll(')', '\$'), source: source })
		const refOpt = {
		...opts,
		property: dirMode.ltr
		}
		const declVal = postcss.decl({ prop: camelDash(dirMode.ltr), value: value(refs[1], refOpt) + (newImportant ? ' !important' : ''), source: source })
		newRule.append(declVal)
		} else if(dirMode.rtl) {
		newRule = postcss.rule({ selector: opts.state['rtl'].state+' .'+ref.replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\$').replaceAll(')', '\$'), source: source })
		const refOpt = {
		...opts,
		property: dirMode.rtl
		}
		const declVal = postcss.decl({ prop: camelDash(dirMode.rtl), value: value(refs[1], refOpt) + (newImportant ? ' !important' : ''), source: source })
		newRule.append(declVal)
		}
		}
		arr.push(newRule)
		} else if(['cols', 'col', 'offset'].includes(refs[0])) {
		if('col' === refs[0]) {
		const newRule = postcss.rule({ selector: '.cols .'+ref.replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\$').replaceAll(')', '\$'), source: source })
		let valNum = 'auto';
		if(isNaN(refs[1]) === false) {
		valNum = 8.33333333 * Number(refs[1])
		valNum = String(valNum)+'%'
		}
		const newCols = [
		{prop: 'flex', value: '0 0 auto'},
		{prop: 'width', value: valNum},
		]
		for(let newCol of newCols) {
		const declVal = postcss.decl({ prop: camelDash(newCol.prop), value: newCol.value + (newImportant ? ' !important' : ''), source: source })
		newRule.append(declVal)
		}
		arr.push(newRule)
		} else if('offset' === refs[0]) {
		for(let offset = 0; offset < 2; offset++){
		const dirMode = offset >= 1 ? opts.state['rtl'].state+' ' : ''
		const newRule = postcss.rule({ selector: dirMode+'.cols .'+ref.replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\$').replaceAll(')', '\$'), source: source })
		let valNum = 'auto';
		if(isNaN(refs[1]) === false) {
		valNum = 8.33333333 * Number(refs[1])
		valNum = String(valNum)+'%'
		}
		const newCols = [
		{prop: 'flex', value: '0 0 auto'},
		{prop: (offset >= 1 ? 'marginRight' : 'marginLeft'), value: valNum},
		]
		for(let newCol of newCols) {
		const declVal = postcss.decl({ prop: camelDash(newCol.prop), value: newCol.value + (newImportant ? ' !important' : ''), source: source })
		newRule.append(declVal)
		}
		arr.push(newRule)
		}
		} else {
		const newRule = postcss.rule({ selector: '.'+ref.replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\$').replaceAll(')', '\$')+' > *', source: source })
		let valNum = 'auto';
		if(isNaN(refs[1]) === false) {
		valNum = 100 / Number(refs[1])
		valNum = String(valNum)+'%'
		}
		const newCols = [
		{prop: 'flex', value: '0 0 auto'},
		{prop: 'width', value: valNum},
		]
		for(let newCol of newCols) {
		const declVal = postcss.decl({ prop: camelDash(newCol.prop), value: newCol.value + (newImportant ? ' !important' : ''), source: source })
		newRule.append(declVal)
		}
		arr.push(newRule)
		}
		} else if([...properties, ...Object.keys(newPreset), ...Object.keys(newColor), ...Object.keys(shorts)].includes(refs[0])) {
		const newRule = postcss.rule({ selector: '.'+ref.replaceAll('.', '\\.').replaceAll(',', '\\,').replaceAll('/', '\\/').replaceAll('(', '\$').replaceAll(')', '\$'), source: source })
		@@ -87,7 +179,7 @@ if(Object.keys(newColor).includes(refs[0])) {
		}
		const bgDeclVal = postcss.decl({ prop: 'background-color', value: value(newValue, opts) + ' !important', source: source })
		const bgDeclVal = postcss.decl({ prop: 'background-color', value: value(newValue, opts) + (newImportant ? ' !important' : ''), source: source })
		newRule.append(bgDeclVal)
		const bdDeclVal = postcss.decl({ prop: 'border-color', value: value(newValue, opts) + ' !important', source: source })
		const bdDeclVal = postcss.decl({ prop: 'border-color', value: value(newValue, opts) + (newImportant ? ' !important' : ''), source: source })
		newRule.append(bdDeclVal)
		const fgDeclVal = postcss.decl({ prop: 'color', value: '#fff !important', source: source })
		const fgDeclVal = postcss.decl({ prop: 'color', value: '#fff' + (newImportant ? ' !important' : ''), source: source })
		newRule.append(fgDeclVal)
		@@ -101,3 +193,3 @@ } else if(Object.keys(shorts).includes(refs[0])) {
		}
		const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[1], refOpt) + ' !important', source: source })
		const declVal = postcss.decl({ prop: camelDash(newShort), value: value(refs[1], refOpt) + (newImportant ? ' !important' : ''), source: source })
		newRule.append(declVal)
		@@ -116,3 +208,3 @@ }

		const declVal = postcss.decl({ prop: camelDash(refs[0]), value: value(refs[1], refOpt) + ' !important', source: source })
		const declVal = postcss.decl({ prop: camelDash(refs[0]), value: value(refs[1], refOpt) + (newImportant ? ' !important' : ''), source: source })
		newRule.append(declVal)
		@@ -119,0 +211,0 @@ }

42

src/cores/selector.js

		@@ -1,5 +0,9 @@
		module.exports = (root, param) => {
		const capValue = require('../helpers/capValue.js')
		const camelValue = require('../helpers/camelValue.js')

		module.exports = (root, param, opt) => {
		newSelectors = []
		for(let selector of root.selectors) {
		let newSelector = selector.trim()

		if(newSelector.includes('&')) {
		@@ -10,2 +14,38 @@ newSelector = newSelector.replaceAll('&', param.trim())
		}

		if(newSelector.includes('refs(') \|\| newSelector.includes('props(')) {
		newSelector = newSelector
		.replaceAll(/refs$(\w+)$/g, '<=>refs===$1<=>')
		.replaceAll(/props$(\w+)$/g, '<=>props===$1<=>')
		.split('<=>').map(i => {
		if(i.startsWith('refs===') \|\| i.startsWith('props===')) {
		const arrowValues = i.split('===')
		i = opt[arrowValues[0]][arrowValues[1]].value \|\| `${arrowValues[0]}-${arrowValues[1]}`
		}
		return i
		}).filter(i => i !== '').join('')
		}

		if(newSelector.includes('cap(') \|\| newSelector.includes('camel(') \|\| newSelector.includes('lower(') \|\| newSelector.includes('each(')) {
		newSelector = newSelector
		.replaceAll(/cap$(\w+)$/g, '<=>cap===$1<=>')
		.replaceAll(/camel$(\w+)$/g, '<=>camel===$1<=>')
		.replaceAll(/lower$(\w+)$/g, '<=>lower===$1<=>')
		.replaceAll(/each$(\w+)$/g, '<=>each===$1<=>')
		.split('<=>').map(i => {
		if(i.startsWith('cap===') \|\| i.startsWith('camel===') \|\| i.startsWith('lower===') \|\| i.startsWith('each===')) {
		const arrowValues = i.split('===')
		i = opt[arrowValues[1].trim()] \|\| ''
		if(arrowValues[0].trim() === 'cap' && i !== '') {
		i = capValue(i)
		} else if(arrowValues[0].trim() === 'camel' && i !== '') {
		i = camelValue(i)
		} else if(arrowValues[0].trim() === 'lower' && i !== '') {
		i = i.toLowerCase()
		}
		}
		return i
		}).filter(i => i !== '').join('')
		}

		newSelectors.push(newSelector.trim())
		@@ -12,0 +52,0 @@ }

68

src/cores/value.js

		const camelDash = require('../helpers/camelDash.js')
		const lightenDarkenColor = require('../helpers/lightenDarkenColor.js')
		const capValue = require('../helpers/capValue.js')
		const camelValue = require('../helpers/camelValue.js')
		const svgHelper = require('../helpers/svgHelper.js')
		const calcHelper = require('../helpers/calcHelper.js')
		const values = require('../configs/values.js')
		@@ -34,43 +38,30 @@ const units = require('../configs/units.js')
		}
		else if(newValue.trim().startsWith('calc(')) {
		newValue = newValue.replaceAll('refs(', '_refs(').replaceAll(')', ')_').split('_').map(item => {
		if(item.trim().startsWith('refs(')) {
		const splitValues = item.trim().split(/$\|$/g)
		item = opt[splitValues[0]][splitValues[1]].value \|\| item
		if(splitValues[2]) {
		item = item + splitValues[2]
		}
		}
		return item
		}).join('')
		}
		else if(newValue.trim().startsWith('add(') \|\| newValue.trim().startsWith('sub(') \|\| newValue.trim().startsWith('div(') \|\| newValue.trim().startsWith('times(')) {
		newValue = newValue.replaceAll('refs(', '_refs(').replaceAll(')', ')_').split('_').map(item => {
		if(item.trim().startsWith('refs(')) {
		const splitValues = item.trim().split(/$\|$/g)
		item = opt[splitValues[0]][splitValues[1]].value \|\| item
		if(splitValues[2]) {
		item = item + splitValues[2]
		}
		}
		return item
		}).join('')

		if(newValue.trim().startsWith('add(')) {
		newValue = newValue.replace('add', 'calc').replace(/\,\|\s\,/g, ' + ')
		} else if(newValue.trim().startsWith('sub(')) {
		newValue = newValue.replace('sub', 'calc').replace(/\,\|\s\,/g, ' - ')
		} else if(newValue.trim().startsWith('div(')) {
		newValue = newValue.replace('div', 'calc').replace(/\,\|\s\,/g, ' / ')
		} else if(newValue.trim().startsWith('times(')) {
		newValue = newValue.replace('times', 'calc').replace(/\,\|\s\,/g, ' * ')
		else if(newValue.trim().startsWith('refs(') \|\| newValue.trim().startsWith('props(') \|\| newValue.trim().startsWith('scopes(')) {
		const splitValues = newValue.trim().split(/$\|$/g)
		if(newValue.trim().startsWith('scopes(')) {
		newValue = `var(--scope-${splitValues[1]}, ${opt[splitValues[0]][splitValues[1]].value \|\| newValue})`
		} else {
		newValue = opt[splitValues[0]][splitValues[1]].value \|\| newValue
		}
		if(splitValues[2]) {
		newValue = newValue + splitValues[2]
		}
		}
		else if(newValue.trim().startsWith('refs(')) {
		else if(newValue.trim().startsWith('cap(') \|\| newValue.trim().startsWith('camel(') \|\| newValue.trim().startsWith('lower(') \|\| newValue.trim().startsWith('upper(') \|\| newValue.trim().startsWith('each(')) {
		const splitValues = newValue.trim().split(/$\|$/g)
		newValue = opt[splitValues[0]][splitValues[1]].value \|\| newValue
		newValue = opt[splitValues[1].trim()] \|\| newValue
		if(splitValues[0].trim() === 'cap') {
		newValue = capValue(newValue)
		} else if(splitValues[0].trim() === 'camel') {
		newValue = camelValue(newValue)
		} else if(splitValues[0].trim() === 'lower') {
		newValue = newValue.toLowerCase()
		} else if(splitValues[0].trim() === 'upper') {
		newValue = newValue.toUpperCase()
		}
		if(splitValues[2]) {
		newValue = newValue + splitValues[2]
		}
		} else if(!specialValues.includes(newValue) && !newValue.includes('props') && !newValue.includes('refs') && !newValue.includes(specialValues[0]) && !newValue.includes(specialValues[1])) {
		}
		else if(!specialValues.includes(newValue) && !newValue.includes('(') && !newValue.includes(')') && !newValue.includes(specialValues[0]) && !newValue.includes(specialValues[1])) {
		newValue = camelDash(newValue)
		@@ -80,3 +71,3 @@ }
		if(['width', 'maxWidth', 'minWidth', 'height', 'maxHeight', 'minHeight', 'top', 'right', 'bottom', 'left'].includes(opt.property)) {
		if(Number(newValue) !== 0) {
		if(Number(newValue) !== 0 && isNaN(opt?.value) === false) {
		newValue = newValue + '%'
		@@ -117,3 +108,8 @@ }
		}
		if(newValue.trim().startsWith('svg(')) {
		newValue = svgHelper(newValue)
		} else if(newValue.trim().startsWith('add(') \|\| newValue.trim().startsWith('sub(') \|\| newValue.trim().startsWith('div(') \|\| newValue.trim().startsWith('times(')) {
		newValue = calcHelper(newValue)
		}
		return newValue
		}

378

src/index.js

		@@ -11,4 +11,3 @@ const chokidar = require('chokidar')
		// Cores
		const component = require('./cores/component.js')
		const componentTwo = require('./cores/component21.js')
		const componentTwo = require('./cores/component.js')
		const declaration = require('./cores/declaration.js')
		@@ -18,2 +17,3 @@ const extraction = require('./cores/extraction.js')
		const packages = require('./cores/package.js')
		const layer = require('./cores/layer.js')

		@@ -34,5 +34,8 @@ // Helpers
		helpers: [],
		states: {}
		states: {},
		important: options?.important === false ? false : true,
		directive: options?.directive === 'layer' ? 'layer' : 'use',
		build: false
		}


		if(options?.mode) {
		@@ -53,3 +56,3 @@ config.prefers = Object.assign({}, config.prefers, {

		const opts = {preset: config.preset, screen: config.screen, state: config.state, prefers: config.prefers, color: config.color}
		const opts = {preset: config.preset, screen: config.screen, state: config.state, prefers: config.prefers, color: config.color, important: config.important}

		@@ -79,8 +82,16 @@ let watchFiles = []
		let newData = data.toString()
		if(newData.includes('@use helpers-')) {
		newData = newData.replace(/\@use helpers-.*\;/, '@use helpers-'+ randomChar() +';')
		if(newData.includes('@'+config.directive+' helpers-')) {
		if(config.directive === 'layer') {
		newData = newData.replace(/\@layer helpers-.*\;/, '@layer helpers-'+ randomChar() +';')
		} else {
		newData = newData.replace(/\@use helpers-.*\;/, '@use helpers-'+ randomChar() +';')
		}
		} else {
		newData = newData.replace('@use helpers;', '@use helpers-'+ randomChar() +';')
		if(config.directive === 'layer') {
		newData = newData.replace('@layer helpers;', '@layer helpers-'+ randomChar() +';')
		} else {
		newData = newData.replace('@use helpers;', '@use helpers-'+ randomChar() +';')
		}
		}
		if(newData.includes('@use helpers')) {
		if(newData.includes('@'+config.directive+' helpers')) {
		writeFile(newHelperFile, newData, (err) => {
		@@ -94,2 +105,16 @@ if (err) throw err;

		if(options?.build) {
		config.build = true
		watcher.close()
		}

		if(process.env?.npm_lifecycle_event?.startsWith('build')) {
		config.build = true
		watcher.close()
		}

		if(process.env?.npm_lifecycle_event?.startsWith('test')) {
		watcher.close()
		}

		if(options?.plugins && Number(options?.plugins.length) >= 1) {
		@@ -130,47 +155,118 @@ const newPlugins = options?.plugins.map(item => {

		root.walkAtRules('use', rule => {
		let param = rule.params.trim()
		let name = param
		if(param.includes('.')) {
		const prms = param.split('.')
		param = prms[0].trim()
		name = prms[1].trim()
		}

		/* Component v2 */

		if(name.includes('helpers') \|\| param.includes('helpers')) {
		if(root.source?.input?.from) {
		config.helpers.push(root.source.input.from)
		const pluginLoader = () => {
		let newPackNodes = []
		const filterPackNodes = []
		for(let rule of config.inits) {
		let param = rule.params.trim()
		let name = param
		if(param.includes('.')) {
		const prms = param.split('.')
		param = prms[0].trim()
		name = prms[1].trim()
		}
		config.extract = extraction(options?.extract, rule.source, {...opts, extract: config.extract})

		if(config.extract.rules.length >= 1) {
		root.append(...config.extract.rules)
		}
		rule.remove()
		} else {
		let fileName = param
		let componentName = name

		let newProps = {}
		if(rule?.nodes) {
		for(let node of rule.nodes) {
		if(node.type === 'rule' && (rule?.nodes?.length \|\| 0) >= 1) {
		const ruleNodeName = node.selector.replace(/\#\|\./, '').trim()
		for(let ruleNode of node.nodes) {
		if(ruleNodeName === 'props') {
		if(ruleNode.type === 'decl' && ruleNode?.prop) {
		newProps[ruleNode.prop] = {
		value: ruleNode.value,
		source: ruleNode.source
		if(!filterPackNodes.includes(param) && config.components[param]) {
		filterPackNodes.push(param)
		let newNodes = []
		if(rule?.nodes) {
		for(let node of rule.nodes) {
		if(node.type === 'rule' && (rule?.nodes?.length \|\| 0) >= 1) {
		const ruleNodeName = node.selector.replace(/\#\|\./, '').trim()
		for(let ruleNode of node.nodes) {
		if(ruleNodeName === 'props') {
		if(ruleNode.prop in config.components[param][ruleNodeName]) {
		config.components[param][ruleNodeName][ruleNode.prop].value = ruleNode.value
		}
		}
		}
		} else {
		if(node.type === 'decl' && String(node?.prop) in config.components[param]['props']) {
		config.components[param]['props'][node.prop].value = node.value
		}
		}
		}
		}
		let newBodyVar = []
		if(config.components[param]?.[name]?.['body']) {
		newBodyVar = config.components[param][name]['body']
		}
		newNodes = [
		...newNodes,
		...declaration(newBodyVar,
		{
		refs: config.components[param]['refs'],
		props: config.components[param]['props'],
		provide: config.components[param]['provide']
		},
		{
		screen: config.screen,
		state: config.state,
		prefers: config.prefers,
		color: config.color
		})
		]
		const newRoot = config.components[param]['root']
		newRoot.removeAll()
		if(config.important) {
		newRoot.append(...newNodes)
		} else {
		const newLayer = layer(newNodes, name, rule.source)
		newRoot.append(newLayer)
		}
		newPackNodes.push(newRoot)
		}
		}

		return newPackNodes.flat()
		}

		root.walkAtRules(config.directive, rule => {
		if(config.directive === 'layer') {
		if(!rule.nodes) {
		const paramInArray = rule.params.split(',')
		for(let prmArr of paramInArray) {
		let param = prmArr.trim()
		let name = param
		if(param.includes('.')) {
		const prms = param.split('.')
		param = prms[0].trim()
		name = prms[1].trim()
		}
		if(!rule.params.includes(',') && (name.includes('helpers') \|\| param.includes('helpers'))) {
		if(root.source?.input?.from) {
		config.helpers.push(root.source.input.from)
		}
		config.extract = extraction(options?.extract, rule.source, {...opts, extract: config.extract})

		if(config.extract.rules.length >= 1) {
		rule.append(...config.extract.rules)
		}
		} else if(!rule.params.includes(',') && (name.includes('modules') \|\| param.includes('modules'))) {
		rule.replaceWith(...pluginLoader())
		} else {
		if(node.type === 'decl' && node?.prop) {
		newProps[node.prop] = {
		value: node.value,
		source: node.source
		let fileName = param
		let componentName = name

		const newComponentTwo = componentTwo(options?.src, fileName, componentName, {
		props: Object.assign({}, config.states),
		preset: config.preset,
		screen: config.screen,
		state: config.state,
		prefers: config.prefers,
		color: config.color
		})

		if(newComponentTwo) {
		if(!rule.params.includes(',')) {
		if(config.important) {
		rule.replaceWith(newComponentTwo)
		} else {
		rule.append(newComponentTwo)
		}
		} else {
		if(config.important) {
		root.append(newComponentTwo)
		} else {
		const newLayer = layer(newComponentTwo, componentName, rule.source)
		root.append(newLayer)
		}
		}
		@@ -181,68 +277,57 @@ }
		}
		} else {
		let param = rule.params.trim()
		let name = param
		if(param.includes('.')) {
		const prms = param.split('.')
		param = prms[0].trim()
		name = prms[1].trim()
		}

		const newComponentTwo = componentTwo(options?.src, fileName, componentName, {
		props: Object.assign({}, config.states, newProps),
		preset: config.preset,
		screen: config.screen,
		state: config.state,
		prefers: config.prefers,
		color: config.color
		})

		if(newComponentTwo) {
		rule.replaceWith(newComponentTwo)
		if(name.includes('helpers') \|\| param.includes('helpers')) {
		if(root.source?.input?.from) {
		config.helpers.push(root.source.input.from)
		}
		config.extract = extraction(options?.extract, rule.source, {...opts, extract: config.extract})

		if(config.extract.rules.length >= 1) {
		root.append(...config.extract.rules)
		}
		rule.remove()
		} else if(name.includes('modules') \|\| param.includes('modules')) {
		rule.replaceWith(...pluginLoader())
		} else {
		rule.remove()
		}
		}

		/* Component v1 */

		/*if(!name.includes('helpers') && !config.components[name]) {
		config.components = Object.assign({}, config.components, component(options?.src, {...opts, componentName: name}))
		}
		if(name.includes('helpers') \|\| param.includes('helpers')) {
		if(root.source?.input?.from) {
		config.helpers.push(root.source.input.from)
		}
		config.extract = extraction(options?.extract, rule.source, {...opts, extract: config.extract})

		if(config.extract.rules.length >= 1) {
		root.append(...config.extract.rules)
		}
		rule.remove()
		} else if(config.components[name]) {
		let newNodes = []
		if(rule?.nodes) {
		for(let node of rule.nodes) {
		if(node.type === 'rule' && (rule?.nodes?.length \|\| 0) >= 1) {
		const ruleNodeName = node.selector.replace(/\#\|\./, '').trim()
		for(let ruleNode of node.nodes) {
		if(ruleNodeName === 'props') {
		if(ruleNode.prop in config.components[param][ruleNodeName]) {
		config.components[param][ruleNodeName][ruleNode.prop].value = ruleNode.value
		let fileName = param
		let componentName = name

		let newProps = {}
		if(rule?.nodes) {
		for(let node of rule.nodes) {
		if(node.type === 'rule' && (rule?.nodes?.length \|\| 0) >= 1) {
		const ruleNodeName = node.selector.replace(/\#\|\./, '').trim()
		for(let ruleNode of node.nodes) {
		if(ruleNodeName === 'props') {
		if(ruleNode.type === 'decl' && ruleNode?.prop) {
		newProps[ruleNode.prop] = {
		value: ruleNode.value,
		source: ruleNode.source
		}
		}
		}
		}
		} else {
		if(node.type === 'decl' && node?.prop) {
		newProps[node.prop] = {
		value: node.value,
		source: node.source
		}
		}
		}
		} else {
		if(node.type === 'decl' && String(node?.prop) in config.components[param]['props']) {
		config.components[param]['props'][node.prop].value = node.value
		}
		}
		}
		}
		let newBodyVar = []
		if(config.components[param]?.[name]?.['body']) {
		newBodyVar = config.components[param][name]['body']
		}
		newNodes = [
		...newNodes,
		...declaration(newBodyVar,
		{
		refs: config.components[param]['refs'],
		props: config.components[param]['props'],
		provide: config.components[param]['provide']
		},
		{
		screen: config.screen,

		const newComponentTwo = componentTwo(options?.src, fileName, componentName, {
		props: Object.assign({}, config.states, newProps),
		preset: config.preset,
		screen: config.screen,
		state: config.state,
		@@ -252,10 +337,15 @@ prefers: config.prefers,
		})
		]
		const newRoot = config.components[param]['root']
		newRoot.removeAll()
		newRoot.append(...newNodes)
		rule.replaceWith(newRoot)
		} else {
		rule.remove()
		}*/

		if(newComponentTwo) {
		if(config.important) {
		rule.replaceWith(newComponentTwo)
		} else {
		const newLayer = layer(newComponentTwo, componentName, rule.source)
		rule.replaceWith(newLayer)
		}
		} else {
		rule.remove()
		}
		}
		}
		})
		@@ -273,60 +363,2 @@

		let newPackNodes = []
		const filterPackNodes = []
		for(let rule of config.inits) {
		let param = rule.params.trim()
		let name = param
		if(param.includes('.')) {
		const prms = param.split('.')
		param = prms[0].trim()
		name = prms[1].trim()
		}
		if(!filterPackNodes.includes(param) && config.components[param]) {
		filterPackNodes.push(param)
		let newNodes = []
		if(rule?.nodes) {
		for(let node of rule.nodes) {
		if(node.type === 'rule' && (rule?.nodes?.length \|\| 0) >= 1) {
		const ruleNodeName = node.selector.replace(/\#\|\./, '').trim()
		for(let ruleNode of node.nodes) {
		if(ruleNodeName === 'props') {
		if(ruleNode.prop in config.components[param][ruleNodeName]) {
		config.components[param][ruleNodeName][ruleNode.prop].value = ruleNode.value
		}
		}
		}
		} else {
		if(node.type === 'decl' && String(node?.prop) in config.components[param]['props']) {
		config.components[param]['props'][node.prop].value = node.value
		}
		}
		}
		}
		let newBodyVar = []
		if(config.components[param]?.[name]?.['body']) {
		newBodyVar = config.components[param][name]['body']
		}
		newNodes = [
		...newNodes,
		...declaration(newBodyVar,
		{
		refs: config.components[param]['refs'],
		props: config.components[param]['props'],
		provide: config.components[param]['provide']
		},
		{
		screen: config.screen,
		state: config.state,
		prefers: config.prefers,
		color: config.color
		})
		]
		const newRoot = config.components[param]['root']
		newRoot.removeAll()
		newRoot.append(...newNodes)
		newPackNodes.push(newRoot)
		}
		}
		root.append(...newPackNodes.flat())

		}
		@@ -333,0 +365,0 @@ }

alga/backRight.alga

src/cores/component21.js

src/cores/declaration21.js

src/cores/recursive21.js

src/cores/reference21.js

src/cores/selector21.js

src/cores/value21.js

alga/alert.alga