diff --git a/entry_types/scrolled/app/helpers/pageflow_scrolled/packs_helper.rb b/entry_types/scrolled/app/helpers/pageflow_scrolled/packs_helper.rb index 6ed92de3a3..be0cdc6ebe 100644 --- a/entry_types/scrolled/app/helpers/pageflow_scrolled/packs_helper.rb +++ b/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), diff --git a/entry_types/scrolled/package/config/webpack.js b/entry_types/scrolled/package/config/webpack.js index dce8f1e6b1..644afcab7b 100644 --- a/entry_types/scrolled/package/config/webpack.js +++ b/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'] } } }; diff --git a/entry_types/scrolled/spec/helpers/pageflow_scrolled/packs_helper_spec.rb b/entry_types/scrolled/spec/helpers/pageflow_scrolled/packs_helper_spec.rb index 956b59a2e0..0f52cfb723 100644 --- a/entry_types/scrolled/spec/helpers/pageflow_scrolled/packs_helper_spec.rb +++ b/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') diff --git a/rollup.config.js b/rollup.config.js index 50f53fda3a..8ffc0ef5f7 100644 --- a/rollup.config.js +++ b/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 }, {