Completely updated React, fixed #11, (hopefully)

This commit is contained in:
2018-03-04 19:11:49 -05:00
parent 6e0afd6e2a
commit 34e5f5139a
13674 changed files with 333464 additions and 473223 deletions

View File

@@ -1,4 +0,0 @@
src
bench
coverage
tmp

View File

@@ -1,3 +1,15 @@
## 6.2.0 / 2018-02-06
- support function values
## 6.1.0 / 2017-12-16
- remove isObservable checks, update deps
## 6.0.0 / 2017-09-30
- support jss 9
## 5.0.0 / 2017-06-20
- support jss 8

View File

@@ -73,6 +73,68 @@ return /******/ (function(modules) { // webpackBootstrap
var isObject = function isObject(obj) {
return obj && (typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) === 'object' && !Array.isArray(obj);
};
var valueNs = 'extendCurrValue' + Date.now();
function mergeExtend(style, rule, sheet, newStyle) {
var extendType = _typeof(style.extend);
// Extend using a rule name.
if (extendType === 'string') {
if (!sheet) return;
var refRule = sheet.getRule(style.extend);
if (!refRule) return;
if (refRule === rule) {
(0, _warning2['default'])(false, '[JSS] A rule tries to extend itself \r\n%s', rule);
return;
}
var parent = refRule.options.parent;
if (parent) {
var originalStyle = parent.rules.raw[style.extend];
extend(originalStyle, rule, sheet, newStyle);
}
return;
}
// Extend using an array of objects.
if (Array.isArray(style.extend)) {
for (var index = 0; index < style.extend.length; index++) {
extend(style.extend[index], rule, sheet, newStyle);
}
return;
}
// Extend is a style object.
for (var prop in style.extend) {
if (prop === 'extend') {
extend(style.extend.extend, rule, sheet, newStyle);
continue;
}
if (isObject(style.extend[prop])) {
if (!(prop in newStyle)) newStyle[prop] = {};
extend(style.extend[prop], rule, sheet, newStyle[prop]);
continue;
}
newStyle[prop] = style.extend[prop];
}
}
function mergeRest(style, rule, sheet, newStyle) {
// Copy base style.
for (var prop in style) {
if (prop === 'extend') continue;
if (isObject(newStyle[prop]) && isObject(style[prop])) {
extend(style[prop], rule, sheet, newStyle[prop]);
continue;
}
if (isObject(style[prop])) {
newStyle[prop] = extend(style[prop], rule, sheet);
continue;
}
newStyle[prop] = style[prop];
}
}
/**
* Recursively extend styles.
@@ -80,44 +142,8 @@ return /******/ (function(modules) { // webpackBootstrap
function extend(style, rule, sheet) {
var newStyle = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
if (typeof style.extend === 'string') {
if (sheet) {
var refRule = sheet.getRule(style.extend);
if (refRule) {
if (refRule === rule) (0, _warning2['default'])(false, '[JSS] A rule tries to extend itself \r\n%s', rule);else if (refRule.options.parent) {
var originalStyle = refRule.options.parent.rules.raw[style.extend];
extend(originalStyle, rule, sheet, newStyle);
}
}
}
} else if (Array.isArray(style.extend)) {
for (var index = 0; index < style.extend.length; index++) {
extend(style.extend[index], rule, sheet, newStyle);
}
} else {
for (var prop in style.extend) {
if (prop === 'extend') {
extend(style.extend.extend, rule, sheet, newStyle);
} else if (isObject(style.extend[prop])) {
if (!newStyle[prop]) newStyle[prop] = {};
extend(style.extend[prop], rule, sheet, newStyle[prop]);
} else {
newStyle[prop] = style.extend[prop];
}
}
}
// Copy base style.
for (var _prop in style) {
if (_prop === 'extend') continue;
if (isObject(newStyle[_prop]) && isObject(style[_prop])) {
extend(style[_prop], rule, sheet, newStyle[_prop]);
} else if (isObject(style[_prop])) {
newStyle[_prop] = extend(style[_prop], rule, sheet);
} else {
newStyle[_prop] = style[_prop];
}
}
mergeExtend(style, rule, sheet, newStyle);
mergeRest(style, rule, sheet, newStyle);
return newStyle;
}
@@ -129,10 +155,32 @@ return /******/ (function(modules) { // webpackBootstrap
*/
function jssExtend() {
function onProcessStyle(style, rule, sheet) {
return style.extend ? extend(style, rule, sheet) : style;
if ('extend' in style) return extend(style, rule, sheet);
return style;
}
return { onProcessStyle: onProcessStyle };
function onChangeValue(value, prop, rule) {
if (prop !== 'extend') return value;
// Value is empty, remove properties set previously.
if (value == null || value === false) {
for (var key in rule[valueNs]) {
rule.prop(key, null);
}
rule[valueNs] = null;
return null;
}
for (var _key in value) {
rule.prop(_key, value[_key]);
}
rule[valueNs] = value;
// Make sure we don't set the value in the core.
return null;
}
return { onProcessStyle: onProcessStyle, onChangeValue: onChangeValue };
}
/***/ }),

File diff suppressed because one or more lines are too long

View File

@@ -1,2 +1,2 @@
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.jssExtend=t():e.jssExtend=t()}(this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={exports:{},id:o,loaded:!1};return e[o].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function r(e,t,n){var o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};if("string"==typeof e.extend){if(n){var f=n.getRule(e.extend);if(f)if(f===t)(0,d.default)(!1,"[JSS] A rule tries to extend itself \r\n%s",t);else if(f.options.parent){var i=f.options.parent.rules.raw[e.extend];r(i,t,n,o)}}}else if(Array.isArray(e.extend))for(var u=0;u<e.extend.length;u++)r(e.extend[u],t,n,o);else for(var c in e.extend)"extend"===c?r(e.extend.extend,t,n,o):s(e.extend[c])?(o[c]||(o[c]={}),r(e.extend[c],t,n,o[c])):o[c]=e.extend[c];for(var l in e)"extend"!==l&&(s(o[l])&&s(e[l])?r(e[l],t,n,o[l]):s(e[l])?o[l]=r(e[l],t,n):o[l]=e[l]);return o}function f(){function e(e,t,n){return e.extend?r(e,t,n):e}return{onProcessStyle:e}}Object.defineProperty(t,"__esModule",{value:!0});var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.default=f;var u=n(1),d=o(u),s=function(e){return e&&"object"===("undefined"==typeof e?"undefined":i(e))&&!Array.isArray(e)}},function(e,t,n){"use strict";var o=function(){};e.exports=o}])});
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.jssExtend=t():e.jssExtend=t()}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t,n,r){var o=d(e.extend);if("string"!==o)if(Array.isArray(e.extend))for(var u=0;u<e.extend.length;u++)f(e.extend[u],t,n,r);else for(var i in e.extend)"extend"!==i?a(e.extend[i])?(i in r||(r[i]={}),f(e.extend[i],t,n,r[i])):r[i]=e.extend[i]:f(e.extend.extend,t,n,r);else{if(!n)return;var l=n.getRule(e.extend);if(!l)return;if(l===t)return void(0,s.default)(!1,"[JSS] A rule tries to extend itself \r\n%s",t);var c=l.options.parent;if(c){var p=c.rules.raw[e.extend];f(p,t,n,r)}}}function u(e,t,n,r){for(var o in e)"extend"!==o&&(a(r[o])&&a(e[o])?f(e[o],t,n,r[o]):a(e[o])?r[o]=f(e[o],t,n):r[o]=e[o])}function f(e,t,n){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};return o(e,t,n,r),u(e,t,n,r),r}function i(){function e(e,t,n){return"extend"in e?f(e,t,n):e}function t(e,t,n){if("extend"!==t)return e;if(null==e||e===!1){for(var r in n[c])n.prop(r,null);return n[c]=null,null}for(var o in e)n.prop(o,e[o]);return n[c]=e,null}return{onProcessStyle:e,onChangeValue:t}}Object.defineProperty(t,"__esModule",{value:!0});var d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.default=i;var l=n(1),s=r(l),a=function(e){return e&&"object"===("undefined"==typeof e?"undefined":d(e))&&!Array.isArray(e)},c="extendCurrValue"+Date.now()},function(e,t,n){"use strict";var r=function(){};e.exports=r}])});
//# sourceMappingURL=jss-extend.min.js.map

