proto-tailwindcss-pxls 0.0.1

package/.editorconfig

@@ -0,0 +1,10 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

package/.eslintignore

@@ -0,0 +1,2 @@
+.next
+out

package/.eslintrc

@@ -0,0 +1,48 @@
+{
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true,
+    "commonjs": true
+  },
+  "plugins": ["react"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "settings": {
+    "react": {
+      "version": "detect" // React version. "detect" automatically picks the version you have installed.
+      // You can also use `16.0`, `16.3`, etc, if you want to override the detected value.
+      // default to latest and warns if missing
+      // It will default to "detect" in the future
+    },
+    "import/resolver": {
+      "node": {
+        "paths": ["./"]
+      }
+    }
+  },
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true,
+      "experimentalObjectRestSpread": true,
+      "modules": true
+    }
+  },
+  "rules": {
+    "react/prefer-stateless-function": 0,
+    "linebreak-style": 0,
+    "jsx-a11y/heading-has-content": 0,
+    "jsx-a11y/href-no-hash": 0,
+    "jsx-a11y/anchor-is-valid": 0,
+    "no-underscore-dangle": 0,
+    "react/no-find-dom-node": 0,
+    "react/prop-types": 0,
+    "no-nested-ternary": 0
+  }
+}

package/CHANGELOG.md

