Opened on 02/27/2018 at 09:57:59 AM
Closed on 03/07/2018 at 01:58:32 PM
Last modified on 03/07/2018 at 01:59:05 PM
#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): | |||
Description
Background
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.
Attachments (0)
Change History (4)
Note: See
TracTickets for help on using
tickets.
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.