canary.21

* feat: stringify package * feat: improve performance replacing regex tests with string asseritions * fix: reverse isRule check regression * feat: integrate stringify with core * feat: becomes * feat: rename script to * feat: autoprefixer and logical properties * fix: numeric property values * refactor: cleanup * chore: bump dependencies * cleanup: remove unused file * test: add test to be sure of component css prop order * test: more tests for security * fix: typing * tests: typing * test: typings * docs: typings * docs: typings * feat: Support implicit nesting * fix: patches & cleanup * fix: move media query ranges into core * fix: require @ before custom media at-rules * test: add inline responsive variant test for injection order * feat: rename `insertMethod` to `insertionMethod` * fix: typing for insertionMethod * feat: add toCamelCase * fix: support implicit tokens from utils * feat: no default export, no proxy * test: Component utilities & types * bump: project dependencies * fix: variants, utils, polyfills, and build without default
stitchesjs · Mar 20, 2021 · 5afef03 · 5afef03
1 parent d75eed3
commit 5afef03
Show file tree

Hide file tree

Showing 73 changed files with 2,140 additions and 819 deletions.
diff --git a/.bin/build-package.js b/.bin/build-package.js
@@ -16,17 +16,17 @@ const variants = {
 	cjs: {
 		extension: 'cjs',
 		transform(code, exports) {
-			const cjsExports = ['__esModule:!0']
+			const cjsExports = []
 			for (const name in exports) cjsExports.push(`${name}:${exports[name]}`)
 			return `${code}module.exports={${cjsExports.join(',')}}`
 		},
 	},
 	iife: {
 		extension: 'iife.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 iifeExports = []
+			for (const name in exports) iifeExports.push(`${name}:${exports[name]}`)
+			return `${code}globalThis.stitches={${iifeExports.join(',')}}`
 		},
 	},
 }

diff --git a/.bin/build-shared.js b/.bin/build-shared.js
diff --git a/.bin/build.js b/.bin/build.js
@@ -1,25 +1,21 @@
 import buildPackage from './build-package.js'
-import buildShared from './build-shared.js'
 import fs from './internal/fs.js'
-import { corePackageUrl, reactPackageUrl } from './internal/dirs.js'
+import { corePackageUrl, reactPackageUrl, stringifyPackageUrl } from './internal/dirs.js'
 
 async function build() {
 	console.log()
 
 	await fs.rmdir(new URL('dist/', corePackageUrl), { recursive: true })
 	await fs.rmdir(new URL('dist/', reactPackageUrl), { recursive: true })
+	await fs.rmdir(new URL('dist/', stringifyPackageUrl), { recursive: true })
 
 	await buildPackage(corePackageUrl)
 
 	console.log()
-
 	await buildPackage(reactPackageUrl)
 
 	console.log()
-
-	await buildShared(corePackageUrl)
-
-	await buildShared(reactPackageUrl)
+	await buildPackage(stringifyPackageUrl)
 
 	console.log()
 }

diff --git a/.bin/internal/dirs.js b/.bin/internal/dirs.js
@@ -18,5 +18,11 @@ export const reactPackageUrl = new URL('react/', packagesUrl)
 /** React tests directory. */
 export const reactTestsUrl = new URL('tests/', reactPackageUrl)
 
+/** Stringify package directory */
+export const stringifyPackageUrl = new URL('stringify/', packagesUrl)
+
+/** React tests directory. */
+export const stringifyTestsUrl = new URL('tests/', stringifyPackageUrl)
+
 /** Current file href. */
 export const argv1Url = new URL(process.argv[1], 'file:').href
diff --git a/.bin/test-watch.js b/.bin/test-watch.js
@@ -7,6 +7,8 @@ nodemon(
 		`--watch packages/core/tests`,
 		`--watch packages/react/src`,
 		`--watch packages/react/tests`,
+		`--watch packages/stringify/src`,
+		`--watch packages/stringify/tests`,
 		`--exec "clear; ${['node', '.bin/test.js'].concat(process.argv.slice(2)).join(' ')}"`,
 	].join(' '),
 )

