Added logging, changed some directory structure

This commit is contained in:
2018-01-13 21:33:40 -05:00
parent f079a5f067
commit 8e72ffb917
73656 changed files with 35284 additions and 53718 deletions

View File

@@ -0,0 +1,10 @@
{
"presets": ["stage-0", "es2015"],
"env": {
"test": {
"plugins": [
"rewire"
]
}
}
}

View File

@@ -0,0 +1,10 @@
{
"extends": "eslint-config-jss",
"parser": "babel-eslint",
"rules": {
"import/no-unresolved": 0
},
"globals": {
"benchmark": true
}
}

View File

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

View File

@@ -0,0 +1,8 @@
The MIT License (MIT)
Copyright (c) 2014-present Oleg Slobodskoi
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,14 @@
import {create} from 'jss'
import bootstrap from '../fixtures/modified-bootstrap.json'
import nested from '../../src/index'
suite('Nested bootstrap JSS to CSS', () => {
benchmark('.toString()', () => {
const jss = create().use(nested())
jss
.createStyleSheet(bootstrap)
.toString()
})
})

View File

@@ -0,0 +1,20 @@
import {create} from 'jss'
import nested from '../../src/index'
suite('Deeply nested JSS', () => {
benchmark('.createStyleSheet()', () => {
const styles = {
button: {
color: 'black',
'& .a, .b': {
color: 'red',
'& .c, &:hover': {
color: 'gold'
}
}
}
}
create().use(nested()).createStyleSheet(styles)
})
})

View File

@@ -0,0 +1,104 @@
## 5.0.0 / 2017-06-20
- Support jss 8
## 4.0.1 / 2017-04-18
- Use jss-extend@4.0 for the tests
## 4.0.0 / 2017-04-10
- Support jss@7
## 3.0.1 / 2017-01-01
- Fixed order of nested media queries cssinjs/jss#391
## 3.0.0 / 2016-12-28
- remove dep to named option
- update to jss 6.0
## 2.5.0 / 2016-10-31
- fix bench
- add cross-env
- implement deep nesting cssinjs/jss#312
- support & at any position cssinjs/jss#297
## 2.4.3 / 2016-10-11
- fix the build name
## 2.4.2 / 2016-09-30
- tests integration into jss repo
## 2.4.1 / 2016-09-19
- allow "-" in refs
- better tests
- on index mutation
## 2.4.0 / 2016-09-13
- enable @media rules inside of regular rules
## 2.2.1 / 2016-09-07
- don't use es6 in tests.webpack.js, because it is loaded from jss without babelifying
## 2.2.0 / 2016-09-05
- upgrade jss to 5.5.0
- fix the order of extracted nested rules
- deprecate nesting level is higher than 1 (was never fully supported)
- warn if nesting level is too high
- migrate to mocha
## 2.1.0 / 2016-08-15
- allow `sheet.addRule` on attached sheet use nested rules
## 2.0.0 / 2016-07-31
- implelent local refs using $ref syntax #214
- update deps
## 1.0.3 / 2016-03-24
- update babel deps
## 1.0.2 / 2016-01-31
- docs
- update linter and lint
- fix nested rules within conditionals
## 1.0.1 / 2015-10-21
- fix peer dependency
## 1.0.0 / 2015-10-19
- support jss 3.0
- now plugin needs to be called middleware like
## 0.2.0 / 2015-09-21
- migrate to es6
- move examples to jss-examples repository
- simplify packaging
## 0.1.7 / 2014-02-06
- support nesting within a named rule
## 0.1.6 / 2014-01-31
- update jss to 1.0
## 0.1.0 / 2014-11-28
- first release in a separate repository for plugins

View File

@@ -0,0 +1,240 @@
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["jssNested"] = factory();
else
root["jssNested"] = factory();
})(this, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
exports.default = jssNested;
var _warning = __webpack_require__(1);
var _warning2 = _interopRequireDefault(_warning);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var separatorRegExp = /\s*,\s*/g;
var parentRegExp = /&/g;
var refRegExp = /\$([\w-]+)/g;
/**
* Convert nested rules to separate, remove them from original styles.
*
* @param {Rule} rule
* @api public
*/
function jssNested() {
// Get a function to be used for $ref replacement.
function getReplaceRef(container) {
return function (match, key) {
var rule = container.getRule(key);
if (rule) return rule.selector;
(0, _warning2.default)(false, '[JSS] Could not find the referenced rule %s in %s.', key, container.options.meta || container);
return key;
};
}
var hasAnd = function hasAnd(str) {
return str.indexOf('&') !== -1;
};
function replaceParentRefs(nestedProp, parentProp) {
var parentSelectors = parentProp.split(separatorRegExp);
var nestedSelectors = nestedProp.split(separatorRegExp);
var result = '';
for (var i = 0; i < parentSelectors.length; i++) {
var parent = parentSelectors[i];
for (var j = 0; j < nestedSelectors.length; j++) {
var nested = nestedSelectors[j];
if (result) result += ', ';
// Replace all & by the parent or prefix & with the parent.
result += hasAnd(nested) ? nested.replace(parentRegExp, parent) : parent + ' ' + nested;
}
}
return result;
}
function getOptions(rule, container, options) {
// Options has been already created, now we only increase index.
if (options) return _extends({}, options, { index: options.index + 1 });
var nestingLevel = rule.options.nestingLevel;
nestingLevel = nestingLevel === undefined ? 1 : nestingLevel + 1;
return _extends({}, rule.options, {
nestingLevel: nestingLevel,
index: container.indexOf(rule) + 1
});
}
function onProcessStyle(style, rule) {
if (rule.type !== 'style') return style;
var container = rule.options.parent;
var options = void 0;
var replaceRef = void 0;
for (var prop in style) {
var isNested = hasAnd(prop);
var isNestedConditional = prop[0] === '@';
if (!isNested && !isNestedConditional) continue;
options = getOptions(rule, container, options);
if (isNested) {
var selector = replaceParentRefs(prop, rule.selector
// Lazily create the ref replacer function just once for
// all nested rules within the sheet.
);if (!replaceRef) replaceRef = getReplaceRef(container
// Replace all $refs.
);selector = selector.replace(refRegExp, replaceRef);
container.addRule(selector, style[prop], _extends({}, options, { selector: selector }));
} else if (isNestedConditional) {
// Place conditional right after the parent rule to ensure right ordering.
container.addRule(prop, _defineProperty({}, rule.key, style[prop]), options);
}
delete style[prop];
}
return style;
}
return { onProcessStyle: onProcessStyle };
}
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
/**
* Copyright 2014-2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
'use strict';
/**
* Similar to invariant but only logs a warning if the condition is not met.
* This can be used to log issues in development environments in critical
* paths. Removing the logging code for production environments will keep the
* same logic and follow the same code paths.
*/
var warning = function() {};
if (true) {
warning = function(condition, format, args) {
var len = arguments.length;
args = new Array(len > 2 ? len - 2 : 0);
for (var key = 2; key < len; key++) {
args[key - 2] = arguments[key];
}
if (format === undefined) {
throw new Error(
'`warning(condition, format, ...args)` requires a warning ' +
'message argument'
);
}
if (format.length < 10 || (/^[s\W]*$/).test(format)) {
throw new Error(
'The warning format should be able to uniquely identify this ' +
'warning. Please, use a more descriptive format than: ' + format
);
}
if (!condition) {
var argIndex = 0;
var message = 'Warning: ' +
format.replace(/%s/g, function() {
return args[argIndex++];
});
if (typeof console !== 'undefined') {
console.error(message);
}
try {
// This error was thrown as a convenience so that you can use this stack
// to find the callsite that caused this warning to fire.
throw new Error(message);
} catch(x) {}
}
};
}
module.exports = warning;
/***/ })
/******/ ])
});
;
//# sourceMappingURL=jss-nested.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +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.jssNested=t():e.jssNested=t()}(this,function(){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(){function e(e){return function(t,r){var n=e.getRule(r);return n?n.selector:((0,s.default)(!1,"[JSS] Could not find the referenced rule %s in %s.",r,e.options.meta||e),r)}}function t(e,t){for(var r=t.split(a),n=e.split(a),o="",u=0;u<r.length;u++)for(var f=r[u],s=0;s<n.length;s++){var c=n[s];o&&(o+=", "),o+=i(c)?c.replace(l,f):f+" "+c}return o}function r(e,t,r){if(r)return u({},r,{index:r.index+1});var n=e.options.nestingLevel;return n=void 0===n?1:n+1,u({},e.options,{nestingLevel:n,index:t.indexOf(e)+1})}function n(n,f){if("style"!==f.type)return n;var s=f.options.parent,a=void 0,l=void 0;for(var d in n){var p=i(d),v="@"===d[0];if(p||v){if(a=r(f,s,a),p){var x=t(d,f.selector);l||(l=e(s)),x=x.replace(c,l),s.addRule(x,n[d],u({},a,{selector:x}))}else v&&s.addRule(d,o({},f.key,n[d]),a);delete n[d]}}return n}var i=function(e){return e.indexOf("&")!==-1};return{onProcessStyle:n}}Object.defineProperty(t,"__esModule",{value:!0});var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e};t.default=i;var f=r(1),s=n(f),a=/\s*,\s*/g,l=/&/g,c=/\$([\w-]+)/g},function(e,t,r){"use strict";var n=function(){};e.exports=n}])});
//# sourceMappingURL=jss-nested.min.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,39 @@
const assign = require('lodash.assign')
const webpackConfig = require('./webpack.config')
const isBench = process.env.BENCHMARK === 'true'
module.exports = (config) => {
config.set({
browsers: ['Chrome'],
frameworks: ['mocha'],
files: ['tests.webpack.js'],
preprocessors: {
'tests.webpack.js': ['webpack', 'sourcemap']
},
webpack: assign(webpackConfig, {
devtool: 'inline-source-map'
}),
webpackServer: {
noInfo: true
},
reporters: ['mocha', 'coverage'],
coverageReporter: {
dir: 'coverage',
file: 'coverage.json',
type: 'json'
}
})
if (isBench) {
assign(config, {
browsers: ['Chrome'],
frameworks: ['benchmark'],
files: ['benchmark/**/*.js'],
preprocessors: {'benchmark/**/*.js': ['webpack']},
reporters: ['benchmark'],
// Some tests are slow.
browserNoActivityTimeout: 20000
})
}
}

