{"id":13469635,"url":"https://github.com/seek-oss/treat","last_synced_at":"2025-09-27T10:30:36.556Z","repository":{"id":37848460,"uuid":"186542705","full_name":"seek-oss/treat","owner":"seek-oss","description":":candy: Themeable, statically extracted CSS‑in‑JS with near‑zero runtime.","archived":true,"fork":false,"pushed_at":"2024-04-09T01:36:31.000Z","size":2754,"stargazers_count":1151,"open_issues_count":0,"forks_count":30,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-01-09T21:44:46.584Z","etag":null,"topics":["css-in-js","css-in-ts","webpack-plugin"],"latest_commit_sha":null,"homepage":"https://seek-oss.github.io/treat","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/seek-oss.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-14T04:08:29.000Z","updated_at":"2024-12-30T04:07:16.000Z","dependencies_parsed_at":"2024-03-25T02:24:41.770Z","dependency_job_id":"69c79372-d89b-469d-b0df-f8e0f626a48c","html_url":"https://github.com/seek-oss/treat","commit_stats":null,"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seek-oss%2Ftreat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seek-oss%2Ftreat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seek-oss%2Ftreat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seek-oss%2Ftreat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/seek-oss","download_url":"https://codeload.github.com/seek-oss/treat/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234426033,"owners_count":18830834,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-in-js","css-in-ts","webpack-plugin"],"created_at":"2024-07-31T15:01:47.994Z","updated_at":"2025-09-27T10:30:35.815Z","avatar_url":"https://github.com/seek-oss.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"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).\n\n---\n\n\u003cdiv align=\"center\" \u003e\n  \u003cimg src=\"./logo.png\" alt=\"treat\" width=\"160px\" /\u003e\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n  Themeable, statically extracted CSS\u0026#8209;in\u0026#8209;JS with near\u0026#8209;zero runtime.\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n\n[![Build Status](https://img.shields.io/travis/seek-oss/treat/master.svg?logo=travis\u0026style=flat-square)](http://travis-ci.org/seek-oss/treat) [![treat](https://img.shields.io/npm/v/treat.svg?label=treat\u0026logo=npm\u0026style=flat-square)](https://www.npmjs.com/package/treat) [![Spectrum Community](https://img.shields.io/badge/community-spectrum-a36ae4.svg?style=flat-square)](https://spectrum.chat/treatcss)\n\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n\u003c/div\u003e\n\nWrite your styles in JavaScript/TypeScript within **treat files** (e.g. `Button.treat.js`) that get executed at build time.\n\nAll 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.\n\n**All CSS logic, including its dependencies, will not be included in your final bundle.**\n\n_**Because theming is achieved by generating multiple classes, legacy browsers are supported.**_\n\n\u003cbr /\u003e\n\n## [Documentation](https://seek-oss.github.io/treat)\n\nSee the documentation at [seek-oss.github.io/treat](https://seek-oss.github.io/treat) for more information about using treat.\n\n\u003cbr /\u003e\n\n## Requirements\n\nYour 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.\n\n**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.\n\nThe 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).\n\n## Basic usage\n\nFirst, install the core libary.\n\n```sh\n$ yarn add treat\n```\n\nThen, 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.\n\n```js\nconst { TreatPlugin } = require('treat/webpack-plugin');\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\n\nmodule.exports = {\n  plugins: [\n    new TreatPlugin({\n      outputLoaders: [MiniCssExtractPlugin.loader]\n    }),\n    new MiniCssExtractPlugin()\n  ]\n};\n```\n\nNext, define and export [styles](https://seek-oss.github.io/treat/data-types#styles) from a treat file.\n\n```js\n// Button.treat.js\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\nimport { style } from 'treat';\n\nexport const button = style({\n  backgroundColor: 'blue',\n  height: 48\n});\n```\n\nFinally, import the styles.\n\n```jsx\n// Button.js\nimport * as styles from './Button.treat.js';\n\nexport const Button = ({ text }) =\u003e `\n  \u003cbutton class=\"${styles.button}\"\u003e${text}\u003c/button\u003e\n`;\n```\n\n## Themed usage\n\n\u003e 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.\n\nFirst, install react-treat.\n\n```sh\n$ yarn add react-treat\n```\n\nAssuming 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.\n\n```js\n// theme.treat.js\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n  brandColor: 'blue',\n  grid: 4\n});\n```\n\nThen, import the desired theme and pass it to [`TreatProvider`](https://seek-oss.github.io/treat/react-api#treatprovider) at the root of your application.\n\n```jsx\n// App.js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport const App = () =\u003e (\n  \u003cTreatProvider theme={theme}\u003e...\u003c/TreatProvider\u003e\n);\n```\n\nNow 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.\n\n```js\n// Button.treat.js\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\nimport { style } from 'treat';\n\nexport const button = style((theme) =\u003e ({\n  backgroundColor: theme.brandColor,\n  height: theme.grid * 11\n}));\n```\n\n\u003e 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.\n\nThen import and resolve themed styles via the [`useStyles` Hook](https://seek-oss.github.io/treat//react-api#usestyles).\n\n```jsx\n// Button.js\nimport React from 'react';\nimport { useStyles } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport const Button = (props) =\u003e {\n  const styles = useStyles(styleRefs);\n\n  return \u003cbutton {...props} className={styles.button} /\u003e;\n};\n```\n\n## [Documentation](https://seek-oss.github.io/treat)\n\nSee the documentation at [seek-oss.github.io/treat](https://seek-oss.github.io/treat) for more information about using treat.\n\n## License\n\nMIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseek-oss%2Ftreat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fseek-oss%2Ftreat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseek-oss%2Ftreat/lists"}