diff --git a/.bin/test.js b/.bin/test.js
@@ -7,6 +7,7 @@ const test = (root) =>
 			// testing directories from core and react
 			new URL('./packages/core/tests/', root),
 			new URL('./packages/react/tests/', root),
+			new URL('./packages/stringify/tests/', root),
 		].map(async (dir) => {
 			// bootstrap the expect api
 			globalThis.expect = expect

diff --git a/package.json b/package.json
@@ -8,14 +8,14 @@
     "bootstrap": "lerna bootstrap --use-workspaces",
     "build": "node .bin/build.js",
     "build:watch": "node .bin/build-watch.js",
+    "lint": "node .bin/test-lint.js",
     "prerelease": "npm run build && npm run test",
     "release": "lerna publish",
     "release:canary": "npm run prerelease && lerna publish --dist-tag canary",
     "release:pack": "npm run prerelease && lerna exec -- npm pack",
     "postinstall": "run-s bootstrap",
     "test": "node .bin/test.js",
     "test:coverage": "node .bin/test-coverage.js .bin/test.js",
-    "test:lint": "node .bin/test-lint.js",
     "test:watch": "node .bin/test-watch.js"
   },
   "workspaces": [
@@ -26,20 +26,19 @@
     "@types/react": "17.0.3",
     "@types/react-dom": "17.0.2",
     "@types/react-test-renderer": "17.0.1",
-    "@typescript-eslint/eslint-plugin": "4.17.0",
-    "@typescript-eslint/parser": "4.17.0",
-    "esbuild": "0.9.0",
-    "eslint": "7.21.0",
+    "@typescript-eslint/eslint-plugin": "4.18.0",
+    "@typescript-eslint/parser": "4.18.0",
+    "esbuild": "0.9.5",
+    "eslint": "7.22.0",
     "lerna": "4.0.0",
-    "linkedom": "0.5.5",
+    "linkedom": "0.5.6",
     "magic-string": "0.25.7",
     "merge-source-map": "1.1.0",
     "nodemon": "2.0.7",
     "npm-run-all": "4.1.5",
-    "prettier": "2.2.1",
     "react": "17.0.1",
     "react-test-renderer": "17.0.1",
-    "terser": "5.6.0",
+    "terser": "5.6.1",
     "typescript": "4.2.3"
   },
   "browserslist": [
@@ -116,6 +115,7 @@
     "arrowParens": "always",
     "bracketSpacing": true,
     "printWidth": 240,
+    "quoteProps": "consistent",
     "semi": false,
     "singleQuote": true,
     "tabWidth": 2,

diff --git a/packages/core/README.md b/packages/core/README.md
@@ -55,12 +55,12 @@ export const { css } = createCss({
     },
   },
 
-  // creates breakpoints with media queries
-  conditions: {
-    tablet: '@media (min-width: 700px)',
+  // creates named media queries
+  media: {
+    tablet: '(min-width: 700px)',
   },
 
-  // creates or configures css properties
+  // creates css properties
   utils: {
     mX: (value) => ({
       marginLeft: value,
@@ -73,20 +73,20 @@ export const { css } = createCss({
   },
 })
 
-css({
+const colorful = css({
   // assigns a custom property that resolves `tomato`
   color: '$red',
 
   // assigns `0` to `margin-left` and `margin-right`
   marginX: 0,
 
   // assign "blue" when the breakpoint is matched
-  when: {
-    tablet: {
-      color: 'blue',
-    },
+  '@tablet': {
+    color: 'blue',
   },
 })
+
+document.querySelectorAll('section').forEach((el) => el.classList.add(colorful))
 ```
 
 ## Themes
@@ -96,17 +96,19 @@ Create themes to override defaults:
 ```js
 import createCss from '@stitches/core'
 
-export const { css } = createCss({
+export const { theme } = createCss({
   theme: {
     colors: {
       primary: 'tomato',
     },
   },
 })
 
-export const curiousTheme = css.theme({
+export const curiousTheme = theme({
   colors: {
     primary: 'pink',
   },
 })
+
+document.querySelectorAll('.curious').forEach((el) => el.classList.add(curiousTheme))
 ```