Add Tailwind plugin (#132)

terrazzoapp · Oct 23, 2023 · 97274f4 · 97274f4
1 parent 4e3262a
commit 97274f4
Show file tree

Hide file tree

Showing 58 changed files with 13,700 additions and 10,358 deletions.
diff --git a/.changeset/empty-dragons-sell.md b/.changeset/empty-dragons-sell.md
@@ -0,0 +1,5 @@
+---
+'@cobalt-ui/plugin-js': patch
+---
+
+Fix exported types
diff --git a/.changeset/twelve-cameras-sniff.md b/.changeset/twelve-cameras-sniff.md
@@ -0,0 +1,7 @@
+---
+'@cobalt-ui/plugin-css': patch
+'@cobalt-ui/plugin-js': patch
+'@cobalt-ui/plugin-sass': patch
+---
+
+Allow options?.transformer() to return `undefined` and fall back to default
diff --git a/docs/package.json b/docs/package.json
@@ -22,10 +22,10 @@
     "@cobalt-ui/core": "workspace:*",
     "@cobalt-ui/plugin-css": "workspace:*",
     "@cobalt-ui/plugin-sass": "workspace:*",
-    "astro": "^3.3.0",
+    "astro": "^3.3.2",
     "npm-run-all": "^4.1.5",
-    "sass": "^1.69.3",
+    "sass": "^1.69.4",
     "shiki": "^0.14.5",
-    "vite": "^4.4.11"
+    "vite": "^4.5.0"
   }
 }
diff --git a/docs/src/docs-manifest.json b/docs/src/docs-manifest.json
@@ -1,39 +1,40 @@
 {
   "pages": [
-    {"title": "Getting Started",          "pathname": "/docs/getting-started"},
-    {"title": "Tokens",                   "pathname": "/docs/tokens"},
-    {"title": "Color",                    "pathname": "/docs/tokens/#color"},
-    {"title": "Dimension",                "pathname": "/docs/tokens/#dimension"},
-    {"title": "Font Family",              "pathname": "/docs/tokens/#font-family"},
-    {"title": "Font Weight",              "pathname": "/docs/tokens/#font-weight"},
-    {"title": "Duration",                 "pathname": "/docs/tokens/#duration"},
-    {"title": "Cubic Bézier",             "pathname": "/docs/tokens/#cubic-bezier"},
-    {"title": "Number",                   "pathname": "/docs/tokens/#number"},
-    {"title": "Link",                     "pathname": "/docs/tokens/#link"},
-    {"title": "Stroke style",             "pathname": "/docs/tokens/#stroke-style"},
-    {"title": "Border",                   "pathname": "/docs/tokens/#border"},
-    {"title": "Transition",               "pathname": "/docs/tokens/#transition"},
-    {"title": "Shadow",                   "pathname": "/docs/tokens/#shadow"},
-    {"title": "Gradient",                 "pathname": "/docs/tokens/#gradient"},
-    {"title": "Typography",               "pathname": "/docs/tokens/#typography"},
-    {"title": "Groups",                   "pathname": "/docs/tokens/#groups"},
-    {"title": "Custom",                   "pathname": "/docs/tokens/#custom"},
-    {"title": "Aliasing",                 "pathname": "/docs/tokens/#aliasing"},
-    {"title": "Modes",                    "pathname": "/docs/tokens/#modes"},
-    {"title": "Integrations",             "pathname": "/docs/integrations"},
-    {"title": "CSS",                      "pathname": "/docs/integrations/css"},
-    {"title": "Sass",                     "pathname": "/docs/integrations/sass"},
-    {"title": "JSON/JS/TS",               "pathname": "/docs/integrations/js"},
-    {"title": "Style Dictionary",         "pathname": "/docs/integrations/style-dictionary"},
-    {"title": "Tokens Studio",            "pathname": "/docs/integrations/tokens-studio"},
-    {"title": "Custom Plugins",           "pathname": "/docs/integrations/custom-plugins"},
-    {"title": "Guides",                   "pathname": "/docs/guides"},
-    {"title": "What are Design Tokens?",  "pathname": "/docs/guides/design-tokens"},
-    {"title": "Best Practices",           "pathname": "/docs/guides/best-practices"},
-    {"title": "Modes",                    "pathname": "/docs/guides/modes"},
-    {"title": "Reference",                "pathname": "/docs/reference"},
-    {"title": "CLI",                      "pathname": "/docs/reference/cli"},
-    {"title": "Config API",               "pathname": "/docs/reference/config"},
-    {"title": "About",                    "pathname": "/docs/reference/about"}
+    {"title": "Getting Started", "pathname": "/docs/getting-started"},
+    {"title": "Tokens", "pathname": "/docs/tokens"},
+    {"title": "Color", "pathname": "/docs/tokens/#color"},
+    {"title": "Dimension", "pathname": "/docs/tokens/#dimension"},
+    {"title": "Font Family", "pathname": "/docs/tokens/#font-family"},
+    {"title": "Font Weight", "pathname": "/docs/tokens/#font-weight"},
+    {"title": "Duration", "pathname": "/docs/tokens/#duration"},
+    {"title": "Cubic Bézier", "pathname": "/docs/tokens/#cubic-bezier"},
+    {"title": "Number", "pathname": "/docs/tokens/#number"},
+    {"title": "Link", "pathname": "/docs/tokens/#link"},
+    {"title": "Stroke style", "pathname": "/docs/tokens/#stroke-style"},
+    {"title": "Border", "pathname": "/docs/tokens/#border"},
+    {"title": "Transition", "pathname": "/docs/tokens/#transition"},
+    {"title": "Shadow", "pathname": "/docs/tokens/#shadow"},
+    {"title": "Gradient", "pathname": "/docs/tokens/#gradient"},
+    {"title": "Typography", "pathname": "/docs/tokens/#typography"},
+    {"title": "Groups", "pathname": "/docs/tokens/#groups"},
+    {"title": "Custom", "pathname": "/docs/tokens/#custom"},
+    {"title": "Aliasing", "pathname": "/docs/tokens/#aliasing"},
+    {"title": "Modes", "pathname": "/docs/tokens/#modes"},
+    {"title": "Integrations", "pathname": "/docs/integrations"},
+    {"title": "CSS", "pathname": "/docs/integrations/css"},
+    {"title": "Sass", "pathname": "/docs/integrations/sass"},
+    {"title": "Tailwind", "pathname": "/docs/integrations/tailwind"},
+    {"title": "JSON/JS/TS", "pathname": "/docs/integrations/js"},
+    {"title": "Style Dictionary", "pathname": "/docs/integrations/style-dictionary"},
+    {"title": "Tokens Studio", "pathname": "/docs/integrations/tokens-studio"},
+    {"title": "Custom Plugins", "pathname": "/docs/integrations/custom-plugins"},
+    {"title": "Guides", "pathname": "/docs/guides"},
+    {"title": "What are Design Tokens?", "pathname": "/docs/guides/design-tokens"},
+    {"title": "Best Practices", "pathname": "/docs/guides/best-practices"},
+    {"title": "Modes", "pathname": "/docs/guides/modes"},
+    {"title": "Reference", "pathname": "/docs/reference"},
+    {"title": "CLI", "pathname": "/docs/reference/cli"},
+    {"title": "Config API", "pathname": "/docs/reference/config"},
+    {"title": "About", "pathname": "/docs/reference/about"}
   ]
 }
