purgetss 2.5.10 → 2.5.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -14
- package/bin/purgetss +7 -7
- package/dist/reset.tss +1 -1
- package/dist/tailwind.tss +1 -1
- package/docs/configuring-guide.md +13 -13
- package/index.js +5 -5
- package/lib/build-tailwind.js +1 -1
- package/lib/colores.js +1 -1
- package/lib/helpers.js +1 -1
- package/lib/templates/alloy.jmk +1 -1
- package/lib/templates/purgetss.config.js +1 -1
- package/lib/templates/tailwind/template.tss +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -2,14 +2,23 @@
|
|
|
2
2
|
<img src="https://codigomovil.mx/images/purgetss-logo.svg" height="200" width="200" alt="PurgeCSS logo"/>
|
|
3
3
|
</p>
|
|
4
4
|
|
|
5
|
+
Is a package for all [Titanium SDK developers](https://tidev.io/), who want to easily and quickly create beautiful designs, directly in the `Views` of an `Alloy` project, by providing a set of [Tailwind-like utility classes](https://tailwindcss.com/).
|
|
6
|
+
|
|
5
7
|
<p align="center">
|
|
6
|
-
<
|
|
8
|
+
<a href="https://www.npmjs.com/package/purgetss" target="_blank">
|
|
9
|
+
<img alt="npm" src="https://img.shields.io/npm/dm/purgetss">
|
|
10
|
+
</a>
|
|
11
|
+
<a href="https://www.npmjs.com/package/purgetss" target="_blank">
|
|
12
|
+
<img alt="npm" src="https://img.shields.io/npm/v/purgetss">
|
|
13
|
+
</a>
|
|
14
|
+
<a href="https://www.npmjs.com/package/purgetss" target="_blank">
|
|
15
|
+
<img alt="NPM" src="https://img.shields.io/npm/l/purgetss">
|
|
16
|
+
</a>
|
|
7
17
|
</p>
|
|
8
18
|
|
|
9
|
-
|
|
10
|
-
Is a package for all [Titanium SDK developers](https://tidev.io/), who want to easily and quickly create beautiful designs, directly in the `Views` of an `Alloy` project, by providing a set of [Tailwind-like utility classes](https://tailwindcss.com/).
|
|
19
|
+
------
|
|
11
20
|
|
|
12
|
-
|
|
21
|
+
## Some key features of PurgeTSS
|
|
13
22
|
- Provides more than 5000 utility classes ready to use in your projects.
|
|
14
23
|
- It generates an `app.tss` file with only the classes used in your project by parsing all your XML files from the `Views` folder.
|
|
15
24
|
- You can customize any of the default classes through a simple configuration file, or you can create new *just-in-time* classes with arbitrary values within the `Views`.
|
|
@@ -17,7 +26,7 @@ Is a package for all [Titanium SDK developers](https://tidev.io/), who want to e
|
|
|
17
26
|
- Includes an Animation module to apply a 2D Matrix animation or transformation to any element or to an `Array` of elements.
|
|
18
27
|
- Includes a simple two-dimensional Grid System to align and distribute the elements in your views.
|
|
19
28
|
|
|
20
|
-
|
|
29
|
+
## List of available classes
|
|
21
30
|
- [tailwind.tss](https://github.com/macCesar/purgeTSS/blob/master/dist/tailwind.tss)
|
|
22
31
|
- [lineicons.tss](https://github.com/macCesar/purgeTSS/blob/master/dist/lineicons.tss)
|
|
23
32
|
- [boxicons.tss](https://github.com/macCesar/purgeTSS/blob/master/dist/boxicons.tss)
|
|
@@ -26,15 +35,15 @@ Is a package for all [Titanium SDK developers](https://tidev.io/), who want to e
|
|
|
26
35
|
- [Your own custom styles](https://github.com/macCesar/purgeTSS/blob/master/docs/configuring-guide.md)
|
|
27
36
|
|
|
28
37
|
# IMPORTANT NOTICE!!!
|
|
29
|
-
###
|
|
38
|
+
### PurgeTSS will OVERWRITE your existing app.tss file
|
|
30
39
|
|
|
31
40
|
**ALL your classes from your original `app.tss` file will be copied without purging.**
|
|
32
41
|
|
|
33
|
-
> When you run
|
|
42
|
+
> When you run PurgeTSS for the first time, it will backup your `app.tss` file to `_app.tss`.
|
|
34
43
|
>
|
|
35
44
|
> From now on, add, delete or update your custom classes in `_app.tss.`
|
|
36
45
|
>
|
|
37
|
-
> Or better yet! Add your custom values in `config.js` to **[configure and customize](https://github.com/macCesar/purgeTSS/blob/master/docs/configuring-guide.md)**
|
|
46
|
+
> Or better yet! Add your custom values in `config.js` to **[configure and customize](https://github.com/macCesar/purgeTSS/blob/master/docs/configuring-guide.md)** PurgeTSS.
|
|
38
47
|
|
|
39
48
|
## Installation
|
|
40
49
|
**Install it globally on your machine via [NPM](http://npmjs.org/).**
|
|
@@ -94,7 +103,7 @@ After running `purgetss` you will have a new `app.tss` file with only the classe
|
|
|
94
103
|
|
|
95
104
|
`app.tss` after purging
|
|
96
105
|
```css
|
|
97
|
-
//
|
|
106
|
+
// PurgeTSS
|
|
98
107
|
// Created by César Estrada
|
|
99
108
|
// https://github.com/macCesar/purgeTSS
|
|
100
109
|
|
|
@@ -164,7 +173,7 @@ module.exports = {
|
|
|
164
173
|
'purge': {
|
|
165
174
|
'mode': 'all',
|
|
166
175
|
|
|
167
|
-
// These options are passed through directly to
|
|
176
|
+
// These options are passed through directly to PurgeTSS
|
|
168
177
|
'options': {
|
|
169
178
|
'safelist': [],
|
|
170
179
|
}
|
|
@@ -214,9 +223,9 @@ When customizing your `config.js` file, you can re-generate `./purgetss/tailwind
|
|
|
214
223
|
> purgetss b
|
|
215
224
|
```
|
|
216
225
|
|
|
217
|
-
Every time you run the `purgetss` command, either manually or automatically (see `purgetss watch` below), **
|
|
226
|
+
Every time you run the `purgetss` command, either manually or automatically (see `purgetss watch` below), **PurgeTSS** will check for any change made to `config.js` file and will re-generate `tailwind.tss` if necessary.
|
|
218
227
|
|
|
219
|
-
**After generating your new or updated `tailwind.tss` file,
|
|
228
|
+
**After generating your new or updated `tailwind.tss` file, PurgeTSS will use it to parse your `xml` files.**
|
|
220
229
|
|
|
221
230
|
## watch
|
|
222
231
|
```bash
|
|
@@ -402,9 +411,9 @@ And as with the Pro Version, just run `purgetss build` to generate your custom `
|
|
|
402
411
|
> purgetss u
|
|
403
412
|
```
|
|
404
413
|
|
|
405
|
-
Use this command to update **
|
|
414
|
+
Use this command to update **PurgeTSS** to the latest version.
|
|
406
415
|
|
|
407
|
-
We constantly update **
|
|
416
|
+
We constantly update **PurgeTSS** to add new features, to include the latest versions of Tailwind, Tailwind UI, FontAwesome, etc., and for bug fixes.
|
|
408
417
|
|
|
409
418
|
## sudo-update
|
|
410
419
|
If you need to use `sudo` to install NPM modules, please use `purgetss sudo-update`
|
package/bin/purgetss
CHANGED
|
@@ -8,7 +8,7 @@ const package = require('../package.json');
|
|
|
8
8
|
program
|
|
9
9
|
.version(package.version)
|
|
10
10
|
.description(package.description + '\n\nPlease visit ' + chalk.yellow('https://github.com/macCesar/purgeTSS') + ' for details.')
|
|
11
|
-
.help('
|
|
11
|
+
.help('PurgeTSS will create a clean app.tss file by copying only the classes used in your XML Files.\n\nIt works with tailwind.tss, fontawesome.tss, materialdesignicons.tss, lineicons.tss.\n\nALL your classes from your original app.tss file will be copied over without purging.\n\nYou can create your own custom classes and values by running `purgetss init` and `purgetss build`.')
|
|
12
12
|
.action((args, options, logger) => {
|
|
13
13
|
purgetss.purgeClasses(options);
|
|
14
14
|
});
|
|
@@ -75,10 +75,10 @@ program
|
|
|
75
75
|
program
|
|
76
76
|
.command('update')
|
|
77
77
|
.alias('u')
|
|
78
|
-
.description('Update
|
|
79
|
-
.help('Run auto-update regularly!\n\nWe constantly update
|
|
78
|
+
.description('Update PurgeTSS to the latest version')
|
|
79
|
+
.help('Run auto-update regularly!\n\nWe constantly update PurgeTSS to add new features, to include the latest versions of Tailwind and for bug fixes.')
|
|
80
80
|
.action((args, options, logger) => {
|
|
81
|
-
logger.info(`${purgetss.colores.purgeLabel} Updating
|
|
81
|
+
logger.info(`${purgetss.colores.purgeLabel} Updating PurgeTSS to the latest version...`);
|
|
82
82
|
|
|
83
83
|
const { exec } = require("child_process");
|
|
84
84
|
|
|
@@ -100,10 +100,10 @@ program
|
|
|
100
100
|
program
|
|
101
101
|
.command('sudo-update')
|
|
102
102
|
.alias('su')
|
|
103
|
-
.description('Update
|
|
104
|
-
.help('Run auto-update regularly!\n\nWe constantly update
|
|
103
|
+
.description('Update PurgeTSS to the latest version using sudo')
|
|
104
|
+
.help('Run auto-update regularly!\n\nWe constantly update PurgeTSS to add new features, to include the latest versions of Tailwind and for bug fixes.')
|
|
105
105
|
.action((args, options, logger) => {
|
|
106
|
-
logger.info(`${purgetss.colores.purgeLabel} Updating
|
|
106
|
+
logger.info(`${purgetss.colores.purgeLabel} Updating PurgeTSS to the latest version using sudo...`);
|
|
107
107
|
|
|
108
108
|
const { exec } = require("child_process");
|
|
109
109
|
|
package/dist/reset.tss
CHANGED
package/dist/tailwind.tss
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// Tailwind CSS v2.2.
|
|
1
|
+
// Tailwind CSS v2.2.17: A utility-first CSS framework for rapidly building custom designs. ( https://tailwindcss.com )
|
|
2
2
|
// Tailwind UI Plugin v0.7.2 ( https://www.npmjs.com/package/@tailwindcss/ui ).
|
|
3
3
|
// Created by Adam Wathan ( https://twitter.com/adamwathan ).
|
|
4
4
|
|
|
@@ -60,7 +60,7 @@ By default, `purgetss` will look for an optional `./purgetss/config.js` file whe
|
|
|
60
60
|
Every section of the config file is optional, so you only specify what you'd like to change. Any missing sections will fall back to the default configuration.
|
|
61
61
|
|
|
62
62
|
## Creating your configuration file
|
|
63
|
-
To create a
|
|
63
|
+
To create a PurgeTSS configuration file for your project, run this command:
|
|
64
64
|
|
|
65
65
|
```bash
|
|
66
66
|
> purgetss init
|
|
@@ -76,7 +76,7 @@ module.exports = {
|
|
|
76
76
|
'purge': {
|
|
77
77
|
'mode': 'all',
|
|
78
78
|
|
|
79
|
-
// These options are passed through directly to
|
|
79
|
+
// These options are passed through directly to PurgeTSS
|
|
80
80
|
'options': {
|
|
81
81
|
'safelist': [],
|
|
82
82
|
}
|
|
@@ -100,7 +100,7 @@ To generate your custom `./purgetss/tailwind.tss` file use the following command
|
|
|
100
100
|
|
|
101
101
|
It will generate a new `tailwind.tss` file with every attribute defined in `./purgetss/config.js`.
|
|
102
102
|
|
|
103
|
-
**After generating your custom `tailwind.tss` file. You can use any of the generated classes, `
|
|
103
|
+
**After generating your custom `tailwind.tss` file. You can use any of the generated classes, `PurgeTSS` will use this file instead of Tailwind's default file.**
|
|
104
104
|
|
|
105
105
|
## Configuration file example
|
|
106
106
|
- **For the modifier keys, you can use any name or convention you want. For example: '.my-custom-class', or '.anotherCustomClassName'**.
|
|
@@ -242,7 +242,7 @@ module.exports = {
|
|
|
242
242
|
### Shared colors
|
|
243
243
|
All colors defined in the `colors` section are automatically shared with `textColor`, `backgroundColor`, `borderColor`, `placeholderColor`, `gradientColorStops` and `hintTextColor` properties.
|
|
244
244
|
|
|
245
|
-
> **When you include the `colors` section, `
|
|
245
|
+
> **When you include the `colors` section, `PurgeTSS` will automatically generate all color-related properties and merge them with any other color-related properties present in the configuration file.**
|
|
246
246
|
|
|
247
247
|
```javascript
|
|
248
248
|
// ./purgetss/config.js
|
|
@@ -367,7 +367,7 @@ module.exports = {
|
|
|
367
367
|
### Shared spacing
|
|
368
368
|
The `spacing` section is shared by the `padding`, `margin`, `width`, and `height` properties.
|
|
369
369
|
|
|
370
|
-
> **When you include the `spacing` section, `
|
|
370
|
+
> **When you include the `spacing` section, `PurgeTSS` will automatically generate all spacing-related properties and merge them with any other spacing-related properties present in the configuration file.**
|
|
371
371
|
|
|
372
372
|
```javascript
|
|
373
373
|
// ./purgetss/config.js
|
|
@@ -481,7 +481,7 @@ The example `borderRadius` configuration above would generate the following TSS
|
|
|
481
481
|
|
|
482
482
|
You'll notice that using a key of `default` in the theme configuration created the class `.rounded` with no suffix.
|
|
483
483
|
|
|
484
|
-
This is a common convention in `
|
|
484
|
+
This is a common convention in `PurgeTSS` supported by many (although not all) of the properties.
|
|
485
485
|
|
|
486
486
|
## The `apply` directive
|
|
487
487
|
Starting with **`v2.3.5`**, you can `apply` a set of classes to create more complex classes, or when you find a repetitive pattern in your code and you’d like to extract it to a new class component.
|
|
@@ -653,7 +653,7 @@ module.exports = {
|
|
|
653
653
|
'purge': {
|
|
654
654
|
'mode': 'all',
|
|
655
655
|
|
|
656
|
-
// These options are passed through directly to
|
|
656
|
+
// These options are passed through directly to PurgeTSS
|
|
657
657
|
'options': {
|
|
658
658
|
'safelist': [],
|
|
659
659
|
}
|
|
@@ -661,7 +661,7 @@ module.exports = {
|
|
|
661
661
|
}
|
|
662
662
|
```
|
|
663
663
|
|
|
664
|
-
- `purge.mode.all` by default, `
|
|
664
|
+
- `purge.mode.all` by default, `PurgeTSS` will look everywhere inside your XML files, like in comments, attributes, classes, ids, Ti Element, and even the actual written content in your markup. **This mode is necessary if you want `purgetss` to parse any Ti Element that you've styled in `config.js`**.
|
|
665
665
|
- `purge.mode.class` Use `class` to search only in `class` and `id` attributes in your XML files.
|
|
666
666
|
- `purge.mode.options.safelist` List of classes and Ti Elements that you want to keep regardless of the purge mode or whether or not they are included in your XML files.
|
|
667
667
|
|
|
@@ -674,7 +674,7 @@ module.exports = {
|
|
|
674
674
|
'purge': {
|
|
675
675
|
'mode': 'all',
|
|
676
676
|
|
|
677
|
-
// These options are passed through directly to
|
|
677
|
+
// These options are passed through directly to PurgeTSS
|
|
678
678
|
'options': require('./safelist'),
|
|
679
679
|
},
|
|
680
680
|
}
|
|
@@ -1301,7 +1301,7 @@ You can use any of the supported units depending of the property you are generat
|
|
|
1301
1301
|
|
|
1302
1302
|
`app.tss` *Showing only the generated styles*
|
|
1303
1303
|
```css
|
|
1304
|
-
//
|
|
1304
|
+
// PurgeTSS
|
|
1305
1305
|
// Created by César Estrada
|
|
1306
1306
|
// https://github.com/macCesar/purgeTSS
|
|
1307
1307
|
|
|
@@ -1369,7 +1369,7 @@ You can use any of the supported units depending of the property you are generat
|
|
|
1369
1369
|
|
|
1370
1370
|
`app.tss`
|
|
1371
1371
|
```css
|
|
1372
|
-
//
|
|
1372
|
+
// PurgeTSS
|
|
1373
1373
|
// Created by César Estrada
|
|
1374
1374
|
// https://github.com/macCesar/purgeTSS
|
|
1375
1375
|
|
|
@@ -1454,7 +1454,7 @@ You can use any of the supported units depending of the property you are generat
|
|
|
1454
1454
|
|
|
1455
1455
|
`app.tss`
|
|
1456
1456
|
```css
|
|
1457
|
-
//
|
|
1457
|
+
// PurgeTSS
|
|
1458
1458
|
// Created by César Estrada
|
|
1459
1459
|
// https://github.com/macCesar/purgeTSS
|
|
1460
1460
|
|
|
@@ -1517,7 +1517,7 @@ Lets say that you want to have different background color and font sizes, depend
|
|
|
1517
1517
|
|
|
1518
1518
|
`app.tss`
|
|
1519
1519
|
```css
|
|
1520
|
-
//
|
|
1520
|
+
// PurgeTSS
|
|
1521
1521
|
// Created by César Estrada
|
|
1522
1522
|
// https://github.com/macCesar/purgeTSS
|
|
1523
1523
|
|
package/index.js
CHANGED
|
@@ -237,7 +237,7 @@ function create(args, options) {
|
|
|
237
237
|
const { exec } = require("child_process");
|
|
238
238
|
const commandExistsSync = require('command-exists').sync;
|
|
239
239
|
|
|
240
|
-
logger.info('Creating a new Titanium Project with `
|
|
240
|
+
logger.info('Creating a new Titanium Project with `PurgeTSS`...');
|
|
241
241
|
|
|
242
242
|
exec(`ti config app.idprefix && ti config app.workspace`, (error, stdout, stderr) => {
|
|
243
243
|
if (error) {
|
|
@@ -295,7 +295,7 @@ function create(args, options) {
|
|
|
295
295
|
});
|
|
296
296
|
});
|
|
297
297
|
} else {
|
|
298
|
-
return logger.error('You need to have `app.idprefix` and `app.workspace` configure in `ti config` to create an App with `
|
|
298
|
+
return logger.error('You need to have `app.idprefix` and `app.workspace` configure in `ti config` to create an App with `PurgeTSS`.');
|
|
299
299
|
}
|
|
300
300
|
});
|
|
301
301
|
}
|
|
@@ -504,7 +504,7 @@ function addHook() {
|
|
|
504
504
|
|
|
505
505
|
originalJMKFile.split(/\r?\n/).forEach((line) => {
|
|
506
506
|
if (line.includes('pre:compile')) {
|
|
507
|
-
line += "\n\trequire('child_process').execSync('purgetss', logger.warn('::
|
|
507
|
+
line += "\n\trequire('child_process').execSync('purgetss', logger.warn('::PurgeTSS:: Auto-Purging ' + event.dir.project));";
|
|
508
508
|
}
|
|
509
509
|
updatedJMKFile.push(line);
|
|
510
510
|
});
|
|
@@ -925,7 +925,7 @@ function extractClasses(currentText, currentFile) {
|
|
|
925
925
|
return acc;
|
|
926
926
|
}, []);
|
|
927
927
|
} catch (error) {
|
|
928
|
-
throw chalk.red(`::
|
|
928
|
+
throw chalk.red(`::PurgeTSS:: Error processing: “${currentFile}”`);
|
|
929
929
|
}
|
|
930
930
|
}
|
|
931
931
|
|
|
@@ -1029,7 +1029,7 @@ function copyFontLibrary(vendor) {
|
|
|
1029
1029
|
//! Check if running inside an Alloy Project
|
|
1030
1030
|
function alloyProject() {
|
|
1031
1031
|
if (!fs.existsSync(cwd + '/app/views')) {
|
|
1032
|
-
logger.error('Please make sure you’re running
|
|
1032
|
+
logger.error('Please make sure you’re running PurgeTSS inside an Alloy Project.');
|
|
1033
1033
|
|
|
1034
1034
|
return false;
|
|
1035
1035
|
}
|
package/lib/build-tailwind.js
CHANGED
|
@@ -20,7 +20,7 @@ if (!fs.existsSync('./dist')) {
|
|
|
20
20
|
|
|
21
21
|
// Reset Styles ( Preflight in Tailwind lingo )
|
|
22
22
|
// Some reseting has to be done so everything else work as intended.
|
|
23
|
-
saveFile('./dist/reset.tss', '//
|
|
23
|
+
saveFile('./dist/reset.tss', '// PurgeTSS\n// Created by César Estrada\n// https://github.com/macCesar/purgeTSS\n');
|
|
24
24
|
|
|
25
25
|
// Template
|
|
26
26
|
let combinedColors = { transparent: 'transparent', ...defaultColors };
|
package/lib/colores.js
CHANGED
package/lib/helpers.js
CHANGED
|
@@ -490,7 +490,7 @@ function scalingMode() {
|
|
|
490
490
|
convertedStyles += `'.scaling-aspect-fit': { scalingMode: Ti.Media.IMAGE_SCALING_ASPECT_FIT }\n`;
|
|
491
491
|
convertedStyles += `'.scaling-aspect-fill': { scalingMode: Ti.Media.IMAGE_SCALING_ASPECT_FILL }\n`;
|
|
492
492
|
|
|
493
|
-
convertedStyles += `\n// Background Size ( for
|
|
493
|
+
convertedStyles += `\n// Background Size ( for compatibility with Tailwind’s classes )\n`;
|
|
494
494
|
convertedStyles += `'.bg-auto': { scalingMode: Ti.Media.IMAGE_SCALING_NONE }\n`;
|
|
495
495
|
convertedStyles += `'.bg-cover': { scalingMode: Ti.Media.IMAGE_SCALING_ASPECT_FILL }\n`;
|
|
496
496
|
convertedStyles += `'.bg-contain': { scalingMode: Ti.Media.IMAGE_SCALING_ASPECT_FIT }\n`;
|
package/lib/templates/alloy.jmk
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
task('pre:compile', function(event, logger) {
|
|
2
|
-
require('child_process').execSync('purgetss', logger.warn('::
|
|
2
|
+
require('child_process').execSync('purgetss', logger.warn('::PurgeTSS:: Auto-Purging ' + event.dir.project));
|
|
3
3
|
});
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
// Tailwind CSS v2.2.
|
|
1
|
+
// Tailwind CSS v2.2.17: A utility-first CSS framework for rapidly building custom designs. ( https://tailwindcss.com )
|
|
2
2
|
// Tailwind UI Plugin v0.7.2 ( https://www.npmjs.com/package/@tailwindcss/ui ).
|
|
3
3
|
// Created by Adam Wathan ( https://twitter.com/adamwathan ).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "purgetss",
|
|
3
|
-
"version": "2.5.
|
|
3
|
+
"version": "2.5.11",
|
|
4
4
|
"description": "An extension for Titanium SDK that generates a set of Tailwind-like classes and values to easily and quickly create beautifully designed mobile apps.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"bin": {
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"path": "^0.12.7",
|
|
57
57
|
"prompts": "^2.4.2",
|
|
58
58
|
"read-css": "^0.3.0",
|
|
59
|
-
"tailwindcss": "^2.2.
|
|
59
|
+
"tailwindcss": "^2.2.17",
|
|
60
60
|
"traverse": "^0.6.6",
|
|
61
61
|
"xml-js": "^1.6.11"
|
|
62
62
|
}
|