├── .gitignore
├── 01_basic_idea
    ├── Button.js
    ├── ButtonGroup.js
    ├── ButtonStyles.js
    ├── README.md
    └── index.js
├── LICENSE
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | *~
2 | local.mk
3 | build/
4 | tags
5 | .DS_Store
6 | Makefile
7 | node_modules/
8 | 


--------------------------------------------------------------------------------
/01_basic_idea/Button.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @jsx React.DOM
 3 |  */
 4 | 'use strict';
 5 | 
 6 | var StyleSheet = require('react-style');
 7 | var React = require('react');
 8 | 
 9 | class Button extends React.Component {
10 | 
11 |   constructor(props) {
12 |     super(props);
13 |     this.state = {
14 |       focus: false,
15 |       hover: false
16 |     };
17 |   }
18 | 
19 |   render() {
20 |     var props = this.props;
21 |     var state = this.state;
22 |     var styles = [
23 |       ButtonStyles.normalStyle,
24 |       props.active ? ButtonStyles.activeStyle : null,
25 |       state.hover ? ButtonStyles.hoverStyle : null,
26 |       state.focus ? ButtonStyles.focusStyle : null
27 |     ].concat(props.styles);
28 | 
29 |     return (
30 |       <button {...props} className="custom" styles={styles}
31 |         onMouseEnter={() => this.setState({hover: true})}
32 |         onMouseLeave={() => this.setState({hover: false})}
33 |         onFocus={() => this.setState({focus: true})}
34 |         onBlur={() => this.setState({focus: false})}>
35 |         {props.children}
36 |       </button>
37 |     );
38 |   }
39 | }
40 | 
41 | 
42 | var ButtonStyles = StyleSheet.create({
43 | 
44 |   normalStyle: {
45 |     backgroundColor: '#E6E6E6',
46 |     border: 'none rgba(0, 0, 0, 0)',
47 |     borderRadius: 3,
48 |     color: 'rgba(0, 0, 0, 0.70)',
49 |     cursor: 'pointer',
50 |     display: 'inline-block',
51 |     fontFamily: 'inherit',
52 |     fontSize: '100%',
53 |     lineHeight: 'normal',
54 |     padding: '0.5em 1em',
55 |     userSelect: 'none',
56 |     textAlign: 'center',
57 |     textDecoration: 'none',
58 |     verticalAlign: 'baseline',
59 |     whiteSpace: 'nowrap',
60 |     zoom: 1
61 |   },
62 | 
63 |   activeStyle: {
64 |     boxShadow: '0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset'
65 |   },
66 | 
67 |   hoverStyle: {
68 |     color: '#000',
69 |     backgroundImage: 'linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10))'
70 |   },
71 | 
72 |   focusStyle: {
73 |     backgroundImage: 'linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10))',
74 |     outline: 'none'
75 |   }
76 | 
77 | });
78 | 
79 | module.exports = Button;
80 | 


--------------------------------------------------------------------------------
/01_basic_idea/ButtonGroup.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @jsx React.DOM
 3 |  */
 4 | 'use strict';
 5 | 
 6 | var StyleSheet = require('react-style');
 7 | var React = require('react');
 8 | 
 9 | class ButtonGroup extends React.Component {
10 | 
11 |   render() {
12 |     return (
13 |       <div styles={ButtonGroupStyles.normalStyle}>
14 |         {this.props.children}
15 |       </div>
16 |     );
17 |   }
18 | }
19 | 
20 | var ButtonGroupStyles = StyleSheet.create({
21 | 
22 |   normalStyle: {
23 |     display: 'inline'
24 |   }
25 | 
26 | });
27 | 
28 | module.exports = ButtonGroup;
29 | 


--------------------------------------------------------------------------------
/01_basic_idea/ButtonStyles.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var StyleSheet = require('react-style');
 4 | 
 5 | var ButtonStyles = StyleSheet.create({
 6 | 
 7 |   primary: {
 8 |     backgroundColor: 'rgb(0, 120, 231)',
 9 |     color: '#fff'
10 |   },
11 | 
12 |   success: {
13 |     color: 'white',
14 |     background: 'rgb(28, 184, 65)'
15 |   },
16 | 
17 |   error: {
18 |     color: 'white',
19 |     background: 'rgb(202, 60, 60)'
20 |   }
21 | 
22 | });
23 | 
24 | module.exports = ButtonStyles;
25 | 


--------------------------------------------------------------------------------
/01_basic_idea/README.md:
--------------------------------------------------------------------------------
 1 | # Basic Idea
 2 | 
 3 | The code in this folder is based on the example from `react-style` at
 4 | 
 5 | ```
 6 | https://github.com/js-next/react-style/tree/f957e09dfb4948/examples/0.13/syntax
 7 | ```
 8 | 
 9 | and later modified to fit the design idea behind VirtualCSS.
10 | 


