File tree Expand file tree Collapse file tree 3 files changed +26
-14
lines changed Expand file tree Collapse file tree 3 files changed +26
-14
lines changed Original file line number Diff line number Diff line change 1
1
# css-class-generator
2
2
3
- Generates a sequential valid css class.
3
+ Generates a sequential, valid CSS class, generating the next smallest class names possible .
4
4
5
5
``` bash
6
6
npm install --save css-class-generator
@@ -10,26 +10,23 @@ npm install --save css-class-generator
10
10
11
11
` cssNameGenerator(prefix = '') ` -> iterator
12
12
13
- Supports a legacy iteration mode (just an object with a function ` next ` ) .
13
+ Will throw if prefix is not a valid class name (unless the prefix is ` - ` ). The exception will be thrown when the first value is being yielded .
14
14
15
- Use ` . ` as a prefix if you want real css class names .
15
+ Class names are generated without a leading ` . ` .
16
16
17
- # Example
18
-
19
- ES5:
17
+ It uses generators, so you'll have to be using a version of node that supports this.
20
18
21
- ``` js
22
- const cssNameGenerator = require (' css-class-generator' );
23
- var generator = cssNameGenerator (' prefix-' );
24
- generator .next () // { value: 'prefix-A', done: false }
25
- generator .next () // { value: 'prefix-B', done: false }
26
- ```
27
-
28
- ES6:
19
+ # Example
29
20
30
21
``` js
31
22
const cssNameGenerator = require (' css-class-generator' );
32
23
for (let value of cssNameGenerator ()) {
33
24
// 'A', 'B', ...
34
25
}
26
+ for (let value of cssNameGenerator (' -' )) {
27
+ // '-A', '-B', ...
28
+ }
29
+ for (let value of cssNameGenerator (' custom-namespace-' )) {
30
+ // You get the idea...
31
+ }
35
32
```
Original file line number Diff line number Diff line change @@ -51,7 +51,13 @@ function* firstTwoChars() {
51
51
yield * appendGenerator ( firstCharacters , secondCharacters ( ) ) ;
52
52
}
53
53
54
+ const validIdent = / ^ - ? [ _ a - z ] [ _ a - z 0 - 9 - ] * $ / i;
55
+
54
56
module . exports = function * cssNameGenerator ( prefix ) {
57
+ if ( prefix && prefix !== '-' && ! validIdent . test ( prefix ) ) {
58
+ throw new Error ( `Expected prefix (${ prefix } ) to be a valid css class name` ) ;
59
+ }
60
+
55
61
if ( ! prefix ) {
56
62
yield * firstCharacters ( ) ;
57
63
yield * firstTwoChars ( ) ;
Original file line number Diff line number Diff line change @@ -31,3 +31,12 @@ test('generate name with other prefix', t => {
31
31
t . true ( isValid , `Expected ${ value } to be a valid css selector` ) ;
32
32
}
33
33
} ) ;
34
+
35
+ test ( 'allows hyphen for class name' , t => {
36
+ t . notThrows ( ( ) => { cssNameGenerator ( '-' ) . next ( ) ; } ) ;
37
+ } ) ;
38
+
39
+ test ( 'throws for invalid class name' , t => {
40
+ t . throws ( ( ) => { cssNameGenerator ( '--' ) . next ( ) ; } ) ;
41
+ t . throws ( ( ) => { cssNameGenerator ( '0' ) . next ( ) ; } ) ;
42
+ } ) ;
You can’t perform that action at this time.
0 commit comments