View File

@@ -0,0 +1,112 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
exports.default = jssNested;
var _warning = require('warning');
var _warning2 = _interopRequireDefault(_warning);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var separatorRegExp = /\s*,\s*/g;
var parentRegExp = /&/g;
var refRegExp = /\$([\w-]+)/g;
/**
* Convert nested rules to separate, remove them from original styles.
*
* @param {Rule} rule
* @api public
*/
function jssNested() {
// Get a function to be used for $ref replacement.
function getReplaceRef(container) {
return function (match, key) {
var rule = container.getRule(key);
if (rule) return rule.selector;
(0, _warning2.default)(false, '[JSS] Could not find the referenced rule %s in %s.', key, container.options.meta || container);
return key;
};
}
var hasAnd = function hasAnd(str) {
return str.indexOf('&') !== -1;
};
function replaceParentRefs(nestedProp, parentProp) {
var parentSelectors = parentProp.split(separatorRegExp);
var nestedSelectors = nestedProp.split(separatorRegExp);
var result = '';
for (var i = 0; i < parentSelectors.length; i++) {
var parent = parentSelectors[i];
for (var j = 0; j < nestedSelectors.length; j++) {
var nested = nestedSelectors[j];
if (result) result += ', ';
// Replace all & by the parent or prefix & with the parent.
result += hasAnd(nested) ? nested.replace(parentRegExp, parent) : parent + ' ' + nested;
}
}
return result;
}
function getOptions(rule, container, options) {
// Options has been already created, now we only increase index.
if (options) return _extends({}, options, { index: options.index + 1 });
var nestingLevel = rule.options.nestingLevel;
nestingLevel = nestingLevel === undefined ? 1 : nestingLevel + 1;
return _extends({}, rule.options, {
nestingLevel: nestingLevel,
index: container.indexOf(rule) + 1
});
}
function onProcessStyle(style, rule) {
if (rule.type !== 'style') return style;
var container = rule.options.parent;
var options = void 0;
var replaceRef = void 0;
for (var prop in style) {
var isNested = hasAnd(prop);
var isNestedConditional = prop[0] === '@';
if (!isNested && !isNestedConditional) continue;
options = getOptions(rule, container, options);
if (isNested) {
var selector = replaceParentRefs(prop, rule.selector
// Lazily create the ref replacer function just once for
// all nested rules within the sheet.
);if (!replaceRef) replaceRef = getReplaceRef(container
// Replace all $refs.
);selector = selector.replace(refRegExp, replaceRef);
container.addRule(selector, style[prop], _extends({}, options, { selector: selector }));
} else if (isNestedConditional) {
// Place conditional right after the parent rule to ensure right ordering.
container.addRule(prop, _defineProperty({}, rule.key, style[prop]), options);
}
delete style[prop];
}
return style;
}
return { onProcessStyle: onProcessStyle };
}

View File

