Opened 2 years ago

Closed 2 years ago

Last modified 2 years ago

#6426 closed change (rejected)

Start using CSS modularization tool in adblockplusui

Reported by: agiammarchi Assignee: agiammarchi
Priority: Unknown Milestone:
Module: User-Interface Keywords:
Cc: greiner, saroyanm Blocked By:
Blocking: #6117 Platform: Unknown / Cross platform
Ready: no Confidential: no
Tester: Unknown Verified working: no
Review URL(s):



As follow up for #6310, in order to organize CSS files better and make code modularized we need to integrate browserify-css to be able to require CSS per module, and use CSS @import statements within CSS files.

What to change

Add browserify-css tool to adblockplusui.

Change History (4)

comment:1 Changed 2 years ago by agiammarchi

To better explain what is the goal of this ticket, I'd like to follow same conventions we followed for #6310 where the final result is exactly the same so we don't need to change anything else in our toolchain/deployment infrastructure.

As example, moving desktop-options.css file into ./css folder, and writing require("../css/desktop-options.css"); in js/desktop-options.js will create automatically the skin/desktop-options.css file.

However, browserify-css gives us the opportunity to use @import url("submodule.css"); so that we can start splitting the monolith and/or start importing modules per each page/section we need.

In this way we'll have a basic modular convention that requires one single JS file as entry point and can produce many different sections/pages as outcome reusing modular files.

If in the future we'd like to add SASS or any preprocessor the final result shouldn't change: .scss files will be transformed into .css files, with or without external imports, and browserify-css would take care of creating the final output as both JS and CSS.

Last edited 2 years ago by agiammarchi (previous) (diff)

comment:2 Changed 2 years ago by agiammarchi

  • Review URL(s) modified (diff)

comment:3 Changed 2 years ago by agiammarchi

  • Resolution set to rejected
  • Status changed from new to closed

comment:4 Changed 2 years ago by agiammarchi

This ticket has been rejected in favor of #6309

Note: See TracTickets for help on using tickets.