Initial grouped-css-properties package (#42)

.changeset/silent-clouds-develop.md

@@ -0,0 +1,5 @@
+---
+'grouped-css-properties': patch
+---
+
+Initial grouped-css-properties package

packages/grouped-css-properties/.babelrc.json

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    [
+      "@aacc/babel-preset",
+      {
+        "typescript": true
+      }
+    ]
+  ]
+}

packages/grouped-css-properties/.eslintrc.js

@@ -0,0 +1,12 @@
+/**
+ * @type {import('eslint').Linter.Config}
+ */
+module.exports = {
+  root: true,
+  extends: ['@aacc/eslint-config/typescript'],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: 'tsconfig.eslint.json',
+  },
+  ignorePatterns: ['node_modules', 'dist'],
+}

packages/grouped-css-properties/README.md

@@ -0,0 +1,34 @@
+# grouped-css-properties
+
+Grouped CSS Properties is a library of all known CSS properties categorized into
+groups.
+
+> Note: These groupings will priorities usages in design systems, static
+> analysis, and other similar tooling.
+
+## Installation
+
+```sh
+npm i grouped-css-properties
+```
+
+## Usage
+
+### `groupCSSProperties`
+
+A collection of all known CSS properties categorized into groups.
+
+```js
+import { groupedCSSProperties } from 'grouped-css-properties'
+
+console.log(groupedCSSProperties) // { colors: [...], layout: [...], ... }
+```
+
+Alternatively, you can import individual CSS property groups.
+
+```js
+import { colors, layout } from 'grouped-css-properties'
+
+console.log(colors) // colors: [...]
+console.log(layout) // layout: [...]
+```

packages/grouped-css-properties/jest.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  transform: {
+    '^.+\\.[jt]sx?$': 'babel-jest',
+  },
+}

packages/grouped-css-properties/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "grouped-css-properties",
+  "version": "0.0.0",
+  "description": "All known CSS properties categorized into groups",
+  "author": "Aaron Casanova <aaronccasanova@gmail.com>",
+  "license": "MIT",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.mjs",
+  "browser": "dist/browser/index.js",
+  "types": "dist/types/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/src/index.d.ts",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.js"
+    },
+    "./json/*": "./dist/json/*"
+  },
+  "scripts": {
+    "dev": "npm-run-all --parallel 'build:* -- --watch'",
+    "build": "npm-run-all --parallel 'build:*'",
+    "build:js": "rollup -c",
+    "build:assets": "ts-node scripts/build-assets.ts",
+    "build:types": "tsc --emitDeclarationOnly",
+    "type-check": "tsc --noEmit",
+    "type-check:watch": "npm run type-check -- --watch",
+    "lint": "TIMING=1 eslint . --ext .js,.ts --cache",
+    "test": "jest",
+    "prepublishOnly": "npm run build"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {},
+  "devDependencies": {
+    "@aacc/babel-preset": "*",
+    "@aacc/browserslist-config": "*",
+    "@aacc/eslint-config": "*",
+    "@aacc/tsconfigs": "*",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^21.1.0",
+    "@rollup/plugin-node-resolve": "^13.2.1",
+    "@types/jest": "^28.1.2",
+    "babel-jest": "^28.1.1",
+    "jest": "^28.1.1",
+    "known-css-properties": "^0.25.0",
+    "rollup": "^2.70.2",
+    "ts-node": "^10.8.1",
+    "type-fest": "^2.14.0",
+    "typescript": "^4.7.3"
+  },
+  "browserslist": [
+    "extends @aacc/browserslist-config"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "@aacc:registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/aaronccasanova/aacc.git",
+    "directory": "packages/grouped-css-properties"
+  },
+  "bugs": {
+    "url": "https://github.com/aaronccasanova/aacc/issues"
+  },
+  "homepage": "https://github.com/aaronccasanova/aacc/blob/main/packages/grouped-css-properties/README.md"
+}

packages/grouped-css-properties/rollup.config.js