@@ -0,0 +1,466 @@
'use strict';
var _templateObject = _taggedTemplateLiteral(['\n .a-id:hover {\n color: red;\n }\n '], ['\n .a-id:hover {\n color: red;\n }\n ']);
var _expect = require('expect.js');
var _expect2 = _interopRequireDefault(_expect);
var _commonTags = require('common-tags');
var _ = require('./');
var _2 = _interopRequireDefault(_);
var _jssExtend = require('jss-extend');
var _jssExtend2 = _interopRequireDefault(_jssExtend);
var _jss = require('jss');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); } /* eslint-disable no-underscore-dangle */
var settings = {
createGenerateClassName: function createGenerateClassName() {
return function (rule) {
return rule.key + '-id';
};
}
};
describe('jss-nested', function () {
var jss = void 0;
var warning = void 0;
beforeEach(function () {
_2.default.__Rewire__('warning', function (condition, message) {
warning = message;
});
jss = (0, _jss.create)(settings).use((0, _2.default)());
});
afterEach(function () {
_2.default.__ResetDependency__('warning');
warning = undefined;
});
describe('nesting with space', function () {
var sheet = void 0;
beforeEach(function () {
sheet = jss.createStyleSheet({
a: {
float: 'left',
'& b': { float: 'left' }
}
});
});
it('should add rules', function () {
(0, _expect2.default)(sheet.getRule('a')).to.not.be(undefined);
(0, _expect2.default)(sheet.getRule('.a-id b')).to.not.be(undefined);
});
it('should generate correct CSS', function () {
(0, _expect2.default)(sheet.toString()).to.be('.a-id {\n' + ' float: left;\n' + '}\n' + '.a-id b {\n' + ' float: left;\n' + '}');
});
});
describe('nesting without space', function () {
var sheet = void 0;
beforeEach(function () {
sheet = jss.createStyleSheet({
a: {
float: 'left',
'&b': { float: 'left' }
}
});
});
it('should add rules', function () {
(0, _expect2.default)(sheet.getRule('a')).to.not.be(undefined);
(0, _expect2.default)(sheet.getRule('.a-idb')).to.not.be(undefined);
});
it('should generate correct CSS', function () {
(0, _expect2.default)(sheet.toString()).to.be('.a-id {\n' + ' float: left;\n' + '}\n' + '.a-idb {\n' + ' float: left;\n' + '}');
});
});
describe('multi nesting', function () {
var sheet = void 0;
beforeEach(function () {
sheet = jss.createStyleSheet({
a: {
float: 'left',
'&b': { float: 'left' },
'& c': { float: 'left' }
}
});
});
it('should add rules', function () {
(0, _expect2.default)(sheet.getRule('a')).to.not.be(undefined);
(0, _expect2.default)(sheet.getRule('.a-idb')).to.not.be(undefined);
(0, _expect2.default)(sheet.getRule('.a-id c')).to.not.be(undefined);
});
it('should generate correct CSS', function () {
(0, _expect2.default)(sheet.toString()).to.be('.a-id {\n' + ' float: left;\n' + '}\n' + '.a-idb {\n' + ' float: left;\n' + '}\n' + '.a-id c {\n' + ' float: left;\n' + '}');
});
});
describe('multi nesting in one selector', function () {
var sheet = void 0;
beforeEach(function () {
sheet = jss.createStyleSheet({
a: {
float: 'left',
'&b, &c': { float: 'left' }
}
});
});
it('should add rules', function () {
(0, _expect2.default)(sheet.getRule('a')).to.not.be(undefined);
(0, _expect2.default)(sheet.getRule('.a-idb, .a-idc')).to.not.be(undefined);
});
it('should generate correct CSS', function () {
(0, _expect2.default)(sheet.toString()).to.be('.a-id {\n' + ' float: left;\n' + '}\n' + '.a-idb, .a-idc {\n' + ' float: left;\n' + '}');
});
});
describe('.addRules()', function () {
var sheet = void 0;
beforeEach(function () {
sheet = jss.createStyleSheet({
a: {
height: '1px'
}
});
sheet.addRules({
b: {
height: '2px',
'& c': {
height: '3px'
}
}
});
});
it('should generate correct CSS', function () {
(0, _expect2.default)(sheet.toString()).to.be('.a-id {\n' + ' height: 1px;\n' + '}\n' + '.b-id {\n' + ' height: 2px;\n' + '}\n' + '.b-id c {\n' + ' height: 3px;\n' + '}');
});
});
describe('nesting in a conditional', function () {
var sheet = void 0;
beforeEach(function () {
sheet = jss.createStyleSheet({
a: {
color: 'green'
},
'@media': {
a: {
'&:hover': { color: 'red' }
}
}
});
});
it('should add rules', function () {
(0, _expect2.default)(sheet.getRule('a')).to.not.be(undefined);
(0, _expect2.default)(sheet.getRule('@media')).to.not.be(undefined);
});
it('should generate correct CSS', function () {
(0, _expect2.default)(sheet.toString()).to.be('.a-id {\n' + ' color: green;\n' + '}\n' + '@media {\n' + ' .a-id:hover {\n' + ' color: red;\n' + ' }\n' + '}');
});
});
describe('nesting a conditional rule inside a regular rule', function () {
var sheet = void 0;
beforeEach(function () {
sheet = jss.createStyleSheet({
a: {
color: 'green',
'@media': {
width: '200px'
}
},
b: {
color: 'red'
}
});
});
it('should add rules', function () {
(0, _expect2.default)(sheet.getRule('a')).to.not.be(undefined);
(0, _expect2.default)(sheet.getRule('@media')).to.not.be(undefined);
(0, _expect2.default)(sheet.getRule('b')).to.not.be(undefined);
});
it('should generate correct CSS', function () {
(0, _expect2.default)(sheet.toString()).to.be('.a-id {\n' + ' color: green;\n' + '}\n' + '@media {\n' + ' .a-id {\n' + ' width: 200px;\n' + ' }\n' + '}\n' + '.b-id {\n' + ' color: red;\n' + '}');
});
});
describe('order of nested conditionals', function () {
var sheet = void 0;
beforeEach(function () {
sheet = jss.createStyleSheet({
a: {
'@media a': {
color: 'red'
},
'@media b': {
color: 'green'
}
}
});
});
it('should add rules', function () {
(0, _expect2.default)(sheet.getRule('@media a')).to.not.be(undefined);
(0, _expect2.default)(sheet.getRule('@media b')).to.not.be(undefined);
});
it('should generate correct CSS', function () {
(0, _expect2.default)(sheet.toString()).to.be('@media a {\n' + ' .a-id {\n' + ' color: red;\n' + ' }\n' + '}\n' + '@media b {\n' + ' .a-id {\n' + ' color: green;\n' + ' }\n' + '}');
});
});
describe('adding a rule with a conditional rule', function () {
var sheet = void 0;
beforeEach(function () {
sheet = jss.createStyleSheet();
sheet.addRule('a', {
color: 'green',
'@media': {
width: '200px'
}
});
});
it('should add rules', function () {
(0, _expect2.default)(sheet.getRule('a')).to.not.be(undefined);
(0, _expect2.default)(sheet.getRule('@media')).to.not.be(undefined);
});
it('should generate correct CSS', function () {
(0, _expect2.default)(sheet.toString()).to.be('.a-id {\n' + ' color: green;\n' + '}\n' + '@media {\n' + ' .a-id {\n' + ' width: 200px;\n' + ' }\n' + '}');
});
});
describe('do not merge nested conditional to container conditional with existing rule', function () {
var sheet = void 0;
beforeEach(function () {
sheet = jss.createStyleSheet({
a: {
color: 'green',
'@media': {
width: '200px'
},
'@media large': {
width: '300px'
}
},
'@media': {
b: {
color: 'blue'
}
},
c: {
color: 'red'
}
});
});
it('should add rules', function () {
(0, _expect2.default)(sheet.getRule('a')).to.not.be(undefined);
(0, _expect2.default)(sheet.getRule('@media')).to.not.be(undefined);
(0, _expect2.default)(sheet.getRule('c')).to.not.be(undefined);
});
it('should generate correct CSS', function () {
(0, _expect2.default)(sheet.toString()).to.be('.a-id {\n' + ' color: green;\n' + '}\n' + '@media {\n' + ' .a-id {\n' + ' width: 200px;\n' + ' }\n' + '}\n' + '@media large {\n' + ' .a-id {\n' + ' width: 300px;\n' + ' }\n' + '}\n' + '@media {\n' + ' .b-id {\n' + ' color: blue;\n' + ' }\n' + '}\n' + '.c-id {\n' + ' color: red;\n' + '}');
});
});
describe('warnings', function () {
it('should warn when referenced rule is not found', function () {
jss.createStyleSheet({
a: {
'& $b': { float: 'left' }
}
});
(0, _expect2.default)(warning).to.be('[JSS] Could not find the referenced rule %s in %s.');
});
});
describe('local refs', function () {
var sheet = void 0;
beforeEach(function () {
sheet = jss.createStyleSheet({
a: {
float: 'left',
'& $b': { float: 'left' },
'& $b-warn': { float: 'right' }
},
b: {
color: 'red'
},
'b-warn': {
color: 'orange'
}
});
});
it('should generate correct CSS', function () {
(0, _expect2.default)(sheet.toString()).to.be('.a-id {\n' + ' float: left;\n' + '}\n' + '.a-id .b-id {\n' + ' float: left;\n' + '}\n' + '.a-id .b-warn-id {\n' + ' float: right;\n' + '}\n' + '.b-id {\n' + ' color: red;\n' + '}\n' + '.b-warn-id {\n' + ' color: orange;\n' + '}');
});
});
describe('nesting conditionals in combination with extend plugin', function () {
var sheet = void 0;
beforeEach(function () {
var localJss = (0, _jss.create)(settings).use((0, _jssExtend2.default)(), (0, _2.default)());
sheet = localJss.createStyleSheet({
button: {
color: 'green',
'background-color': 'aqua',
'@media': {
width: '200px'
}
},
redButton: {
extend: 'button',
color: 'red'
}
});
});
it('should add rules', function () {
(0, _expect2.default)(sheet.getRule('button')).to.not.be(undefined);
(0, _expect2.default)(sheet.getRule('@media')).to.not.be(undefined);
(0, _expect2.default)(sheet.getRule('redButton')).to.not.be(undefined);
});
it('should generate correct CSS', function () {
(0, _expect2.default)(sheet.toString()).to.be('.button-id {\n' + ' color: green;\n' + ' background-color: aqua;\n' + '}\n' + '@media {\n' + ' .button-id {\n' + ' width: 200px;\n' + ' }\n' + '}\n' + '.redButton-id {\n' + ' color: red;\n' + ' background-color: aqua;\n' + '}\n' + '@media {\n' + ' .redButton-id {\n' + ' width: 200px;\n' + ' }\n' + '}');
});
});
describe('deep nesting', function () {
var sheet = void 0;
beforeEach(function () {
var localJss = (0, _jss.create)(settings).use((0, _jssExtend2.default)(), (0, _2.default)());
sheet = localJss.createStyleSheet({
button: {
color: 'black',
'& .a': {
color: 'red',
'& .c': {
color: 'gold'
}
}
}
});
});
it('should add rules', function () {
(0, _expect2.default)(sheet.getRule('button')).to.not.be(undefined);
(0, _expect2.default)(sheet.getRule('.button-id .a')).to.not.be(undefined);
(0, _expect2.default)(sheet.getRule('.button-id .a .c')).to.not.be(undefined);
});
it('should generate correct CSS', function () {
(0, _expect2.default)(sheet.toString()).to.be('.button-id {\n' + ' color: black;\n' + '}\n' + '.button-id .a {\n' + ' color: red;\n' + '}\n' + '.button-id .a .c {\n' + ' color: gold;\n' + '}');
});
});
describe('deep nesting with multiple nestings in one selector', function () {
var sheet = void 0;
beforeEach(function () {
sheet = jss.createStyleSheet({
button: {
color: 'black',
'& .a, .b': {
color: 'red',
'& .c, &:hover': {
color: 'gold'
}
}
}
});
});
it('should add rules', function () {
(0, _expect2.default)(sheet.getRule('button')).to.not.be(undefined);
(0, _expect2.default)(sheet.getRule('.button-id .a, .button-id .b')).to.not.be(undefined);
(0, _expect2.default)(sheet.getRule('.button-id .a .c, .button-id .a:hover, ' + '.button-id .b .c, .button-id .b:hover')).to.not.be(undefined);
});
it('should generate correct CSS', function () {
(0, _expect2.default)(sheet.toString()).to.be('.button-id {\n' + ' color: black;\n' + '}\n' + '.button-id .a, .button-id .b {\n' + ' color: red;\n' + '}\n' + '.button-id .a .c, .button-id .a:hover, ' + '.button-id .b .c, .button-id .b:hover {\n' + ' color: gold;\n' + '}');
});
});
describe('support & at any position', function () {
var sheet = void 0;
beforeEach(function () {
sheet = jss.createStyleSheet({
a: {
'input:focus + &': {
color: 'red'
}
}
});
});
it('should generate correct CSS', function () {
(0, _expect2.default)(sheet.toString()).to.be('input:focus + .a-id {\n' + ' color: red;\n' + '}');
});
});
describe('function values', function () {
var sheet = void 0;
beforeEach(function () {
sheet = jss.createStyleSheet({
a: {
'&:hover': {
color: function color() {
return 'red';
}
}
}
});
sheet.update();
});
it('should generate correct CSS', function () {
(0, _expect2.default)(sheet.toString()).to.be((0, _commonTags.stripIndent)(_templateObject));
});
});
});

