diff --git a/package.json b/package.json index 327541e..8c7af55 100644 --- a/package.json +++ b/package.json @@ -13,9 +13,7 @@ "reactcss" ], "dependencies": { - "classnames": "^2.2.0", "lodash": "^4.0.1", - "merge": "^1.2.0", "object-assign": "^4.1.0" }, "devDependencies": { diff --git a/src/deprecated/Component.js b/src/deprecated/Component.js deleted file mode 100644 index 98e3c73..0000000 --- a/src/deprecated/Component.js +++ /dev/null @@ -1,25 +0,0 @@ -/* eslint-disable no-console */ - -import React from 'react' -import inline from './inline' -import once from 'lodash/once' - -const warning = once(() => console.warn(`Extending ReactCSS.Component - is deprecated in ReactCSS 1.0.0`)) - -export class ReactCSSComponent extends React.Component { - static contextTypes = { - mixins: React.PropTypes.object, - }; - - css(obj) { - warning() - return inline.call(this, obj) - } - - styles() { - return this.css() - } -} - -export default ReactCSSComponent diff --git a/src/deprecated/check-class-structure.js b/src/deprecated/check-class-structure.js deleted file mode 100644 index 9ba449e..0000000 --- a/src/deprecated/check-class-structure.js +++ /dev/null @@ -1,26 +0,0 @@ -/* eslint-disable no-prototype-builtins, no-console */ - -import map from 'lodash/map' -import isObject from 'lodash/isObject' - -export const checkClassStructure = (classes) => { - map(classes, (elements, className) => { - if (classes.hasOwnProperty(className)) { - if (!isObject(elements)) { - console.warn(`Make sure the value of \`${ className }\` is an object of - html elements. You passed it \`${ elements }\``) - } else { - map(elements, (css, elementName) => { - if (elements.hasOwnProperty(elementName)) { - if (!isObject(css)) { - console.warn(`Make sure the value of the element \`${ className }\` - is an object of css. You passed it \`${ elements }\``) - } - } - }) - } - } - }) -} - -export default checkClassStructure diff --git a/src/deprecated/combine.js b/src/deprecated/combine.js deleted file mode 100644 index 3fb24df..0000000 --- a/src/deprecated/combine.js +++ /dev/null @@ -1,9 +0,0 @@ -import merge from './merge' -import mixins from './transform-mixins' - -export const combine = (styles, customMixins) => { - const merged = merge(styles) - return mixins(merged, customMixins) -} - -export default combine diff --git a/src/deprecated/inline.js b/src/deprecated/inline.js deleted file mode 100644 index 8b2d545..0000000 --- a/src/deprecated/inline.js +++ /dev/null @@ -1,71 +0,0 @@ -/* eslint-disable no-console, guard-for-in, no-restricted-syntax, no-plusplus, func-names */ - -import isObject from 'lodash/isObject' -import checkClassStructure from './check-class-structure' -import combine from './combine' - -/* - Inline CSS function. This is the half-way point until multiple inheritance exists - @param declaredClasses: Object{ 'class-name': true / false } - @returns object -*/ - -module.exports = function (declaredClasses) { - const arrayOfStyles = [] - - if (!this.classes) { - throw console.warn(`Define this.classes on \`${ this.constructor.name }\``) - } - - // Checks structure and warns if its odd - checkClassStructure(this.classes()) - - const activateClass = (name, options) => { - if (this.classes()[name]) { - arrayOfStyles.push(this.classes()[name]) - } else if (name && options && options.warn === true) { - console.warn(`The \`${ name }\` css class does not exist on \`${ this.constructor.name }\``) - } - } - - activateClass('default') - - for (const prop in this.props) { - const value = this.props[prop] - if (!isObject(value)) { - if (value === true) { - activateClass(prop) - activateClass(`${ prop }-true`) - } else if (value) { - activateClass(`${ prop }-${ value }`) - } else { - activateClass(`${ prop }-false`) - } - } - } - - // React Bounds - // http://casesandberg.github.io/react-bounds/ - // Activate classes that match active bounds - if (this.props && this.props.activeBounds) { - for (let i = 0; i < this.props.activeBounds.length; i++) { - const boundName = this.props.activeBounds[i] - activateClass(boundName) - } - } - - for (const name in declaredClasses) { - const condition = declaredClasses[name] - - if (condition === true) { - activateClass(name, { warn: true }) - } - } - - let customMixins = {} - if (this.context && this.context.mixins) { - customMixins = this.context.mixins - } - - return combine(arrayOfStyles, customMixins) -} diff --git a/src/deprecated/merge.js b/src/deprecated/merge.js deleted file mode 100644 index 43a94fd..0000000 --- a/src/deprecated/merge.js +++ /dev/null @@ -1,19 +0,0 @@ -import mrg from 'merge' -import isObject from 'lodash/isObject' - -const merge = (toMerge) => { - // If its an object, lets just return it - if (isObject(toMerge) && !Array.isArray(toMerge)) { - return toMerge - } - - // If the array only has one object in it, return it - if (toMerge.length === 1) { - return toMerge[0] - } - - // Else, lets just use the merge.js function: - return mrg.recursive.apply(this, toMerge) -} - -export default merge diff --git a/src/deprecated/transform-mixins.js b/src/deprecated/transform-mixins.js deleted file mode 100644 index 9c29736..0000000 --- a/src/deprecated/transform-mixins.js +++ /dev/null @@ -1,155 +0,0 @@ -/* eslint-disable consistent-return, guard-for-in, no-restricted-syntax, no-lonely-if */ - -import isObject from 'lodash/isObject' -import merge from 'merge' - -/* - Custom Props for the _mixins function - These custom props will eventually live in a file or config somewhere -*/ - -const localProps = { - borderRadius: (value) => { - if (value !== null) { - return { - msBorderRadius: value, - MozBorderRadius: value, - OBorderRadius: value, - WebkitBorderRadius: value, - borderRadius: value, - } - } - }, - - boxShadow: (value) => { - if (value !== null) { - return { - msBoxShadow: value, - MozBoxShadow: value, - OBoxShadow: value, - WebkitBoxShadow: value, - boxShadow: value, - } - } - }, - - userSelect: (value) => { - if (value !== null) { - return { - WebkitTouchCallout: value, - KhtmlUserSelect: value, - MozUserSelect: value, - msUserSelect: value, - WebkitUserSelect: value, - userSelect: value, - } - } - }, - - flex: (value) => { - if (value !== null) { - return { - WebkitBoxFlex: value, - MozBoxFlex: value, - WebkitFlex: value, - msFlex: value, - flex: value, - } - } - }, - - flexBasis: (value) => { - if (value !== null) { - return { - WebkitFlexBasis: value, - flexBasis: value, - } - } - }, - - justifyContent: (value) => { - if (value !== null) { - return { - WebkitJustifyContent: value, - justifyContent: value, - } - } - }, - - transition: (value) => { - if (value !== null) { - return { - msTransition: value, - MozTransition: value, - OTransition: value, - WebkitTransition: value, - transition: value, - } - } - }, - - transform: (value) => { - if (value !== null) { - return { - msTransform: value, - MozTransform: value, - OTransform: value, - WebkitTransform: value, - transform: value, - } - } - }, - - Absolute: (value) => { - if (value !== null) { - const direction = value.split(' ') - return { - position: 'absolute', - top: direction[0], - right: direction[1], - bottom: direction[2], - left: direction[3], - } - } - }, - - Extend: (name, otherElementStyles) => { - const otherStyle = otherElementStyles[name] - if (otherStyle) { - return otherStyle - } - }, - -} - -const transform = (styleObject, customFuncs, parent) => { - const customProps = merge(customFuncs, localProps) - const obj = {} - - for (const key in styleObject) { - const value = styleObject[key] - - // If its an object - if (isObject(value) && !Array.isArray(value)) { - // Lets go ahead and run again - obj[key] = transform(value, customFuncs, styleObject) - } else { - // Check to see if a custom prop exists for it - if (customProps[key]) { - // let loop though and save the results from the function - const customResults = customProps[key](value, parent) - for (const customKey in customResults) { - const customValue = customResults[customKey] - obj[customKey] = customValue - } - } else { - // If not, just copy it as-is - obj[key] = value - } - } - } - - return obj -} - -module.exports = (styleObject, customFuncs, parent) => transform(styleObject, customFuncs, parent) diff --git a/src/reactcss.js b/src/reactcss.js index f3e808c..e978fb2 100644 --- a/src/reactcss.js +++ b/src/reactcss.js @@ -1,12 +1,9 @@ -'use strict' - import objectAssign from 'object-assign' import flattenNames from './flattenNames' import mergeClasses from './mergeClasses' import autoprefix from './autoprefix' -export Component from './deprecated/Component' export hover from './components/hover' export handleHover from './components/hover' export handleActive from './components/active' diff --git a/test/deprecated/Component.test.js b/test/deprecated/Component.test.js deleted file mode 100644 index 08407b0..0000000 --- a/test/deprecated/Component.test.js +++ /dev/null @@ -1,12 +0,0 @@ -/* global describe, it, beforeEach, afterEach */ - -import { expect } from '../helpers' -const { Component } = require('../../src/reactcss') - -describe('Component', () => { - it('Check if its a function', () => { - expect(Component).to.be.function - }) - - // Add more tests here to check for css and styles props -}) diff --git a/test/deprecated/check-class-structure.test.js b/test/deprecated/check-class-structure.test.js deleted file mode 100644 index 377305d..0000000 --- a/test/deprecated/check-class-structure.test.js +++ /dev/null @@ -1,55 +0,0 @@ -/* global describe, it, beforeEach, afterEach */ -/* eslint no-console: 0 */ - -import { sinon } from '../helpers' -import checkClassStructure from '../../src/deprecated/check-class-structure' - -describe('Check Class Structure', () => { - const sandbox = sinon.sandbox.create() - - beforeEach(() => { - sandbox.stub(console, 'log') - sandbox.stub(console, 'error') - return sandbox.stub(console, 'warn') - }) - - afterEach(() => { - return sandbox.restore() - }) - - it('Accept basic class structure with no warnings', done => { - const before = { - 'default': { - element: { - foo: 'bar', - }, - title: { - color: '#333', - }, - }, - } - checkClassStructure(before) - sinon.assert.notCalled(console.warn) - return done() - }) - - it('Warn if class key is not given an object as a value', done => { - const before = { - 'default': 'string', - } - checkClassStructure(before) - sinon.assert.calledOnce(console.warn) - return done() - }) - - it('Warn if elements arent given an object as a value', done => { - const before = { - 'default': { - header: 'string', - }, - } - checkClassStructure(before) - sinon.assert.calledOnce(console.warn) - return done() - }) -}) diff --git a/test/deprecated/combine.test.js b/test/deprecated/combine.test.js deleted file mode 100644 index 60d253a..0000000 --- a/test/deprecated/combine.test.js +++ /dev/null @@ -1,95 +0,0 @@ -/* global describe, it, beforeEach, afterEach */ - -import { expect } from '../helpers' -import combine from '../../src/deprecated/combine' - -describe('Combine', () => { - it('merge and expand css', () => { - const before = [ - { - page: { - position: 'relative', - background: '#fafafa', - }, - header: { - font: '24px Roboto 600 rgba(0,0,0,.87)', - }, - }, { - page: { - background: '#333', - }, - header: { - color: 'rgba(255,255,255,.87)', - }, - card: { - borderRadius: '2', - }, - }, - ] - - const after = { - page: { - position: 'relative', - background: '#333', - }, - header: { - font: '24px Roboto 600 rgba(0,0,0,.87)', - color: 'rgba(255,255,255,.87)', - }, - card: { - msBorderRadius: '2', - MozBorderRadius: '2', - OBorderRadius: '2', - WebkitBorderRadius: '2', - borderRadius: '2', - }, - } - - expect(combine(before)).to.eql(after) - }) - - it('handle conditional styles', () => { - const two = 2 - - const before = [ - { - page: { - position: 'relative', - background: '#fafafa', - }, - header: { - font: '24px Roboto 600 rgba(0,0,0,.87)', - }, - }, two === 3 ? { - page: { - background: '#333', - }, - header: { - color: 'rgba(255,255,255,.87)', - }, - card: { - BorderRadius: '2', - }, - } : void 0, { - element: { - padding: '10px', - }, - }, - ] - - const after = { - page: { - position: 'relative', - background: '#fafafa', - }, - header: { - font: '24px Roboto 600 rgba(0,0,0,.87)', - }, - element: { - padding: '10px', - }, - } - - expect(combine(before)).to.eql(after) - }) -}) diff --git a/test/deprecated/inline.test.js b/test/deprecated/inline.test.js deleted file mode 100644 index 196b9c3..0000000 --- a/test/deprecated/inline.test.js +++ /dev/null @@ -1,165 +0,0 @@ -/* global describe, it, beforeEach, afterEach */ - -import { expect } from '../helpers' -import inline from '../../src/deprecated/inline' - -describe('React Inline', () => { - let that = {} - - beforeEach(() => { - that = {} - }) - - it('return a css object from a set of true class names', () => { - that.classes = () => { - return { - 'base': { - card: { - position: 'absolute', - }, - }, - } - } - - const before = { - 'foo': false, - 'base': true, - } - const after = { - card: { - position: 'absolute', - }, - } - - expect(inline.call(that, before)).to.eql(after) - }) - - it('return a css object from a bunch of class names', () => { - that.classes = () => { - return { - 'base': { - card: { - position: 'absolute', - }, - }, - 'outlined': { - card: { - border: '2px solid #aeee00', - }, - }, - 'disabled': { - card: { - display: 'none', - }, - }, - } - } - - const before = { - 'base': true, - 'outlined': true, - 'disabled': false, - } - const after = { - card: { - position: 'absolute', - border: '2px solid #aeee00', - }, - } - - expect(inline.call(that, before)).to.eql(after) - }) - - it('include the `default` class', () => { - that.classes = () => { - return { - 'default': { - card: { - position: 'absolute', - }, - }, - } - } - - const after = { - card: { - position: 'absolute', - }, - } - - expect(inline.call(that)).to.eql(after) - }) - - it('include any true props that match class names', () => { - that.props = { - isSelected: true, - dark: true, - } - that.classes = () => { - return { - 'default': { - card: { - position: 'absolute', - }, - }, - 'isSelected': { - card: { - color: '#aeee00', - border: '2px solid #aeee00', - }, - }, - 'dark-true': { - card: { - color: '#333', - }, - }, - } - } - - const after = { - card: { - position: 'absolute', - color: '#333', - border: '2px solid #aeee00', - }, - } - - expect(inline.call(that)).to.eql(after) - }) - - it('check if props and values match a class', () => { - that.props = { - isSelected: false, - zDepth: 2, - } - that.classes = () => { - return { - 'default': { - card: { - position: 'absolute', - }, - }, - 'isSelected-false': { - card: { - background: 'grey', - }, - }, - 'zDepth-2': { - card: { - border: '2px solid #333', - }, - }, - } - } - - const after = { - card: { - position: 'absolute', - background: 'grey', - border: '2px solid #333', - }, - } - - expect(inline.call(that)).to.eql(after) - }) -}) diff --git a/test/deprecated/merge.test.js b/test/deprecated/merge.test.js deleted file mode 100644 index 1a77965..0000000 --- a/test/deprecated/merge.test.js +++ /dev/null @@ -1,44 +0,0 @@ -/* global describe, it, beforeEach, afterEach */ - -import { expect } from '../helpers' -import merge from '../../src/deprecated/merge' - -describe('Merge', () => { - it('return the same object if it is passed one', () => { - const before = { - foo: 'bar', - baz: 'fin', - } - const after = { - foo: 'bar', - baz: 'fin', - } - - expect(merge(before)).to.eql(after) - }) - - return it('merge objects passed through array', () => { - const before = [ - { - card: { - background: '#fff', - margin: '0 6px', - }, - }, { - card: { - margin: '0', - boxShadow: '0 1px 4px rgba(0,0,0,.24)', - }, - }, - ] - const after = { - card: { - background: '#fff', - margin: '0', - boxShadow: '0 1px 4px rgba(0,0,0,.24)', - }, - } - - expect(merge(before)).to.eql(after) - }) -}) diff --git a/test/deprecated/transform-mixins.test.js b/test/deprecated/transform-mixins.test.js deleted file mode 100644 index 8b1c760..0000000 --- a/test/deprecated/transform-mixins.test.js +++ /dev/null @@ -1,187 +0,0 @@ -/* global describe, it, beforeEach, afterEach */ - -import { expect } from '../helpers' -import mixins from '../../src/deprecated/transform-mixins' - -describe('Mixins', () => { - it('return the same object if nothing matches', () => { - const before = { - card: { - position: 'absolute', - }, - } - const after = { - card: { - position: 'absolute', - }, - } - - expect(mixins(before)).to.eql(after) - }) - - it('skip selectors whos values are strings or arrays', () => { - const before = { - button: 'bigger', - } - const after = { - button: 'bigger', - } - const beforeArray = { - button: ['bigger'], - } - const afterArray = { - button: ['bigger'], - } - - expect(mixins(before)).to.eql(after) - expect(mixins(beforeArray)).to.eql(afterArray) - }) - - it('expand basic custom props where the output is just values', () => { - const before = { - card: { - borderRadius: '2px', - }, - } - const after = { - card: { - msBorderRadius: '2px', - MozBorderRadius: '2px', - OBorderRadius: '2px', - WebkitBorderRadius: '2px', - borderRadius: '2px', - }, - } - - expect(mixins(before)).to.eql(after) - }) - - it('expand custom props where the output is a complex eval', () => { - const before = { - card: { - Absolute: '0px 0px 0px 0px', - }, - } - const after = { - card: { - position: 'absolute', - top: '0px', - right: '0px', - bottom: '0px', - left: '0px', - }, - } - expect(mixins(before)).to.eql(after) - }) - - it('expand custom props where the output is a complex eval v2', () => { - const before = { - card: { - Absolute: '0px 0px 0px 0px', - background: '#fff', - }, - } - const after = { - card: { - position: 'absolute', - top: '0px', - right: '0px', - bottom: '0px', - left: '0px', - background: '#fff', - }, - } - - expect(mixins(before)).to.eql(after) - }) - - it('extend mixin copies styles from another element', () => { - const before = { - title: { - fontFamily: 'Roboto', - fontSize: '16px', - fontWeight: 'bold', - color: 'rgba(0,0,0,.87)', - }, - subtitle: { - Extend: 'title', - fontSize: '14px', - color: 'rgba(0,0,0,.57)', - }, - } - const after = { - title: { - fontFamily: 'Roboto', - fontSize: '16px', - fontWeight: 'bold', - color: 'rgba(0,0,0,.87)', - }, - subtitle: { - fontFamily: 'Roboto', - fontWeight: 'bold', - fontSize: '14px', - color: 'rgba(0,0,0,.57)', - }, - } - - expect(mixins(before)).to.eql(after) - }) - - it('be able to step through and epand a compex array properly', () => { - const before = { - body: { - sidebar: { - card: { - Absolute: '0px 0px 0px 0px', - }, - }, - }, - } - const after = { - body: { - sidebar: { - card: { - position: 'absolute', - top: '0px', - right: '0px', - bottom: '0px', - left: '0px', - }, - }, - }, - } - - expect(mixins(before)).to.eql(after) - }) - - return it('be able to pass through functions to transform', () => { - const customFunc = { - AddTogetherMargin: (value) => { - let total = 0 - let i = 0 - let len - const ref = value.split(' ') - for (len = ref.length; i < len; i++) { - const number = ref[i] - total += parseInt(number, 10) - } - - return { - margin: total, - } - }, - } - const before = { - body: { - AddTogetherMargin: '2 2', - }, - } - const after = { - body: { - margin: 4, - }, - } - - expect(mixins(before, customFunc)).to.eql(after) - }) -}) diff --git a/test/helpers/index.js b/test/helpers/index.js index 8f9148e..70d81e9 100644 --- a/test/helpers/index.js +++ b/test/helpers/index.js @@ -5,6 +5,7 @@ import ReactDOMServer from 'react-dom/server' import TestUtils from 'react-addons-test-utils' import { expect } from 'chai' import sinon from 'sinon' + require('testdom')('') export { diff --git a/test/plugins/react-bounds.test.js b/test/plugins/react-bounds.test.js index 7aab95b..884e89b 100644 --- a/test/plugins/react-bounds.test.js +++ b/test/plugins/react-bounds.test.js @@ -1,5 +1,3 @@ -// 'use strict'; -// // import { expect } from '../helpers'; // const inline = require('../../src/inline'); //