feature: added support for custom convertion options

.vscode/launch.json

@@ -0,0 +1,28 @@
+{
+ // Use IntelliSense to learn about possible attributes.
+ // Hover to view descriptions of existing attributes.
+ // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "type": "node",
+ "request": "launch",
+ "name": "Launch Program",
+ "skipFiles": [
+ "<node_internals>/**"
+ ],
+ "args": [
+ "-p",
+ "-s",
+ "app-ynet",
+ // "blazer",
+ // "ynetnews",
+ // "vesty",
+ // "pplus",
+ // "yplus"
+ ],
+ "cwd": "C:\\projects\\wcm_front",
+ "program": "C:\\projects\\wcm_front\\tools\\siteCssBuilder\\siteCssBuilder.js"
+ }
+ ]
+}

README.md

@@ -132,6 +132,53 @@ Default Options:
 - `landscape` (Boolean) Adds `@media (orientation: landscape)` with values converted via `landscapeWidth`.
 - `landscapeUnit` (String) Expected unit for `landscape` option
 - `landscapeWidth` (Number) Viewport width for landscape orientation.
+- `customConvertionOptions` (Array of Custom Convertion Objects):
+ - `viewportWidth` (Number) The width of the viewport.
+ - `viewportUnit` (String) Expected units.
+ - `matchSelectors` (Array of Regex) The selector we want to be converted
+ - `atRule` (Object) used to locate the media query:
+ - `name` (string) query type. for example 'media'.
+ - `params` (string) exact query params. for example 'only screen and (max-width: 1040px)'.
+
+#### customConvertionOptions
+
+Use this option if you want to use a different convertion options on the same css file.
+You can use: 
+ 1. an atRule - object with two fileds (params: string, name: string) - which will convert every rule under this media query.
+ 2. a selector - matchSelectors array with each selector you want to convert in this settings.
+ 3. both - for cases you want to convert specific selector inside the atRule.`
+
+ Example:
+ ```js
+ const pxToViewportOptions = {
+ viewportWidth: 640,
+ viewportUnit: 'vw',
+ propList: ['*'],
+ selectorBlackList: [/-pf$/],
+ mediaQuery: true,
+ customConvertionOptions: [
+ { 
+ /* Will convert the selector .tablet and all of his sons to 'vw' based on a viewport width of 1536. */
+ viewportWidth: 1536,
+ viewportUnit: 'vw',
+ matchSelectors: [/^.tablet\s/],
+ },
+ { 
+ /* Will convert all rules under '@media only screen and (max-width: 961px)' to 'vw' based on a viewport width of 961. */
+ atRule: { params: 'only screen and (max-width: 961px)', name: 'media' },
+ viewportWidth: 961,
+ viewportUnit: 'vw',
+ },
+ { 
+ /* Will convert all rules containing the selectors .tablet2 and .tablet3 thats under '@media only screen and (max-width: 961px)' to 'vw' based on a viewport width of 1040. */
+ atRule: { params: 'only screen and (max-width: 1040px)', name: 'media' },
+ viewportWidth: 1040,
+ viewportUnit: 'vw',
+ matchSelectors: [/^.tablet2\s/, /^.tablet3\s/],
+ }
+ ]
+ }
+ ```
 
 > `exclude` and `include` can be set together, and the intersection of the two rules will be taken.