Structure a module, fill package.json, list it for discovery, support named @import, and optionally automate the browser IDE with libck / xfcmd.
The fscss-modules / libs.json registry feeds Libraries discovery. A solid module is still just importable .fscss source that compiles to plain CSS.
libs.json is discovery. Named @import((*) from my-lib) needs the pack registered for the compiler. IDE libck only needs a public repo + valid package.json (URL works even before registry listing).
Root package.json — modern example (helpers with signatures, xfcmd, empty directive when prefixes mix):
{
"name": "my-widget",
"version": "1.0.0",
"description": "One-line summary for discovery cards",
"extension": "fscss",
"fscss_version": ">=1.2.4",
"engines": { "fscss": ">=1.2.4" },
"blocked_methods": [],
"repository": {
"type": "git",
"url": "https://github.com/you/my-widget.fscss"
},
"bugs": {
"url": "https://github.com/you/my-widget.fscss/issues"
},
"file": {
"usage": {
"directive": "widget-*",
"helpers": [
"widget-root(root:root)",
"widget-card(sel:.widget-card)"
]
},
"modules": ["./my-widget.fscss"],
"remote": "./my-widget.fscss"
},
"xfcmd": {
"enable": "./xfcmds/enable.xfcmd",
"disable": "./xfcmds/disable.xfcmd"
},
"author": { "name": "you" },
"keywords": ["fscss", "css", "module"],
"license": "MIT"
}
name | IDE / registry id: libck my-widget. Prefer a short name (not only fscss:…). |
|---|---|
version | Semver; bump on release. |
description | One line on libraries / libck report. |
extension | Must be "fscss". |
fscss_version | Semver range vs compiler (>=, ^, \~). IDE warns if unsatisfied. |
blocked_methods | Built-ins this pack must not use; else []. |
repository / bugs | Git URL and issues. |
file.modules | Required for libck — relative paths to source files. |
file.remote | Required — entry file for download / remote import. |
file.usage.helpers | Public @define names; add (args) for better IDE snippets. |
file.usage.directive | Prefix pattern e.g. st-*, widget-*. Use "" if helpers are mixed (avoids false warnings). |
xfcmd.enable / disable | Paths to .xfcmd scripts for libon / liboff. |
author / license | Shown on cards; MIT recommended. |
PR to add your repo URL in assets/scripts/libs.json (remotes). Visible on /libraries.
@import((*) from name))Compiler resolves registry / core style names without quotes. Until then, import by URL or path:
@import((*) from "https://cdn.jsdelivr.net/gh/you/my-widget.fscss@main/my-widget.fscss") @import((widget-root, widget-card) from "./my-widget.fscss")
See Submit Guide and @import docs.
libck / libon (automation)In FSCSS IDE terminal:
libck my-widget yes # or full GitHub URL libck https://github.com/you/my-widget.fscss yes liboff my-widget
libck loads package.json, checks fscss_version, downloads file.modules, verifies helpers exist as @define, then offers enable. Enable runs xfcmd.enable (snippets + optional demo). Disable removes snippets; does not delete demo files.
Expose one entry — index.fscss or my-widget.fscss — self-contained or re-exporting internals. file.remote must point at that file. Public GitHub (or CDN) so libck and remote imports can fetch it.
extension, fscss_version, file.modules, file.remote, file.usage.helpersdirective matches prefix — or "" if names are mixed@define in the entry filexfcmds/enable.xfcmd + disable.xfcmdlibck <url> in the IDElibs.json for discovery