Skip to content
🍬 Themeable, statically extracted CSS‑in‑JS with near‑zero runtime.
TypeScript JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs docs: Fix typos (#63) Sep 26, 2019
packages chore(release): Publish v1.1.6 Oct 20, 2019
site docs: Fix twitter share image & double slash on render (#49) Jul 29, 2019
test-helpers perf: Add compiler cache (#25) May 30, 2019
.gitignore feat: Release v1.0.0 (#39) Jul 24, 2019
.prettierrc feat: Initial commit May 14, 2019
.travis.yml chore: Fix github auth in CI Jul 24, 2019
CHANGELOG.md
LICENSE feat: Initial commit May 14, 2019
README.md docs: Fix typos (#63) Sep 26, 2019
babel.config.js test: Transform test code with babel (#21) May 28, 2019
jest.config.js test: Transform test code with babel (#21) May 28, 2019
jest.setup.js feat: Add @Keyframes API (#8) May 21, 2019
lerna.json chore(release): Publish v1.1.6 Oct 20, 2019
logo.png docs: Update readme & add logo May 14, 2019
package.json feat(babel-plugin): Support anonymous calls in arrays/objects (#57) Sep 16, 2019
tsconfig.json test: Transform test code with babel (#21) May 28, 2019
yarn.lock feat(babel-plugin): Support anonymous calls in arrays/objects (#57) Sep 16, 2019

README.md

treat

Themeable, statically extracted CSS‑in‑JS with near‑zero runtime.

Build Status treat Spectrum Community



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

See the documentation at seek-oss.github.io/treat for more information about using treat.


Requirements

Your project must be using webpack with the supplied webpack plugin, but that’s it.

First-class support is provided for React and TypeScript, but those layers are entirely optional. The core runtime API can be integrated into other frameworks, if needed.

The runtime makes use of Map, so you may need a polyfill for pre-ES2015 browsers.

Basic usage

First, install the core libary.

$ yarn add treat

Then, add the webpack plugin to your project. In this case, we’re using mini-css-extract-plugin to generate a static CSS file.

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 from a treat file.

// 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.

// Button.js
import * as styles from './Button.treat.js';

export const Button = ({ text }) => `
  <button class="${styles.button}">${text}</button>
`;

Themed usage

This themed usage example makes use of react-treat to keep things simple. React is not required to use treat.

First, install react-treat.

$ yarn add react-treat

Assuming you’ve already set up the webpack plugin, start by creating and exporting a theme from a treat file. Normally, you’d define multiple themes, but let’s keep it short.

// 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 at the root of your application.

// App.js
import React from 'react';
import { TreatProvider } from 'react-treat';

import theme from './theme.treat.js';

export const App = () => (
  <TreatProvider theme={theme}>...</TreatProvider>
);

Now that you’ve configured the theming system, define and export themed styles from a treat file.

// 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 guide.

Then import and resolve themed styles via the useStyles Hook.

// 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 <button {...props} className={styles.button} />;
};

Documentation

See the documentation at seek-oss.github.io/treat for more information about using treat.

License

MIT.

You can’t perform that action at this time.