diff --git a/docs/src/pages/docs/integrations/tailwind.md b/docs/src/pages/docs/integrations/tailwind.md
@@ -0,0 +1,71 @@
+---
+title: Tailwind
+layout: ../../../layouts/docs.astro
+---
+
+# Tailwind
+
+Cobalt integrates fully with TailwindCSS. To start, install the Tailwind plugin and CLI:
+
+```bash
+npm install -D @cobalut-ui/plugin-tailwind @cobalt-ui/cli
+```
+
+Then set up your `tokens.config.mjs` file, adding thie Tailwind plugin with your token settings inside `tailwind`:
+
+```js
+// tokens.config.mjs
+import pluginTailwind from '@cobalt-ui/plugin-tailwind';
+
+/** @type import('@cobalt-ui/core').Config */
+export default {
+  plugins: [
+    pluginTailwind({
+      /** (optional) the path to the Tailwind preset */
+      output?: './tailwind-tokens.js',
+      /** (optional) module format to use (to match your Tailwind config) */
+      outputFormat?: 'esm' | 'cjs',
+        /** @see https://tailwindcss.com/docs/configuration#theme */
+      tailwind: {
+        theme: {
+          colors: {
+            blue: {
+              100: 'color.blue.100', // map token IDs to Tailwind values
+              200: 'color.blue.200',
+              // …
+            },
+          },
+          fontFamily: {
+            sans: 'typography.family.base',
+            // …
+          },
+          spacing: {
+            1: 'token.size.s.space',
+            2: 'token.size.m.space',
+            // …
+          },
+          borderRadius: {
+            m: 'token.size.m.borderRadius',
+            // …
+          },
+        },
+      },
+    }),
+  ],
+};
+```
+
+Then, when you run `co build` in your project, it will generate a `./tokens/tailwind-tokens.js` file. Now add it to your Tailwind config under `presets` ([docs](https://tailwindcss.com/docs/configuration#presets)):
+
+```diff
+  /** @type {import('tailwindcss').Config} */
+  export default {
++   presets: ['./tokens/tailwind-tokens.js'],
+  };
+```
+
+_Note: if using CommonJS, use the `outputFormat: 'cjs'` plugin option._
+
+And you’re up and running! You’ll now have all your design tokens available in Tailwind.
+
+_✨ **Tip**: be sure to rerun `co build` to rebuild your Tailwind preset, or run `co build --watch` to rebuild your tokens every time they change!_
diff --git a/examples/github/package.json b/examples/github/package.json
@@ -4,8 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build:tokens": "co build",
-    "update": "node scripts/update"
+    "build:tokens": "co build"
   },
   "devDependencies": {
     "@cobalt-ui/cli": "workspace:*",

diff --git a/examples/github/scripts/update.js b/examples/github/scripts/update.js