Skip to content

Commit db8d088

Browse files
author
Henri Beck
committed
Merge remote-tracking branch 'origin/add-ts-typings' into add-ts-typings
* origin/add-ts-typings: Scoped keyframes (#888) Update readme.md (#897) Use CSSTOM in default unit plugin (#893) Added .nvmrc (#896) [WIP] DONT MERGE Fix ci (#895) Update ci (#894) Support plugins processing for observables by default (#892) Typed CSSOM values support (#887) Dynamic values full syntax (#878) [jss-plugin-cache] Use WeakMap for cache plugin (#890)
2 parents d9d39fa + c6cae18 commit db8d088

101 files changed

Lines changed: 10732 additions & 990 deletions

File tree

Some content is hidden

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

‎.nvmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
8

‎.travis.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ branches:
77
after_success:
88
- bash <(curl -s https://codecov.io/bash)
99
script:
10+
- yarn check-snapshots
11+
- yarn build
1012
- yarn lint:ci
1113
- yarn test
1214
env:

‎changelog.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
## Next / 2018-09-16
22

33
- Fix multiple cases where linking CSS rules didn't work (#815, #710, #664)
4+
- Added support for Typed CSSOM values (#882)
5+
- Added scoped keyframes support (#346)
6+
- Function values and function rules support now fallbacks, media queries, nesting, global styles (#682)
7+
8+
### Breaking changes
9+
10+
- Observables, function values and rules are now standalone packages, not part of the core. They are still part of the default preset though.
11+
- Function values, rules and observables apply plugins by default now, which means they can support all plugin defined syntaxes, but they are also slower by default. To speed them up use `sheet.update(data, {process: false})` for fn values/rules and `jss.use(pluginObservable({process: false}))` when setting up observables plugin. (#682)
12+
- Rule @keyframes has now scoped name by default, which means that you can access it using `$ref` from the same sheet and generate global one as before using `@global` rule ((#346).
13+
- Options `createGenerateClassName` and `generateClassName` are renamed to `createGenerateId` and `generateId` since th same function is now used to scope @keyframes rules. This affects both JSS and React-JSS.
414

515
## 9.8.7 / 2018-06-24
616

‎docs/js-api.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export default jss
3232

3333
Options:
3434

35-
- `createGenerateClassName` - a function which returns a function which generates unique class names.
35+
- `createGenerateId` - a function which returns a function which generates unique class names.
3636
- `plugins` - an array of functions, will be passed to `jss.use`.
3737
- `virtual` - if true, JSS will use VirtualRenderer.
3838
- `insertionPoint` - string value of a DOM comment node which marks the start of sheets or a rendered DOM node. Sheets rendered by this Jss instance are inserted after this point sequentially.
@@ -74,7 +74,7 @@ Options:
7474
- `link` - link jss `Rule` instances with DOM `CSSRule` instances so that styles, can be modified dynamically, false by default because it has some performance cost.
7575
- `element` - style element, will create one by default.
7676
- `index` - 0 by default - determines DOM rendering order, higher number = higher specificity (inserted after).
77-
- `generateClassName` - a function that generates a unique class name.
77+
- `generateId` - a function that generates a unique class name.
7878
- `classNamePrefix` - a string, which will be added at the beginning of the class name.
7979

8080
```javascript
@@ -358,22 +358,22 @@ console.log(sheet.toString())
358358

359359
## Generate your own class names
360360

361-
`createGenerateClassName`
361+
`createGenerateId`
362362

363-
Option `createGenerateClassName` allows you to specify a function which returns a class name generator function `generateClassName(rule, sheet)`. This pattern is used to allow JSS reset the counter upon factory invocation, when needed. For example, it is used in [React-JSS](https://github.com/cssinjs/react-jss) to reset the counter on each request for server-side rendering.
363+
Option `createGenerateId` allows you to specify a function which returns a class name generator function `generateId(rule, sheet)`. This pattern is used to allow JSS reset the counter upon factory invocation, when needed. For example, it is used in [React-JSS](https://github.com/cssinjs/react-jss) to reset the counter on each request for server-side rendering.
364364

365365
By default class names generator uses a simple counter to ensure uniqueness of the class names. It consists of `classNamePrefix` Style Sheet option + rule name + counter. **Note**: in production (`NODE_ENV=production`) it uses just the `c` + rules counter.
366366

367367
```javascript
368368
import jss from 'jss'
369369

370-
const createGenerateClassName = () => {
370+
const createGenerateId = () => {
371371
let counter = 0
372372

373373
return (rule, sheet) => `pizza--${rule.key}-${counter++}`
374374
}
375375

376-
jss.setup({createGenerateClassName})
376+
jss.setup({createGenerateId})
377377

378378
const sheet = jss.createStyleSheet({
379379
button: {

‎docs/json-api.md‎

Lines changed: 23 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -22,72 +22,6 @@ Compiles to:
2222
}
2323
```
2424

25-
## Function values
26-
27-
If you want dynamic behavior for your Style Sheet, you can use functions as a value which return the actual value. If function values returns `null|undefined|false` - property will be removed. Use [sheet.update(data)](./js-api.md#update-function-values) in order to pass the data object. [Sheet option](./js-api.md#create-style-sheet) `link: true` is required for this to function.
28-
29-
```javascript
30-
const styles = {
31-
button: {
32-
color: data => data.color
33-
}
34-
}
35-
```
36-
37-
### Support of "!important"
38-
39-
To use the `!important` modifier with function values, you must use [array syntax](#alternative-syntax-for-space-and-comma-separated-values):
40-
41-
```javascript
42-
const styles = {
43-
button: {
44-
color: data => [[data.color], '!important']
45-
}
46-
}
47-
```
48-
49-
## Function rules
50-
51-
Similar to function values, you can use a function to return a dynamic style object. Use [sheet.update(data)](./js-api.md#update-function-values) in order to pass the data object. Sheet option `link: true` is required for this to function.
52-
53-
```javascript
54-
const styles = {
55-
button: data => ({
56-
display: 'flex',
57-
color: data.color
58-
})
59-
}
60-
```
61-
62-
## Observable values
63-
64-
In order to create highly dynamic animations, you may want to use streams. Take a look at the [tc39 observable proposal](https://github.com/tc39/proposal-observable). Sheet option `link: true` is required for this to function.
65-
66-
```javascript
67-
const styles = {
68-
button: {
69-
color: new Observable(observer => {
70-
observer.next('red')
71-
})
72-
}
73-
}
74-
```
75-
76-
## Observable rules
77-
78-
Similar to observable values, you can declare observable rules. Stream should contain in this case the style object. Sheet option `link: true` is required for this to function.
79-
80-
```javascript
81-
const styles = {
82-
button: new Observable(observer => {
83-
observer.next({
84-
color: 'red',
85-
opacity: 1
86-
})
87-
})
88-
}
89-
```
90-
9125
## Media Queries
9226

9327
```javascript
@@ -135,41 +69,38 @@ Compiles to:
13569

13670
## Keyframes Animation
13771

138-
Note: keyframe id is still global and may conflict.
72+
Keyframes name will use the same id generator function as the class names. Animation name will be scoped by default. In order to access it within the same style sheet, you can use `$ref` syntax as a value of `animationName` or `animation` property.
13973

140-
```javascript
141-
const styles = {
142-
'@keyframes my-animation': {
143-
from: {opacity: 0},
144-
to: {opacity: 1}
145-
}
146-
}
147-
```
74+
Additionally generated name can be accessed through `sheet.keyframes.{name}` map.
14875

149-
### ES6 with generated keyframe id
76+
In order to generate a global animation name, you can use `@global` rule.
15077

15178
```javascript
152-
const animationId = Math.random()
153-
15479
const styles = {
155-
[`@keyframes ${animationId}`]: {
80+
'@keyframes slideRight': {
15681
from: {opacity: 0},
15782
to: {opacity: 1}
83+
},
84+
container: {
85+
animationName: '$slideRight'
15886
}
15987
}
16088
```
16189

16290
Compiles to:
16391

16492
```css
165-
@keyframes my-animation {
93+
@keyframes keyframes-slideRight-0-1-2 {
16694
from {
16795
opacity: 0;
16896
}
16997
to {
17098
opacity: 1;
17199
}
172100
}
101+
.container-0-1-3 {
102+
animation-name: keyframes-slideRight-0-1-2;
103+
}
173104
```
174105

175106
## Fallbacks
@@ -421,6 +352,18 @@ Compiles to:
421352
}
422353
```
423354

355+
## Typed CSSOM (Houdini)
356+
357+
Typed CSSOM values are supported. You can learn more about them [here](https://developers.google.com/web/updates/2018/03/cssom) and track the standardization progress [here](https://ishoudinireadyyet.com/). Also make sure you use a [polyfill](https://github.com/csstools/css-typed-om) for browsers without support. It will make most sence when used together with function values and observables for frequent updates.
358+
359+
```javascript
360+
const styles = {
361+
button: {
362+
margin: CSS.px(10)
363+
}
364+
}
365+
```
366+
424367
## Plugins
425368

426369
JSS plugins give you even more features, [read about them](plugins.md).

‎flow-typed/css.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
interface CSSOM {
2+
px(val: number | string): {};
3+
percent(val: number | string): {};
4+
ms(val: number | string): {};
5+
number(val: number | string): {};
6+
}
7+
8+
declare var CSS: ?CSSOM

‎karma.conf.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ module.exports = config => {
2323
'node_modules/raf/polyfill.js',
2424
'./packages/jss/tests/index.js',
2525
'./packages/jss-plugin-syntax-rule-value-function/src/index.test.js',
26-
'./packages/jss-plugin-syntax-rule-value-observable/src/observable.test.js',
26+
'./packages/jss-plugin-syntax-rule-value-observable/src/index.test.js',
2727
'./packages/jss-plugin-syntax-expand/src/index.test.js',
2828
'./packages/jss-plugin-syntax-default-unit/src/index.test.js',
2929
'./packages/jss-plugin-syntax-camel-case/src/index.test.js',

‎package.json‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
"packages/*"
66
],
77
"scripts": {
8-
"prepare": "lerna run prepare",
9-
"publish": "yarn lint && yarn test && lerna publish",
8+
"build": "lerna run prepare",
9+
"publish": "yarn lint && yarn test && yarn build && lerna publish",
1010
"typecheck": "flow check --max-warnings=0",
1111
"ts-check": "tsc",
1212
"lint": "eslint scripts/ packages/ && yarn typecheck && yarn format",
@@ -15,7 +15,8 @@
1515
"format": "prettier \"*.{js,md,json,ts}\" \"{docs,packages,scripts}/**/*.{js,md,json,ts}\" --write",
1616
"test": "cross-env NODE_ENV=test VERSION=\"1\" karma start --single-run",
1717
"test:watch": "cross-env NODE_ENV=test VERSION=\"1\" karma start",
18-
"posttest": "lerna exec -- cross-env SNAPSHOT=match rollup --config ../../rollup.config.js && [ -z \"$TRAVIS\" ] || codecov",
18+
"check-snapshots": "lerna exec -- cross-env SNAPSHOT=match rollup --config ../../rollup.config.js",
19+
"posttest": "yarn check-snapshots && [ -z \"$TRAVIS\" ] || codecov",
1920
"codecov": "codecov",
2021
"bench": "cross-env BENCHMARK=true karma start --single-run"
2122
},
@@ -70,7 +71,7 @@
7071
"eslint-config-prettier": "^2.9.0",
7172
"eslint-plugin-flowtype": "^2.29.1",
7273
"expect.js": "^0.3.1",
73-
"flow-bin": "^0.73.0",
74+
"flow-bin": "^0.83.0",
7475
"json-loader": "^0.5.4",
7576
"karma": "^1.3.0",
7677
"karma-benchmark": "^0.6.0",

‎packages/jss-plugin-cache/.size-snapshot.json‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
{
22
"dist/jss-plugin-cache.js": {
3-
"bundled": 1700,
4-
"minified": 727,
5-
"gzipped": 411
3+
"bundled": 1066,
4+
"minified": 518,
5+
"gzipped": 331
66
},
77
"dist/jss-plugin-cache.min.js": {
8-
"bundled": 1700,
9-
"minified": 727,
10-
"gzipped": 411
8+
"bundled": 1066,
9+
"minified": 518,
10+
"gzipped": 331
1111
},
1212
"dist/jss-plugin-cache.cjs.js": {
13-
"bundled": 1334,
14-
"minified": 588,
15-
"gzipped": 351
13+
"bundled": 748,
14+
"minified": 371,
15+
"gzipped": 258
1616
},
1717
"dist/jss-plugin-cache.esm.js": {
18-
"bundled": 1252,
19-
"minified": 519,
20-
"gzipped": 300,
18+
"bundled": 666,
19+
"minified": 302,
20+
"gzipped": 215,
2121
"treeshaked": {
2222
"rollup": {
2323
"code": 0,

‎packages/jss-plugin-cache/readme.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@ in general.
1010

1111
[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)
1212

13+
## Polyfills
14+
15+
1. This plugin is using a `WeakMap`. If you support browsers which do not support WeakMap, you will have to include a polyfill.
16+
1317
## Caveats
1418

1519
1. Don't use it if you mutate your `styles`.

0 commit comments

Comments
 (0)
⚡