Merge pull request #2389 from tf/inline-editing-css

Exclude inline editing CSS from public bundle

Author: tf

entry_types/scrolled/app/helpers/pageflow_scrolled/packs_helper.rb

@@ -10,11 +10,17 @@ def scrolled_frontend_javascript_packs_tag(entry, options)
 
     def scrolled_frontend_stylesheet_packs_tag(entry, options)
       stylesheet_pack_tag(
-        *scrolled_frontend_packs(entry, **options),
+        *scrolled_frontend_stylesheet_packs(entry, **options),
         media: 'all'
       )
     end
 
+    def scrolled_frontend_stylesheet_packs(entry, entry_mode:)
+      packs = scrolled_frontend_packs(entry, entry_mode: entry_mode)
+      packs += ['pageflow-scrolled-frontend-inlineEditing'] if entry_mode == :editor
+      packs
+    end
+
     def scrolled_editor_javascript_packs_tag(entry)
       javascript_pack_tag(
         *scrolled_editor_packs(entry),

entry_types/scrolled/package/config/webpack.js

@@ -78,6 +78,9 @@ module.exports = {
         'pageflow-scrolled/widgets/iconScrollIndicator',
         'pageflow-scrolled/widgets/iconScrollIndicator.css'
       ]
+    },
+    'pageflow-scrolled-frontend-inlineEditing': {
+      import: ['pageflow-scrolled/frontend/inlineEditing.css']
     }
   }
 };

entry_types/scrolled/spec/helpers/pageflow_scrolled/packs_helper_spec.rb

@@ -243,6 +243,33 @@ module PageflowScrolled
       end
     end
 
+    describe 'scrolled_frontend_stylesheet_packs' do
+      it 'includes core frontend pack' do
+        entry = create(:published_entry, type_name: 'scrolled')
+
+        result = helper.scrolled_frontend_stylesheet_packs(entry,
+                                                           entry_mode: :published)
+
+        expect(result).to include('pageflow-scrolled-frontend')
+      end
+
+      it 'includes inline editing stylesheet pack only in editor mode' do
+        entry = create(:published_entry, type_name: 'scrolled')
+
+        expect(
+          helper.scrolled_frontend_stylesheet_packs(entry, entry_mode: :editor)
+        ).to include('pageflow-scrolled-frontend-inlineEditing')
+
+        expect(
+          helper.scrolled_frontend_stylesheet_packs(entry, entry_mode: :preview)
+        ).not_to include('pageflow-scrolled-frontend-inlineEditing')
+
+        expect(
+          helper.scrolled_frontend_stylesheet_packs(entry, entry_mode: :published)
+        ).not_to include('pageflow-scrolled-frontend-inlineEditing')
+      end
+    end
+
     describe 'scrolled_editor_packs' do
       it 'includes editor pack' do
         entry = create(:published_entry, type_name: 'scrolled')

rollup.config.js

@@ -42,12 +42,21 @@ function external(id) {
   return !['.', '/', '$'].includes(id[0]);
 }
 
-const plugins = ({extractCss, moduleDirectories} = {}) => [
+const plugins = ({extractCss, splitCss, moduleDirectories} = {}) => [
   postcss({
     modules: true,
     extract: extractCss,
-    minimize: extractCss
+    minimize: extractCss,
+    ...(splitCss && {exclude: Object.keys(splitCss)})
   }),
+  ...Object.entries(splitCss || {}).map(([include, output]) =>
+    postcss({
+      modules: true,
+      extract: output,
+      minimize: true,
+      include: [include]
+    })
+  ),
   babel({
     exclude: 'node_modules/**',
     extensions: ['js', 'jsx', 'svg'],
@@ -264,7 +273,12 @@ const pageflowScrolled = [
       format: 'esm',
     },
     external,
-    plugins: plugins({extractCss: true}),
+    plugins: plugins({
+      extractCss: true,
+      splitCss: {
+        '**/inlineEditing/**': pageflowScrolledPackageRoot + '/frontend/inlineEditing.css'
+      }
+    }),
     ...ignoreJSXWarning
   },
   {