Problem/Motivation

The varbase_components module always loads root.css for the default Bootstrap framework,
which causes conflicts when using a custom Bootstrap theme. The custom Bootstrap styles are overridden by
the default root.css provided by the module.

Steps to Reproduce

  1. Install varbase_components.
  2. Copy all the components inside a new custom theme and add a replace key inside the *.components.yml file as per the documentation.
  3. Perform a full theme build and notice that the custom Bootstrap styles are still overridden by the default
    root.css provided by the module. This is caused by the following dependency in ckeditor5-styles:
    # Ckeditor 5 styles.
    ckeditor5-styles:
      dependencies:
        - core/components.varbase_components--root
        - core/components.varbase_components--alert
        - core/components.varbase_components--callout
        
  4. I've overridden this library with a custom theme library but without the
    - core/components.varbase_components--root, and then everything worked as expected.

Proposed Resolution

  • Remove the - core/components.varbase_components--root from the ckeditor5-styles library inside this module or load it on demand.
  • Add a new wrapper library ckeditor5-root for core/components.varbase_components--root only toLoad components root and styles for CKEditor5 styles.

Remaining tasks

  • ✅ File an issue about this project
  • ✅ Addition/Change/Update/Fix to this project
  • ✅ Testing to ensure no regression
  • ➖ Automated unit/functional testing coverage
  • ➖ Developer Documentation support on feature change/addition
  • ➖ User Guide Documentation support on feature change/addition
  • ➖ UX/UI designer responsibilities
  • ➖ Accessibility and Readability
  • ✅ Code review from 1 Varbase core team member
  • ✅ Full testing and approval
  • ✅ Credit contributors
  • ✅ Review with the product owner
  • ✅ Update Release Notes and Update Helper on new feature change/addition
  • ✅ Release varbase-10.0.5, varbase_components-2.0.10, varbase-10.1.0-alpha1, varbase_components-3.0.0-alpha2

Varbase update type

  • ✅ No Update
  • ➖ Optional Update
  • ➖ Forced Update
  • ➖ Forced Update if Unchanged

User interface changes

  • N/A

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

mohammad-fayoumi created an issue. See original summary.

rajab natshah’s picture

Title: Bootstrap root.css is loaded by default in varbase_components module, causing conflicts with custom Bootstrap themes » Prevent Bootstrap root.css conflicts with custom Bootstrap themes in CKEditor
Version: 2.0.x-dev » 3.0.x-dev
rajab natshah’s picture

Status: Active » Needs work
  • Removing the - core/components.varbase_components--root from the ckeditor5-styles library, will not load the root variables when editing in the back-end.
  • It is better to restrict the conditions with routes for the varbase_components/ckeditor5-styles library.
ahmad abbad’s picture

I encountered the same issue, and it seems the varbase_components_preprocess_field hook is no longer necessary.

ahmad abbad’s picture

Status: Needs work » Needs review

  • ahmad abbad committed 0c71770b on 2.0.x
    Issue #3507250 by ahmad abbad: Prevent Bootstrap root.css conflicts with...

  • rajab natshah committed 823fe85c on 3.0.x
    Issue #3507250: Load components root and styles for CKEditor5 styles
    

  • rajab natshah committed 52424b24 on 3.0.x
    Issue #3507250: Load components root and styles for CKEditor5 styles
    

  • rajab natshah committed c6e8e314 on 2.0.x
    Issue #3507250: Load components root and styles for CKEditor5 styles
    
rajab natshah’s picture

rajab natshah’s picture

Assigned: s.halawani » Unassigned
Status: Needs review » Fixed
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Title: Prevent Bootstrap root.css conflicts with custom Bootstrap themes in CKEditor » Fix to prevent Bootstrap root.css conflicts with custom Bootstrap themes in CKEditor
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes

✅ Released varbase-10.0.5

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.