├── .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 | [](https://bundlephobia.com/package/tailwindcss-js-context)
6 | [](https://github.com/brandonmcconnell/tailwindcss-js-context/blob/main/LICENSE)
7 | [](https://www.npmjs.com/package/tailwindcss-js-context)
8 | [](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 |
--------------------------------------------------------------------------------