feat(screens): initialise package

packages/screens/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## 0.0.1-alpha.0 (2021-10-12)
+
+
+### Features
+
+* **screens:** initialise package ([8fd9526](https://github.com/limbo-works/limbo-frontend/commit/8fd952690db59071f4560c3f10291ad3e497c7d6)), closes [#1](https://github.com/limbo-works/limbo-frontend/issues/1)

packages/screens/README.md

@@ -0,0 +1,54 @@
+# `@limbo-works/screens`
+
+> A tool for parsing TailwindCSS `screens` from the standard Limbo breakpoint
+> format (as well as a helpful `breakpoints` object)
+
+## Installation
+
+Before installing the package, it's necessary to configure NPM with a GitHub
+[Personal Access Token](https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token)
+(PAT) with the `read:packages` scope.
+
+Using your PAT, configure the `.npmrc` in the root of the project like so
+_before_ running the install command:-
+
+```npmrc
+//npm.pkg.github.com/:_authToken=${PAT}
+@limbo-works:registry=https://npm.pkg.github.com
+```
+
+Install the package:-
+
+```shell
+$ yarn add @limbo-works/screens
+```
+
+## Usage
+
+```js
+// ~/frontend/assets/js/screens.js
+
+const { default: configure } = require('@limbo-works/screens');
+
+const { breakpoints, screens } = configure([
+	{ value: 375, max: true },
+	{ value: 768, max: true },
+	1024,
+	1440,
+	1920,
+]);
+
+module.exports = { breakpoints, screens };
+```
+
+```js
+// ~/tailwind.config.js
+
+const { screens } = require('./frontend/assets/js/screens.js');
+
+module.exports = {
+	themes: {
+		screens,
+	},
+};
+```

packages/screens/babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+	presets: ['@babel/preset-env'],
+	plugins: ['@babel/plugin-transform-runtime'],
+};

packages/screens/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@limbo-works/screens",
+  "version": "0.0.1-alpha.0",
+  "description": "A tool for parsing TailwindCSS `screens` from the standard Limbo breakpoint format (as well as a helpful `breakpoints` object)",
+  "author": "Saul Hardman <sha@limbo.works>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "ssh://git@github.com/limbo-works/limbo-frontend.git",
+    "directory": "packages/screens"
+  },
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com/"
+  },
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.mjs",
+  "files": [
+    "dist/*",
+    "src/**/*.js"
+  ],
+  "scripts": {
+    "clean": "rimraf dist/",
+    "build": "yarn clean && cross-env NODE_ENV=production rollup --config ../../rollup.config.js"
+  },
+  "engines": {
+    "node": ">=10"
+  }
+}

packages/screens/src/index.js

@@ -0,0 +1,29 @@
+export default (values, rootFontSize = 16) =>
+	values.reduce(({ screens = {}, breakpoints = {} }, value) => {
+		const { value: px, min: hasMin = true, max: hasMax = false } =
+			typeof value === 'number' ? { value } : value ?? {};
+
+		if (!px) {
+			throw new Error(`\`value\` required: ${value}`);
+		}
+
+		const em = px / rootFontSize;
+		const min = `${em}em`;
+		const max = `${em - 0.01}em`;
+
+		return {
+			screens: {
+				...screens,
+
+				...(hasMin ? { [`>=${px}`]: min } : {}),
+
+				...(hasMax ? { [`<${px}`]: { max } } : {}),
+			},
+
+			breakpoints: {
+				...breakpoints,
+
+				[`${px}`]: { px, em, min, max },
+			},
+		};
+	}, {});

rollup.config.js

@@ -65,7 +65,7 @@ export default [
 						'@babel/preset-env',
 						{
 							targets: [
-								'node >= 14',
+								'node >= 10',
 								'last 2 chrome version',
 								'last 2 firefox versions',
 								'last 2 safari versions',
@@ -104,7 +104,7 @@ export default [
 					[
 						'@babel/preset-env',
 						{
-							targets: 'node >= 14',
+							targets: 'node >= 10',
 						},
 					],
 				],