build: Migrate to Yarn 2. (#161)

* Switch to 2.

* Remove ts-node.

* Update deps.

* Update CI.

* Fix deps.

* Update prepare.

.github/workflows/build.yml

@@ -17,8 +17,8 @@ jobs:
       - uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node-version }}
-      - run: yarn install --ignore-engines --frozen-lockfile
-      - run: yarn beemo typescript:sync-project-refs
+      - run: yarn install --immutable
+      - run: yarn run prepare
       - run: yarn run build
       - run: yarn run type
       - run: yarn run coverage
@@ -29,7 +29,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
-      - run: yarn install --ignore-engines --frozen-lockfile
-      - run: yarn beemo typescript:sync-project-refs
+      - run: yarn install --immutable
+      - run: yarn run prepare
       - run: yarn run type
       - run: yarn run pack

.gitignore

@@ -41,3 +41,12 @@ tsconfig.options.json
 build/
 compile.js
 aesthetic.yaml
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+.pnp.*

.yarnrc.yml

@@ -0,0 +1,11 @@
+enableGlobalCache: true
+
+enableTelemetry: false
+
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+
+yarnPath: .yarn/releases/yarn-2.4.2.cjs

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "scripts": {
     "aesthetic": "node ./packages/cli/lib/bin.js",
-    "prepare": "beemo create-config",
+    "prepare": "beemo typescript:sync-project-refs && beemo create-config",
     "build": "packemon build --addEngines",
     "pack": "NODE_ENV=production packemon pack --addEngines --declaration=standard",
     "clean": "packemon clean",
@@ -13,7 +13,7 @@
     "ds:aesthetic": "yarn run aesthetic compile aesthetic ./packages/design-systems/src/aesthetic --format web-tsx",
     "ds:material": "yarn run aesthetic compile material ./packages/design-systems/src/material --format web-tsx",
     "generate:ds": "yarn run ds:aesthetic && yarn run ds:material",
-    "generate:prefix": "ts-node --files --project ./tsconfig.scripts.json ./scripts/generatePrefixData.ts",
+    "generate:prefix": "node ./scripts/generatePrefixData.mjs",
     "lint": "beemo eslint",
     "test": "beemo jest",
     "coverage": "yarn run test --coverage",
@@ -25,20 +25,22 @@
     "node": ">=12.17.0"
   },
   "devDependencies": {
+    "@beemo/cli": "^2.0.1",
+    "@beemo/core": "^2.0.1",
     "@beemo/dev": "^1.3.1",
     "@types/ejs": "^3.0.7",
     "@types/fs-extra": "^9.0.12",
+    "@types/jest": "^26.0.24",
     "@types/lodash": "^4.14.171",
     "@types/prettier": "^2.3.2",
-    "@types/react": "^16.9.56",
+    "@types/react": "^16.14.11",
     "@types/string-hash": "^1.1.1",
     "benchmark": "^2.1.4",
     "builtin-modules": "^3.2.0",
     "caniuse-api": "^3.0.0",
     "conventional-changelog-beemo": "^2.1.0",
     "lerna": "^4.0.0",
-    "packemon": "^1.2.0",
-    "ts-node": "^10.1.0"
+    "packemon": "^1.2.0"
   },
   "workspaces": [
     "packages/*"

packages/cli/package.json

@@ -38,11 +38,11 @@
   "dependencies": {
     "@aesthetic/compiler": "^0.8.11",
     "@aesthetic/core": "^0.11.1",
-    "@boost/cli": "^2.10.4",
-    "@boost/common": "^2.7.2",
+    "@boost/cli": "^2.11.1",
+    "@boost/common": "^2.8.1",
     "fs-extra": "^10.0.0",
-    "ink": "^3.0.8",
-    "react": "^16.13.1"
+    "ink": "^3.0.9",
+    "react": "^16.14.0"
   },
   "funding": {
     "type": "ko-fi",

packages/compiler/package.json

@@ -39,11 +39,11 @@
     "@aesthetic/system": "^0.9.10",
     "@aesthetic/types": "^0.6.7",
     "@aesthetic/utils": "^0.8.4",
-    "@boost/common": "^2.7.2",
+    "@boost/common": "^2.8.1",
     "ejs": "^3.1.6",
     "fs-extra": "^10.0.0",
     "lodash": "^4.17.21",
-    "optimal": "^4.2.0",
+    "optimal": "^4.3.0",
     "prettier": "^2.3.2"
   },
   "packemon": {

scripts/generatePrefixData.ts → scripts/generatePrefixData.mjs

@@ -1,21 +1,20 @@
 import fs from 'fs';
 import path from 'path';
 import { getSupport, getBrowserScope, setBrowserScope } from 'caniuse-api';
-import { DeclarationPrefixMap, PrefixMap } from '../packages/addon-vendor/src/types';
 import prefixFeatureMapping from './prefixes';
 
-enum Vendor {
+const Vendor ={
 	WEBKIT = 1,
 	MOZ = 2,
 	MS = 4,
-}
+};
 
-const browsersList: string[] = ['> 1%', 'not dead'];
+const browsersList = ['> 1%', 'not dead'];
 
 // Based on the query above
 // https://browserl.ist/?q=%3E+1%25%2C+not+dead
 // https://caniuse.com/usage-table
-const browserSupport: { [browser: string]: { type: number; version: number } } = {
+const browserSupport = {
 	and_chr: { type: Vendor.WEBKIT, version: 78 },
 	and_uc: { type: Vendor.WEBKIT, version: 12.12 },
 	chrome: { type: Vendor.WEBKIT, version: 77 },
@@ -30,7 +29,7 @@ const browserSupport: { [browser: string]: { type: number; version: number } } =
 
 // Based on the list used in autoprefixer
 // https://github.com/postcss/autoprefixer/blob/master/data/prefixes.js
-const featuresList: string[] = [
+const featuresList = [
 	'background-clip-text',
 	'border-image',
 	'border-radius',
@@ -93,24 +92,24 @@ const featuresList: string[] = [
 ];
 
 // A static mapping of all prefixes to CSS properties
-const declarationMapping: DeclarationPrefixMap = {};
-const selectorMapping: PrefixMap = {};
+const declarationMapping = {};
+const selectorMapping = {};
 
-function getPrefixMapItem(property: string) {
+function getPrefixMapItem(property) {
 	if (!declarationMapping[property]) {
 		declarationMapping[property] = {};
 	}
 
 	return declarationMapping[property];
 }
 
-function addPropertyPrefix(property: string, prefix: number) {
+function addPropertyPrefix(property, prefix) {
 	const item = getPrefixMapItem(property);
 
 	item.prefixes = (item.prefixes || 0) | prefix;
 }
 
-function addFunctionPrefix(property: string, func: string, prefix: number) {
+function addFunctionPrefix(property, func, prefix) {
 	const item = getPrefixMapItem(property);
 
 	if (!item.functions) {
@@ -120,7 +119,7 @@ function addFunctionPrefix(property: string, func: string, prefix: number) {
 	item.functions[func] = (item.functions[func] || 0) | prefix;
 }
 
-function addValuePrefix(property: string, value: string, prefix: number) {
+function addValuePrefix(property, value, prefix) {
 	const item = getPrefixMapItem(property);
 
 	if (!item.values) {
@@ -130,15 +129,15 @@ function addValuePrefix(property: string, value: string, prefix: number) {
 	item.values[value] = (item.values[value] || 0) | prefix;
 }
 
-function addSelectorPrefix(selector: string, prefix: number) {
+function addSelectorPrefix(selector, prefix) {
 	selectorMapping[selector] = (selectorMapping[selector] || 0) | prefix;
 }
 
 // Dynamically generate the mapping
 setBrowserScope(browsersList.join(', '));
 
 const browsers = getBrowserScope();
-const requiresPrefix = new Set<string>();
+const requiresPrefix = new Set();
 
 featuresList.forEach((feature) => {
 	const support = getSupport(feature);

scripts/prefixes.ts → scripts/prefixes.mjs

@@ -1,11 +1,4 @@
-const prefixes: {
-	[property: string]: {
-		props?: string[];
-		function?: string;
-		selectors?: string[];
-		values?: string[];
-	};
-} = {
+const prefixes = {
 	'background-clip-text': {
 		props: ['background-clip'],
 	},