File diff suppressed because one or more lines are too long

View File

@@ -17,6 +17,68 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'd
var isObject = function isObject(obj) {
return obj && (typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) === 'object' && !Array.isArray(obj);
};
var valueNs = 'extendCurrValue' + Date.now();
function mergeExtend(style, rule, sheet, newStyle) {
var extendType = _typeof(style.extend);
// Extend using a rule name.
if (extendType === 'string') {
if (!sheet) return;
var refRule = sheet.getRule(style.extend);
if (!refRule) return;
if (refRule === rule) {
(0, _warning2['default'])(false, '[JSS] A rule tries to extend itself \r\n%s', rule);
return;
}
var parent = refRule.options.parent;
if (parent) {
var originalStyle = parent.rules.raw[style.extend];
extend(originalStyle, rule, sheet, newStyle);
}
return;
}
// Extend using an array of objects.
if (Array.isArray(style.extend)) {
for (var index = 0; index < style.extend.length; index++) {
extend(style.extend[index], rule, sheet, newStyle);
}
return;
}
// Extend is a style object.
for (var prop in style.extend) {
if (prop === 'extend') {
extend(style.extend.extend, rule, sheet, newStyle);
continue;
}
if (isObject(style.extend[prop])) {
if (!(prop in newStyle)) newStyle[prop] = {};
extend(style.extend[prop], rule, sheet, newStyle[prop]);
continue;
}
newStyle[prop] = style.extend[prop];
}
}
function mergeRest(style, rule, sheet, newStyle) {
// Copy base style.
for (var prop in style) {
if (prop === 'extend') continue;
if (isObject(newStyle[prop]) && isObject(style[prop])) {
extend(style[prop], rule, sheet, newStyle[prop]);
continue;
}
if (isObject(style[prop])) {
newStyle[prop] = extend(style[prop], rule, sheet);
continue;
}
newStyle[prop] = style[prop];
}
}
/**
* Recursively extend styles.
@@ -24,44 +86,8 @@ var isObject = function isObject(obj) {
function extend(style, rule, sheet) {
var newStyle = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
if (typeof style.extend === 'string') {
if (sheet) {
var refRule = sheet.getRule(style.extend);
if (refRule) {
if (refRule === rule) (0, _warning2['default'])(false, '[JSS] A rule tries to extend itself \r\n%s', rule);else if (refRule.options.parent) {
var originalStyle = refRule.options.parent.rules.raw[style.extend];
extend(originalStyle, rule, sheet, newStyle);
}
}
}
} else if (Array.isArray(style.extend)) {
for (var index = 0; index < style.extend.length; index++) {
extend(style.extend[index], rule, sheet, newStyle);
}
} else {
for (var prop in style.extend) {
if (prop === 'extend') {
extend(style.extend.extend, rule, sheet, newStyle);
} else if (isObject(style.extend[prop])) {
if (!newStyle[prop]) newStyle[prop] = {};
extend(style.extend[prop], rule, sheet, newStyle[prop]);
} else {
newStyle[prop] = style.extend[prop];
}
}
}
// Copy base style.
for (var _prop in style) {
if (_prop === 'extend') continue;
if (isObject(newStyle[_prop]) && isObject(style[_prop])) {
extend(style[_prop], rule, sheet, newStyle[_prop]);
} else if (isObject(style[_prop])) {
newStyle[_prop] = extend(style[_prop], rule, sheet);
} else {
newStyle[_prop] = style[_prop];
}
}
mergeExtend(style, rule, sheet, newStyle);
mergeRest(style, rule, sheet, newStyle);
return newStyle;
}
@@ -73,8 +99,30 @@ function extend(style, rule, sheet) {
*/
function jssExtend() {
function onProcessStyle(style, rule, sheet) {
return style.extend ? extend(style, rule, sheet) : style;
if ('extend' in style) return extend(style, rule, sheet);
return style;
}
return { onProcessStyle: onProcessStyle };
function onChangeValue(value, prop, rule) {
if (prop !== 'extend') return value;
// Value is empty, remove properties set previously.
if (value == null || value === false) {
for (var key in rule[valueNs]) {
rule.prop(key, null);
}
rule[valueNs] = null;
return null;
}
for (var _key in value) {
rule.prop(_key, value[_key]);
}
rule[valueNs] = value;
// Make sure we don't set the value in the core.
return null;
}
return { onProcessStyle: onProcessStyle, onChangeValue: onChangeValue };
}

