Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Unified Diff: README.md

Issue 29712640: Issue 6309 - Start using SASS in adblockplusui (Closed)
Patch Set: Created March 1, 2018, 2:34 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « .hgignore ('k') | css/desktop-options.scss » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: README.md
===================================================================
--- a/README.md
+++ b/README.md
@@ -78,49 +78,61 @@
You can try as example via [npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b)
which should be provided automatically when you install `npm`.
```sh
npx stylelint --fix skin/real-file-name.css
```
-Bundling
---------
+Bundling JS
+-----------
As it is for the `desktop-options.js` case, bundling is done via `package.json`
script entries.
-A dedicated script entry, such `bundle:desktop-options`,
+A dedicated script entry, such `bundle:desktop-options.js`,
should perform the following operations:
* ensure source code passes linting
* ensure the bundle won't affect future linting operations
* ensure `browserify` uses `--node` and `--no-bundle-external` flags
* point at the entry point, and output in the top level folder
-Accordingly, this is what happens with the `bundle:desktop-options`:
+Accordingly, this is what happens with the `bundle:desktop-options.js`:
```sh
# the && operator ensure each step is executed only
# if the previous one didn't produce an error
eslint ./js/**/*.js &&
# browserify doesn't offer a way to prefix with text
# the file is hence created with eslint disabled and a warning
echo '/* eslint-disable */// BUNDLED FILE' > ./desktop-options.js &&
# browserify take an entry point and bundle all its required files
# outputting the result into ./desktop-options.js
browserify --node --no-bundle-external js/desktop-options.js >> ./desktop-options.js
```
For a new bundle, i.e. `mobile-options.js`, simply use the same procedure
-but swap the `desktop-options` file/script name with `mobile-options`.
+but swap the `desktop-options.js` file/script name with `mobile-options.js`.
The main `bundle` script should include each sub-bundle operation.
+Bundling CSS
+------------
+
+As it is for the `desktop-options.css` case, bundling is done via `package.json`
+script entries.
+
+A dedicated script entry, such `bundle:desktop-options.css`,
+should point at the entry scss point, and output in the _skin_ folder;
+
+In case there are dependencies, please ensure these are
+imported via `@import "dep.scss"` and not via `url(...)` syntax.
+
Watching
--------
While developing, it is convenient to bundle automatically
each time a source file is changed.
As a team, we agreed on restructuring JS code inside the js folder,
so that is watched, and each bundled created, every time there is a changes.
« no previous file with comments | « .hgignore ('k') | css/desktop-options.scss » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld