https://github.com/barelyhuman/stone

A hackable CSS-in-JSS and Theming solution
https://github.com/barelyhuman/stone

css css-in-js platform-agnostic styled styling

Last synced: 9 months ago
JSON representation

A hackable CSS-in-JSS and Theming solution

• Host: GitHub
• URL: https://github.com/barelyhuman/stone
• Owner: barelyhuman
• License: mit
• Archived: true
• Created: 2021-09-06T11:39:52.000Z (almost 5 years ago)
• Default Branch: dev
• Last Pushed: 2021-12-26T07:57:26.000Z (over 4 years ago)
• Last Synced: 2025-08-28T16:00:53.052Z (10 months ago)
• Topics: css, css-in-js, platform-agnostic, styled, styling
• Language: TypeScript
• Homepage: https://npm.im/@barelyhuman/stone
• Size: 80.1 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# stone

A hackable CSS-in-JSS solution

![Github](https://img.shields.io/github/license/barelyhuman/stone?logoColor=000&colorA=000000&colorB=000000)

[![Javascript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg?colorA=000000&colorB=000000)](https://standardjs.com)

[![Build Size](https://img.shields.io/bundlephobia/minzip/@barelyhuman/stone?colorA=000000&colorB=000000)](https://bundlephobia.com/result?p=@barelyhuman/stone)

[![Version](https://img.shields.io/npm/v/@barelyhuman/stone?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@barelyhuman/stone)

[![Downloads](https://img.shields.io/npm/dt/@barelyhuman/stone.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@barelyhuman/stone)

## About

> [WIP] IT WORKS RIGHT NOW BUT IS STILL IN ALPHA STAGES (THE API MIGHT CHANGE)

Stylebone is fun pet project that I wanted to do.

It's based off of [AndrewPrifer/theminator](https://github.com/AndrewPrifer/theminator)'s concept of being to use simple theme configurations and using them as styles.

This though isn't very performant when working with platforms so this library aims to move it ahead by acting as a pre-processor that bundles styles for the same.

This allows us to convert needed theme into proper stylesheets when working with **web** and `StyleSheet.create` insertions when working with something like **React Native**. These are accomplished by plugins or as I call them adaptors that create the needed files at runtime and import them as modules for web and create `Stylesheet.create` when working with React Native, or do anything else with the parsed css token, go **bonkers** with it and create your own adaptor as needed.

The library isn't limited to the two platforms as you can find other **handlers** (or create your own) to support you preferred platform.

## Documentation

You can read the [docs here](https://stone.reaper.im/)

## Roadmap

- [x] Create style utilities

- [x] Add handling for color manipulation

- [ ] Add more needed plugins for the same

- [x] Write processor for handling conversion into files

- [x] Create adaptor to handle inline styling - `import {CSSWebInlineAdaptor} from "@barelyhuman/stone`

- [x] Create adaptor to inject styles to the html `style` tag - `import {CSSWebInjectAdaptor} from "@barelyhuman/stone`

- [ ] Create adaptor to create frozen objects of `StyleSheet.create` for React Native

- [ ] Create adaptor / babel plugin / cli tool to read all css definitions and create a `.css` file out of it.

## Contributing

Contributions are always welcome!

Follow the general github flow of Fork => PR, make sure that you let the authors know about the issue you pick to avoid overlaps.

## Authors

- [@barelyhuman](https://www.github.com/barelyhuman)

- [@AndrewPrifer](https://github.com/AndrewPrifer) - the original author of the idea

## Support

For support, email ahoy@barelyhuman.dev

## License

[MIT](https://choosealicense.com/licenses/mit/)