Skip to content

Fix fallbacks support in jss-plugin-vendor-prefixer #1198

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kof merged 3 commits into from
Sep 22, 2019
Merged

Fix fallbacks support in jss-plugin-vendor-prefixer #1198

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5e5aaca
fix fallbacks support in jss-plugin-vendor-prefixer
kof Sep 22, 2019
3258985
add changelog
kof Sep 22, 2019
10be616
test fallbacks with object
kof Sep 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions changelog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ Since you are interested in what happens next, in case, you work for a for-profi
## Bug fixes

- [react-jss] Add fallback for `Number.MIN_SAFE_INTEGER`, because not supported by IE <= 11 ([1197](https://github.com/cssinjs/jss/pull/1197))
- [jss-plugin-vendor-prefixer] Fix `fallbacks` syntax support regression ([1198](https://github.com/cssinjs/jss/pull/1198))

## 10.0.0-alpha.26 (2019-9-22)

Expand Down
12 changes: 6 additions & 6 deletions packages/css-jss/.size-snapshot.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{
"dist/css-jss.js": {
"bundled": 57635,
"minified": 20287,
"gzipped": 6833
"bundled": 57848,
"minified": 20363,
"gzipped": 6871
},
"dist/css-jss.min.js": {
"bundled": 56873,
"minified": 19825,
"gzipped": 6619
"bundled": 57086,
"minified": 19901,
"gzipped": 6656
},
"dist/css-jss.cjs.js": {
"bundled": 2919,
Expand Down
24 changes: 12 additions & 12 deletions packages/jss-plugin-vendor-prefixer/.size-snapshot.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
{
"dist/jss-plugin-vendor-prefixer.js": {
"bundled": 17778,
"minified": 5702,
"gzipped": 2224
"bundled": 17991,
"minified": 5778,
"gzipped": 2255
},
"dist/jss-plugin-vendor-prefixer.min.js": {
"bundled": 17778,
"minified": 5702,
"gzipped": 2224
"bundled": 17991,
"minified": 5778,
"gzipped": 2255
},
"dist/jss-plugin-vendor-prefixer.cjs.js": {
"bundled": 1375,
"minified": 627,
"gzipped": 360
"bundled": 1574,
"minified": 703,
"gzipped": 406
},
"dist/jss-plugin-vendor-prefixer.esm.js": {
"bundled": 1325,
"minified": 574,
"gzipped": 319,
"bundled": 1524,
"minified": 650,
"gzipped": 366,
"treeshaked": {
"rollup": {
"code": 31,
Expand Down
15 changes: 11 additions & 4 deletions packages/jss-plugin-vendor-prefixer/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,13 @@ export default function jssVendorPrefixer(): Plugin {
}
}

function onProcessStyle(style, rule) {
if (rule.type !== 'style') return style

function prefixStyle(style) {
for (const prop in style) {
const value = style[prop]

if (prop === 'fallbacks' && Array.isArray(value)) {
Copy link
Copy Markdown
Member

@HenriBeck HenriBeck Sep 22, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we also handle fallbacks which are just an object?

Copy link
Copy Markdown
Member Author

@kof kof Sep 22, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

adding a test

Copy link
Copy Markdown
Member Author

@kof kof Sep 22, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added a test, it already works.

style[prop] = value.map(prefixStyle)
continue
}
let changeProp = false
const supportedProp = vendor.supportedProperty(prop)
if (supportedProp && supportedProp !== prop) changeProp = true
Expand All @@ -38,6 +39,12 @@ export default function jssVendorPrefixer(): Plugin {
return style
}

function onProcessStyle(style, rule) {
if (rule.type !== 'style') return style

return prefixStyle(style)
}

function onChangeValue(value, prop) {
return vendor.supportedValue(prop, toCssValue(value)) || value
}
Expand Down
18 changes: 18 additions & 0 deletions packages/jss-plugin-vendor-prefixer/src/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import expect from 'expect.js'
import {create} from 'jss'
import * as cssVendor from 'css-vendor'
import browser from 'detect-browser'
import {stripIndent} from 'common-tags'
import functionPlugin from 'jss-plugin-rule-value-function'

import vendorPrefixer from './index'
Expand Down Expand Up @@ -162,4 +163,21 @@ describe('jss-plugin-vendor-prefixer', () => {
expect(sheet.toString()).to.be(`.a-id {\n display: ${supportedValue};\n}`)
})
})

describe('prefix fallbacks', () => {
it('should prefix array of objects', () => {
const sheet = jss.createStyleSheet({
a: {
display: 'run-in',
fallbacks: [{display: 'inline'}]
}
})
expect(sheet.toString()).to.be(stripIndent`
.a-id {
display: inline;
display: run-in;
}
`)
})
})
})
12 changes: 6 additions & 6 deletions packages/jss-preset-default/.size-snapshot.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{
"dist/jss-preset-default.js": {
"bundled": 54879,
"minified": 19521,
"gzipped": 6486
"bundled": 55092,
"minified": 19597,
"gzipped": 6524
},
"dist/jss-preset-default.min.js": {
"bundled": 54117,
"minified": 19059,
"gzipped": 6271
"bundled": 54330,
"minified": 19135,
"gzipped": 6310
},
"dist/jss-preset-default.cjs.js": {
"bundled": 1329,
Expand Down
12 changes: 6 additions & 6 deletions packages/jss-starter-kit/.size-snapshot.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{
"dist/jss-starter-kit.js": {
"bundled": 70421,
"minified": 29561,
"gzipped": 9109
"bundled": 70634,
"minified": 29637,
"gzipped": 9145
},
"dist/jss-starter-kit.min.js": {
"bundled": 69659,
"minified": 29099,
"gzipped": 8896
"bundled": 69872,
"minified": 29175,
"gzipped": 8929
},
"dist/jss-starter-kit.cjs.js": {
"bundled": 2592,
Expand Down
12 changes: 6 additions & 6 deletions packages/react-jss/.size-snapshot.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{
"dist/react-jss.js": {
"bundled": 169164,
"minified": 58306,
"gzipped": 19067
"bundled": 169377,
"minified": 58382,
"gzipped": 19100
},
"dist/react-jss.min.js": {
"bundled": 112488,
"minified": 41697,
"gzipped": 14145
"bundled": 112701,
"minified": 41773,
"gzipped": 14177
},
"dist/react-jss.cjs.js": {
"bundled": 27027,
Expand Down
⚡