├── .eslintrc.json ├── .gitignore ├── .prettierignore ├── .prettierrc ├── LICENSE ├── README.md ├── dist ├── index.cjs ├── index.cjs.map ├── index.modern.js ├── index.modern.js.map ├── index.module.js ├── index.module.js.map ├── index.umd.js ├── index.umd.js.map └── types │ └── index.d.ts ├── index.ts ├── package-lock.json ├── package.json └── tsconfig.json /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true, 5 | "node": true 6 | }, 7 | "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"], 8 | "overrides": [], 9 | "parser": "@typescript-eslint/parser", 10 | "parserOptions": { 11 | "ecmaVersion": "latest", 12 | "sourceType": "module" 13 | }, 14 | "plugins": ["@typescript-eslint", "prettier"], 15 | "rules": { 16 | "prettier/prettier": 1, 17 | "@typescript-eslint/no-explicit-any": "off" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | README.md 2 | dist 3 | tsconfig.json -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "arrowParens": "always", 5 | "bracketSameLine": false, 6 | "printWidth": 120, 7 | "tabWidth": 2, 8 | "semi": true 9 | } 10 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Brandon McConnell 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

JS Context for Tailwind CSS

2 | 3 |
4 | 5 | [![minified size](https://img.shields.io/bundlephobia/min/tailwindcss-js-context)](https://bundlephobia.com/package/tailwindcss-js-context) 6 | [![license](https://img.shields.io/github/license/brandonmcconnell/tailwindcss-js-context?label=license)](https://github.com/brandonmcconnell/tailwindcss-js-context/blob/main/LICENSE) 7 | [![version](https://img.shields.io/npm/v/tailwindcss-js-context)](https://www.npmjs.com/package/tailwindcss-js-context) 8 | [![twitter](https://img.shields.io/twitter/follow/branmcconnell)](https://twitter.com/branmcconnell) 9 | 10 |
11 | 12 | `tailwindcss-js-context` is a plugin for Tailwind CSS that introduces the `js` directive, a utility that allows you to evaluate JavaScript expressions within your utility classes. This provides a flexible, dynamic approach to defining your styles. 13 | 14 | - [Installation](#installation) 15 | - [Usage](#usage) 16 | - [Basic Usage](#basic-usage) 17 | - [Using Context Values](#using-context-values) 18 | - [Built-In Context Values](#built-in-context-values) 19 | - [Other (mostly random \& unrealistic) examples](#other-mostly-random--unrealistic-examples) 20 | - [Why use `tailwindcss-js-context`](#why-use-tailwindcss-js-context) 21 | - [New syntax explanation](#new-syntax-explanation) 22 | 23 | > [!WARNING] 24 | > **Syntax change:** The value between the brackets in the `js` directive must now be quoted, due to a breaking change introduced in Tailwind CSS v3.3.6. 25 | > ``` 26 | > ❌ js-[content-['1_+_1_=_#{1+1}']] 27 | > ✅ js-['content-['1_+_1_=_#{1+1}']'] 28 | > ^ ^ 29 | > ``` 30 | > See the [New syntax explanation](#new-syntax-explanation) section for more information. 31 | 32 | ## Installation 33 | 34 | You can install the plugin via npm: 35 | 36 | ```bash 37 | npm install tailwindcss-js-context 38 | ``` 39 | 40 | Then, include it in your `tailwind.config.js`: 41 | 42 | ```js 43 | module.exports = { 44 | plugins: [ 45 | require('tailwindcss-js-context'), 46 | ] 47 | } 48 | ``` 49 | 50 | or if using a custom context object: 51 | 52 | ```js 53 | module.exports = { 54 | plugins: [ 55 | require('tailwindcss-js-context')({ 56 | // ...any values, e.g. 57 | appName: 'My app', 58 | }), 59 | ] 60 | } 61 | ``` 62 | 63 | ## Usage 64 | 65 | The plugin provides a `js` directive, allowing you to use JavaScript expressions within your utility classes: 66 | 67 | ### Basic Usage 68 | 69 | For a simple use case, you can use JavaScript expressions directly in your utility classes with the `js` directive: 70 | 71 | ```html 72 |
73 | ``` 74 | 75 | This will output the following content: `1 + 1 = 2` 76 | 77 | ### Using Context Values 78 | 79 | You can also use values from your context object within your utility classes: 80 | 81 | ```html 82 |
83 | ``` 84 | 85 | This will output the following content: `The app name is My app` 86 | 87 | ### Built-In Context Values 88 | 89 | In addition to any custom values you pass in, the plugin also provides easy access to both the `theme` and `config` functions: 90 | 91 | ```html 92 |
93 | ``` 94 | 95 | This will output the following content: `fontSize.2xl === 1.5rem` 96 | 97 | Please note that all utilities are built at runtime, so in order for a one-off utility to be random or unique, the utility will need to be unique as well. One way to ensure this is the case—when needed—is to pass some sort of custom identifier to properly seed the utility. 98 | 99 | ### Other (mostly random & unrealistic) examples 100 | 101 | ```html 102 | 103 |
104 | 105 | 106 |
107 | 108 | 109 |
110 | 111 | 112 |
Random_colors_ftw!
113 | 114 | 115 |
Random sizes too 🤯
116 | ``` 117 | [View this example on Tailwind Play](https://play.tailwindcss.com/l4VSXZP2gd) 118 | 119 | ## Why use `tailwindcss-js-context` 120 | 121 | `tailwindcss-js-context` allows you to bring the power of JavaScript directly into your utility classes, enabling dynamic styles based on logic and state. This opens up endless possibilities for reactive design patterns. 122 | 123 | This plugin is… 124 | 125 | ✨ GREAT for providing dynamic styles based on application state or logic 👏🏼 126 | 127 | 😬 NOT recommended for complex JavaScript expressions or application logic due to performance concerns 👀 128 | 129 | ## New syntax explanation 130 | 131 | ```html 132 | 133 |
134 | 135 | 136 |
137 | ``` 138 | [View a similar example on Tailwind Play](https://play.tailwindcss.com/SSN6P4Vcme) 139 | 140 | The release of [Tailwind CSS v3.3.6](https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.3.6) (on Dec 4, 2023) introduced breaking changes that made the original syntax of JS for Tailwind CSS incompatible with newer versions of Tailwind CSS. 141 | 142 | See [tailwindlabs/tailwindcss#13473](https://github.com/tailwindlabs/tailwindcss/issues/13473) for the discussion that led to this new syntax. 143 | 144 | This change required a slight tweak to the syntax of the `js` directive. Instead of `js-[...]`, use `js-['...']` (with a quoted value between the brackets) to pass the grouped utilities together as a string. 145 | 146 | Versions of Tailwind CSS thereafter (v3.3.6+) are now incompatible with versions of the original unquoted syntax for this plugin (pre-v0.2.0). Update to `@latest` to ensure compatibility. This new version syntax is reverse-compatible with versions of Tailwind CSS prior to v3.3.6 as well. 147 | 148 | Passing the joined strings together as a string allows the Tailwind CSS parser (again, in Tailwind CSS v3.3.6+) to see the value as a valid CSS value and process it as expected. 149 | 150 | --- 151 | 152 | I hope you find `tailwindcss-js-context` a valuable addition to your projects. If you have any issues or suggestions, don't hesitate to open an issue or pull request. 153 | 154 | If you liked this, you might also like my other Tailwind CSS plugins: 155 | * [tailwindcss-multi](https://github.com/brandonmcconnell/tailwindcss-multi): Group utilities together by variant 156 | * [tailwindcss-signals](https://github.com/brandonmcconnell/tailwindcss-signals): Apply styles based on parent or ancestor state, a state-driven alterative to groups 157 | * [tailwindcss-members](https://github.com/brandonmcconnell/tailwindcss-members): Apply styles based on child or descendant state, the inverse of groups 158 | * [tailwindcss-mixins](https://github.com/brandonmcconnell/tailwindcss-mixins): Construct reusable & aliased sets of utilities inline 159 | * [tailwindcss-selector-patterns](https://github.com/brandonmcconnell/tailwindcss-selector-patterns): Dynamic CSS selector patterns 160 | * [tailwindcss-directional-shadows](https://github.com/brandonmcconnell/tailwindcss-directional-shadows): Supercharge your shadow utilities with added directional support (includes directional `shadow-border` utilities too ✨) 161 | * [tailwindcss-default-shades](https://github.com/brandonmcconnell/tailwindcss-default-shades): Default shades for simpler color utility classes 162 | * [tailwind-lerp-colors](https://github.com/brandonmcconnell/tailwind-lerp-colors): Expand your color horizons and take the fuss out of generating new—or expanding existing—color palettes -------------------------------------------------------------------------------- /dist/index.cjs: -------------------------------------------------------------------------------- 1 | function t(t,e,o){if(n())return Reflect.construct.apply(null,arguments);var u=[null];u.push.apply(u,e);var c=new(t.bind.apply(t,u));return o&&r(c,o.prototype),c}function n(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(n=function(){return!!t})()}function e(){return e=Object.assign?Object.assign.bind():function(t){for(var n=1;n({}))){const e=function(e){return{__options:e,handler:t(e),config:n(e)}};return e.__isOptionsFunction=!0,e.__pluginFunction=t,e.__configFunction=n,e};const r=e}),c=o(function(t,n){function e(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(n,"__esModule",{value:!0}),Object.defineProperty(n,"default",{enumerable:!0,get:function(){return r}});const r=/*#__PURE__*/e(u).default}),i=(c.__esModule?c:{default:c}).default.withOptions(function(n){return void 0===n&&(n={}),function(r){var o,u=r.matchUtilities,c=e({theme:r.theme,config:r.config},null!=(o=n)?o:{});u({js:function(n){var e,r=function(t){return t.replace(/_/g,"\\_").replace(/ /g,"_")};return(e={})["@apply "+r(n.slice(1,-1)).split(/(#{.*?})/g).map(function(t,n){return n%2==1?t.slice(2,-1):t}).map(function(n,e){if(e%2==0)return n;var o,u=Object.keys(c),i=Object.values(c),l=t(Function,u.concat(["return "+(o=n,o.replace(/(?({})) {\n const optionsFunction = function(options) {\n return {\n __options: options,\n handler: pluginFunction(options),\n config: configFunction(options)\n };\n };\n optionsFunction.__isOptionsFunction = true;\n // Expose plugin dependencies so that `object-hash` returns a different\n // value if anything here changes, to ensure a rebuild is triggered.\n optionsFunction.__pluginFunction = pluginFunction;\n optionsFunction.__configFunction = configFunction;\n return optionsFunction;\n};\nconst _default = createPlugin;\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nObject.defineProperty(exports, \"default\", {\n enumerable: true,\n get: function() {\n return _default;\n }\n});\nconst _createPlugin = /*#__PURE__*/ _interop_require_default(require(\"../util/createPlugin\"));\nfunction _interop_require_default(obj) {\n return obj && obj.__esModule ? obj : {\n default: obj\n };\n}\nconst _default = _createPlugin.default;\n","import plugin from 'tailwindcss/plugin.js';\n\ntype Options = Record;\n\nexport default plugin.withOptions(function (options: Options = {}) {\n return function ({ matchUtilities, theme, config }) {\n const context = {\n theme,\n config,\n ...(options ?? {}),\n };\n matchUtilities({\n js: (value) => {\n const escape = (str: string) => {\n return str.replace(/_/g, '\\\\_').replace(/ /g, '_');\n };\n\n const unescape = (str: string) => {\n return str.replace(/(? {\n return str.split(/(#{.*?})/g).map((el, i) => (i % 2 === 1 ? el.slice(2, -1) : el));\n };\n\n const parts = parseString(escape(value.slice(1, -1)));\n\n const utility = parts\n .map((part, i) => {\n if (i % 2 === 0) {\n return part;\n } else {\n const args = Object.keys(context);\n const values = Object.values(context);\n const func = new Function(...args, `return ${unescape(part)};`);\n return escape(`${func(...values)}`);\n }\n })\n .join('');\n\n return {\n [`@apply ${utility}`]: {},\n };\n },\n });\n };\n});\n","let createPlugin = require('./lib/public/create-plugin')\nmodule.exports = (createPlugin.__esModule ? createPlugin : { default: createPlugin }).default\n"],"names":["createPlugin","plugin","config","handler","Object","defineProperty","exports","value","enumerable","get","_default","withOptions","pluginFunction","configFunction","optionsFunction","options","__options","__isOptionsFunction","__pluginFunction","__configFunction","_interop_require_default","obj","__esModule","default","require$$0","index","_ref","_options","matchUtilities","context","_extends","theme","js","_ref2","escape","str","replace","slice","split","map","el","i","part","args","keys","values","func","_construct","Function","concat","apply","join"],"mappings":"ouBAUA,SAASA,EAAaC,EAAQC,GAC1B,MAAO,CACHC,QAASF,EACTC,SAER,CAdAE,OAAOC,eAAwBC,EAAA,aAAc,CACzCC,OAAO,IAEXH,OAAOC,eAAeC,EAAS,UAAW,CACtCE,YAAY,EACZC,IAAK,WACD,OAAOC,CACV,IAQLV,EAAaW,YAAc,SAASC,EAAgBC,EAAiB,MAAA,CAAO,KACxE,MAAMC,EAAkB,SAASC,GAC7B,MAAO,CACHC,UAAWD,EACXZ,QAASS,EAAeG,GACxBb,OAAQW,EAAeE,GAEnC,EAMI,OALAD,EAAgBG,qBAAsB,EAGtCH,EAAgBI,iBAAmBN,EACnCE,EAAgBK,iBAAmBN,EAC5BC,CACX,EACA,MAAMJ,EAAWV,sBCpBjB,SAASoB,EAAyBC,GAC9B,OAAOA,GAAOA,EAAIC,WAAaD,EAAM,CACjCE,QAASF,EAEjB,CAdAjB,OAAOC,eAAwBC,EAAA,aAAc,CACzCC,OAAO,IAEXH,OAAOC,eAAeC,EAAS,UAAW,CACtCE,YAAY,EACZC,IAAK,WACD,OAAOC,CACV,IAQL,MAAMA,eAN8BU,EAAyBI,GAM9BD,UCZ/BE,GCHkBzB,EAAasB,WAAatB,EAAe,CAAEuB,QAASvB,IAAgBuB,QDGhEZ,YAAY,SAAUI,GAC1C,YAD0CA,IAAAA,IAAAA,EAAmB,CAAA,GACtDW,SAAAA,GAA2CC,IAAAA,EAA/BC,EAAcF,EAAdE,eACXC,EAAOC,EACXC,CAAAA,MAFoCL,EAALK,MAG/B7B,OAH4CwB,EAANxB,eAGhCyB,EACFZ,GAAOY,EAAI,IAEjBC,EAAe,CACbI,GAAI,SAACzB,GAAS0B,IAAAA,EACNC,EAAS,SAACC,GACd,OAAOA,EAAIC,QAAQ,KAAM,OAAOA,QAAQ,KAAM,IAChD,EAyBA,OAAAH,EAAAA,cAf0BC,EAAO3B,EAAM8B,MAAM,GAAI,IAHpCC,MAAM,aAAaC,IAAI,SAACC,EAAIC,UAAOA,EAAI,GAAM,EAAID,EAAGH,MAAM,GAAI,GAAKG,CAAE,GAM/ED,IAAI,SAACG,EAAMD,GACV,GAAIA,EAAI,GAAM,EACZ,OAAOC,EAEP,IAfYP,EAeNQ,EAAOvC,OAAOwC,KAAKf,GACnBgB,EAASzC,OAAOyC,OAAOhB,GACvBiB,EAAIC,EAAOC,SAAYL,EAAIM,OAAA,CAAA,WAjBrBd,EAiB0CO,EAhBnDP,EAAIC,QAAQ,YAAa,KAAKA,QAAQ,OAAQ,KAgBU,QAC3D,OAAOF,EAAM,GAAIY,EAAII,WAAIL,EAAAA,GAE7B,GACCM,KAAK,KAGiB,CAAA,EAAElB,CAE7B,GAEJ,CACF"} -------------------------------------------------------------------------------- /dist/index.modern.js: -------------------------------------------------------------------------------- 1 | function e(){return e=Object.assign?Object.assign.bind():function(e){for(var n=1;n({}))){const t=function(t){return{__options:t,handler:e(t),config:n(t)}};return t.__isOptionsFunction=!0,t.__pluginFunction=e,t.__configFunction=n,t};const r=t}),r=n(function(e,n){function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0}),Object.defineProperty(n,"default",{enumerable:!0,get:function(){return o}});const o=/*#__PURE__*/r(t).default}),o=(r.__esModule?r:{default:r}).default.withOptions(function(n={}){return function({matchUtilities:t,theme:r,config:o}){const u=e({theme:r,config:o},null!=n?n:{});t({js:e=>{const n=e=>e.replace(/_/g,"\\_").replace(/ /g,"_"),t=n(e.slice(1,-1)).split(/(#{.*?})/g).map((e,n)=>n%2==1?e.slice(2,-1):e).map((e,t)=>{if(t%2==0)return e;{const t=Object.keys(u),o=Object.values(u),i=new Function(...t,`return ${r=e,r.replace(/(?({})) {\n const optionsFunction = function(options) {\n return {\n __options: options,\n handler: pluginFunction(options),\n config: configFunction(options)\n };\n };\n optionsFunction.__isOptionsFunction = true;\n // Expose plugin dependencies so that `object-hash` returns a different\n // value if anything here changes, to ensure a rebuild is triggered.\n optionsFunction.__pluginFunction = pluginFunction;\n optionsFunction.__configFunction = configFunction;\n return optionsFunction;\n};\nconst _default = createPlugin;\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nObject.defineProperty(exports, \"default\", {\n enumerable: true,\n get: function() {\n return _default;\n }\n});\nconst _createPlugin = /*#__PURE__*/ _interop_require_default(require(\"../util/createPlugin\"));\nfunction _interop_require_default(obj) {\n return obj && obj.__esModule ? obj : {\n default: obj\n };\n}\nconst _default = _createPlugin.default;\n","import plugin from 'tailwindcss/plugin.js';\n\ntype Options = Record;\n\nexport default plugin.withOptions(function (options: Options = {}) {\n return function ({ matchUtilities, theme, config }) {\n const context = {\n theme,\n config,\n ...(options ?? {}),\n };\n matchUtilities({\n js: (value) => {\n const escape = (str: string) => {\n return str.replace(/_/g, '\\\\_').replace(/ /g, '_');\n };\n\n const unescape = (str: string) => {\n return str.replace(/(? {\n return str.split(/(#{.*?})/g).map((el, i) => (i % 2 === 1 ? el.slice(2, -1) : el));\n };\n\n const parts = parseString(escape(value.slice(1, -1)));\n\n const utility = parts\n .map((part, i) => {\n if (i % 2 === 0) {\n return part;\n } else {\n const args = Object.keys(context);\n const values = Object.values(context);\n const func = new Function(...args, `return ${unescape(part)};`);\n return escape(`${func(...values)}`);\n }\n })\n .join('');\n\n return {\n [`@apply ${utility}`]: {},\n };\n },\n });\n };\n});\n","let createPlugin = require('./lib/public/create-plugin')\nmodule.exports = (createPlugin.__esModule ? createPlugin : { default: createPlugin }).default\n"],"names":["createPlugin","plugin","config","handler","Object","defineProperty","exports","value","enumerable","get","_default","withOptions","pluginFunction","configFunction","optionsFunction","options","__options","__isOptionsFunction","__pluginFunction","__configFunction","_interop_require_default","obj","__esModule","default","require$$0","index","matchUtilities","theme","context","_extends","js","escape","str","replace","utility","slice","split","map","el","i","part","args","keys","values","func","Function","join"],"mappings":"2TAUA,SAASA,EAAaC,EAAQC,GAC1B,MAAO,CACHC,QAASF,EACTC,SAER,CAdAE,OAAOC,eAAwBC,EAAA,aAAc,CACzCC,OAAO,IAEXH,OAAOC,eAAeC,EAAS,UAAW,CACtCE,YAAY,EACZC,IAAK,WACD,OAAOC,CACV,IAQLV,EAAaW,YAAc,SAASC,EAAgBC,EAAiB,MAAA,CAAO,KACxE,MAAMC,EAAkB,SAASC,GAC7B,MAAO,CACHC,UAAWD,EACXZ,QAASS,EAAeG,GACxBb,OAAQW,EAAeE,GAEnC,EAMI,OALAD,EAAgBG,qBAAsB,EAGtCH,EAAgBI,iBAAmBN,EACnCE,EAAgBK,iBAAmBN,EAC5BC,CACX,EACA,MAAMJ,EAAWV,sBCpBjB,SAASoB,EAAyBC,GAC9B,OAAOA,GAAOA,EAAIC,WAAaD,EAAM,CACjCE,QAASF,EAEjB,CAdAjB,OAAOC,eAAwBC,EAAA,aAAc,CACzCC,OAAO,IAEXH,OAAOC,eAAeC,EAAS,UAAW,CACtCE,YAAY,EACZC,IAAK,WACD,OAAOC,CACV,IAQL,MAAMA,eAN8BU,EAAyBI,GAM9BD,UCZ/BE,GCHkBzB,EAAasB,WAAatB,EAAe,CAAEuB,QAASvB,IAAgBuB,QDGhEZ,YAAY,SAAUI,EAAmB,CAAA,GAC7D,OAAiB,UAAAW,eAAEA,EAAcC,MAAEA,EAAKzB,OAAEA,IACxC,MAAM0B,EAAOC,EACXF,CAAAA,QACAzB,UACIa,MAAAA,EAAAA,EAAW,CAAA,GAEjBW,EAAe,CACbI,GAAKvB,IACH,MAAMwB,EAAUC,GACPA,EAAIC,QAAQ,KAAM,OAAOA,QAAQ,KAAM,KAa1CC,EAFoBH,EAAOxB,EAAM4B,MAAM,GAAI,IAHpCC,MAAM,aAAaC,IAAI,CAACC,EAAIC,IAAOA,EAAI,GAAM,EAAID,EAAGH,MAAM,GAAI,GAAKG,GAM7ED,IAAI,CAACG,EAAMD,KACV,GAAIA,EAAI,GAAM,EACZ,OAAOC,EACF,CACL,MAAMC,EAAOrC,OAAOsC,KAAKd,GACnBe,EAASvC,OAAOuC,OAAOf,GACvBgB,EAAO,IAAIC,YAAYJ,EAAM,UAjBvBT,EAiB0CQ,EAhBnDR,EAAIC,QAAQ,YAAa,KAAKA,QAAQ,OAAQ,SAiBjD,OAAOF,EAAO,GAAGa,KAAQD,KAC1B,CAnBaX,KAmBb,GAEFc,KAAK,IAER,MAAO,CACL,CAAW,UAAAZ,KAAY,MAI/B,CACF"} -------------------------------------------------------------------------------- /dist/index.module.js: -------------------------------------------------------------------------------- 1 | function t(t,e,o){if(n())return Reflect.construct.apply(null,arguments);var u=[null];u.push.apply(u,e);var c=new(t.bind.apply(t,u));return o&&r(c,o.prototype),c}function n(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(n=function(){return!!t})()}function e(){return e=Object.assign?Object.assign.bind():function(t){for(var n=1;n({}))){const e=function(e){return{__options:e,handler:t(e),config:n(e)}};return e.__isOptionsFunction=!0,e.__pluginFunction=t,e.__configFunction=n,e};const r=e}),c=o(function(t,n){function e(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(n,"__esModule",{value:!0}),Object.defineProperty(n,"default",{enumerable:!0,get:function(){return r}});const r=/*#__PURE__*/e(u).default}),i=(c.__esModule?c:{default:c}).default.withOptions(function(n){return void 0===n&&(n={}),function(r){var o,u=r.matchUtilities,c=e({theme:r.theme,config:r.config},null!=(o=n)?o:{});u({js:function(n){var e,r=function(t){return t.replace(/_/g,"\\_").replace(/ /g,"_")};return(e={})["@apply "+r(n.slice(1,-1)).split(/(#{.*?})/g).map(function(t,n){return n%2==1?t.slice(2,-1):t}).map(function(n,e){if(e%2==0)return n;var o,u=Object.keys(c),i=Object.values(c),a=t(Function,u.concat(["return "+(o=n,o.replace(/(?({})) {\n const optionsFunction = function(options) {\n return {\n __options: options,\n handler: pluginFunction(options),\n config: configFunction(options)\n };\n };\n optionsFunction.__isOptionsFunction = true;\n // Expose plugin dependencies so that `object-hash` returns a different\n // value if anything here changes, to ensure a rebuild is triggered.\n optionsFunction.__pluginFunction = pluginFunction;\n optionsFunction.__configFunction = configFunction;\n return optionsFunction;\n};\nconst _default = createPlugin;\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nObject.defineProperty(exports, \"default\", {\n enumerable: true,\n get: function() {\n return _default;\n }\n});\nconst _createPlugin = /*#__PURE__*/ _interop_require_default(require(\"../util/createPlugin\"));\nfunction _interop_require_default(obj) {\n return obj && obj.__esModule ? obj : {\n default: obj\n };\n}\nconst _default = _createPlugin.default;\n","import plugin from 'tailwindcss/plugin.js';\n\ntype Options = Record;\n\nexport default plugin.withOptions(function (options: Options = {}) {\n return function ({ matchUtilities, theme, config }) {\n const context = {\n theme,\n config,\n ...(options ?? {}),\n };\n matchUtilities({\n js: (value) => {\n const escape = (str: string) => {\n return str.replace(/_/g, '\\\\_').replace(/ /g, '_');\n };\n\n const unescape = (str: string) => {\n return str.replace(/(? {\n return str.split(/(#{.*?})/g).map((el, i) => (i % 2 === 1 ? el.slice(2, -1) : el));\n };\n\n const parts = parseString(escape(value.slice(1, -1)));\n\n const utility = parts\n .map((part, i) => {\n if (i % 2 === 0) {\n return part;\n } else {\n const args = Object.keys(context);\n const values = Object.values(context);\n const func = new Function(...args, `return ${unescape(part)};`);\n return escape(`${func(...values)}`);\n }\n })\n .join('');\n\n return {\n [`@apply ${utility}`]: {},\n };\n },\n });\n };\n});\n","let createPlugin = require('./lib/public/create-plugin')\nmodule.exports = (createPlugin.__esModule ? createPlugin : { default: createPlugin }).default\n"],"names":["createPlugin","plugin","config","handler","Object","defineProperty","exports","value","enumerable","get","_default","withOptions","pluginFunction","configFunction","optionsFunction","options","__options","__isOptionsFunction","__pluginFunction","__configFunction","_interop_require_default","obj","__esModule","default","require$$0","index","_ref","_options","matchUtilities","context","_extends","theme","js","_ref2","escape","str","replace","slice","split","map","el","i","part","args","keys","values","func","_construct","Function","concat","apply","join"],"mappings":"ouBAUA,SAASA,EAAaC,EAAQC,GAC1B,MAAO,CACHC,QAASF,EACTC,SAER,CAdAE,OAAOC,eAAwBC,EAAA,aAAc,CACzCC,OAAO,IAEXH,OAAOC,eAAeC,EAAS,UAAW,CACtCE,YAAY,EACZC,IAAK,WACD,OAAOC,CACV,IAQLV,EAAaW,YAAc,SAASC,EAAgBC,EAAiB,MAAA,CAAO,KACxE,MAAMC,EAAkB,SAASC,GAC7B,MAAO,CACHC,UAAWD,EACXZ,QAASS,EAAeG,GACxBb,OAAQW,EAAeE,GAEnC,EAMI,OALAD,EAAgBG,qBAAsB,EAGtCH,EAAgBI,iBAAmBN,EACnCE,EAAgBK,iBAAmBN,EAC5BC,CACX,EACA,MAAMJ,EAAWV,sBCpBjB,SAASoB,EAAyBC,GAC9B,OAAOA,GAAOA,EAAIC,WAAaD,EAAM,CACjCE,QAASF,EAEjB,CAdAjB,OAAOC,eAAwBC,EAAA,aAAc,CACzCC,OAAO,IAEXH,OAAOC,eAAeC,EAAS,UAAW,CACtCE,YAAY,EACZC,IAAK,WACD,OAAOC,CACV,IAQL,MAAMA,eAN8BU,EAAyBI,GAM9BD,UCZ/BE,GCHkBzB,EAAasB,WAAatB,EAAe,CAAEuB,QAASvB,IAAgBuB,QDGhEZ,YAAY,SAAUI,GAC1C,YAD0CA,IAAAA,IAAAA,EAAmB,CAAA,GACtDW,SAAAA,GAA2CC,IAAAA,EAA/BC,EAAcF,EAAdE,eACXC,EAAOC,EACXC,CAAAA,MAFoCL,EAALK,MAG/B7B,OAH4CwB,EAANxB,eAGhCyB,EACFZ,GAAOY,EAAI,IAEjBC,EAAe,CACbI,GAAI,SAACzB,GAAS0B,IAAAA,EACNC,EAAS,SAACC,GACd,OAAOA,EAAIC,QAAQ,KAAM,OAAOA,QAAQ,KAAM,IAChD,EAyBA,OAAAH,EAAAA,cAf0BC,EAAO3B,EAAM8B,MAAM,GAAI,IAHpCC,MAAM,aAAaC,IAAI,SAACC,EAAIC,UAAOA,EAAI,GAAM,EAAID,EAAGH,MAAM,GAAI,GAAKG,CAAE,GAM/ED,IAAI,SAACG,EAAMD,GACV,GAAIA,EAAI,GAAM,EACZ,OAAOC,EAEP,IAfYP,EAeNQ,EAAOvC,OAAOwC,KAAKf,GACnBgB,EAASzC,OAAOyC,OAAOhB,GACvBiB,EAAIC,EAAOC,SAAYL,EAAIM,OAAA,CAAA,WAjBrBd,EAiB0CO,EAhBnDP,EAAIC,QAAQ,YAAa,KAAKA,QAAQ,OAAQ,KAgBU,QAC3D,OAAOF,EAAM,GAAIY,EAAII,WAAIL,EAAAA,GAE7B,GACCM,KAAK,KAGiB,CAAA,EAAElB,CAE7B,GAEJ,CACF"} -------------------------------------------------------------------------------- /dist/index.umd.js: -------------------------------------------------------------------------------- 1 | !function(n,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(n||self).tailwindcssJsContext=e()}(this,function(){function n(n,t,r){if(e())return Reflect.construct.apply(null,arguments);var u=[null];u.push.apply(u,t);var i=new(n.bind.apply(n,u));return r&&o(i,r.prototype),i}function e(){try{var n=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(n){}return(e=function(){return!!n})()}function t(){return t=Object.assign?Object.assign.bind():function(n){for(var e=1;e({}))){const t=function(t){return{__options:t,handler:n(t),config:e(t)}};return t.__isOptionsFunction=!0,t.__pluginFunction=n,t.__configFunction=e,t};const o=t}),i=r(function(n,e){function t(n){return n&&n.__esModule?n:{default:n}}Object.defineProperty(e,"__esModule",{value:!0}),Object.defineProperty(e,"default",{enumerable:!0,get:function(){return o}});const o=/*#__PURE__*/t(u).default});return(i.__esModule?i:{default:i}).default.withOptions(function(e){return void 0===e&&(e={}),function(o){var r,u=o.matchUtilities,i=t({theme:o.theme,config:o.config},null!=(r=e)?r:{});u({js:function(e){var t,o=function(n){return n.replace(/_/g,"\\_").replace(/ /g,"_")};return(t={})["@apply "+o(e.slice(1,-1)).split(/(#{.*?})/g).map(function(n,e){return e%2==1?n.slice(2,-1):n}).map(function(e,t){if(t%2==0)return e;var r,u=Object.keys(i),c=Object.values(i),f=n(Function,u.concat(["return "+(r=e,r.replace(/(?({})) {\n const optionsFunction = function(options) {\n return {\n __options: options,\n handler: pluginFunction(options),\n config: configFunction(options)\n };\n };\n optionsFunction.__isOptionsFunction = true;\n // Expose plugin dependencies so that `object-hash` returns a different\n // value if anything here changes, to ensure a rebuild is triggered.\n optionsFunction.__pluginFunction = pluginFunction;\n optionsFunction.__configFunction = configFunction;\n return optionsFunction;\n};\nconst _default = createPlugin;\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nObject.defineProperty(exports, \"default\", {\n enumerable: true,\n get: function() {\n return _default;\n }\n});\nconst _createPlugin = /*#__PURE__*/ _interop_require_default(require(\"../util/createPlugin\"));\nfunction _interop_require_default(obj) {\n return obj && obj.__esModule ? obj : {\n default: obj\n };\n}\nconst _default = _createPlugin.default;\n","let createPlugin = require('./lib/public/create-plugin')\nmodule.exports = (createPlugin.__esModule ? createPlugin : { default: createPlugin }).default\n","import plugin from 'tailwindcss/plugin.js';\n\ntype Options = Record;\n\nexport default plugin.withOptions(function (options: Options = {}) {\n return function ({ matchUtilities, theme, config }) {\n const context = {\n theme,\n config,\n ...(options ?? {}),\n };\n matchUtilities({\n js: (value) => {\n const escape = (str: string) => {\n return str.replace(/_/g, '\\\\_').replace(/ /g, '_');\n };\n\n const unescape = (str: string) => {\n return str.replace(/(? {\n return str.split(/(#{.*?})/g).map((el, i) => (i % 2 === 1 ? el.slice(2, -1) : el));\n };\n\n const parts = parseString(escape(value.slice(1, -1)));\n\n const utility = parts\n .map((part, i) => {\n if (i % 2 === 0) {\n return part;\n } else {\n const args = Object.keys(context);\n const values = Object.values(context);\n const func = new Function(...args, `return ${unescape(part)};`);\n return escape(`${func(...values)}`);\n }\n })\n .join('');\n\n return {\n [`@apply ${utility}`]: {},\n };\n },\n });\n };\n});\n"],"names":["createPlugin","plugin","config","handler","Object","defineProperty","exports","value","enumerable","get","_default","withOptions","pluginFunction","configFunction","optionsFunction","options","__options","__isOptionsFunction","__pluginFunction","__configFunction","_interop_require_default","obj","__esModule","default","require$$0","_ref","_options","matchUtilities","context","_extends","theme","js","_ref2","escape","str","replace","slice","split","map","el","i","part","args","keys","values","func","_construct","Function","concat","apply","join"],"mappings":"28BAUA,SAASA,EAAaC,EAAQC,GAC1B,MAAO,CACHC,QAASF,EACTC,SAER,CAdAE,OAAOC,eAAwBC,EAAA,aAAc,CACzCC,OAAO,IAEXH,OAAOC,eAAeC,EAAS,UAAW,CACtCE,YAAY,EACZC,IAAK,WACD,OAAOC,CACV,IAQLV,EAAaW,YAAc,SAASC,EAAgBC,EAAiB,MAAA,CAAO,KACxE,MAAMC,EAAkB,SAASC,GAC7B,MAAO,CACHC,UAAWD,EACXZ,QAASS,EAAeG,GACxBb,OAAQW,EAAeE,GAEnC,EAMI,OALAD,EAAgBG,qBAAsB,EAGtCH,EAAgBI,iBAAmBN,EACnCE,EAAgBK,iBAAmBN,EAC5BC,CACX,EACA,MAAMJ,EAAWV,sBCpBjB,SAASoB,EAAyBC,GAC9B,OAAOA,GAAOA,EAAIC,WAAaD,EAAM,CACjCE,QAASF,EAEjB,CAdAjB,OAAOC,eAAwBC,EAAA,aAAc,CACzCC,OAAO,IAEXH,OAAOC,eAAeC,EAAS,UAAW,CACtCE,YAAY,EACZC,IAAK,WACD,OAAOC,CACV,IAQL,MAAMA,eAN8BU,EAAyBI,GAM9BD,iBCfbvB,EAAasB,WAAatB,EAAe,CAAEuB,QAASvB,IAAgBuB,QCGhEZ,YAAY,SAAUI,GAC1C,YAD0CA,IAAAA,IAAAA,EAAmB,CAAA,GACtDU,SAAAA,GAA2CC,IAAAA,EAA/BC,EAAcF,EAAdE,eACXC,EAAOC,EACXC,CAAAA,MAFoCL,EAALK,MAG/B5B,OAH4CuB,EAANvB,eAGhCwB,EACFX,GAAOW,EAAI,IAEjBC,EAAe,CACbI,GAAI,SAACxB,GAASyB,IAAAA,EACNC,EAAS,SAACC,GACd,OAAOA,EAAIC,QAAQ,KAAM,OAAOA,QAAQ,KAAM,IAChD,EAyBA,OAAAH,EAAAA,cAf0BC,EAAO1B,EAAM6B,MAAM,GAAI,IAHpCC,MAAM,aAAaC,IAAI,SAACC,EAAIC,UAAOA,EAAI,GAAM,EAAID,EAAGH,MAAM,GAAI,GAAKG,CAAE,GAM/ED,IAAI,SAACG,EAAMD,GACV,GAAIA,EAAI,GAAM,EACZ,OAAOC,EAEP,IAfYP,EAeNQ,EAAOtC,OAAOuC,KAAKf,GACnBgB,EAASxC,OAAOwC,OAAOhB,GACvBiB,EAAIC,EAAOC,SAAYL,EAAIM,OAAA,CAAA,WAjBrBd,EAiB0CO,EAhBnDP,EAAIC,QAAQ,YAAa,KAAKA,QAAQ,OAAQ,KAgBU,QAC3D,OAAOF,EAAM,GAAIY,EAAII,WAAIL,EAAAA,GAE7B,GACCM,KAAK,KAGiB,CAAA,EAAElB,CAE7B,GAEJ,CACF"} -------------------------------------------------------------------------------- /dist/types/index.d.ts: -------------------------------------------------------------------------------- 1 | type Options = Record; 2 | declare const _default: { 3 | (options: Options): { 4 | handler: import("tailwindcss/types/config").PluginCreator; 5 | config?: Partial | undefined; 6 | }; 7 | __isOptionsFunction: true; 8 | }; 9 | export default _default; 10 | -------------------------------------------------------------------------------- /index.ts: -------------------------------------------------------------------------------- 1 | import plugin from 'tailwindcss/plugin.js'; 2 | 3 | type Options = Record; 4 | 5 | export default plugin.withOptions(function (options: Options = {}) { 6 | return function ({ matchUtilities, theme, config }) { 7 | const context = { 8 | theme, 9 | config, 10 | ...(options ?? {}), 11 | }; 12 | matchUtilities({ 13 | js: (value) => { 14 | const escape = (str: string) => { 15 | return str.replace(/_/g, '\\_').replace(/ /g, '_'); 16 | }; 17 | 18 | const unescape = (str: string) => { 19 | return str.replace(/(? { 23 | return str.split(/(#{.*?})/g).map((el, i) => (i % 2 === 1 ? el.slice(2, -1) : el)); 24 | }; 25 | 26 | const parts = parseString(escape(value.slice(1, -1))); 27 | 28 | const utility = parts 29 | .map((part, i) => { 30 | if (i % 2 === 0) { 31 | return part; 32 | } else { 33 | const args = Object.keys(context); 34 | const values = Object.values(context); 35 | const func = new Function(...args, `return ${unescape(part)};`); 36 | return escape(`${func(...values)}`); 37 | } 38 | }) 39 | .join(''); 40 | 41 | return { 42 | [`@apply ${utility}`]: {}, 43 | }; 44 | }, 45 | }); 46 | }; 47 | }); 48 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwindcss-js-context", 3 | "version": "0.1.20", 4 | "description": "JS script injection utility for Tailwind CSS", 5 | "type": "module", 6 | "source": "index.ts", 7 | "exports": { 8 | "types": "./dist/types/index.d.ts", 9 | "require": "./dist/index.cjs", 10 | "default": "./dist/index.modern.js" 11 | }, 12 | "types": "dist/types/index.d.ts", 13 | "main": "./dist/index.cjs", 14 | "module": "./dist/index.module.js", 15 | "unpkg": "./dist/index.umd.js", 16 | "scripts": { 17 | "test": "echo \"Error: no test specified\" && exit 1", 18 | "build": "microbundle", 19 | "dev": "microbundle watch" 20 | }, 21 | "publishConfig": { 22 | "access": "public" 23 | }, 24 | "repository": { 25 | "type": "git", 26 | "url": "git+https://github.com/brandonmcconnell/tailwindcss-js-context.git" 27 | }, 28 | "keywords": [ 29 | "css", 30 | "utility-classes", 31 | "script", 32 | "execution", 33 | "injection", 34 | "js", 35 | "javascript", 36 | "plugin", 37 | "plugins", 38 | "tailwind", 39 | "tailwindcss" 40 | ], 41 | "author": "Brandon McConnell", 42 | "license": "MIT", 43 | "bugs": { 44 | "url": "https://github.com/brandonmcconnell/tailwindcss-js-context/issues" 45 | }, 46 | "homepage": "https://github.com/brandonmcconnell/tailwindcss-js-context#readme", 47 | "dependencies": { 48 | "@types/node": "^20.4.1" 49 | }, 50 | "devDependencies": { 51 | "@types/tailwindcss": "^3.1.0", 52 | "@typescript-eslint/eslint-plugin": "^5.59.8", 53 | "@typescript-eslint/parser": "^5.59.8", 54 | "eslint": "^8.41.0", 55 | "eslint-config-prettier": "^8.8.0", 56 | "eslint-plugin-prettier": "^5.0.0-alpha.1", 57 | "microbundle": "^0.15.1", 58 | "npm-run-all": "^4.1.5", 59 | "tailwindcss": "^3.4.3", 60 | "typescript": "^5.1.6" 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "esModuleInterop": true, 4 | "skipLibCheck": true, 5 | "target": "es2022", 6 | "allowJs": true, 7 | "resolveJsonModule": true, 8 | "moduleDetection": "force", 9 | "isolatedModules": true, 10 | "strict": true, 11 | "noUncheckedIndexedAccess": true, 12 | "module": "NodeNext", 13 | "outDir": "dist", 14 | "sourceMap": true, 15 | "declaration": true, 16 | "lib": ["es2022"] 17 | } 18 | } 19 | --------------------------------------------------------------------------------