@@ -0,0 +1,21 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
+
+## [v1.0.2](https://github.com/robksawyer/tailwindcss-pixel-dimensions/compare/v1.0.1...v1.0.2) - 2020-07-22
+
+### Commits
+
+- Updated README [`11d7d89`](https://github.com/robksawyer/tailwindcss-pixel-dimensions/commit/11d7d8978a69e52a85f0da986d8682d36aed9eb5)
+
+## v1.0.1 - 2020-07-22
+
+### Commits
+
+- Initial release [`0899011`](https://github.com/robksawyer/tailwindcss-pixel-dimensions/commit/08990110273d68951eb1ebc6e990a21038891944)
+- Release 1.0.1 [`01dd012`](https://github.com/robksawyer/tailwindcss-pixel-dimensions/commit/01dd012aea13aad8346326e12bda8971db38f1bd)

package/LICENSE.md

@@ -0,0 +1,7 @@
+# ISC License
+
+Copyright (c) Rob Sawyer
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,147 @@
+# proto-tailwindcss-pxls
+
+- *Pixel Dimensions for Tailwind CSS*
+
+This plugin allows you to quickly generate pixel classes for Tailwind CSS.
+
+## Requirements
+
+This plugin requires Tailwind CSS 2.2.2 or later.
+
+## Installation
+
+```bash
+yarn add proto-tailwindcss-pxls
+```
+
+## Usage
+
+The following plugin options are available. See below how these are passed (via an object) to the plugin in your `tailwind.config.js`.
+
+## Supported Tags
+
+This plugin currently support the following tags in Options:
+
+```
+const tags = [
+  'fontSize',
+  'height',
+  'lineHeight',
+  'maxHeight',
+  'maxWidth',
+  'minHeight',
+  'minWidth',
+  'spacing',
+  'width',
+]
+```
+
+Specifying any of those in options will generate pixel classes as shown below.
+
+> CAVEAT:  if you want the full 900 pixel variations to be generated, you have to pass an empty object in the options:
+>
+> ```
+> width: {},
+> ```
+>
+> The plugin no longer generates width & height by default, you must specify which tags you want to generate...
+
+## Options Available
+
+You can pass along number values to define the range of the generated sizes.
+
+```
+  start: number,  // defaults to 0
+   stop: number,  // defaults to 900
+```
+
+For example:
+
+```js
+// tailwind.config.js
+module.exports = {
+  plugins: [
+    // Generate 10 widths and 3 heights in pxs
+    require('proto-tailwindcss-pxls')({
+        width: {
+          stop: 10,
+        },
+        height: {
+          stop: 10,
+          start: 8,
+        },
+    }),
+  ],
+};
+```
+
+The above configuration would roughly generate the following CSS:
+
+```css
+.w-0px {
+  width: 0;
+}
+
+.w-1px {
+  width: 1px;
+}
+
+.w-2px {
+  width: 2px;
+}
+
+.w-3px {
+  width: 3px;
+}
+
+.w-4px {
+  width: 4px;
+}
+
+.w-5px {
+  width: 5px;
+}
+
+.w-6px {
+  width: 6px;
+}
+
+.w-7px {
+  width: 7px;
+}
+
+.w-8px {
+  width: 8px;
+}
+
+.w-9px {
+  width: 9px;
+}
+
+.w-10px {
+  width: 10px;
+}
+
+.h-8px {
+  height: 8px;
+}
+
+.h-9px {
+  height: 9px;
+}
+
+.h-10px {
+  height: 10px;
+}
+/* etc. */
+```
+
+Which you can then use in your HTML like this:
+
+```html
+<div class="h-10px">
+  I'm a div with a height of 10 pixels or pickles depending on how you pronounce it.
+</div>
+```
+
+The above depends on the order of the generated CSS.

package/index.js

@@ -0,0 +1,76 @@
+/**
+ * TailwindCSS Pixels Sizes
+ * Generates pixel sizes via plugin... [ height, width, lineHeight ]
+ * @file index.js
+ */
+const plugin = require('tailwindcss/plugin')
+
+/**
+ * getSizes
+ * Handles getting sizes in pixels...
+ * @param {int} stop
+ * @param {int} start
+ * @return {object}
+ */
+const getSizes = (stop = 900, start = 0) => {
+  // The following generates an array of increasing values from the totalSizes above.
+  const sizeArray = Array.from(Array(stop + 1).keys())
+  const sliced = sizeArray.slice(start, sizeArray.length)
+  // Traverse the array and generate sizes in pxs.
+  const sizes = sliced.map((x) =>
+    x > 0 ? { [`${x}px`]: `${x}px;` } : { [`${x}px`]: `${x};` }
+  )
+  // Merge the array of objects into a single one
+  const sizeObj = Object.assign.apply(Object, sizes)
+  // console.log('sizeObj', sizeObj)
+  return sizeObj
+}
+
+const generate = (options) => {
+  const tags = [
+    'fontSize',
+    'height',
+    'lineHeight',
+    'maxHeight',
+    'maxWidth',
+    'minHeight',
+    'minWidth',
+    'spacing',
+    'width',
+  ]
+
+  const output = {
+    theme: {
+      extend: {},
+    },
+  }
+
+  if (options) {
+    const keys = Object.keys(options)
+
+    keys.forEach((key) => {
+      if (tags.includes(key)) {
+        // NOTE:  support the new and old option props...
+        const stop = options[key].stop || options[key].total || 900
+        const start = options[key].start || options[key].startingValue || 0
+
+        const results = getSizes(stop, start)
+
+        output.theme.extend[key] = { ...results }
+      }
+    })
+  }
+
+  return output
+}
+
+module.exports = plugin.withOptions(
+  function (_options) {
+    return function () {
+      // ...
+    }
+  },
+  function (options) {
+    return generate(options)
+  }
+)

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "proto-tailwindcss-pxls",
+  "version": "0.0.1",
+  "description": "Tailwind CSS 3.x plugin that generates pixel classes for tricky pixel-perfect layouts.",
+  "main": "index.js",
+  "author": "Rob Sawyer <robksawyer@gmail.com>",
+  "contributors": [
+    {
+      "name": "Richard Hess",
+      "email": "eswat2@gmail.com",
+      "url": "https://eswat2.dev"
+    }
+  ],
+  "license": "ISC",
+  "repository": "https://github.com/eswat2/proto-tailwindcss-pxls.git",
+  "bugs": "https://github.com/eswat2/proto-tailwindcss-pxls/issues",
+  "homepage": "https://github.com/eswat2/proto-tailwindcss-pxls",
+  "engines": {
+    "node": "~22"
+  },
+  "private": false,
+  "scripts": {
+    "test": "jest",
+    "deploy": "yarn test; echo -- run [ np patch ]",
+    "format": "prettier --write *.js cSpell.json"
+  },
+  "dependencies": {},
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "autoprefixer": "10.4.20",
+    "jest": "29.7.0",
+    "jest-matcher-css": "1.1.0",
+    "lodash": "4.17.21",
+    "postcss": "8.4.49",
+    "rollup": "4.27.3",
+    "tailwindcss": "3.4.15"
+  }
+}