@@ -0,0 +1,55 @@
+import path from 'path'
+
+import nodeResolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import babel from '@rollup/plugin-babel'
+
+import pkg from './package.json'
+
+const name = 'groupedCSSProperties'
+
+const extensions = ['.js', '.jsx', '.ts', '.tsx']
+
+/** @type {import('rollup').RollupOptions['plugins']} */
+const plugins = [
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  nodeResolve({ extensions }),
+  commonjs(),
+  babel({
+    extensions,
+    babelHelpers: 'bundled',
+    include: ['src/**/*'],
+  }),
+]
+
+/** @type {import('rollup').RollupOptions[]} */
+export default [
+  {
+    input: 'src/index.ts',
+    plugins,
+    output: [
+      {
+        format: /** @type {const} */ ('cjs'),
+        entryFileNames: '[name][assetExtname].js',
+        dir: path.dirname(pkg.main),
+        preserveModules: true,
+      },
+      {
+        format: /** @type {const} */ ('es'),
+        entryFileNames: '[name][assetExtname].mjs',
+        dir: path.dirname(pkg.module),
+        preserveModules: true,
+      },
+    ],
+    external: Object.keys(pkg.dependencies),
+  },
+  {
+    input: 'src/index.ts',
+    plugins,
+    output: {
+      format: /** @type {const} */ ('iife'),
+      file: pkg.browser,
+      name,
+    },
+  },
+]

packages/grouped-css-properties/scripts/build-assets.ts

@@ -0,0 +1,17 @@
+import { groupedCSSProperties } from '../src'
+
+import { tokensToJSON } from './tokensToJSON'
+
+async function main() {
+  await tokensToJSON(groupedCSSProperties)
+}
+
+main().catch((e) => {
+  const errorMessage = 'Error in build-assets.ts'
+
+  if (e instanceof Error) {
+    throw new Error(`${errorMessage}: ${e.message}`)
+  }
+
+  throw new Error(errorMessage)
+})

packages/grouped-css-properties/scripts/tokensToJSON.ts

@@ -0,0 +1,23 @@
+import * as fs from 'fs'
+import * as path from 'path'
+
+import type * as tf from 'type-fest'
+import type { GroupedCSSProperties } from '../src'
+
+const outputDir = path.join(__dirname, '../dist/json')
+
+export async function tokensToJSON(groupedCSSProperties: GroupedCSSProperties) {
+  if (!fs.existsSync(outputDir)) {
+    await fs.promises.mkdir(outputDir, { recursive: true })
+  }
+
+  await Promise.all(
+    Object.entries(groupedCSSProperties).map(async (entry) => {
+      const [groupName, cssProperties] = entry as tf.Entry<GroupedCSSProperties>
+
+      const filePath = path.join(outputDir, `${groupName}.json`)
+
+      await fs.promises.writeFile(filePath, JSON.stringify(cssProperties))
+    }),
+  )
+}

packages/grouped-css-properties/src/grouped-css-properties.ts

@@ -0,0 +1,7 @@
+import { layout } from './groups/layout'
+
+export const groupedCSSProperties = {
+  layout,
+} as const
+
+export type GroupedCSSProperties = typeof groupedCSSProperties

packages/grouped-css-properties/src/groups/layout.ts

@@ -0,0 +1,30 @@
+export type Layout = typeof layout
+
+export const layout = [
+  // TODO: Investigate -epub- prefixed properties
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side
+  '-epub-caption-side',
+  'align-items',
+  'align-self',
+  'display',
+  'flex-basis',
+  'flex-direction',
+  'flex-grow',
+  'flex-shrink',
+  'flex-wrap',
+  'flex',
+  'grid-area',
+  'grid-auto-columns',
+  'grid-auto-rows',
+  'grid-column-end',
+  'grid-column-start',
+  'grid-column',
+  'grid-row-end',
+  'grid-row-start',
+  'grid-row',
+  'grid-template-areas',
+  'grid-template-columns',
+  'grid-template-rows',
+  'grid-template',
+  'grid',
+] as const

packages/grouped-css-properties/src/index.ts

@@ -0,0 +1,3 @@
+export * from './grouped-css-properties'
+
+export * from './groups/layout'