@tok124/tokcss 1.0.0 → 1.0.1

package/README.md

@@ -0,0 +1,101 @@
+# tokcss
+
+A stupidly simple CSS "preprocessor" with exactly one directive:
+
+```css
+#include:"path/to/file.css";
+```
+
+That's it. No variables, no nesting, no mixins — just includes, like SCSS's
+`@use` but with a single directive and zero other opinions. If you just want
+`@import` without the "browsers deprecated it, please don't" baggage, this is
+for you.
+
+## Install
+
+```bash
+npm install -g @tok124/tokcss
+```
+
+Or run it without installing:
+
+```bash
+npx @tok124/tokcss entry.tokcss -o out.css
+```
+
+## Usage
+
+```bash
+tokcss entry.tokcss                        # prints result to stdout
+tokcss entry.tokcss -o out.css              # writes result to out.css
+tokcss entry.tokcss -o out.css -w           # watches all included files, recompiles on change
+tokcss entry.tokcss -o out.css --no-banner  # omit the "/* --- from: ... --- */" source markers
+```
+
+`-w` / `--watch` re-scans the include tree after every rebuild, so adding or
+removing `#include` lines updates what's being watched too.
+
+## Includes
+
+Paths are resolved relative to the file containing the `#include`, so nested
+folders work as expected:
+
+```css
+/* main.tokcss */
+#include:"reset.css";
+#include:"components/button.css";
+```
+
+Including the same file twice (directly or via a cycle) only inlines it
+once — later duplicates are skipped, like `@use`.
+
+## Conditional includes
+
+`#include` accepts the same trailing conditions as native `@import`: cascade
+layers, `@supports` conditions, and media queries. Combine them freely, in
+any order:
+
+```css
+#include:"reset.css" layer(reset);
+#include:"grid.css" supports(display: grid);
+#include:"wide.css" (width >= 50rem);
+#include:"a.css" layer(base) supports(display: grid) (min-width: 500px);
+```
+
+Each one wraps the included file's compiled output in the matching
+`@layer` / `@supports` / `@media` block (nested in that order), indented for
+readability:
+
+```css
+@layer base {
+  @supports (display: grid) {
+    @media (min-width: 500px) {
+      /* contents of a.css */
+    }
+  }
+}
+```
+
+A bare `layer;` with no name creates an anonymous layer, same as `@import`.
+
+## VSCode syntax highlighting
+
+`.tokcss` files are just CSS with one extra directive, so rather than writing
+a custom grammar, tell VSCode to treat them as CSS. Add this to your
+`settings.json` (Command Palette → "Preferences: Open User Settings (JSON)"):
+
+```json
+{
+  "files.associations": {
+    "*.tokcss": "css"
+  }
+}
+```
+
+You get full CSS highlighting, IntelliSense, and color previews. The
+`#include:"...";` line itself won't be specially highlighted, but it won't
+break anything either.
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tok124/tokcss",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A stupidly simple CSS preprocessor with one directive: #include:\"file.css\"; — optionally wrapped in @layer/@supports/@media, just like @import.",
   "bin": {
     "tokcss": "tokcss.js"