View File

@@ -0,0 +1,126 @@
{
"_args": [
[
"jss-nested@5.0.0",
"C:\\Users\\deranjer\\go\\src\\github.com\\deranjer\\goTorrent\\torrent-project"
]
],
"_from": "jss-nested@5.0.0",
"_id": "jss-nested@5.0.0",
"_inBundle": false,
"_integrity": "sha512-9Molau+XVpSc6QEco3EC5yXmzeGMc5ZVII8+qy6jD6bvu6Y9mpfGoJ00LalR/n7xr/LC7Cxgs44UQQlLzumMBg==",
"_location": "/material-ui/jss-nested",
"_phantomChildren": {},
"_requested": {
"type": "version",
"registry": true,
"raw": "jss-nested@5.0.0",
"name": "jss-nested",
"escapedName": "jss-nested",
"rawSpec": "5.0.0",
"saveSpec": null,
"fetchSpec": "5.0.0"
},
"_requiredBy": [
"/material-ui/jss-preset-default"
],
"_resolved": "https://registry.npmjs.org/jss-nested/-/jss-nested-5.0.0.tgz",
"_spec": "5.0.0",
"_where": "C:\\Users\\deranjer\\go\\src\\github.com\\deranjer\\goTorrent\\torrent-project",
"author": {
"name": "Oleg Slobodskoi",
"email": "oleg008@gmail.com"
},
"bugs": {
"url": "https://github.com/cssinjs/jss-nested/issues"
},
"dependencies": {
"warning": "^3.0.0"
},
"description": "JSS plugin that enables support for nested selectors",
"devDependencies": {
"babel-cli": "^6.5.1",
"babel-core": "^6.5.1",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.4",
"babel-plugin-rewire": "^1.0.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-0": "^6.5.0",
"common-tags": "^1.4.0",
"cross-env": "^3.1.3",
"eslint": "^2.8.0",
"eslint-config-airbnb": "^8.0.0",
"eslint-config-jss": "^1.1.0",
"eslint-plugin-import": "^1.12.0",
"eslint-plugin-jsx-a11y": "^1.5.5",
"eslint-plugin-react": "^5.0.1",
"expect.js": "^0.3.1",
"json-loader": "^0.5.4",
"jss": "^8.0.0",
"jss-extend": "^5.0.0",
"karma": "^1.1.1",
"karma-benchmark": "^0.6.0",
"karma-benchmark-reporter": "^0.1.1",
"karma-browserstack-launcher": "^1.0.0",
"karma-chrome-launcher": "^1.0.1",
"karma-coverage": "^1.1.0",
"karma-firefox-launcher": "^1.0.0",
"karma-mocha": "^1.0.1",
"karma-mocha-reporter": "^2.0.2",
"karma-safari-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.5",
"karma-webpack": "^1.7.0",
"lint-staged": "^3.0.1",
"lodash.assign": "^4.0.9",
"mocha": "^3.0.2",
"pre-commit": "^1.1.3",
"rimraf": "^2.5.4",
"webpack": "^1.12.2"
},
"homepage": "https://github.com/cssinjs/jss-nested#readme",
"keywords": [
"cssinjs",
"css-in-js",
"css in js",
"jss",
"plugin",
"nested",
"nesting"
],
"license": "MIT",
"lint-staged": {
"./src/*.js": [
"eslint",
"git add"
]
},
"main": "./lib/index.js",
"name": "jss-nested",
"peerDependencies": {
"jss": "^8.0.0"
},
"pre-commit": "lint:staged",
"repository": {
"type": "git",
"url": "git+ssh://git@github.com/cssinjs/jss-nested.git"
},
"scripts": {
"all": "npm run lint && npm run test && npm run build",
"bench": "cross-env BENCHMARK=true npm run test",
"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-nested.js",
"build:dist:min": "cross-env NODE_ENV=production webpack src/index.js dist/jss-nested.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 ./benchmark",
"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": "5.0.0"
}

View File

@@ -0,0 +1,167 @@
# JSS plugin enables support for nested rules
[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)
Make sure you read [how to use
plugins](https://github.com/cssinjs/jss/blob/master/docs/setup.md#setup-with-plugins)
in general.
## Use `&` to reference selector of the parent rule.
```javascript
const styles = {
container: {
padding: 20,
'&:hover': {
background: 'blue'
},
// Add a global .clear class to the container.
'&.clear': {
clear: 'both'
},
// Reference a global .button scoped to the container.
'& .button': {
background: 'red'
},
// Use multiple container refs in one selector
'&.selected, &.active': {
border: '1px solid red'
}
}
}
```
Compiles to:
```css
.container-3775999496 {
padding: 20px;
}
.container-3775999496:hover {
background: blue;
}
.container-3775999496.clear {
clear: both;
}
.container-3775999496 .button {
background: red;
}
.container-3775999496.selected, .container-3775999496.active {
border: 1px solid red;
}
```
## Use `$ruleName` to reference a local rule within the same style sheet.
```javascript
const styles = {
container: {
// Reference the local rule "button".
'& $button': {
padding: '10px'
},
// Multiple local refs in one rule.
'&:hover $button, &:active $button': {
color: 'red',
},
'&:focus $button': {
color: 'blue'
}
},
button: {
color: 'grey'
}
}
```
Compiles to:
```css
.button-3940538223 {
color: grey;
}
.container-2645419599 .button-3940538223 {
padding: 10px;
}
.container-2645419599:hover .button-3940538223, .container-2645419599:active .button-3940538223 {
color: red;
}
.container-2645419599:focus .button-3940538223 {
color: blue;
}
```
## Use at-rules inside of regular rules.
```javascript
const styles = {
button: {
color: 'red',
'@media (min-width: 1024px)': {
width: 200
}
}
}
```
Compiles to:
```css
.button-2683044438 {
color: red;
}
@media (min-width: 1024px) {
.button-2683044438 {
width: 200px;
}
}
```
## Deep nesting
```javascript
const styles = {
button: {
'&$warn': {
color: 'red',
'&:hover, &:focus': {
color: 'white',
background: 'red'
}
}
},
warn: {}
}
```
Compiles to:
```css
.button-274964227.warn-2315792072 {
color: red;
}
.button-274964227.warn-2315792072:hover, .button-274964227.warn-2315792072:focus {
color: white;
background: red;
}
```
## Demo
[Simple](http://cssinjs.github.io/examples/plugins/jss-nested/simple/index.html)
## Issues
File a bug against [cssinjs/jss prefixed with \[jss-nested\]](https://github.com/cssinjs/jss/issues/new?title=[jss-nested]%20).
## Run tests
```bash
npm i
npm run test
```
## License
MIT

View File

@@ -0,0 +1,19 @@
<html>
<head>
<meta charset="utf-8">
<title>JSS Tests</title>
<link href="./node_modules/mocha/mocha.css" rel="stylesheet" />
</head>
<body>
<div id="mocha"></div>
<script src="./node_modules/expect.js/index.js"></script>
<script src="./node_modules/mocha/mocha.js"></script>
<script>mocha.setup('bdd')</script>
<script src="./tmp/tests.js"></script>
<script>
mocha.checkLeaks();
mocha.run();
</script>
</body>
</html>

View File

@@ -0,0 +1,2 @@
const context = require.context('./src', true, /\.test\.js$/)
context.keys().forEach(context)

View File

@@ -0,0 +1,353 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.__RewireAPI__ = exports.__ResetDependency__ = exports.__set__ = exports.__Rewire__ = exports.__GetDependency__ = exports.__get__ = undefined;
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
exports.default = jssNested;
var _warning = require('warning');
var _warning2 = _interopRequireDefault(_warning);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var separatorRegExp = /\s*,\s*/g;
var parentRegExp = /&/g;
var refRegExp = /\$([\w-]+)/g;
/**
* Convert nested rules to separate, remove them from original styles.
*
* @param {Rule} rule
* @api public
*/
function jssNested() {
// Get a function to be used for $ref replacement.
function getReplaceRef(container) {
return function (match, key) {
var rule = container.getRule(key);
if (rule) return rule.selector;
_get__('warning')(false, '[JSS] Could not find the referenced rule %s in %s.', key, container.options.meta || container);
return key;
};
}
var hasAnd = function hasAnd(str) {
return str.indexOf('&') !== -1;
};
function replaceParentRefs(nestedProp, parentProp) {
var parentSelectors = parentProp.split(_get__('separatorRegExp'));
var nestedSelectors = nestedProp.split(_get__('separatorRegExp'));
var result = '';
for (var i = 0; i < parentSelectors.length; i++) {
var parent = parentSelectors[i];
for (var j = 0; j < nestedSelectors.length; j++) {
var nested = nestedSelectors[j];
if (result) result += ', ';
// Replace all & by the parent or prefix & with the parent.
result += hasAnd(nested) ? nested.replace(_get__('parentRegExp'), parent) : parent + ' ' + nested;
}
}
return result;
}
function getOptions(rule, container, options) {
// Options has been already created, now we only increase index.
if (options) return _extends({}, options, { index: options.index + 1 });
var nestingLevel = rule.options.nestingLevel;
nestingLevel = nestingLevel === undefined ? 1 : nestingLevel + 1;
return _extends({}, rule.options, {
nestingLevel: nestingLevel,
index: container.indexOf(rule) + 1
});
}
function onProcessStyle(style, rule) {
if (rule.type !== 'style') return style;
var container = rule.options.parent;
var options = void 0;
var replaceRef = void 0;
for (var prop in style) {
var isNested = hasAnd(prop);
var isNestedConditional = prop[0] === '@';
if (!isNested && !isNestedConditional) continue;
options = getOptions(rule, container, options);
if (isNested) {
var selector = replaceParentRefs(prop, rule.selector
// Lazily create the ref replacer function just once for
// all nested rules within the sheet.
);if (!replaceRef) replaceRef = getReplaceRef(container
// Replace all $refs.
);selector = selector.replace(_get__('refRegExp'), replaceRef);
container.addRule(selector, style[prop], _extends({}, options, { selector: selector }));
} else if (isNestedConditional) {
// Place conditional right after the parent rule to ensure right ordering.
container.addRule(prop, _defineProperty({}, rule.key, style[prop]), options);
}
delete style[prop];
}
return style;
}
return { onProcessStyle: onProcessStyle };
}
function _getGlobalObject() {
try {
if (!!global) {
return global;
}
} catch (e) {
try {
if (!!window) {
return window;
}
} catch (e) {
return this;
}
}
}
;
var _RewireModuleId__ = null;
function _getRewireModuleId__() {
if (_RewireModuleId__ === null) {
var globalVariable = _getGlobalObject();
if (!globalVariable.__$$GLOBAL_REWIRE_NEXT_MODULE_ID__) {
globalVariable.__$$GLOBAL_REWIRE_NEXT_MODULE_ID__ = 0;
}
_RewireModuleId__ = __$$GLOBAL_REWIRE_NEXT_MODULE_ID__++;
}
return _RewireModuleId__;
}
function _getRewireRegistry__() {
var theGlobalVariable = _getGlobalObject();
if (!theGlobalVariable.__$$GLOBAL_REWIRE_REGISTRY__) {
theGlobalVariable.__$$GLOBAL_REWIRE_REGISTRY__ = Object.create(null);
}
return __$$GLOBAL_REWIRE_REGISTRY__;
}
function _getRewiredData__() {
var moduleId = _getRewireModuleId__();
var registry = _getRewireRegistry__();
var rewireData = registry[moduleId];
if (!rewireData) {
registry[moduleId] = Object.create(null);
rewireData = registry[moduleId];
}
return rewireData;
}
(function registerResetAll() {
var theGlobalVariable = _getGlobalObject();
if (!theGlobalVariable['__rewire_reset_all__']) {
theGlobalVariable['__rewire_reset_all__'] = function () {
theGlobalVariable.__$$GLOBAL_REWIRE_REGISTRY__ = Object.create(null);
};
}
})();
var INTENTIONAL_UNDEFINED = '__INTENTIONAL_UNDEFINED__';
var _RewireAPI__ = {};
(function () {
function addPropertyToAPIObject(name, value) {
Object.defineProperty(_RewireAPI__, name, {
value: value,
enumerable: false,
configurable: true
});
}
addPropertyToAPIObject('__get__', _get__);
addPropertyToAPIObject('__GetDependency__', _get__);
addPropertyToAPIObject('__Rewire__', _set__);
addPropertyToAPIObject('__set__', _set__);
addPropertyToAPIObject('__reset__', _reset__);
addPropertyToAPIObject('__ResetDependency__', _reset__);
addPropertyToAPIObject('__with__', _with__);
})();
function _get__(variableName) {
var rewireData = _getRewiredData__();
if (rewireData[variableName] === undefined) {
return _get_original__(variableName);
} else {
var value = rewireData[variableName];
if (value === INTENTIONAL_UNDEFINED) {
return undefined;
} else {
return value;
}
}
}
function _get_original__(variableName) {
switch (variableName) {
case 'warning':
return _warning2.default;
case 'separatorRegExp':
return separatorRegExp;
case 'parentRegExp':
return parentRegExp;
case 'refRegExp':
return refRegExp;
}
return undefined;
}
function _assign__(variableName, value) {
var rewireData = _getRewiredData__();
if (rewireData[variableName] === undefined) {
return _set_original__(variableName, value);
} else {
return rewireData[variableName] = value;
}
}
function _set_original__(variableName, _value) {
switch (variableName) {}
return undefined;
}
function _update_operation__(operation, variableName, prefix) {
var oldValue = _get__(variableName);
var newValue = operation === '++' ? oldValue + 1 : oldValue - 1;
_assign__(variableName, newValue);
return prefix ? newValue : oldValue;
}
function _set__(variableName, value) {
var rewireData = _getRewiredData__();
if ((typeof variableName === 'undefined' ? 'undefined' : _typeof(variableName)) === 'object') {
Object.keys(variableName).forEach(function (name) {
rewireData[name] = variableName[name];
});
} else {
if (value === undefined) {
rewireData[variableName] = INTENTIONAL_UNDEFINED;
} else {
rewireData[variableName] = value;
}
return function () {
_reset__(variableName);
};
}
}
function _reset__(variableName) {
var rewireData = _getRewiredData__();
delete rewireData[variableName];
if (Object.keys(rewireData).length == 0) {
delete _getRewireRegistry__()[_getRewireModuleId__];
}
;
}
function _with__(object) {
var rewireData = _getRewiredData__();
var rewiredVariableNames = Object.keys(object);
var previousValues = {};
function reset() {
rewiredVariableNames.forEach(function (variableName) {
rewireData[variableName] = previousValues[variableName];
});
}
return function (callback) {
rewiredVariableNames.forEach(function (variableName) {
previousValues[variableName] = rewireData[variableName];
rewireData[variableName] = object[variableName];
});
var result = callback();
if (!!result && typeof result.then == 'function') {
result.then(reset).catch(reset);
} else {
reset();
}
return result;
};
}
var _typeOfOriginalExport = typeof jssNested === 'undefined' ? 'undefined' : _typeof(jssNested);
function addNonEnumerableProperty(name, value) {
Object.defineProperty(jssNested, name, {
value: value,
enumerable: false,
configurable: true
});
}
if ((_typeOfOriginalExport === 'object' || _typeOfOriginalExport === 'function') && Object.isExtensible(jssNested)) {
addNonEnumerableProperty('__get__', _get__);
addNonEnumerableProperty('__GetDependency__', _get__);
addNonEnumerableProperty('__Rewire__', _set__);
addNonEnumerableProperty('__set__', _set__);
addNonEnumerableProperty('__reset__', _reset__);
addNonEnumerableProperty('__ResetDependency__', _reset__);
addNonEnumerableProperty('__with__', _with__);
addNonEnumerableProperty('__RewireAPI__', _RewireAPI__);
}
exports.__get__ = _get__;
exports.__GetDependency__ = _get__;
exports.__Rewire__ = _set__;
exports.__set__ = _set__;
exports.__ResetDependency__ = _reset__;
exports.__RewireAPI__ = _RewireAPI__;

View File

@@ -0,0 +1,697 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.__RewireAPI__ = exports.__ResetDependency__ = exports.__set__ = exports.__Rewire__ = exports.__GetDependency__ = exports.__get__ = undefined;
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var _templateObject = _taggedTemplateLiteral(['\n .a-id:hover {\n color: red;\n }\n '], ['\n .a-id:hover {\n color: red;\n }\n ']);
var _expect = require('expect.js');
var _expect2 = _interopRequireDefault(_expect);
var _commonTags = require('common-tags');
var _ = require('./');
var _2 = _interopRequireDefault(_);
var _jssExtend = require('jss-extend');
var _jssExtend2 = _interopRequireDefault(_jssExtend);
var _jss = require('jss');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); } /* eslint-disable no-underscore-dangle */
var settings = {
createGenerateClassName: function createGenerateClassName() {
return function (rule) {
return rule.key + '-id';
};
}
};
describe('jss-nested', function () {
var jss = void 0;
var warning = void 0;
beforeEach(function () {
_get__('nested').__Rewire__('warning', function (condition, message) {
warning = message;
});
jss = _get__('create')(_get__('settings')).use(_get__('nested')());
});
afterEach(function () {
_get__('nested').__ResetDependency__('warning');
warning = undefined;
});
describe('nesting with space', function () {
var sheet = void 0;
beforeEach(function () {
sheet = jss.createStyleSheet({
a: {
float: 'left',
'& b': { float: 'left' }
}
});
});
it('should add rules', function () {
_get__('expect')(sheet.getRule('a')).to.not.be(undefined);
_get__('expect')(sheet.getRule('.a-id b')).to.not.be(undefined);
});
it('should generate correct CSS', function () {
_get__('expect')(sheet.toString()).to.be('.a-id {\n' + ' float: left;\n' + '}\n' + '.a-id b {\n' + ' float: left;\n' + '}');
});
});
describe('nesting without space', function () {
var sheet = void 0;
beforeEach(function () {
sheet = jss.createStyleSheet({
a: {
float: 'left',
'&b': { float: 'left' }
}
});
});
it('should add rules', function () {
_get__('expect')(sheet.getRule('a')).to.not.be(undefined);
_get__('expect')(sheet.getRule('.a-idb')).to.not.be(undefined);
});
it('should generate correct CSS', function () {
_get__('expect')(sheet.toString()).to.be('.a-id {\n' + ' float: left;\n' + '}\n' + '.a-idb {\n' + ' float: left;\n' + '}');
});
});
describe('multi nesting', function () {
var sheet = void 0;
beforeEach(function () {
sheet = jss.createStyleSheet({
a: {
float: 'left',
'&b': { float: 'left' },
'& c': { float: 'left' }
}
});
});
it('should add rules', function () {
_get__('expect')(sheet.getRule('a')).to.not.be(undefined);
_get__('expect')(sheet.getRule('.a-idb')).to.not.be(undefined);
_get__('expect')(sheet.getRule('.a-id c')).to.not.be(undefined);
});
it('should generate correct CSS', function () {
_get__('expect')(sheet.toString()).to.be('.a-id {\n' + ' float: left;\n' + '}\n' + '.a-idb {\n' + ' float: left;\n' + '}\n' + '.a-id c {\n' + ' float: left;\n' + '}');
});
});
describe('multi nesting in one selector', function () {
var sheet = void 0;
beforeEach(function () {
sheet = jss.createStyleSheet({
a: {
float: 'left',
'&b, &c': { float: 'left' }
}
});
});
it('should add rules', function () {
_get__('expect')(sheet.getRule('a')).to.not.be(undefined);
_get__('expect')(sheet.getRule('.a-idb, .a-idc')).to.not.be(undefined);
});
it('should generate correct CSS', function () {
_get__('expect')(sheet.toString()).to.be('.a-id {\n' + ' float: left;\n' + '}\n' + '.a-idb, .a-idc {\n' + ' float: left;\n' + '}');
});
});
describe('.addRules()', function () {
var sheet = void 0;
beforeEach(function () {
sheet = jss.createStyleSheet({
a: {
height: '1px'
}
});
sheet.addRules({
b: {
height: '2px',
'& c': {
height: '3px'
}
}
});
});
it('should generate correct CSS', function () {
_get__('expect')(sheet.toString()).to.be('.a-id {\n' + ' height: 1px;\n' + '}\n' + '.b-id {\n' + ' height: 2px;\n' + '}\n' + '.b-id c {\n' + ' height: 3px;\n' + '}');
});
});
describe('nesting in a conditional', function () {
var sheet = void 0;
beforeEach(function () {
sheet = jss.createStyleSheet({
a: {
color: 'green'
},
'@media': {
a: {
'&:hover': { color: 'red' }
}
}
});
});
it('should add rules', function () {
_get__('expect')(sheet.getRule('a')).to.not.be(undefined);
_get__('expect')(sheet.getRule('@media')).to.not.be(undefined);
});
it('should generate correct CSS', function () {
_get__('expect')(sheet.toString()).to.be('.a-id {\n' + ' color: green;\n' + '}\n' + '@media {\n' + ' .a-id:hover {\n' + ' color: red;\n' + ' }\n' + '}');
});
});
describe('nesting a conditional rule inside a regular rule', function () {
var sheet = void 0;
beforeEach(function () {
sheet = jss.createStyleSheet({
a: {
color: 'green',
'@media': {
width: '200px'
}
},
b: {
color: 'red'
}
});
});
it('should add rules', function () {
_get__('expect')(sheet.getRule('a')).to.not.be(undefined);
_get__('expect')(sheet.getRule('@media')).to.not.be(undefined);
_get__('expect')(sheet.getRule('b')).to.not.be(undefined);
});
it('should generate correct CSS', function () {
_get__('expect')(sheet.toString()).to.be('.a-id {\n' + ' color: green;\n' + '}\n' + '@media {\n' + ' .a-id {\n' + ' width: 200px;\n' + ' }\n' + '}\n' + '.b-id {\n' + ' color: red;\n' + '}');
});
});
describe('order of nested conditionals', function () {
var sheet = void 0;
beforeEach(function () {
sheet = jss.createStyleSheet({
a: {
'@media a': {
color: 'red'
},
'@media b': {
color: 'green'
}
}
});
});
it('should add rules', function () {
_get__('expect')(sheet.getRule('@media a')).to.not.be(undefined);
_get__('expect')(sheet.getRule('@media b')).to.not.be(undefined);
});
it('should generate correct CSS', function () {
_get__('expect')(sheet.toString()).to.be('@media a {\n' + ' .a-id {\n' + ' color: red;\n' + ' }\n' + '}\n' + '@media b {\n' + ' .a-id {\n' + ' color: green;\n' + ' }\n' + '}');
});
});
describe('adding a rule with a conditional rule', function () {
var sheet = void 0;
beforeEach(function () {
sheet = jss.createStyleSheet();
sheet.addRule('a', {
color: 'green',
'@media': {
width: '200px'
}
});
});
it('should add rules', function () {
_get__('expect')(sheet.getRule('a')).to.not.be(undefined);
_get__('expect')(sheet.getRule('@media')).to.not.be(undefined);
});
it('should generate correct CSS', function () {
_get__('expect')(sheet.toString()).to.be('.a-id {\n' + ' color: green;\n' + '}\n' + '@media {\n' + ' .a-id {\n' + ' width: 200px;\n' + ' }\n' + '}');
});
});
describe('do not merge nested conditional to container conditional with existing rule', function () {
var sheet = void 0;
beforeEach(function () {
sheet = jss.createStyleSheet({
a: {
color: 'green',
'@media': {
width: '200px'
},
'@media large': {
width: '300px'
}
},
'@media': {
b: {
color: 'blue'
}
},
c: {
color: 'red'
}
});
});
it('should add rules', function () {
_get__('expect')(sheet.getRule('a')).to.not.be(undefined);
_get__('expect')(sheet.getRule('@media')).to.not.be(undefined);
_get__('expect')(sheet.getRule('c')).to.not.be(undefined);
});
it('should generate correct CSS', function () {
_get__('expect')(sheet.toString()).to.be('.a-id {\n' + ' color: green;\n' + '}\n' + '@media {\n' + ' .a-id {\n' + ' width: 200px;\n' + ' }\n' + '}\n' + '@media large {\n' + ' .a-id {\n' + ' width: 300px;\n' + ' }\n' + '}\n' + '@media {\n' + ' .b-id {\n' + ' color: blue;\n' + ' }\n' + '}\n' + '.c-id {\n' + ' color: red;\n' + '}');
});
});
describe('warnings', function () {
it('should warn when referenced rule is not found', function () {
jss.createStyleSheet({
a: {
'& $b': { float: 'left' }
}
});
_get__('expect')(warning).to.be('[JSS] Could not find the referenced rule %s in %s.');
});
});
describe('local refs', function () {
var sheet = void 0;
beforeEach(function () {
sheet = jss.createStyleSheet({
a: {
float: 'left',
'& $b': { float: 'left' },
'& $b-warn': { float: 'right' }
},
b: {
color: 'red'
},
'b-warn': {
color: 'orange'
}
});
});
it('should generate correct CSS', function () {
_get__('expect')(sheet.toString()).to.be('.a-id {\n' + ' float: left;\n' + '}\n' + '.a-id .b-id {\n' + ' float: left;\n' + '}\n' + '.a-id .b-warn-id {\n' + ' float: right;\n' + '}\n' + '.b-id {\n' + ' color: red;\n' + '}\n' + '.b-warn-id {\n' + ' color: orange;\n' + '}');
});
});
describe('nesting conditionals in combination with extend plugin', function () {
var sheet = void 0;
beforeEach(function () {
var localJss = _get__('create')(_get__('settings')).use(_get__('jssExtend')(), _get__('nested')());
sheet = localJss.createStyleSheet({
button: {
color: 'green',
'background-color': 'aqua',
'@media': {
width: '200px'
}
},
redButton: {
extend: 'button',
color: 'red'
}
});
});
it('should add rules', function () {
_get__('expect')(sheet.getRule('button')).to.not.be(undefined);
_get__('expect')(sheet.getRule('@media')).to.not.be(undefined);
_get__('expect')(sheet.getRule('redButton')).to.not.be(undefined);
});
it('should generate correct CSS', function () {
_get__('expect')(sheet.toString()).to.be('.button-id {\n' + ' color: green;\n' + ' background-color: aqua;\n' + '}\n' + '@media {\n' + ' .button-id {\n' + ' width: 200px;\n' + ' }\n' + '}\n' + '.redButton-id {\n' + ' color: red;\n' + ' background-color: aqua;\n' + '}\n' + '@media {\n' + ' .redButton-id {\n' + ' width: 200px;\n' + ' }\n' + '}');
});
});
describe('deep nesting', function () {
var sheet = void 0;
beforeEach(function () {
var localJss = _get__('create')(_get__('settings')).use(_get__('jssExtend')(), _get__('nested')());
sheet = localJss.createStyleSheet({
button: {
color: 'black',
'& .a': {
color: 'red',
'& .c': {
color: 'gold'
}
}
}
});
});
it('should add rules', function () {
_get__('expect')(sheet.getRule('button')).to.not.be(undefined);
_get__('expect')(sheet.getRule('.button-id .a')).to.not.be(undefined);
_get__('expect')(sheet.getRule('.button-id .a .c')).to.not.be(undefined);
});
it('should generate correct CSS', function () {
_get__('expect')(sheet.toString()).to.be('.button-id {\n' + ' color: black;\n' + '}\n' + '.button-id .a {\n' + ' color: red;\n' + '}\n' + '.button-id .a .c {\n' + ' color: gold;\n' + '}');
});
});
describe('deep nesting with multiple nestings in one selector', function () {
var sheet = void 0;
beforeEach(function () {
sheet = jss.createStyleSheet({
button: {
color: 'black',
'& .a, .b': {
color: 'red',
'& .c, &:hover': {
color: 'gold'
}
}
}
});
});
it('should add rules', function () {
_get__('expect')(sheet.getRule('button')).to.not.be(undefined);
_get__('expect')(sheet.getRule('.button-id .a, .button-id .b')).to.not.be(undefined);
_get__('expect')(sheet.getRule('.button-id .a .c, .button-id .a:hover, ' + '.button-id .b .c, .button-id .b:hover')).to.not.be(undefined);
});
it('should generate correct CSS', function () {
_get__('expect')(sheet.toString()).to.be('.button-id {\n' + ' color: black;\n' + '}\n' + '.button-id .a, .button-id .b {\n' + ' color: red;\n' + '}\n' + '.button-id .a .c, .button-id .a:hover, ' + '.button-id .b .c, .button-id .b:hover {\n' + ' color: gold;\n' + '}');
});
});
describe('support & at any position', function () {
var sheet = void 0;
beforeEach(function () {
sheet = jss.createStyleSheet({
a: {
'input:focus + &': {
color: 'red'
}
}
});
});
it('should generate correct CSS', function () {
_get__('expect')(sheet.toString()).to.be('input:focus + .a-id {\n' + ' color: red;\n' + '}');
});
});
describe('function values', function () {
var sheet = void 0;
beforeEach(function () {
sheet = jss.createStyleSheet({
a: {
'&:hover': {
color: function color() {
return 'red';
}
}
}
});
sheet.update();
});
it('should generate correct CSS', function () {
_get__('expect')(sheet.toString()).to.be(_get__('stripIndent')(_templateObject));
});
});
});
function _getGlobalObject() {
try {
if (!!global) {
return global;
}
} catch (e) {
try {
if (!!window) {
return window;
}
} catch (e) {
return this;
}
}
}
;
var _RewireModuleId__ = null;
function _getRewireModuleId__() {
if (_RewireModuleId__ === null) {
var globalVariable = _getGlobalObject();
if (!globalVariable.__$$GLOBAL_REWIRE_NEXT_MODULE_ID__) {
globalVariable.__$$GLOBAL_REWIRE_NEXT_MODULE_ID__ = 0;
}
_RewireModuleId__ = __$$GLOBAL_REWIRE_NEXT_MODULE_ID__++;
}
return _RewireModuleId__;
}
function _getRewireRegistry__() {
var theGlobalVariable = _getGlobalObject();
if (!theGlobalVariable.__$$GLOBAL_REWIRE_REGISTRY__) {
theGlobalVariable.__$$GLOBAL_REWIRE_REGISTRY__ = Object.create(null);
}
return __$$GLOBAL_REWIRE_REGISTRY__;
}
function _getRewiredData__() {
var moduleId = _getRewireModuleId__();
var registry = _getRewireRegistry__();
var rewireData = registry[moduleId];
if (!rewireData) {
registry[moduleId] = Object.create(null);
rewireData = registry[moduleId];
}
return rewireData;
}
(function registerResetAll() {
var theGlobalVariable = _getGlobalObject();
if (!theGlobalVariable['__rewire_reset_all__']) {
theGlobalVariable['__rewire_reset_all__'] = function () {
theGlobalVariable.__$$GLOBAL_REWIRE_REGISTRY__ = Object.create(null);
};
}
})();
var INTENTIONAL_UNDEFINED = '__INTENTIONAL_UNDEFINED__';
var _RewireAPI__ = {};
(function () {
function addPropertyToAPIObject(name, value) {
Object.defineProperty(_RewireAPI__, name, {
value: value,
enumerable: false,
configurable: true
});
}
addPropertyToAPIObject('__get__', _get__);
addPropertyToAPIObject('__GetDependency__', _get__);
addPropertyToAPIObject('__Rewire__', _set__);
addPropertyToAPIObject('__set__', _set__);
addPropertyToAPIObject('__reset__', _reset__);
addPropertyToAPIObject('__ResetDependency__', _reset__);
addPropertyToAPIObject('__with__', _with__);
})();
function _get__(variableName) {
var rewireData = _getRewiredData__();
if (rewireData[variableName] === undefined) {
return _get_original__(variableName);
} else {
var value = rewireData[variableName];
if (value === INTENTIONAL_UNDEFINED) {
return undefined;
} else {
return value;
}
}
}
function _get_original__(variableName) {
switch (variableName) {
case 'nested':
return _2.default;
case 'create':
return _jss.create;
case 'settings':
return settings;
case 'expect':
return _expect2.default;
case 'jssExtend':
return _jssExtend2.default;
case 'stripIndent':
return _commonTags.stripIndent;
}
return undefined;
}
function _assign__(variableName, value) {
var rewireData = _getRewiredData__();
if (rewireData[variableName] === undefined) {
return _set_original__(variableName, value);
} else {
return rewireData[variableName] = value;
}
}
function _set_original__(variableName, _value) {
switch (variableName) {}
return undefined;
}
function _update_operation__(operation, variableName, prefix) {
var oldValue = _get__(variableName);
var newValue = operation === '++' ? oldValue + 1 : oldValue - 1;
_assign__(variableName, newValue);
return prefix ? newValue : oldValue;
}
function _set__(variableName, value) {
var rewireData = _getRewiredData__();
if ((typeof variableName === 'undefined' ? 'undefined' : _typeof(variableName)) === 'object') {
Object.keys(variableName).forEach(function (name) {
rewireData[name] = variableName[name];
});
} else {
if (value === undefined) {
rewireData[variableName] = INTENTIONAL_UNDEFINED;
} else {
rewireData[variableName] = value;
}
return function () {
_reset__(variableName);
};
}
}
function _reset__(variableName) {
var rewireData = _getRewiredData__();
delete rewireData[variableName];
if (Object.keys(rewireData).length == 0) {
delete _getRewireRegistry__()[_getRewireModuleId__];
}
;
}
function _with__(object) {
var rewireData = _getRewiredData__();
var rewiredVariableNames = Object.keys(object);
var previousValues = {};
function reset() {
rewiredVariableNames.forEach(function (variableName) {
rewireData[variableName] = previousValues[variableName];
});
}
return function (callback) {
rewiredVariableNames.forEach(function (variableName) {
previousValues[variableName] = rewireData[variableName];
rewireData[variableName] = object[variableName];
});
var result = callback();
if (!!result && typeof result.then == 'function') {
result.then(reset).catch(reset);
} else {
reset();
}
return result;
};
}
exports.__get__ = _get__;
exports.__GetDependency__ = _get__;
exports.__Rewire__ = _set__;
exports.__set__ = _set__;
exports.__ResetDependency__ = _reset__;
exports.__RewireAPI__ = _RewireAPI__;
exports.default = _RewireAPI__;

View File

@@ -0,0 +1,39 @@
const webpack = require('webpack')
const plugins = [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
__DEV__: process.env.NODE_ENV === 'development',
__TEST__: process.env.NODE_ENV === 'test'
})
]
if (process.env.NODE_ENV === 'production') {
plugins.push(new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}))
}
module.exports = {
output: {
library: 'jssNested',
libraryTarget: 'umd'
},
plugins,
module: {
loaders: [
{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
loader: 'json-loader',
test: /\.json$/
}
]
},
devtool: 'source-map'
}