J2C

j2c is a CSS-in-JS library. It provides a sizable subset of SASS in a tiny package.

Mixins, nested rules, composablity are available out of the box.

Classe names and animations are localized by default, PostCSS style.

Here's a short sample of what it can do. Check the github repo for the full documentation.

---- ### Inline styles `j2c.inline()` creates inline styles. Underscores are converted to dashes so that property names can be left unquoted. Arrays ensures that properties are ordered properly. Order can't be guaranteed for objects. You can play with the code samples live. ```JavaScript j2c.inline({ background_color:"red", border: [ "1px solid grey", {left_width: "3px"} ] }) ``` ```CSS border: 1px solid grey; border-left-width: 3px; background-color: red; ``` You can also use arrays to insert mixins. ---- ### Building a style sheet `j2c.sheet()` creates a style sheet. Nested selectors and at-rules are supported. Arrays can also be used where needed for mixins (not shown here). ```JavaScript j2c.sheet({"@global": { ".foo": { color: "red", "@media (min-width:48.01em)": { color: "green" }, "& .bar,& .baz": { text_decoration: "underline" } } }}) ``` ```CSS .foo { color: red; } .foo .bar,.foo .baz { text-decoration: underline; } @media (min-width:48.01em) { .foo { color: green; } } ``` The `@global` pseudo at-rule prevents `j2c.sheet` from localizing class names. ---- ### Scoped definitions: CSS class names live in a global namespace. Developers and designers have to be careful not to step on one another's feet, and meaningful, unique names are not easy to find. A potential solution is to use inline styles, but adding them all over the place in templates can be bulky, and they are less powerful than style sheets (no `@media` queries, no `:before` or `:hover` pseudo-elements, ...) `j2c` solves this problem by generating unique class names automatically. In the next example, `.foo` is converted to a unique yet recognizable one under the hood. ```JavaScript sheet = j2c.sheet({ ".foo": { color: "red", "@media (max-width:48em)": { color: "green" }, "& :global(.bar)": { text_decoration: "underline" } } }) ``` In another component: ```JavaScript sheet = j2c.sheet({ ".foo": { font_size:"2em", ":before": { content: '"Look Ma, no clash!"' } } }) ``` See? No name clash :-) You can put `sheet` in a `style` element, and use `sheet.foo` as a class for your component/directive/whatever. `sheet.foo` will read something along `"foo_j2c_XXXX_N"`. Where the `XXXX_N` combo is globally unique. They are respectively a 128 bit random number and a counter. If you play with the live examples, you'll see the counter increment every time the sheet is updated. `j2c` can be included several times in the same page, and can also be used on the server to generate isomorphic componenents (but you'll have to overwrite the styles on hydration). #### Sharing a namespace between sheets. If you want several sheets to share the same scope, you can pass it as the second argument to `j2c.sheet()`. You can pass a sheet object returned by `j2c.sheet`, it will work just fine. ```JavaScript // for the sake of example. sheet = j2c.sheet({foo: "myFOO"}, { ".foo": { font_size:"2em" } }) ``` [Find the full documentation on GitHub](https://github.com/j2css/j2c). Vendor prefixes, animations, CSS hacks and the mysterious dollar property combiner are also covered there. You may also want to check the source of this page for a medium-sized stlye sheet written with `j2c` (mostly the logo and the GitHub ribbon). ---- ### FAQ #### Why do you use underscores in property names? Actually, camelCase and dashes are supported too. I wanted property names to be allowed to be left unquoted. CamelCase may be more familiar for property names in JS, but, in practice, underscores are nicer to work with: - when pasting CSS in your JS source - when refactoring from `{text_decoration: "none"}` to ```JSON { text: { align: "center", decoration: "none" } } ``` and back. Note however that some automated CSS 2 JS tools use CamelCase, and thus it is also supported. #### There's another project called "j2c" There are at least three other programming-related things called "j2c": - a [Java to C++ compiler](https://code.google.com/a/eclipselabs.org/p/j2c/), - the [J2EE connector architecture](https://en.wikipedia.org/wiki/Java_EE_Connector_Architecture) and - the [JPEG 2000 codestream](http://fileformats.archiveteam.org/wiki/JPEG_2000_codestream). I believe that they are sufficiently different in scope for the naming collision not to be relevant. #### That's all, folks... ...for now. If I were hip, this is where I'd intimate you to follow me on Twitter, but I don't post anything there :-)

Loading the docs...

Small CSS-in-JS solution

1.3KB down the line