{"_id":"@alexvipond/css-selector-pipes","_rev":"2-319b083b3803ce6a927ef79529aec6a3","name":"@alexvipond/css-selector-pipes","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.0":{"name":"@alexvipond/css-selector-pipes","version":"0.0.0","description":"Pipeline functions for building CSS selectors programmatically","main":"./lib/index.umd.js","module":"./lib/index.es.js","types":"./lib/index.d.ts","exports":{".":{"import":"./lib/index.es.js","require":"./lib/index.umd.js"}},"scripts":{"dev":"vite","build":"vite build","build:lib":"vite build --config vite.lib.config.ts && tsc","test:only":"run() { uvu -r ts-node/register tests/$2 $1.test.ts$; }; run","test":"npm run test:only ."},"devDependencies":{"@fontsource/inconsolata":"^4.3.0","@fontsource/inter":"^4.3.0","@tailwindcss/forms":"^0.3.2","@vitejs/plugin-vue":"^1.2.2","autoprefixer":"^10.2.5","postcss":"^8.2.13","tailwindcss":"^2.1.2","ts-node":"^9.1.1","typescript":"^4.2.4","uvu":"^0.5.1","vite":"^2.2.3"},"dependencies":{"@baleada/logic":"^0.19.9","@baleada/vue-composition":"^0.10.0","@headlessui/vue":"^1.2.0","@heroicons/vue":"^1.0.1","nanoid":"^3.1.23","vue":"^3.0.11"},"gitHead":"95b4b87b59a227f6afd021ae3510d9be8906d97e","_id":"@alexvipond/css-selector-pipes@0.0.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-C8kV918XpeiG+ORdLp6ry82O9VpY6A5eLgKniTxznJrUAJt987ITUG4c6dE40QWw33slrNcpHzi2T4n7rmQixQ==","shasum":"86306bf433160d761658d7862735df73e337c0cc","tarball":"https://registry.npmjs.org/@alexvipond/css-selector-pipes/-/css-selector-pipes-0.0.0.tgz","fileCount":5,"unpackedSize":22984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgor+CCRA9TVsSAnZWagAAp5oP/0GMlpK60F+lQTWLM7+W\ngw4PJyI3nD5WoaHjofF7mXllwYDRtMSNNBmjHWVw9WoQVE6K0XTkaeQUZgOH\nYA8Gwcklewkp1jqt9clA+afW/2FcKkNF4MqX9b/AZeRRUkwsjwJv4893WP8g\nlKySfJGj9N/zoHNwuDs2SZlj/XrbfJuatu6TkPP9SrTG1q4Ifa9F0H0KYdjG\njdwoh8ih6teLXe0ve3wLjZd/h9InbJQimSRwYz2RMUPUJ8mL1GoWXHnKT1Mn\n6JxzEe/gl8kVBObCNKp2cFNRvMkpAAC5DazVjxvENbPaYXxXLB6iXPsae++c\nqdDMlgDVvabSBU9HYGSnto/y2hmP2Q+h7XlOoyEAflOp3n0MknYSYUiy9ug5\n0kuwfzhej8+200vX0PXOhv9YIGsV5RqfzqTbC0iIjqKQSmb7dFVmo8oyebUJ\nzFSyGXz6YlxNjm/MykPXrx6/QkkOicSb+dECmYd7IpRw9yvIXZPFsffzgMS2\nszVn0/nbAuLjdM0Orr4rq99jryP0PaIOaQv8cqZ88miNUP9ulotFwfH3Q7HW\nuRNKzPWLeUJQ2jEo7rQQnonUK+OBo4irFP4/pc422BGRQ9m8afptG0vzPdB2\ncdzoVZqfx2L11v14Xj2V3rJpHKeeKOPwZhK/FO1J0+A3qgVX1fyNCAJE1D/E\n1qud\r\n=z1H8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIsBhKtE2VVnHHOl3coi/s3OblI9x/E1Z/+nUCRnOEZgIgcilM9gbsc8DnYpE5O8VtT/auoVPs2VPs7oqtrZN/s8o="}]},"_npmUser":{"name":"alexvipond","email":"hello@alexvipond.dev"},"directories":{},"maintainers":[{"name":"alexvipond","email":"hello@alexvipond.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/css-selector-pipes_0.0.0_1621278593912_0.3417652922073553"},"_hasShrinkwrap":false},"0.0.1":{"name":"@alexvipond/css-selector-pipes","version":"0.0.1","description":"Pipeline functions for building CSS selectors programmatically","main":"./lib/index.umd.js","module":"./lib/index.es.js","types":"./lib/index.d.ts","exports":{".":{"import":"./lib/index.es.js","require":"./lib/index.umd.js"}},"scripts":{"dev":"vite","build":"vite build","build:lib":"vite build --config vite.lib.config.ts && tsc","test:only":"run() { uvu -r ts-node/register tests/$2 $1.test.ts$; }; run","test":"npm run test:only ."},"devDependencies":{"@fontsource/inconsolata":"^4.3.0","@fontsource/inter":"^4.3.0","@tailwindcss/forms":"^0.3.2","@vitejs/plugin-vue":"^1.2.2","autoprefixer":"^10.2.5","postcss":"^8.2.13","tailwindcss":"^2.1.2","ts-node":"^9.1.1","typescript":"^4.2.4","uvu":"^0.5.1","vite":"^2.2.3"},"dependencies":{"@baleada/logic":"^0.19.9","@baleada/vue-composition":"^0.10.0","@baleada/vue-simple-icons":"^0.1.0","@headlessui/vue":"^1.2.0","@heroicons/vue":"^1.0.1","nanoid":"^3.1.23","vue":"^3.0.11"},"gitHead":"b58b91ae96ba8c3d12a98c98feab352b69d31ded","_id":"@alexvipond/css-selector-pipes@0.0.1","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-PqJfJ7crlQDeE5NesnBkF6GeA+sDPe15swWmC7BLxxf6nDFPn8xC6n8xH81DCEB4XuJENkeOqEXp9b5kmUzpTQ==","shasum":"723e6add4112f6286b1d2e1c517a4ce896b46bee","tarball":"https://registry.npmjs.org/@alexvipond/css-selector-pipes/-/css-selector-pipes-0.0.1.tgz","fileCount":5,"unpackedSize":23444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpznRCRA9TVsSAnZWagAAo1EQAJSdbeO6eRdOi+ZZXH9g\nW8hFsjJxtLZSLv7hld4irzBtUgqbenUIjPC/X6n6UrXX7VthP+gZYnNERg9w\n9wNjzID0uTDNjJbCR9XxI2Fi32sNdIBh2zF2wQEk5F7t5h4YMhdJIVo9owCZ\n35izaGCAqGnV4XzqOVa9pCYjCwWfh9M7HizJqJvkXh9XVmP81Y2g93OymZx8\nrOJ7f1oIpBTBUvgMH7oJKSrXaY4X+fwBoh37yUHj3pGwfbkyHKgdi1f6ZDQN\nqhnvoYl3yA0yEdQXK6V11n2x4PpawY6C7CP0f1M+wpDMJrW28639+vSWXvgY\nkY1vzKTfk1NVN8vlidONmHJkgerQ7xIQF98eMx+Idej7B8frXrQ2iScJmBhV\n3Lcuib8YNFLKpbafM9DQ0uyN52uDOt55ISqbiXvr1W3Yms/cqhTq58kb/8zY\nK8C1WjEZ1XPi7rlNJGC6HzoH+apOsrAKc1kJY0npuPa85ENai4vmx5Fv3gTE\n8qItRzxdIG2iBXfeSqIVlwLCkF+IS/YSjWKDgSdM+VdoEF/SWmSzidOWc4Sa\nrYYNSV3wGagepd6Kn4NoJMzp+C6tjaIq5VLUqc4a+P14XlZDGE4RE9OYvfpy\nTqmL2netKhYlEeFs/jUpKrdB4he4ZXX4Av34N/WGwglj7xpGY2ObeVSbFGFa\naZz0\r\n=YW3M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEA4Nih8i+m6XZvsQzE5rGq+IDXn9gEPiAvH0dR75FNdAiEAoY1t/iIUPdpo6wXNV9oeHdXByKZJsp+9VEyP7mQzpDU="}]},"_npmUser":{"name":"alexvipond","email":"hello@alexvipond.dev"},"directories":{},"maintainers":[{"name":"alexvipond","email":"hello@alexvipond.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/css-selector-pipes_0.0.1_1621572048878_0.25545956111042245"},"_hasShrinkwrap":false}},"time":{"created":"2021-05-17T19:09:53.855Z","0.0.0":"2021-05-17T19:09:54.013Z","modified":"2022-04-04T12:41:57.695Z","0.0.1":"2021-05-21T04:40:49.052Z"},"maintainers":[{"name":"alexvipond","email":"hello@alexvipond.dev"}],"description":"Pipeline functions for building CSS selectors programmatically","readme":"# CSS Selector Builder\n\nThis project is a TypeScript library for building CSS selectors programmatically, and also a user interface around that library.\n\n\n## Motivation\n\n- Create a nice interface that people can use to build CSS selectors and explore different types of CSS selectors\n- Practice type definitions, test-driven development, functional programming, pipelines, dark mode design, controlled components, and recursive components in Vue 3\n- Have fun with my favorite tools\n  - TypeScript\n  - Vue 3 Composition API\n  - Tailwind\n  - Vite, both for building the website and bundling the library\n  - uvu (test runner)\n- Try out [Headless UI](https://headlessui.dev/)\n\n\n## Usage\n\n### Interface\n\nTo use the CSS selector builder interface, go to [the website](https://css-selector-builder.netlify.app).\n\nAs you build your selector, you'll see the URL update with any new conditions you've created. You can share that URL with anyone to show them what you've built!\n\nTo play with the selector builder's recursive abilities:\n1. Add a new condition\n2. Open the dropdown, and type `matches`\n3. Pick one of the options that starts with \"matches\" to render a nested selector builder. Fun stuff!\n\nThe relevant source code for the user interface is in [in the `src/interface` directory](https://github.com/AlexVipond/css-selector-builder/tree/main/src/interface).\n\n\n### Library\n\nTo use the library:\n\n```shell\nnpm i @alexvipond/css-selector-pipes\n```\n\nFrom the library, you can import functions for building CSS selectors:\n\n```ts\nimport { tag, className, not } from '@alexvipond/css-selector-pipes'\n\ntag('h1')()          // 'h1'\nclassName('poop')()  // .poop\nnot(tag('h1')())()   // ':not(h1)'\n```\n\nEach function is a **higher order function**, returning a function that accepts a CSS selector (String) as its only parameter, and returns the transformed selector.\n\n```js\nimport { tag, className } from '@alexvipond/css-selector-pipes'\n\nconst tagFunction = tag('h1')\nconst classNameFunction = className('poop')\n\ntagFunction(classNameFunction()) // h1.poop\n```\n\nYou can also import a `pipe` utility that makes it easier to compose multiple functions into a selector pipeline.\n\n```js\nimport { pipe, tag, className, attribute, focus } from '@alexvipond/css-selector-pipes'\n\npipe(\n  tag('h1'),\n  className('poop'),\n  attribute('name', '$=', 'lol'),\n  focus()\n)() // h1.poop[\"name\"$=\"lol\"]:focus\n```\n\nOr, if your dev environment supports it, you can use the upcoming pipeline operator:\n\n```js\nimport { tag, className, attribute, focus } from '@alexvipond/css-selector-pipes'\n\n|> tag('h1'),\n|> className('poop'),\n|> attribute('name', '$=', 'lol'),\n|> focus()\n\n// h1.poop[\"name\"$=\"lol\"]:focus\n```\n\nAll functions are fully typed, and you can check out these test files for further documentation and a list of available functions:\n\n- [`append`](https://github.com/AlexVipond/css-selector-builder/blob/main/tests/node/append.test.ts)\n- [`prepend`](https://github.com/AlexVipond/css-selector-builder/blob/main/tests/node/prepend.test.ts)\n- [`pseudoFn`](https://github.com/AlexVipond/css-selector-builder/blob/main/tests/node/pseudoFn.test.ts)\n- [`pseudoState`](https://github.com/AlexVipond/css-selector-builder/blob/main/tests/node/pseudoState.test.ts)\n- [`pseudoElement`](https://github.com/AlexVipond/css-selector-builder/blob/main/tests/node/pseudoElement.test.ts)\n- [`pseudoElementFn`](https://github.com/AlexVipond/css-selector-builder/blob/main/tests/node/pseudoElementFn.test.ts)\n- [`relate`](https://github.com/AlexVipond/css-selector-builder/blob/main/tests/node/relate.test.ts)\n\nThe relevant source code is in [the `src/pipes` directory](https://github.com/AlexVipond/css-selector-builder/tree/main/src/pipes).\n\n\n### Development\n\nSet up the project locally:\n\n```shell\ngit clone https://github.com/AlexVipond/css-selector-builder && cd css-selector-builder && npm install\n```\n\nRun tests:\n\n```shell\nnpm run test\n```\n\nRun tests for a specific file:\n\n```shell\nnpm run test:only [filename, excluding the .test.ts extension]\n\nnpm tun test:only toSelector\nnpm tun test:only append\n```\n\nRun the interface in development mode on `localhost:3000`:\n\n```shell\nnpm run dev\n```\n\nBuild the interface for production:\n\n```shell\nnpm run build\n```\n\nBuild the library for production:\n\n```shell\nnpm run build:lib\n```\n","readmeFilename":"README.md"}