From 5240d5dd075cfafc370a59ccbff249cada3abca4 Mon Sep 17 00:00:00 2001 From: = Date: Tue, 22 Jun 2021 12:51:09 -0400 Subject: [PATCH 1/4] Adding options functionality for the Tailwind JIT CDN --- README.md | 27 ++++++++++++++++++++++++++- src/main.js | 22 ++++++++++++++++------ src/observer.js | 8 ++++---- 3 files changed, 46 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 05e5e27..1491787 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,31 @@ You can learn all about this package in our [in-depth blog post](https://beyondc We spend a lot of time working on our [free developer services](https://beyondco.de/services) or open source packages. You can support our work by [buying one of our paid products](https://beyondco.de/software). +## Development + +If you want to create your own build of TailwindCSS JIT CDN, you can fork this repo, clone it, and then run the following commands to get started: + +``` +yarn install +yarn run build +``` + +Then, link to your new `dist/tailwindcss-jit-cdn.umd.js` in your project in order to run your build. + +## Options + +You can define a set of `tailwindOptions` to override a few options for the JIT CDN. + +💡 If you have ideas for options you would like to see, let us know. Currently there is only one options available: + +``` +window.options = { + observerElement: document.getElementById('app') +}; +``` + +> In the example above, the TailwindCSS JIT CDN will only observe and modify elements inside of the `app` element. This might be helpful for page speed, user experience, or a few other scenarios. + ## Credits - [Marcel Pociot](https://github.com/mpociot) @@ -25,4 +50,4 @@ We spend a lot of time working on our [free developer services](https://beyondco ## License -The MIT License (MIT). Please see [License File](LICENSE.md) for more information. \ No newline at end of file +The MIT License (MIT). Please see [License File](LICENSE.md) for more information. diff --git a/src/main.js b/src/main.js index 9226612..44958d2 100644 --- a/src/main.js +++ b/src/main.js @@ -1,21 +1,31 @@ import observerScript from "./observer"; -(() => { +(() => { const config = { attributes: true, attributeFilter: ["class"], childList: true, - subtree: true, + subtree: true, }; - new MutationObserver(observerScript(false)).observe( - document.documentElement, + // Set the default options + let options = { + observerElement: document.documentElement + }; + + // If the user specified values for window.tailwindOptions, merge those options + if(typeof window.tailwindOptions !== 'undefined'){ + options = { ...options, ...window.tailwindOptions }; + } + + new MutationObserver(observerScript(options, false)).observe( + options.observerElement, config ); observerScript(); window.tailwindCSS = { - refresh: observerScript(true), + refresh: observerScript(options, true), } -})(); \ No newline at end of file +})(); diff --git a/src/observer.js b/src/observer.js index 0d43d08..0c1470b 100644 --- a/src/observer.js +++ b/src/observer.js @@ -8,9 +8,9 @@ const tailwindId = nanoid(); let lastProcessedHtml = ""; -export default (force = false) => { +export default (options, force = false) => { return async () => { - self[VIRTUAL_HTML_FILENAME] = document.documentElement.outerHTML; + self[VIRTUAL_HTML_FILENAME] = options.observerElement.outerHTML; if (self[VIRTUAL_HTML_FILENAME] === lastProcessedHtml && force === false) { return; @@ -25,7 +25,7 @@ export default (force = false) => { purge: [VIRTUAL_HTML_FILENAME], theme: {}, plugins: [ - require("@tailwindcss/forms"), + require("@tailwindcss/forms"), require("@tailwindcss/typography"), require("@tailwindcss/aspect-ratio"), require("@tailwindcss/line-clamp") @@ -61,4 +61,4 @@ export default (force = false) => { style.textContent = result.css; }; -}; \ No newline at end of file +}; From b3060780867e5ae057ed40557b958a434f354fdc Mon Sep 17 00:00:00 2001 From: = Date: Tue, 22 Jun 2021 12:54:03 -0400 Subject: [PATCH 2/4] updating the readme --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 1491787..82d1b23 100644 --- a/README.md +++ b/README.md @@ -31,9 +31,7 @@ Then, link to your new `dist/tailwindcss-jit-cdn.umd.js` in your project in orde ## Options -You can define a set of `tailwindOptions` to override a few options for the JIT CDN. - -💡 If you have ideas for options you would like to see, let us know. Currently there is only one options available: +A set of `tailwindOptions` to configure for the JIT CDN. Currently there is only one option available, you can use it as follows: ``` window.options = { @@ -43,6 +41,8 @@ window.options = { > In the example above, the TailwindCSS JIT CDN will only observe and modify elements inside of the `app` element. This might be helpful for page speed, user experience, or a few other scenarios. +💡 Have ideas for options you would like to see, let us know. + ## Credits - [Marcel Pociot](https://github.com/mpociot) From ae162375e23e53a14484a1b805121bd7acfc9dd6 Mon Sep 17 00:00:00 2001 From: = Date: Tue, 22 Jun 2021 12:57:03 -0400 Subject: [PATCH 3/4] updating the readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 82d1b23..be6c48d 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,7 @@ window.options = { }; ``` -> In the example above, the TailwindCSS JIT CDN will only observe and modify elements inside of the `app` element. This might be helpful for page speed, user experience, or a few other scenarios. +> By default the TailwindCSS JIT CDN will observe your entire page via `document.documentElement`, you can override this option via the `observerElement` property. In the options above the observer will only observe Tailwind classes inside of `app` element. This might be helpful for page speed, user experience, or a few other scenarios. 💡 Have ideas for options you would like to see, let us know. From 79711cd244e76d77de2022a1acff42d592de2495 Mon Sep 17 00:00:00 2001 From: = Date: Tue, 22 Jun 2021 12:57:50 -0400 Subject: [PATCH 4/4] updating the readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index be6c48d..f266034 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ Then, link to your new `dist/tailwindcss-jit-cdn.umd.js` in your project in orde A set of `tailwindOptions` to configure for the JIT CDN. Currently there is only one option available, you can use it as follows: ``` -window.options = { +window.tailwindOptions = { observerElement: document.getElementById('app') }; ```