Skip to content
Closed
Show file tree
Hide file tree
Changes from 9 commits
Commits
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
3 changes: 2 additions & 1 deletion .prettierrc
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,6 @@
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": false,
"printWidth": 100
"printWidth": 100,
"arrowParens": "always"
Copy link
Copy Markdown
Member Author

@seiyab seiyab Nov 8, 2021

Choose a reason for hiding this comment

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

I saw you added parentheses, that is removed by Prettier that runs on pre-commit.
So I changed this configuration to prevent removing parentheses from Prettier.
c60f395

I found lint you committed is more likely written by Prettier v2 rather than v1 installed by devDependency.
When I accidentally run prettier v2 installed globally in my machine and the result was similar to c60f395 .
arrowParens is "always" by default in Prettier v2.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

lets upgrade prettier

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

upgraded 👍

}
16 changes: 11 additions & 5 deletions docs/jss-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -196,12 +196,18 @@ const sheet2 = jss.createStyleSheet({}, {index: 1, meta: 'sheet-2'}).attach()

## Add a rule to an existing Style Sheet

`sheet.addRule([name], style, [options])`
`sheet.addRule(nameOrSelector, style, [options])`

This function will use [insertRule](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule) API if your Style Sheet is already attached to the DOM. In this case **you will not see this CSS Rule in the "Elements" view of the dev tools**. You can always verify correct rendering by using the selector on some DOM Node and watch styles applied as well as in the "Styles" inspector.

If you use `addRule()` before you call `attach()`, styles will be rendered in one batch using `textContent` API which will not have the above-described side effect.

## Replace a rule in an existing Style Sheet

`sheet.replaceRule(nameOrSelector, style, [options])`

Same as `sheet.addRule(...)` but replaces a rule with the same name if found.

### Options

- `index` - index where the rule should be added, by default, rules get pushed at the end.
Expand Down Expand Up @@ -273,11 +279,11 @@ import jss from 'jss'
const styles = {
container: {
height: 200,
width: (data) => data.width
width: data => data.width
},
button: {
color: (data) => data.button.color,
padding: (data) => data.button.padding
color: data => data.button.color,
padding: data => data.button.padding
}
}

Expand Down Expand Up @@ -451,7 +457,7 @@ import {getDynamicStyles} from 'jss'
const dynamicStyles = getDynamicStyles({
button: {
fontSize: 12,
color: (data) => data.color
color: data => data.color
}
})

