Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/seek-oss/treat
:candy: Themeable, statically extracted CSS‑in‑JS with near‑zero runtime.
https://github.com/seek-oss/treat
css-in-js css-in-ts webpack-plugin
Last synced: about 2 months ago
JSON representation
:candy: Themeable, statically extracted CSS‑in‑JS with near‑zero runtime.
- Host: GitHub
- URL: https://github.com/seek-oss/treat
- Owner: seek-oss
- License: mit
- Archived: true
- Created: 2019-05-14T04:08:29.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-04-09T01:36:31.000Z (5 months ago)
- Last Synced: 2024-07-18T22:17:16.931Z (2 months ago)
- Topics: css-in-js, css-in-ts, webpack-plugin
- Language: TypeScript
- Homepage: https://seek-oss.github.io/treat
- Size: 2.63 MB
- Stars: 1,154
- Watchers: 9
- Forks: 30
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-repos - seek-oss/treat - :candy: Themeable, statically extracted CSS‑in‑JS with near‑zero runtime. (TypeScript)
- awesome-list - treat - oss | 1097 | (TypeScript)
README
## ⚠️ NOTE: This project has been deprecated in favour of [Vanilla Extract.](https://github.com/vanilla-extract-css/vanilla-extract). Please take a look at [the migration guide](https://github.com/vanilla-extract-css/vanilla-extract/blob/master/docs/treat-migration-guide.md).
---
Themeable, statically extracted CSS‑in‑JS with near‑zero runtime.
[](http://travis-ci.org/seek-oss/treat) [](https://www.npmjs.com/package/treat) [](https://spectrum.chat/treatcss)
Write your styles in JavaScript/TypeScript within **treat files** (e.g. `Button.treat.js`) that get executed at build time.
All CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing classes. In fact, if your application doesn’t use theming, you don’t even need the runtime at all.
**All CSS logic, including its dependencies, will not be included in your final bundle.**
_**Because theming is achieved by generating multiple classes, legacy browsers are supported.**_
## [Documentation](https://seek-oss.github.io/treat)
See the documentation at [seek-oss.github.io/treat](https://seek-oss.github.io/treat) for more information about using treat.
## Requirements
Your project must be using [webpack](https://seek-oss.github.io/treat/webpack-options) with the supplied [webpack plugin](https://seek-oss.github.io/treat/webpack-options), but that’s it.
**First-class support is provided for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/)**, but those layers are _entirely optional_. The core [runtime API](https://seek-oss.github.io/treat/runtime-api) can be integrated into other frameworks, if needed.
The runtime makes use of [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), so you may need a [polyfill](https://www.npmjs.com/package/es6-map) for [pre-ES2015 browsers](https://caniuse.com/#feat=es6).
## Basic usage
First, install the core libary.
```sh
$ yarn add treat
```
Then, add the [webpack plugin](https://seek-oss.github.io/treat/setup#webpack-setup) to your project. In this case, we’re using [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to generate a static CSS file.
```js
const { TreatPlugin } = require('treat/webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [
new TreatPlugin({
outputLoaders: [MiniCssExtractPlugin.loader]
}),
new MiniCssExtractPlugin()
]
};
```
Next, define and export [styles](https://seek-oss.github.io/treat/data-types#styles) from a treat file.
```js
// Button.treat.js
// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **
import { style } from 'treat';
export const button = style({
backgroundColor: 'blue',
height: 48
});
```
Finally, import the styles.
```jsx
// Button.js
import * as styles from './Button.treat.js';
export const Button = ({ text }) => `
${text}
`;
```
## Themed usage
> This themed usage example makes use of [react-treat](https://seek-oss.github.io/treat/react-api) to keep things simple. React is [not required](https://seek-oss.github.io/treat/runtime-api) to use treat.
First, install react-treat.
```sh
$ yarn add react-treat
```
Assuming you’ve already set up the [webpack plugin](https://seek-oss.github.io/treat/setup#webpack-setup), start by creating and exporting a theme from a treat file. Normally, you’d define multiple themes, but let’s keep it short.
```js
// theme.treat.js
// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **
import { createTheme } from 'treat';
export default createTheme({
brandColor: 'blue',
grid: 4
});
```
Then, import the desired theme and pass it to [`TreatProvider`](https://seek-oss.github.io/treat/react-api#treatprovider) at the root of your application.
```jsx
// App.js
import React from 'react';
import { TreatProvider } from 'react-treat';
import theme from './theme.treat.js';
export const App = () => (
...
);
```
Now that you’ve configured the theming system, define and export [themed styles](https://seek-oss.github.io/treat/data-types#themedstyles) from a treat file.
```js
// Button.treat.js
// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **
import { style } from 'treat';
export const button = style((theme) => ({
backgroundColor: theme.brandColor,
height: theme.grid * 11
}));
```
> Themed styles have higher precedence than non-themed styles, regardless of document order. For more information, read the [theming](https://seek-oss.github.io/treat/how-it-works#theming) guide.
Then import and resolve themed styles via the [`useStyles` Hook](https://seek-oss.github.io/treat//react-api#usestyles).
```jsx
// Button.js
import React from 'react';
import { useStyles } from 'react-treat';
import * as styleRefs from './Button.treat.js';
export const Button = (props) => {
const styles = useStyles(styleRefs);
return ;
};
```
## [Documentation](https://seek-oss.github.io/treat)
See the documentation at [seek-oss.github.io/treat](https://seek-oss.github.io/treat) for more information about using treat.
## License
MIT.