Skip to content

Commit c9bd422

Browse files
author
rofrischmann
committed
initial function set
1 parent 0cf763b commit c9bd422

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+9565
-2
lines changed

‎.babelrc‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"presets": [
3+
"es2015",
4+
"stage-0",
5+
"react"
6+
],
7+
"plugins": [
8+
"add-module-exports"
9+
]
10+
}

‎.codeclimate.yml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
languages:
2+
Ruby: true
3+
JavaScript: true
4+
PHP: true
5+
Python: true
6+
exclude_paths:
7+
- "dist/*"

‎.eslintrc‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"extends": [ "airbnb" ],
3+
"parser": "babel-eslint",
4+
"env": {
5+
"node": true,
6+
"jest": true
7+
},
8+
"plugins": [
9+
"flowtype"
10+
],
11+
"rules": {
12+
"semi": [ 2, "never" ],
13+
"object-curly-newline": [ 2 ],
14+
"object-property-newline": [2, {
15+
"allowMultiplePropertiesPerLine": false
16+
}],
17+
"import/prefer-default-export": [ 0 ],
18+
"max-len": [ 2, 120 ],
19+
"comma-dangle": [ 2, "never" ],
20+
"no-confusing-arrow": [ 0 ],
21+
"no-param-reassign": [ 1 ],
22+
"no-nested-ternary": [ 1 ],
23+
"no-mixed-operators": [ 0 ],
24+
"no-underscore-dangle": [ 0 ],
25+
"no-plusplus": [ 0 ],
26+
"no-restricted-syntax": [ 0 ],
27+
"consistent-return": [ 0 ]
28+
}
29+
}

‎.flowconfig‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
[ignore]
2+
3+
# Disable module with broken flow types.
4+
# .*/node_modules/babylon/*.*
5+
6+
[version]
7+
^0.38.0

‎.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# OS or Editor files
2+
._*
3+
.DS_Store
4+
Thumbs.db
5+
6+
# Files that might appear on external disks
7+
.Spotlight-V100
8+
.Trashes
9+
10+
# Always-ignore extensions
11+
*~
12+
*.diff
13+
*.err
14+
*.log
15+
*.orig
16+
*.pyc
17+
*.rej
18+
*.sass-cache
19+
*.sw?
20+
*.vi
21+
22+
node_modules
23+
coverage
24+
lib

‎.jshintrc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"esnext": true,
3+
"asi": true
4+
}

‎.travis.yml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
language: node_js
2+
node_js:
3+
- "5"
4+
script:
5+
- npm run check
6+
addons:
7+
code_climate:
8+
repo_token: 923b8eea8dc288ced3fef24a6a878b84fb21af9f8e3332881460c963735e4590
9+
after_script:
10+
- codeclimate-test-reporter < coverage/lcov.info
11+
notifications:
12+
email: false

‎Changelog.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# Changelog
2+
3+
### 1.0.0
4+
Initial version

‎README.md‎