Expand Down
12 changes: 6 additions & 6 deletions packages/css-jss/.size-snapshot.json
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{
"css-jss.js": {
"bundled": 59702,
"minified": 21830,
"gzipped": 7354
"bundled": 60304,
"minified": 22038,
"gzipped": 7392
},
"css-jss.min.js": {
"bundled": 58627,
"minified": 21207,
"gzipped": 7075
"bundled": 59229,
"minified": 21415,
"gzipped": 7111
},
"css-jss.cjs.js": {
"bundled": 2949,
Expand Down
24 changes: 12 additions & 12 deletions packages/jss-plugin-global/.size-snapshot.json
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
{
"jss-plugin-global.js": {
"bundled": 5002,
"minified": 2186,
"gzipped": 914
"bundled": 5308,
"minified": 2315,
"gzipped": 934
},
"jss-plugin-global.min.js": {
"bundled": 5002,
"minified": 2186,
"gzipped": 914
"bundled": 5308,
"minified": 2315,
"gzipped": 934
},
"jss-plugin-global.cjs.js": {
"bundled": 4277,
"minified": 2312,
"gzipped": 886
"bundled": 4565,
"minified": 2441,
"gzipped": 905
},
"jss-plugin-global.esm.js": {
"bundled": 3931,
"minified": 2038,
"gzipped": 783,
"bundled": 4219,
"minified": 2167,
"gzipped": 802,
"treeshaked": {
"rollup": {
"code": 55,
Expand Down
3 changes: 2 additions & 1 deletion packages/jss-plugin-global/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@
"check-snapshot": "node ../../scripts/match-snapshot.js"
},
"devDependencies": {
"jss-plugin-nested": "10.8.2"
"jss-plugin-nested": "10.8.2",
"jss-v10_8_0": "npm:jss@10.8.0"
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

this looks strange

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

What does strange mean?

  • Doesn't work well?
  • Not good idea?

Removing tests with older jss is OK with me.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I never seen npm: prefix in dependencies and naming with underscore jss-v10_8_0 like this,
but yeah, lets figure out if we really need to have this compatibility logic and tests

},
"dependencies": {
"@babel/runtime": "^7.3.1",
Expand Down
11 changes: 10 additions & 1 deletion packages/jss-plugin-global/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,15 @@ class GlobalContainerRule {
return rule
}

/**
* Replace rule, run plugins.
*/
replaceRule(name, style, options) {
const newRule = this.rules.replace(name, style, options)
if (newRule) this.options.jss.plugins.onProcessRule(newRule)
return newRule
}

/**
* Get index of a rule.
*/
Expand Down Expand Up @@ -146,7 +155,7 @@ export default function jssGlobal() {
}
}

if (options.scoped === false) {
if (!options.selector && options.scoped === false) {
options.selector = name
}

Expand Down
118 changes: 118 additions & 0 deletions packages/jss-plugin-global/src/index.test.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {stripIndent} from 'common-tags'
import expect from 'expect.js'
import {create} from 'jss'
import {create as oldCreate} from 'jss-v10_8_0'
import nested from 'jss-plugin-nested'

import global from './index'
Expand Down Expand Up @@ -41,6 +42,94 @@ describe('jss-plugin-global', () => {
it('should remove whitespaces', () => {
expect(sheet.toString({format: false})).to.be('a{color:red;}body{color:green;}')
})

describe('addRule', () => {
let globalRule
beforeEach(() => {
globalRule = sheet.getRule('@global')
globalRule.addRule('button', {margin: 0})
globalRule.addRule('li', {float: 'left'})
})

it('should add rule', () => {
expect(globalRule.getRule('button')).to.not.be(undefined)
expect(globalRule.getRule('li')).to.not.be(undefined)
})

it('should generate correct CSS', () => {
expect(sheet.toString()).to.be(stripIndent`
a {
color: red;
}
body {
color: green;
}
button {
margin: 0;
}
li {
float: left;
}
`)
})
})

describe('replaceRule', () => {
let globalRule
let previousA
beforeEach(() => {
globalRule = sheet.getRule('@global')
previousA = globalRule.getRule('a')
globalRule.replaceRule('a', {color: 'yellow'})
globalRule.replaceRule('li', {float: 'left'})
})

it('should replace and add rule', () => {
expect(globalRule.getRule('a')).to.not.be(previousA)
expect(globalRule.getRule('li')).to.not.be(undefined)
})

it('should generate correct CSS', () => {
expect(sheet.toString()).to.be(stripIndent`
a {
color: yellow;
}
body {
color: green;
}
li {
float: left;
}
`)
})
})

describe('addRule / replaceRule with selector', () => {
let globalRule
beforeEach(() => {
globalRule = sheet.getRule('@global')
globalRule.addRule('arbitrary-name-1', {color: 'red'}, {selector: 'span'})
globalRule.replaceRule('arbitrary-name-2', {float: 'left'}, {selector: 'ul'})
globalRule.replaceRule('a', {display: 'block'}, {selector: 'div'})
})

it('should generate correct CSS', () => {
expect(sheet.toString()).to.be(stripIndent`
div {
display: block;
}
body {
color: green;
}
span {
color: red;
}
ul {
float: left;
}
`)
})
})
})

describe('@global linked', () => {
Expand Down Expand Up @@ -420,4 +509,33 @@ describe('jss-plugin-global', () => {
)
})
})

describe('backward compatibility', () => {
let oldJss

beforeEach(() => {
oldJss = oldCreate(settings).use(global())
})

it('should replace rule on replaceRule even if jss core doesn\'t implement replaceRule', () => {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

why do we need this test? react-jss comes bundled with jss core, so its there, if somebody is using an incompatible version - its on them

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

we should communicate incompatibility in the changelog, make sure what we expect to work - works, maintaining compatibility logic and compatibility tests feels like a lot of future work

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

maybe we could throw an error if replaceRule doesn't exist and say versions are incompatible, to communicate to the user the problem clearly

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

That makes sense.
I removed tests that use incompatible version.

// this is because RuleList that plugin uses has same version with plugin according to dependency
// even if user accidentally use newer plugin with older jss-core

const sheet = oldJss.createStyleSheet({
'@global': {
a: {color: 'red'},
body: {top: '0px'},
}
})
sheet.getRule('@global').replaceRule('a', {color: 'blue'})
expect(sheet.toString()).to.be(stripIndent`
a {
color: blue;
}
body {
top: 0px;
}
`)
})
})
})
24 changes: 12 additions & 12 deletions packages/jss-plugin-nested/.size-snapshot.json
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
{
"jss-plugin-nested.js": {
"bundled": 4456,
"minified": 1618,
"gzipped": 881
"bundled": 4752,
"minified": 1697,
"gzipped": 907
},
"jss-plugin-nested.min.js": {
"bundled": 4016,
"minified": 1402,
"gzipped": 754
"bundled": 4312,
"minified": 1481,
"gzipped": 779
},
"jss-plugin-nested.cjs.js": {
"bundled": 3729,
"minified": 1578,
"gzipped": 808
"bundled": 4029,
"minified": 1681,
"gzipped": 835
},
"jss-plugin-nested.esm.js": {
"bundled": 3310,
"minified": 1255,
"gzipped": 693,
"bundled": 3590,
"minified": 1341,
"gzipped": 719,
"treeshaked": {
"rollup": {
"code": 64,
Expand Down
4 changes: 3 additions & 1 deletion packages/jss-plugin-nested/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,9 @@
"check-snapshot": "node ../../scripts/match-snapshot.js"
},
"devDependencies": {
"jss-plugin-rule-value-function": "10.8.2"
"jss-plugin-rule-value-function": "10.8.2",
"jss-plugin-global": "10.8.2",
"jss-v10_8_0": "npm:jss@10.8.0"
},
"dependencies": {
"@babel/runtime": "^7.3.1",
Expand Down
13 changes: 9 additions & 4 deletions packages/jss-plugin-nested/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,8 @@ export default function jssNested() {

warning(
false,
`[JSS] Could not find the referenced rule "${key}" in "${
container.options.meta || container.toString()
}".`
`[JSS] Could not find the referenced rule "${key}" in "${container.options.meta ||
container.toString()}".`
)
return key
}
Expand Down Expand Up @@ -88,7 +87,13 @@ export default function jssNested() {
// Replace all $refs.
selector = selector.replace(refRegExp, replaceRef)

container.addRule(selector, style[prop], {...options, selector})
const name = `${styleRule.key}-${prop}`
if ('replaceRule' in container) {
// for backward compatibility
container.replaceRule(name, style[prop], {...options, selector})
} else {
container.addRule(name, style[prop], {...options, selector})
}
} else if (isNestedConditional) {
// Place conditional right after the parent rule to ensure right ordering.
container
Expand Down
Loading