feat: 🎸 allow for disabling of plugin styles

Elderjs · Jun 6, 2021 · 08bf530 · 08bf530
1 parent ea5ad76
commit 08bf530
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/packages/images/README.md b/packages/images/README.md
@@ -127,7 +127,8 @@ plugins: {
 
 ## FAQ:
 
-- Hpw to disable Placeholder: set `placeholder: false` in your config.
+- How to disable placeholder: set `placeholder: false` in your config.
+- How to disabled padding on the `.ejs` class. Set `cssString:false`. This will disable the plugin from generating any css which gives you full control and will help keep your site from being impacted by future css changes.
 
 ## Full Config:
 

diff --git a/packages/images/index.js b/packages/images/index.js
@@ -250,6 +250,9 @@ const plugin = {
       plugin.config.scales = defaultScales;
     }
 
+    // if false the plugin shouldn't add any of it's own styles.
+    plugin.addStyles = typeof plugin.cssString === 'string' && plugin.cssString.length > 0;
+
     plugin.imagesToProcess = []; // no images to process by default
     plugin.manifest = {};
 
@@ -443,7 +446,7 @@ const plugin = {
       priority: 50,
 
       run: async ({ cssStack, plugin }) => {
-        if (plugin.shouldAddCodeDependencies) {
+        if (plugin.shouldAddCodeDependencies && plugin.addStyles) {
           cssStack.push({
             source: 'elderPluginImages',
             string: plugin.config.cssString,

diff --git a/packages/images/utils/imageStore.js b/packages/images/utils/imageStore.js
@@ -39,9 +39,9 @@ const imageStore = (manifest, plugin) => {
 
         picture += `</picture>`;
 
-        let pictureWithWrap = `<div class="ejs" style="padding-bottom: ${
-          Math.round((file.height / file.width) * 10000) / 100
-        }%;">`;
+        let pictureWithWrap = `<div class="ejs" ${
+          plugin.addStyles ? `style="padding-bottom: ${Math.round((file.height / file.width) * 10000) / 100}%;"` : ''
+        }>`;
 
         if (plugin.config.placeholder) {
           pictureWithWrap += `<div class="placeholder" style="background-image: url('${