--------------------------------------------------------------------------------
/01_basic_idea/index.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @jsx React.DOM
  3 |  */
  4 | 'use strict';
  5 | 
  6 | require('normalize.css/normalize.css');
  7 | 
  8 | var StyleSheet   = require('react-style');
  9 | var React        = require('react');
 10 | var Button       = require('./Button');
 11 | var ButtonStyles = require('./ButtonStyles');
 12 | var ButtonGroup  = require('./ButtonGroup');
 13 | 
 14 | var TextAlignSwitcher = React.createClass({
 15 | 
 16 |   render() {
 17 |     var props = this.props;
 18 | 
 19 |     return (
 20 |       <ButtonGroup styles={props.styles}>
 21 |         <Button
 22 |           active={props.textAlign === 'left'}
 23 |           onClick={() => {props.onTextAlign('left')}}
 24 |           styles={[TextAlignSwitcherStyles.childStyle, TextAlignSwitcherStyles.firstChildStyle]}>
 25 |           Left
 26 |         </Button>
 27 |         <Button
 28 |           active={props.textAlign === 'center'}
 29 |           onClick={() => {props.onTextAlign('center')}}
 30 |           styles={[TextAlignSwitcherStyles.childStyle]}>
 31 |           Center
 32 |         </Button>
 33 |         <Button
 34 |           active={props.textAlign === 'right'}
 35 |           onClick={() => {props.onTextAlign('right')}}
 36 |           styles={[TextAlignSwitcherStyles.childStyle, TextAlignSwitcherStyles.lastChildStyle]}>
 37 |           Right
 38 |         </Button>
 39 |       </ButtonGroup>
 40 |     );
 41 |   }
 42 | });
 43 | 
 44 | var TextAlignSwitcherStyles = StyleSheet.create({
 45 | 
 46 |   childStyle: {
 47 |     borderRadius: 0,
 48 |     margin: 0
 49 |   },
 50 | 
 51 |   firstChildStyle: {
 52 |     borderTopLeftRadius: 3,
 53 |     borderBottomLeftRadius: 3
 54 |   },
 55 | 
 56 |   lastChildStyle: {
 57 |     borderTopRightRadius: 3,
 58 |     borderBottomRightRadius: 3
 59 |   }
 60 | 
 61 | });
 62 | 
 63 | var Application = React.createClass({
 64 | 
 65 |   getInitialState() {
 66 |     return {
 67 |       textAlign: 'left'
 68 |     };
 69 |   },
 70 | 
 71 |   render() {
 72 |     return (
 73 |       <div styles={ApplicationStyles.normalStyle}>
 74 |         <h1 styles={{textAlign: this.state.textAlign}}>Application</h1>
 75 |         <Button styles={[ButtonStyles.success]}>
 76 |           OK
 77 |         </Button>
 78 |         <Button styles={[ButtonStyles.error, ApplicationStyles.childStyle]}>
 79 |           Cancel
 80 |         </Button>
 81 |         <TextAlignSwitcher
 82 |           styles={ApplicationStyles.lastChild}
 83 |           onTextAlign={(textAlign) => this.setState({textAlign: textAlign})}
 84 |           />
 85 |       </div>
 86 |     );
 87 |   }
 88 | 
 89 | });
 90 | 
 91 | 
 92 | var ApplicationStyles = StyleSheet.create({
 93 | 
 94 |   normalStyle: {
 95 |     backgroundColor: 'white',
 96 |     fontSize: '10pt',
 97 |     padding: '1em',
 98 |     margin: 10
 99 |   },
100 | 
101 |   childStyle: {
102 |     marginRight: '0.5em'
103 |   },
104 | 
105 |   lastChildStyle: {
106 |     marginRight: 0
107 |   },
108 | 
109 |   '@media screen and (min-width: 800px)': {
110 |     normalStyle: {
111 |       backgroundColor: 'purple'
112 |     },
113 |     childStyle: {
114 |       marginLeft: 50
115 |     }
116 |   }
117 |     
118 | });
119 |   
120 | 
121 | if (typeof window !== 'undefined') {
122 |   React.render(<Application />, document.getElementById('app'));
123 | }
124 | 


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Planning for VirtualCSS
 2 | 
 3 | Repository for planning and brainstorming on VirtualCSS.
 4 | 
 5 | [![No Maintenance Intended](http://unmaintained.tech/badge.svg)](http://unmaintained.tech/)
 6 | 
 7 | For initial thoughts on the VirtualCSS system see the blog post [here](https://medium.com/@jviereck/modularise-css-the-react-way-1e817b317b04).
 8 | 
 9 | # Goal
10 | 
11 | 1. Ability to declare CSS styles in a way that a static CSS file can be produce during build time on the server.
12 | 2. Support the full feature when declaring CSS styles except cascading. That means in particular support pseudo selectors like :hover, media queries, and multiple declarations of the same style.
13 | 3. Support functions in the style declarations (see the `createSimpleButton` example [here](https://github.com/VirtualCSS/planning/issues/1#issuecomment-88999335)). This is in particular important to support CSS preprocessors similar to SASS on top of VirtualCSS but I also see value for pure CSS-in-JS solutions (e.g. a function for `gradients` that then will emit style definitions for gradients with all the vendor prefixes).
14 | 4. Ability to extend/overwrite style definitions. E.g. create a static substyle of "Button" called "BigButton" that is an enlarged version of "Button"
15 | 5. Ability to optimize the static CSS by rewriting the declared styles at build time.
16 | 6. Ability to provide developer tools extensions for browsers that makes tweeking the style definitions easy during development. 
17 | 
18 | # Non-Goals
19 | 
20 | 5. Do not support generation of inline styles. The problem is that by using inline styles covering the full feature set of CSS (e.g. pseudo selectors) is non trivial. As the [`react-style`](https://github.com/js-next/react-style) project shows, it is doable, so maybe a future version of VirtualCSS can work together with `react-style` to support inline styles. But for now to focus the scope of the VirtualCSS project I doubt it is a good idea to support both inline styles and static css.
21 | 7. Provide high level APIs to developers to interact with VirtualCSS. Developers should not interact with VirtualCSS directly but use a different library that builds on top of VirtualCSS and talks to the lower bits provided by VirtualCSS. This way VirtualCSS can concentrate on the essential parts and don't have to deal with user ergonomics.
22 | 
23 | # License
24 | 
25 | Please note that the license for the VirtualCSS project is MIT and
26 | by contributing to the project you agree with the license. MIT was chosen
27 | as many other css-in-js libraries also use the MIT license.
28 | 


--------------------------------------------------------------------------------