Lines changed: 150 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,150 @@
1-
# css-in-js-utils
2-
Useful utility functions for CSS in JS solutions
1+
# CSS-in-JS Utilities
2+
A library that provides useful utilities functions for CSS-in-JS solutions.<br>
3+
They are intended to be used by CSS-in-JS library authors rather used directly.
4+
<br>
5+
<img alt="TravisCI" src="https://travis-ci.org/rofrischmann/css-in-js-utils.svg?branch=master">
6+
<a href="https://codeclimate.com/github/rofrischmann/css-in-js-utils/coverage"><img alt="Test Coverage" src="https://codeclimate.com/github/rofrischmann/css-in-js-utils/badges/coverage.svg"></a>
7+
<img alt="npm downloads" src="https://img.shields.io/npm/dm/css-in-js-utils.svg">
8+
<img alt="npm version" src="https://badge.fury.io/js/css-in-js-utils.svg">
9+
10+
## Installation
11+
```sh
12+
yarn add css-in-js-utils
13+
```
14+
15+
## Utilities
16+
* [`camelCaseProperty(property)`](#camelcasepropertyproperty)
17+
* [`hyphenateProperty(property)`](#hyphenatepropertyproperty)
18+
* [`isPrefixedProperty(property)`](#isprefixedpropertyproperty)
19+
* [`isPrefixedValue(value)`](#isprefixedvaluevalue)
20+
* [`isUnitlessProperty(property)`](#isunitlessproperty)
21+
* [`normalizeProperty(property)`](#normalizepropertyproperty)
22+
* [`unprefixProperty(property)`](#unprefixpropertyproperty)
23+
* [`unprefixValue(value)`](#unprefixvaluevalue)
24+
25+
------
26+
27+
### `camelCaseProperty(property)`
28+
Converts the `property` to camelCase.
29+
30+
```javascript
31+
import { camelCaseProperty } from 'css-in-js-utils'
32+
33+
console.log(camelCaseProperty('padding-top'))
34+
// => 'paddingTop'
35+
36+
console.log(camelCaseProperty('-webkit-transition'))
37+
// => 'WebkitTransition'
38+
```
39+
40+
------
41+
42+
### `hyphenateProperty(property)`
43+
Converts the `property` to hyphen-case.
44+
> Directly mirrors [hyphenate-style-name](https://github.com/rexxars/hyphenate-style-name).
45+
46+
```javascript
47+
import { hyphenateProperty } from 'css-in-js-utils'
48+
49+
console.log(hyphenateProperty('paddingTop'))
50+
// => 'padding-top'
51+
52+
console.log(hyphenateProperty('WebkitTransition'))
53+
// => '-webkit-transition'
54+
```
55+
56+
------
57+
58+
### `isPrefixedProperty(property)`
59+
Checks if a `property` includes a vendor prefix.
60+
61+
```javascript
62+
import { isPrefixedProperty } from 'css-in-js-utils'
63+
64+
console.log(isPrefixedProperty('paddingTop'))
65+
// => false
66+
67+
console.log(isPrefixedProperty('WebkitTransition'))
68+
// => true
69+
```
70+
71+
------
72+
### `isPrefixedValue(value)`
73+
Checks if a `value` includes vendor prefixes.
74+
75+
```javascript
76+
import { isPrefixedValue } from 'css-in-js-utils'
77+
78+
console.log(isPrefixedValue('200px'))
79+
console.log(isPrefixedValue(200))
80+
// => false
81+
82+
console.log(isPrefixedValue('-webkit-calc(100% - 50px)'))
83+
// => true
84+
```
85+
86+
------
87+
88+
### `isUnitlessProperty(property)`
89+
Checks if a `property` accepts unitless values.
90+
> Directly mirrors [unitless-css-property](https://github.com/rofrischmann/unitless-css-property).
91+
92+
```javascript
93+
import { isUnitlessProperty } from 'css-in-js-utils'
94+
95+
console.log(isUnitlessProperty('width'))
96+
// => false
97+
98+
console.log(isUnitlessProperty('flexGrow'))
99+
console.log(isUnitlessProperty('lineHeight'))
100+
// => true
101+
```
102+
103+
### `normalizeProperty(property)`
104+
Normalizes the `property` by unprefixing **and** camelCasing it.
105+
> Uses the [`camelCaseProperty`](#camelcasepropertyproperty) and [`unprefixProperty`](#unprefixpropertyproperty)-methods.
106+
107+
```javascript
108+
import { normalizeProperty } from 'css-in-js-utils'
109+
110+
console.log(normalizeProperty('-webkit-transition-delay'))
111+
// => 'transitionDelay'
112+
```
113+
114+
### `unprefixProperty(property)`
115+
Removes the vendor prefix (if set) from the `property`.
116+
117+
```javascript
118+
import { unprefixProperty } from 'css-in-js-utils'
119+
120+
console.log(unprefixProperty('WebkitTransition'))
121+
// => 'transition'
122+
123+
console.log(unprefixProperty('transitionDelay'))
124+
// => 'transitionDelay'
125+
```
126+
127+
### `unprefixValue(value)`
128+
Removes all vendor prefixes (if any) from the `value`.
129+
130+
```javascript
131+
import { unprefixValue } from 'css-in-js-utils'
132+
133+
console.log(unprefixValue('-webkit-calc(-moz-calc(100% - 50px)/2)'))
134+
// => 'calc(calc(100% - 50px)/2)'
135+
136+
console.log(unprefixValue('100px'))
137+
// => '100px'
138+
```
139+
140+
## Direct Import
141+
Every utility function may be imported directly to save bundle size.
142+
143+
```javascript
144+
import camelCaseProperty from 'css-in-js-utils/lib/camelCaseProperty'
145+
```
146+
147+
## License
148+
css-in-js-utils is licensed under the [MIT License](http://opensource.org/licenses/MIT).<br>
149+
Documentation is licensed under [Creative Common License](http://creativecommons.org/licenses/by/4.0/).<br>
150+
Created with ♥ by [@rofrischmann](http://rofrischmann.de).

0 commit comments

Comments
 (0)