{"_id":"@a-developer-who-exists/sss-css","name":"@a-developer-who-exists/sss-css","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@a-developer-who-exists/sss-css","version":"1.0.0","description":"SSS — a simpler CSS language. Write .sss files with center: true instead of flexbox boilerplate.","type":"module","license":"MIT","author":{"name":"someone"},"repository":{"type":"git","url":"git+https://github.com/tomN14/sssProject.git"},"keywords":["css","sss","stylesheet","preprocessor","simple-css"],"engines":{"node":">=18"},"publishConfig":{"access":"public"},"bin":{"sss":"src/cli.js"},"exports":{".":"./src/compiler.js","./compiler":"./src/compiler.js","./client":"./src/client.js","./package.json":"./package.json"},"scripts":{"demo":"node src/cli.js serve examples"},"gitHead":"5f1d49848219f6d4976ea86a7393c9356ec194f7","_id":"@a-developer-who-exists/sss-css@1.0.0","bugs":{"url":"https://github.com/tomN14/sssProject/issues"},"homepage":"https://github.com/tomN14/sssProject#readme","_nodeVersion":"25.7.0","_npmVersion":"11.10.1","dist":{"integrity":"sha512-nII6kCo3mRgh7647kHiSuATLOZGilwjkW6GoIYreJen4oOTvTmD4HypLA4tcTHv+eABAobk355Ib5wsFreWtfQ==","shasum":"11fbdac3074fa22b043c5e65b3705e102b8dd0dd","tarball":"https://registry.npmjs.org/@a-developer-who-exists/sss-css/-/sss-css-1.0.0.tgz","fileCount":10,"unpackedSize":15291,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHbcFk292xjyvQy2K25T586QgnjjrPVPDlOl9IesRER4AiEAuV5EyH+xdTdQjuL7eDahMETBYNPu48ZBro2xyw+8dGk="}]},"_npmUser":{"name":"a-developer-who-exists","email":"tommyni728@gmail.com"},"directories":{},"maintainers":[{"name":"a-developer-who-exists","email":"tommyni728@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/sss-css_1.0.0_1780351186526_0.8960507588731588"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-01T21:59:46.423Z","1.0.0":"2026-06-01T21:59:46.708Z","modified":"2026-06-01T21:59:46.926Z"},"maintainers":[{"name":"a-developer-who-exists","email":"tommyni728@gmail.com"}],"description":"SSS — a simpler CSS language. Write .sss files with center: true instead of flexbox boilerplate.","homepage":"https://github.com/tomN14/sssProject#readme","keywords":["css","sss","stylesheet","preprocessor","simple-css"],"repository":{"type":"git","url":"git+https://github.com/tomN14/sssProject.git"},"author":{"name":"someone"},"bugs":{"url":"https://github.com/tomN14/sssProject/issues"},"license":"MIT","readme":"# SSS — Simple Style Sheets\n\nA simpler way to write CSS. Use `.sss` files with intuitive properties like `center: true` instead of flexbox boilerplate.\n\n## Install\n\n```bash\nnpm install -g @a-developer-who-exists/sss-css\n```\n\nOr in a project:\n\n```bash\nnpm install @a-developer-who-exists/sss-css\n```\n\n## Quick start\n\n**1. Create `styles.sss`:**\n\n```css\n.page {\n  center: true;\n  height-range: [100vh, 100vh];\n  bg: [#11111b];\n  font: [system-ui, sans-serif];\n}\n\n.card {\n  center: true;\n  pad: 16px;\n  border-r: [12px];\n  bg: [#1e1e2e];\n}\n```\n\n**2. Link it in HTML:**\n\n```html\n<script type=\"module\" src=\"/__sss__/client.js\"></script>\n<link rel=\"stylesheet\" href=\"styles.sss\" />\n```\n\n**3. Start the dev server:**\n\n```bash\nsss serve .\n```\n\nOpen the URL it prints (default `http://localhost:3000`).\n\nNo `.css` file needed — SSS compiles on the fly.\n\n## CLI\n\n```bash\n# Dev server (compiles .sss in the browser and over HTTP)\nsss serve .\nsss serve examples\n\n# Compile to stdout\nsss styles.sss\n\n# Compile to a file (optional)\nsss styles.sss output.css\n```\n\n## HTML setup\n\nWhen using `sss serve`, add this once in your HTML `<head>`:\n\n```html\n<script type=\"module\" src=\"/__sss__/client.js\"></script>\n<link rel=\"stylesheet\" href=\"styles.sss\" />\n```\n\nThe dev server serves the runtime at `/__sss__/client.js` automatically.\n\nIf you installed locally with npm, you can also use:\n\n```html\n<script type=\"module\" src=\"./node_modules/@a-developer-who-exists/sss-css/src/client.js\"></script>\n<link rel=\"stylesheet\" href=\"styles.sss\" />\n```\n\n## SSS syntax\n\n| SSS | Compiles to |\n|-----|-------------|\n| `center: true` | flex center (both axes) |\n| `center: horizontal` | center on X axis |\n| `center: vertical` | center on Y axis |\n| `stack: true` | flex column |\n| `row: true` | flex row |\n| `spread: true` | space-between |\n| `fill: true` | width/height 100% |\n| `height-range: [10vh, 20vh]` | min-height + max-height |\n| `font: [system-ui, sans-serif]` | font-family |\n| `bg: [#11111b]` | background |\n| `border-r: [12px]` | border-radius |\n| `border: [1px solid #333]` | border |\n| `pad: 12px` | padding (all sides) |\n| `pad-L: 8px` | padding-left |\n| `pad-R: 8px` | padding-right |\n| `pad-U: 8px` | padding-top |\n| `pad-D: 8px` | padding-bottom |\n| `pad-L-R: 12px` | padding left + right |\n| `pad-L-R-U: 12px` | padding left + right + top |\n\nStandard CSS properties (`width`, `color`, `gap`, etc.) pass through unchanged.\n\n## Programmatic use\n\n```js\nimport { compile } from \"@a-developer-who-exists/sss-css\";\n\nconst css = compile(`\n  .box {\n    center: true;\n    pad: 16px;\n  }\n`);\n```\n\n## Publish to npm\n\n1. Update `author` and `repository` in `package.json`\n2. Create a GitHub repo and push the code\n3. Log in: `npm login`\n5. Publish: `npm publish`\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-4611f789c2a6d4f4fec43cc90326e49a"}