View File

@@ -244,7 +244,7 @@ describe('jss-extend', function () {
});
});
describe('extend using rule name', function () {
describe('extend using rule name with cyclic warning', function () {
var sheet = void 0;
beforeEach(function () {
@@ -262,4 +262,64 @@ describe('jss-extend', function () {
(0, _expect2['default'])(sheet.toString()).to.be('.a-id {\n' + ' width: 1px;\n' + '}');
});
});
describe('extend inside of a function rule', function () {
var sheet = void 0;
beforeEach(function () {
var styles = {
a: function a(data) {
return {
height: '200px',
extend: data.redContainer
};
}
};
sheet = jss.createStyleSheet(styles, { link: true }).attach();
sheet.update({
redContainer: {
background: 'red'
}
});
});
it('should have correct output', function () {
(0, _expect2['default'])(sheet.getRule('a')).to.not.be(undefined);
(0, _expect2['default'])(sheet.toString()).to.be('.a-id {\n' + ' height: 200px;\n' + ' background: red;\n' + '}');
});
});
describe('extend function', function () {
var sheet = void 0;
beforeEach(function () {
var b = { display: 'block' };
sheet = jss.createStyleSheet({
a: {
extend: function extend(data) {
return data.block && b;
},
color: 'red',
'& span': {
extend: function extend(data) {
return data.block && b;
},
color: 'blue'
}
}
});
});
it('should have correct output', function () {
(0, _expect2['default'])(sheet.getRule('a')).to.not.be(undefined);
sheet.update({ block: true });
(0, _expect2['default'])(sheet.toString()).to.be('.a-id {\n' + ' color: red;\n' + ' display: block;\n' + '}\n' + '.a-id span {\n' + ' color: blue;\n' + ' display: block;\n' + '}');
sheet.update({ block: false });
(0, _expect2['default'])(sheet.toString()).to.be('.a-id {\n' + ' color: red;\n' + '}\n' + '.a-id span {\n' + ' color: blue;\n' + '}');
});
});
});

View File

@@ -1,42 +1,43 @@
{
"name": "jss-extend",
"description": "JSS plugin that enables inheritance",
"version": "5.0.0",
"_args": [
[
"jss-extend@6.2.0",
"C:\\Users\\deranjer\\go\\src\\github.com\\deranjer\\goTorrent\\goTorrentWebUI"
]
],
"_from": "jss-extend@6.2.0",
"_id": "jss-extend@6.2.0",
"_inBundle": false,
"_integrity": "sha512-YszrmcB6o9HOsKPszK7NeDBNNjVyiW864jfoiHoMlgMIg2qlxKw70axZHqgczXHDcoyi/0/ikP1XaHDPRvYtEA==",
"_location": "/material-ui/jss-extend",
"_phantomChildren": {},
"_requested": {
"type": "version",
"registry": true,
"raw": "jss-extend@6.2.0",
"name": "jss-extend",
"escapedName": "jss-extend",
"rawSpec": "6.2.0",
"saveSpec": null,
"fetchSpec": "6.2.0"
},
"_requiredBy": [
"/material-ui/jss-preset-default"
],
"_resolved": "https://registry.npmjs.org/jss-extend/-/jss-extend-6.2.0.tgz",
"_spec": "6.2.0",
"_where": "C:\\Users\\deranjer\\go\\src\\github.com\\deranjer\\goTorrent\\goTorrentWebUI",
"author": {
"name": "Oleg Slobodskoi",
"email": "oleg008@gmail.com"
},
"repository": {
"type": "git",
"url": "git@github.com:cssinjs/jss-extend.git"
"bugs": {
"url": "https://github.com/cssinjs/jss-extend/issues"
},
"keywords": [
"jss",
"plugin",
"extend",
"css-in-js",
"cssinjs",
"css in js"
],
"scripts": {
"all": "npm run lint && npm run test && npm run build",
"build": "npm run clean && npm run build:lib && npm run build:tests && npm run build:dist",
"build:lib": "babel src --out-dir lib",
"build:tests": "npm run build:tests:lib && npm run build:tests:local",
"build:tests:lib": "cross-env NODE_ENV=test babel src --out-dir tests",
"build:tests:local": "cross-env NODE_ENV=test webpack src/index.test.js tmp/tests.js",
"build:dist": "npm run build:dist:max && npm run build:dist:min",
"build:dist:max": "cross-env NODE_ENV=development webpack src/index.js dist/jss-extend.js",
"build:dist:min": "cross-env NODE_ENV=production webpack src/index.js dist/jss-extend.min.js",
"clean": "rimraf {lib,dist,tests,tmp}/*",
"lint": "eslint ./src",
"lint:staged": "lint-staged",
"test": "cross-env NODE_ENV=test karma start --single-run ",
"test:watch": "cross-env NODE_ENV=test karma start",
"prepublishOnly": "npm run all"
"dependencies": {
"warning": "^3.0.0"
},
"license": "MIT",
"main": "./lib/index.js",
"description": "JSS plugin that enables mixing in styles.",
"devDependencies": {
"babel-cli": "^6.5.1",
"babel-core": "^6.5.1",
@@ -57,9 +58,9 @@
"eslint-plugin-react": "^6.5.0",
"expect.js": "^0.3.1",
"json-loader": "^0.5.4",
"jss": "^8.0.0",
"jss-expand": "^4.0.0",
"jss-nested": "^5.0.0",
"jss": "^9.7.0",
"jss-expand": "^5.1.0",
"jss-nested": "^6.0.1",
"karma": "^1.1.1",
"karma-benchmark": "^0.6.0",
"karma-benchmark-reporter": "^0.1.1",
@@ -76,19 +77,51 @@
"mocha": "^3.0.2",
"pre-commit": "^1.1.3",
"rimraf": "^2.5.4",
"webpack": "^1.12.2"
},
"peerDependencies": {
"jss": "^8.0.0"
"webpack": "^1.12.2",
"zen-observable": "^0.6.0"
},
"homepage": "https://github.com/cssinjs/jss-extend#readme",
"keywords": [
"jss",
"plugin",
"extend",
"css-in-js",
"cssinjs",
"css in js"
],
"license": "MIT",
"lint-staged": {
"./src/*.js": [
"eslint",
"git add"
]
},
"main": "./lib/index.js",
"name": "jss-extend",
"peerDependencies": {
"jss": "^9.7.0"
},
"pre-commit": "lint:staged",
"dependencies": {
"warning": "^3.0.0"
}
"repository": {
"type": "git",
"url": "git+ssh://git@github.com/cssinjs/jss-extend.git"
},
"scripts": {
"all": "npm run lint && npm run test && npm run build",
"build": "npm run clean && npm run build:lib && npm run build:tests && npm run build:dist",
"build:dist": "npm run build:dist:max && npm run build:dist:min",
"build:dist:max": "cross-env NODE_ENV=development webpack src/index.js dist/jss-extend.js",
"build:dist:min": "cross-env NODE_ENV=production webpack src/index.js dist/jss-extend.min.js",
"build:lib": "babel src --out-dir lib",
"build:tests": "npm run build:tests:lib && npm run build:tests:local",
"build:tests:lib": "cross-env NODE_ENV=test babel src --out-dir tests",
"build:tests:local": "cross-env NODE_ENV=test webpack src/index.test.js tmp/tests.js",
"clean": "rimraf {lib,dist,tests,tmp}/*",
"lint": "eslint ./src",
"lint:staged": "lint-staged",
"prepublishOnly": "npm run all",
"test": "cross-env NODE_ENV=test karma start --single-run ",
"test:watch": "cross-env NODE_ENV=test karma start"
},
"version": "6.2.0"
}

View File

@@ -1,46 +1,79 @@
# JSS plugin that enables inheritance
# JSS plugin that enables mixing in styles
[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)
This plugin implements a custom `extend` style property.
This plugin implements a custom property `extend` which allows you to mix in styles in various ways.
Value of `extend` property can be a string, object and array. If string is used, it will look for a rule with such a name. If object - plain rule object is expected, if array - an array of plain rule objects is expected.
Rule's own properties always take precedence over extended rules, so you can always override the extended definition.
## Examples
Style object own properties always take precedence over extended objects, so you can always override the extended definition. Exception is function values.
## Use style object reference
```javascript
const styles = {
redContainer: {
background: 'red'
},
container: {
extend: 'redContainer',
'font-size': '20px'
}
const buttonColor = {
color: 'green'
}
```
```javascript
const redContainer = {
const buttonTheme = {
extend: buttonColor
background: 'red'
}
const styles = {
container: {
extend: redContainer, // Can be an array of styles
'font-size': '20px'
button: {
extend: buttonTheme,
fontSize: '20px'
}
}
```
Compiles to:
## Use rule name from the current styles object
```css
.jss-23g44j5 {
background: red;
font-size: 20px;
```javascript
const styles = {
buttonColor: {
background: 'red'
},
button: {
extend: 'buttonColor',
fontSize: '20px'
}
}
```
## Use array of style objects
```javascript
const styles = {
button: {
extend: [{background: 'red'}, {color: 'green'}],
fontSize: '20px'
}
}
```
```javascript
const background = {background: 'red'}
const color = {color: 'green'}
const styles = {
button: {
extend: [background, color],
fontSize: '20px'
}
}
```
## Use function which returns a style object
Nested `extend` inside of the function is not supported. Will override other properties defined in the same rule.
```javascript
const styles = {
button: {
extend: (data) => ({
color: data.theme.color
}),
fontSize: '20px'
}
}
```

View File

@@ -18,6 +18,68 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'd
var isObject = function isObject(obj) {
return obj && (typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) === 'object' && !Array.isArray(obj);
};
var valueNs = 'extendCurrValue' + Date.now();
function mergeExtend(style, rule, sheet, newStyle) {
var extendType = _typeof(style.extend);
// Extend using a rule name.
if (extendType === 'string') {
if (!sheet) return;
var refRule = sheet.getRule(style.extend);
if (!refRule) return;
if (refRule === rule) {
_get__('warning')(false, '[JSS] A rule tries to extend itself \r\n%s', rule);
return;
}
var parent = refRule.options.parent;
if (parent) {
var originalStyle = parent.rules.raw[style.extend];
_get__('extend')(originalStyle, rule, sheet, newStyle);
}
return;
}
// Extend using an array of objects.
if (Array.isArray(style.extend)) {
for (var index = 0; index < style.extend.length; index++) {
_get__('extend')(style.extend[index], rule, sheet, newStyle);
}
return;
}
// Extend is a style object.
for (var prop in style.extend) {
if (prop === 'extend') {
_get__('extend')(style.extend.extend, rule, sheet, newStyle);
continue;
}
if (_get__('isObject')(style.extend[prop])) {
if (!(prop in newStyle)) newStyle[prop] = {};
_get__('extend')(style.extend[prop], rule, sheet, newStyle[prop]);
continue;
}
newStyle[prop] = style.extend[prop];
}
}
function mergeRest(style, rule, sheet, newStyle) {
// Copy base style.
for (var prop in style) {
if (prop === 'extend') continue;
if (_get__('isObject')(newStyle[prop]) && _get__('isObject')(style[prop])) {
_get__('extend')(style[prop], rule, sheet, newStyle[prop]);
continue;
}
if (_get__('isObject')(style[prop])) {
newStyle[prop] = _get__('extend')(style[prop], rule, sheet);
continue;
}
newStyle[prop] = style[prop];
}
}
/**
* Recursively extend styles.
@@ -25,44 +87,8 @@ var isObject = function isObject(obj) {
function extend(style, rule, sheet) {
var newStyle = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
if (typeof style.extend === 'string') {
if (sheet) {
var refRule = sheet.getRule(style.extend);
if (refRule) {
if (refRule === rule) _get__('warning')(false, '[JSS] A rule tries to extend itself \r\n%s', rule);else if (refRule.options.parent) {
var originalStyle = refRule.options.parent.rules.raw[style.extend];
_get__('extend')(originalStyle, rule, sheet, newStyle);
}
}
}
} else if (Array.isArray(style.extend)) {
for (var index = 0; index < style.extend.length; index++) {
_get__('extend')(style.extend[index], rule, sheet, newStyle);
}
} else {
for (var prop in style.extend) {
if (prop === 'extend') {
_get__('extend')(style.extend.extend, rule, sheet, newStyle);
} else if (_get__('isObject')(style.extend[prop])) {
if (!newStyle[prop]) newStyle[prop] = {};
_get__('extend')(style.extend[prop], rule, sheet, newStyle[prop]);
} else {
newStyle[prop] = style.extend[prop];
}
}
}
// Copy base style.
for (var _prop in style) {
if (_prop === 'extend') continue;
if (_get__('isObject')(newStyle[_prop]) && _get__('isObject')(style[_prop])) {
_get__('extend')(style[_prop], rule, sheet, newStyle[_prop]);
} else if (_get__('isObject')(style[_prop])) {
newStyle[_prop] = _get__('extend')(style[_prop], rule, sheet);
} else {
newStyle[_prop] = style[_prop];
}
}
_get__('mergeExtend')(style, rule, sheet, newStyle);
_get__('mergeRest')(style, rule, sheet, newStyle);
return newStyle;
}
@@ -74,10 +100,32 @@ function extend(style, rule, sheet) {
*/
function jssExtend() {
function onProcessStyle(style, rule, sheet) {
return style.extend ? _get__('extend')(style, rule, sheet) : style;
if ('extend' in style) return _get__('extend')(style, rule, sheet);
return style;
}
return { onProcessStyle: onProcessStyle };
function onChangeValue(value, prop, rule) {
if (prop !== 'extend') return value;
// Value is empty, remove properties set previously.
if (value == null || value === false) {
for (var key in rule[valueNs]) {
rule.prop(key, null);
}
rule[valueNs] = null;
return null;
}
for (var _key in value) {
rule.prop(_key, value[_key]);
}
rule[valueNs] = value;
// Make sure we don't set the value in the core.
return null;
}
return { onProcessStyle: onProcessStyle, onChangeValue: onChangeValue };
}
function _getGlobalObject() {
@@ -195,6 +243,12 @@ function _get_original__(variableName) {
case 'isObject':
return isObject;
case 'mergeExtend':
return mergeExtend;
case 'mergeRest':
return mergeRest;
}
return undefined;

View File

@@ -251,7 +251,7 @@ describe('jss-extend', function () {
});
});
describe('extend using rule name', function () {
describe('extend using rule name with cyclic warning', function () {
var sheet = void 0;
beforeEach(function () {
@@ -269,6 +269,66 @@ describe('jss-extend', function () {
_get__('expect')(sheet.toString()).to.be('.a-id {\n' + ' width: 1px;\n' + '}');
});
});
describe('extend inside of a function rule', function () {
var sheet = void 0;
beforeEach(function () {
var styles = {
a: function a(data) {
return {
height: '200px',
extend: data.redContainer
};
}
};
sheet = jss.createStyleSheet(styles, { link: true }).attach();
sheet.update({
redContainer: {
background: 'red'
}
});
});
it('should have correct output', function () {
_get__('expect')(sheet.getRule('a')).to.not.be(undefined);
_get__('expect')(sheet.toString()).to.be('.a-id {\n' + ' height: 200px;\n' + ' background: red;\n' + '}');
});
});
describe('extend function', function () {
var sheet = void 0;
beforeEach(function () {
var b = { display: 'block' };
sheet = jss.createStyleSheet({
a: {
extend: function extend(data) {
return data.block && b;
},
color: 'red',
'& span': {
extend: function extend(data) {
return data.block && b;
},
color: 'blue'
}
}
});
});
it('should have correct output', function () {
_get__('expect')(sheet.getRule('a')).to.not.be(undefined);
sheet.update({ block: true });
_get__('expect')(sheet.toString()).to.be('.a-id {\n' + ' color: red;\n' + ' display: block;\n' + '}\n' + '.a-id span {\n' + ' color: blue;\n' + ' display: block;\n' + '}');
sheet.update({ block: false });
_get__('expect')(sheet.toString()).to.be('.a-id {\n' + ' color: red;\n' + '}\n' + '.a-id span {\n' + ' color: blue;\n' + '}');
});
});
});
function _getGlobalObject() {