Beta 0.1.0-canary.0 (stitchesjs#338)

* beta

* migrate types (stitchesjs#340)

* Add scroll properties to themeMap

* feat: do not add a prefix to supplied name in theme()

* test: support --only file_includes_string

* test: separate conditions, prefix, utils tests

* fix: theme applies object

* feat: config is passed to utils

* style: strongly apply prettier on javascript and typescript files

* style: strongly apply prettier on javascript and typescript files

* fix: apply  prop after other styles

* update types (stitchesjs#341)

* style: format core types file

* fix: patch to prevent variants with same name as a css prop from erroring

* fix: return forward_ref to support forwarding refs

* fix: return forward_ref to support forwarding refs

* Update react types (stitchesjs#342)

* noice

* More fixes

* docs: share the wonderful story of getHashString

* fix: apply fix to support variant names share with css props from core to react

* feat: remove '-moz-initial' from global types

* fix: support `@import` at-rule

* fix: supports at-rule in component css

* fix: do not throw for unknown properties

* feat: directly reference component/themes by selector

* tests: cleanup tests

* Fix Stitches CSS (stitchesjs#343)

* export all the types (stitchesjs#344)

* fix: match core component properties to react, document className & query

* docs: remove extra lines in component prop typing

* feat: rename  prop to

* expose config and update utils (stitchesjs#345)

* feat: add getCssString function to sheet

* docs: Enhance typings for global and theme functions

* docs: types for toString/getCssString

* type token (stitchesjs#346)

* Types fix util token type (stitchesjs#348)

* fix util token type

* fix util types

* feat: react components & theme stringify as a selector

* fix comounds (stitchesjs#350)

* compound variants as array (stitchesjs#351)

* 0.1.0-canary.0

Co-authored-by: Abdulhadi Hallak <hallak.aa@gmail.com>
Co-authored-by: Pedro Duarte <contact@peduarte.com>

.bin/build.js

@@ -0,0 +1,117 @@
+import esbuild from 'esbuild'
+import fs from 'fs/promises'
+import zlib from 'zlib'
+import { minify } from 'terser'
+
+async function buildPackage(release, variants) {
+	const rootPackageURL = new URL(release + '/', pkgsURL)
+	const initPackageURL = new URL('src/', rootPackageURL)
+	const distPackageURL = new URL('dist/', rootPackageURL)
+
+	console.log()
+	console.log(`\x1b[4m\x1b[1m${JSON.parse(await fs.readFile(new URL(`package.json`, rootPackageURL))).name}\x1b[0m`)
+	console.log()
+
+	const targetPathname = new URL('index.js', initPackageURL).pathname
+	const outputPathname = new URL('stitches.js', distPackageURL).pathname
+
+	// Build ESM version
+	const {
+		outputFiles: [cmapResult, codeResult],
+	} = await esbuild.build({
+		entryPoints: [targetPathname],
+		outfile: outputPathname,
+		bundle: true,
+		format: 'esm',
+		sourcemap: 'external',
+		write: false,
+	})
+
+	// Minify ESM version
+	const { code, map } = await minify(codeResult.text, {
+		sourceMap: { content: cmapResult.text },
+		compress: true,
+		module: true,
+		mangle: true,
+		toplevel: true,
+	})
+
+	// ensure empty dist directory
+	await fs.mkdir(distPackageURL, { recursive: true })
+
+	for (const distFile of await fs.readdir(distPackageURL)) {
+		await fs.unlink(new URL(distFile, distPackageURL))
+	}
+
+	// write map
+	fs.writeFile(new URL(`stitches.${release}.map`, distPackageURL), map)
+
+	// prepare variations
+	const splitByExport = (code, index = code.indexOf('export')) => [code.slice(0, index), code.slice(index)]
+	const [lead, tail] = splitByExport(code)
+
+	const exports = Array.from(tail.matchAll(/(\w+) as (\w+)/g)).reduce((exports, each) => Object.assign(exports, { [each[2]]: each[1] }), Object.create(null))
+
+	// write variation builds
+	for (const variant in variants) {
+		const variantInfo = variants[variant]
+		const variantPath = new URL(`dist/stitches.${release}.${variant}.${variantInfo.extension}`, rootPackageURL).pathname
+		const variantCode = variantInfo.transform(lead, exports)
+		const variantSize = Number((zlib.gzipSync(variantCode, { level: 9 }).length / 1000).toFixed(2))
+
+		console.log(' ', `\x1b[33m${variantSize} kB\x1b[0m`, `\x1b[2m(${variant})\x1b[0m`)
+
+		await fs.writeFile(variantPath, variantCode + `\n//# sourceMappingURL=stitches.${release}.map`)
+	}
+}
+
+/** Packages directory. */
+const pkgsURL = new URL('../packages/', import.meta.url)
+
+const variants = {
+	esm: {
+		extension: 'mjs',
+		transform(code, exports) {
+			const esmExports = []
+			for (const name in exports) esmExports.push(`${exports[name]} as ${name}`)
+			return `${code}export{${esmExports.join(',')}}`
+		},
+	},
+	cjs: {
+		extension: 'cjs',
+		transform(code, exports) {
+			const cjsExports = ['__esModule:!0']
+			for (const name in exports) cjsExports.push(`${name}:${exports[name]}`)
+			return `${code}module.exports={${cjsExports.join(',')}}`
+		},
+	},
+	iife: {
+		extension: 'js',
+		transform(code, exports) {
+			let iifeExports = ['globalThis.stitches=' + exports.default]
+			for (let name in exports) if (name !== 'default') iifeExports.push(`stitches.${name}=${exports[name]}`)
+			return `(()=>{${code}${iifeExports.join(';')}})()`
+		},
+	},
+}
+
+const buildCore = async () => {
+	await buildPackage('core', variants)
+	await buildPackage('react', variants)
+}
+
+const buildReact = async () => {
+	await buildPackage('react', variants)
+}
+
+if (process.argv.includes('--watch')) {
+	Array.from(
+		[
+			[new URL('core/src/', pkgsURL).pathname, buildCore],
+			[new URL('react/src/', pkgsURL).pathname, buildReact],
+		],
+		([watchdir, build]) => new FSWatcher(watchdir, build),
+	)
+} else {
+	buildCore().then(() => console.log())
+}

.bin/color.js

@@ -0,0 +1,46 @@
+// const colors = Object.entries({
+// 	reset: 0,
+// 	white: 30,
+// 	red: 31,
+// 	green: 32,
+// 	bgGreen: 42,
+// 	bgRed: 41,
+// }).reduce((color, [name, id]) => ({ ...color, [name]: `\x1b[${id}m` }), {})
+
+const c = new Proxy(
+	Object.entries({
+		reset: 0,
+		bold: 1,
+		dim: 2,
+		underline: 4,
+		blink: 5,
+		invert: 7,
+		hidden: 8,
+		black: 30,
+		red: 31,
+		green: 32,
+		yellow: 33,
+		blue: 34,
+		magenta: 35,
+		cyan: 36,
+		white: 37,
+		bgBlack: 40,
+		bgRed: 41,
+		bgGreen: 42,
+		bgYellow: 43,
+		bgBlue: 44,
+		bgMagenta: 45,
+		bgCyan: 46,
+		bgWhite: 47,
+	}).reduce((color, [name, id]) => ({ ...color, [name]: `\x1b[${id}m` }), {}),
+	{
+		get: (colors, name) => (string) => colors[name] + string.replace(colors.reset, colors.reset + colors[name]) + colors.reset,
+	},
+)
+
+// export default function color(name, string) {
+// 	return colors[name] + string.replace(colors.reset, colors.reset + colors[name]) + colors.reset
+// }
+
+console.log(c.black(c.bgGreen(' PASS ')))
+console.log(black(bgRed(' FAIL ')))

.bin/test.js

@@ -0,0 +1,141 @@
+import { readdir } from 'fs/promises'
+import { deepEqual, equal, notDeepEqual, notEqual, AssertionError } from 'assert/strict'
+
+const test = root => Promise.all([
+	// testing directories from core and react
+	new URL('./packages/core/tests/', root),
+	new URL('./packages/react/tests/', root),
+].map(async dir => {
+	// bootstrap the expect api
+	globalThis.expect = foo => ({
+		toEqual: bar => deepEqual(foo, bar),
+		toBe: bar => equal(foo, bar),
+		toBeInstanceOf(bar) {
+			if (!(foo instanceof bar)) throw new AssertionError({
+				message: `Expected value to be instance:`,
+				operator: 'instanceOf',
+				actual: foo,
+				expected: bar,
+			})
+		},
+		not: {
+			toEqual: bar => notDeepEqual(foo, bar),
+			toBe: bar => notEqual(foo, bar),
+			toBeInstanceOf(bar) {
+				if (!(foo instanceof bar)) throw new AssertionError({
+					message: `Expected value to not be instance:`,
+					operator: 'notInstanceOf',
+					actual: foo,
+					expected: bar,
+				})
+			},
+		},
+	})
+
+	// internal strings and symbols used for reporting
+	const passIcon = '\x1b[32m✔\x1b[0m'
+	const failIcon = '\x1b[31m✖\x1b[0m'
+	const passText = '\x1b[42m\x1b[30m PASS \x1b[0m'
+	const failText = '\x1b[41m\x1b[30m FAIL \x1b[0m'
+	const info = text => `\x1b[2m${text}\x1b[0m`
+	const didFail = Symbol.for('test.failure')
+	let didFailLast
+
+	// for each file in the testing directory
+	for (let file of await readdir(dir)) {
+		// ignore non-js files
+		if (!file.endsWith('.js')) continue
+
+		// ignore filtered files
+		if (only.length && !only.some(name => file.includes(name))) continue
+
+		// prepare file results
+		const results = Object.create(null)
+
+		// bootstrap the describe api
+		global.describe = async (description, call) => {
+			// prepare description results
+			results[description] = Object.create(null)
+
+			// bootstrap the test api
+			global.test = async (test, call) => {
+				// prepare test results
+				results[description][test] = []
+
+				try {
+					// run the test
+					await call()
+
+					// assign success to the results
+					results[description][test].push(`${passIcon} ${info(test)}`)
+				} catch (e) {
+					// assign failure to the results
+					results[description][test].push(
+						`${failIcon} ${info(test)}`,
+						String(e.message),
+						(e.stack.match(/file:[^]*?\d+:\d+/g) || []).splice(1).join('\n'),
+						''
+					)
+					results[description][test][didFail] = e
+					results[description][didFail] = true
+					results[didFail] = true
+				}
+			}
+
+			try {
+				// run the description
+				await call()
+			} catch (e) {
+				// assign description failure to the results
+				results[description][''] = [`${failIcon} ${info('Error')}`, String(e.message)]
+			}
+		}
+
+		try {
+			// run the test file
+			await import(new URL(file, dir))
+		} catch (e) {
+			// report errors running the test file
+			results[didFail] = e
+		}
+
+		// space out failures
+		if (didFailLast && (!!didFailLast != !!results[didFail])) console.log()
+
+		// report details if there is a failure
+		console.group(results[didFail] ? failText : passText, info(new URL(file, dir).href.slice(root.href.length)))
+
+		if (results[didFail]) {
+			exitCode = 1
+
+			for (let description in results) {
+				// report each description
+				console.group(results[didFail] ? failIcon : passIcon, info(description))
+				for (let test in results[description]) {
+					// report each test
+					console.log(results[description][test].join('\n'))
+				}
+				console.groupEnd()
+			}
+
+			// report any file error
+			if (results[didFail] !== true) console.log(results[didFail])
+		}
+
+		console.groupEnd()
+
+		didFailLast = results[didFail]
+	}
+})).then(() => exitCode)
+
+let { argv, exit, exitCode = 0 } = process
+
+const getArgs = name => {
+	const lead = argv.indexOf('--' + name) + 1
+	const tail = lead ? argv.slice(lead).findIndex(arg => arg.startsWith('--')) : 0
+	return lead ? argv.slice(lead, ~tail ? lead + tail : argv.length) : []
+}
+
+const only = getArgs('only')
+
+test(new URL('..', import.meta.url)).then(exit)

.codesandbox/ci.json

@@ -1,4 +1,5 @@
 {
+  "node": "14",
   "packages": ["packages/core", "packages/react"],
-  "sandboxes": ["2uwsq", "7njqn"]
+  "sandboxes": ["6d808"]
 }

.editorconfig

@@ -0,0 +1,14 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = tab
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{json,md,yml}]
+indent_size = 2
+indent_style = space

.github/ISSUE_TEMPLATE/bug_report.md

@@ -4,7 +4,6 @@ about: Create a report to help us improve
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 # Bug report

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,7 +4,6 @@ about: Suggest an idea for this project
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 **Is your feature request related to a problem? Please describe.**

.github/workflows/test.yml

@@ -0,0 +1,14 @@
+name: CI
+on: push
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '15'
+      - name: Install modules
+        run: yarn
+      - name: Run tests
+        run: yarn test

.gitignore

@@ -14,6 +14,8 @@ report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
 # Runtime data
 pids
+package-lock.json
+yarn.lock
 *.pid
 *.seed
 *.pid.lock