├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── dicss.js
├── package.json
└── tests
├── dicss.spec.js
└── index.html
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 |
5 | # Runtime data
6 | pids
7 | *.pid
8 | *.seed
9 |
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 |
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 |
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 |
19 | # Compiled binary addons (http://nodejs.org/api/addons.html)
20 | build/Release
21 |
22 | # Dependency directory
23 | # Commenting this out is preferred by some people, see
24 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
25 | node_modules
26 |
27 | # Users Environment Variables
28 | .lock-wscript
29 |
30 | .DS_Store
31 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "0.12"
4 | - "0.11"
5 | - "0.10"
6 |
7 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Randy Hunt
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 all
13 | 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 THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [![build status][travis-image]][travis-url]
2 | [](https://codeclimate.com/github/letsgetrandy/DICSS)
3 | [](https://www.codacy.com/app/letsgetrandy/DICSS)
4 | [](https://www.bithound.io/github/letsgetrandy/DICSS)
5 |
6 | # DICSS
7 | Directly injected CSS - Finally, Sass has some _stiff_ competition!
8 |
9 | Forget Sass. Forget LESS. What you want is DICSS. Once you've had DICSS, you won't settle for LESS.
10 |
11 | Tired of separate build processes for your CSS and JS files? Fret no more. DICSS is Javascript. That means you can code your styles and your scripts in _one language_, and compile and minify everything to a single file. Once you try it, we're sure you'll love DICSS.
12 |
13 | DICSS is fun and easy to use!
14 |
15 | ## Is it safe?
16 | Don't worry. DICSS uses a wrapper.
17 |
18 | ## How do you use DICSS?
19 | Just grab DICSS and stick it wherever you like. DICSS works equally well in your `` or in your ``.
20 |
21 | ```html
22 |
23 |
24 |
25 | ```
26 |
27 | Then, go ahead and start putting DICSS in! Put 'em everywhere you like. Nobody will judge you for what you do with your DICSS.
28 |
29 | ```js
30 | DICSS.putIn('body', 'transition: .1s ease-in');
31 | DICSS.putIn('p', {
32 | "height": "100%",
33 | "width": "100%",
34 | "&.protection": {
35 | "border": "solid 1px transparent"
36 | },
37 | "a": {
38 | "color": "#fff"
39 | }
40 | });
41 | ```
42 |
43 | And when you're done with a style, you can easily remove it:
44 |
45 | ```js
46 | DICSS.pullOut('a', 'color');
47 | ```
48 |
49 | ## The possibilities are endless
50 | Since DICSS accepts JSON objects as styles, you can keep your CSS organized very methodically:
51 |
52 | ```js
53 | var widgetDICSS = {
54 | 'div.widget': {
55 | 'a': {
56 | font: '1em Verdana,Arial,sans-serif',
57 | margin: '.5em'
58 | }
59 | //... etc
60 | }
61 | };
62 | ```
63 |
64 | In fact, there's no reason you couldn't put your DICSS in the back-end, and then deliver them to the client, as needed, via REST service.
65 |
66 | ## Why no min version?
67 | It's not the size of DICSS that matters, it's what you can do with it.
68 |
69 | ## Can DICSS be extended?
70 | Yes! You can add whatever you want to DICSS. Just pass an object of methods into `DICSS.extend()`.
71 |
72 | DICSS keeps on growing! Some popular DICSS add-ons include
73 |
74 | * *COCSS* (cross-origin DICSS),
75 | * *SECSS* (security enhanced DICSS)
76 | * *DICSS-Pics* (DICSS plugin for working with images)
77 | * *Circum-Sizer* (calculate the circumference of a rounded element in CSS)
78 |
79 | Okay, so we admit, those add-ons don't actually exist yet. But there's nothing stopping you from making them!
80 |
81 | Got something you want to add to DICSS? Let us know! Help us make DICSS bigger and better than ever!
82 |
83 |
84 | ## Is DICSS compatible with other frameworks?
85 | Yes! There are projects currently underway to integrate DICSS with Knockout (KOCSS), Backbone (BoneDICSS), and Angular (Angular-DICSS).
86 |
87 | ## Does DICSS work with LaTeX?
88 | Yes, but it takes longer.
89 |
90 | ## It's not working. Help!
91 | Is it in yet? Go to your developer tools console and type `DICSS`. If it's `undefined`, that means you haven't put DICSS in yet.
92 |
93 | ## It's still not working!
94 | Don't overthink it. DICSS is only as hard as you make it.
95 |
96 | ## I don't like DICSS.
97 | That's okay. While we believe most people are fond of DICSS, we realize that DICSS isn't for everyone. There are plenty of alternatives. Feel free to use them instead. And please, never force someone to use DICSS if they're not willing.
98 |
99 | ## Performance has gotten worse. It doesn't come up as fast as it used to.
100 | Maybe you're using DICSS in the lower ``? Some people experience faster response times using `` or delivering DICSS through the backend.
101 |
102 | ## THIS IS NUTS!
103 | No, this is DICSS. [NUTS](https://github.com/letsgetrandy/NUTS) is something else.
104 |
105 |
106 | [travis-image]: https://img.shields.io/travis/letsgetrandy/DICSS/master.svg?style=flat-square
107 | [travis-url]: https://travis-ci.org/letsgetrandy/DICSS
108 |
--------------------------------------------------------------------------------
/dicss.js:
--------------------------------------------------------------------------------
1 | // dicss -- directly injected css
2 | (function() {
3 | 'use strict';
4 |
5 | if ( ({})<=8 ) {
6 | // yeah, you get it...
7 | }
8 |
9 | var stylesheet, styletag = document.createElement('style');
10 | styletag.setAttribute('id', 'dicss_wrapper');
11 | document.body.appendChild(styletag);
12 | stylesheet = styletag.sheet ? styletag.sheet : styletag.styleSheet;
13 |
14 | function addRule(selector, rule) {
15 | var rules = '', property, value;
16 | if (rule.constructor === String) {
17 | rules += rule;
18 | } else {
19 | for (property in rule) {
20 | if (rule.hasOwnProperty(property)) {
21 | value = rule[property];
22 | if (value instanceof Object) {
23 | property = (/^:|&/.test(property) ? '' : ' ') + property.replace('&', '');
24 | property = property.replace(/,\s?/g, ', ' + selector + ' ');
25 | addRule(selector + property, value);
26 | continue;
27 | }
28 | rules += property + ':' + value + ';';
29 | }
30 | }
31 | }
32 | if (!rules) {
33 | return;
34 | }
35 | if (stylesheet.insertRule) {
36 | stylesheet.insertRule(selector + ' { ' + rules + ' } ', stylesheet.cssRules.length);
37 | } else {
38 | // IE <9
39 | if (stylesheet.addRule) {
40 | stylesheet.addRule(selector, rules);
41 | }
42 | }
43 | }
44 |
45 | function removeRule(selector, property) {
46 | var i, j, selectors,
47 | rules = stylesheet.cssRules || stylesheet.rules || [];
48 | selector = selector.toLowerCase();
49 |
50 | for (i = 0; i < rules.length; i++) {
51 | selectors = rules[i].selectorText.toLowerCase().split(/[, ]+/);
52 | for (j = 0; j < selectors.length; j++) {
53 | if (selectors[j] === selector) {
54 | if (selectors.length === 0) {
55 | rules[i].style.removeProperty(property);
56 | } else {
57 | Array.prototype.splice.call(selectors, j, 1);
58 | rules[i].selectorText = selectors.join(', ');
59 | }
60 | break;
61 | }
62 | }
63 | }
64 | }
65 |
66 | function extend(obj) {
67 | var attr;
68 | for (attr in obj) {
69 | if (obj.hasOwnProperty(attr)) {
70 | window.DICSS[attr] = obj[attr];
71 | }
72 | }
73 | }
74 |
75 | window.DICSS = {
76 | "putIn": function(selector, properties) {
77 | if (properties !== void 0) {
78 | addRule.apply(this, arguments);
79 | return
80 | }
81 | try {
82 | selector = JSON.parse(selector);
83 | } catch (err) {
84 | if (typeof selector === 'string') {
85 | throw 'You forgot to put the DICSS in - ' + err;
86 | }
87 | }
88 | for (properties in selector) {
89 | if (selector.hasOwnProperty(properties)) {
90 | addRule(properties, selector[properties]);
91 | }
92 | }
93 | },
94 | "pullOut": removeRule
95 | };
96 | })();
97 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "DICSS",
3 | "version": "1.0.0",
4 | "description": "Directly Injected CSS",
5 | "main": "dicss.js",
6 | "directories": {
7 | "test": "tests"
8 | },
9 | "scripts": {
10 | "test": "mocha-phantomjs tests/index.html"
11 | },
12 | "repository": {
13 | "type": "git",
14 | "url": "https://github.com/letsgetrandy/DICSS.git"
15 | },
16 | "keywords": [
17 | "css"
18 | ],
19 | "author": "Randy Hunt",
20 | "license": "ISC",
21 | "bugs": {
22 | "url": "https://github.com/letsgetrandy/DICSS/issues"
23 | },
24 | "homepage": "https://github.com/letsgetrandy/DICSS",
25 | "devDependencies": {
26 | "chai": "^2.1.2",
27 | "eslint": "^0.17.0",
28 | "mocha": "^2.2.1",
29 | "mocha-phantomjs": "^3.5.3",
30 | "phantomjs": "^1.9.16"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/tests/dicss.spec.js:
--------------------------------------------------------------------------------
1 |
2 | describe('DICSS', function() {
3 | 'use strict';
4 |
5 | var stylesheet = document.querySelector('#dicss_wrapper');
6 |
7 | it('should be pulled', function() {
8 | expect(window.DICSS).not.to.equal(void 0);
9 | });
10 |
11 | it('should inject styles with JSON string argument', function() {
12 | DICSS.putIn(JSON.stringify({
13 | "span": {
14 | "display": "block"
15 | }
16 | }));
17 | var rules = stylesheet.sheet.cssRules;
18 | expect(rules[rules.length - 1].cssText).to.equal('span { display: block; }');
19 | });
20 |
21 | it ('should apply pseudo selectors to parent', function() {
22 | DICSS.putIn({
23 | "a": {
24 | ":hover": {
25 | "text-decoration": "underline",
26 | "opacity": "0.8"
27 | }
28 | }
29 | });
30 | var rules = stylesheet.sheet.cssRules;
31 | expect(rules[rules.length - 1].cssText).to.equal('a:hover { text-decoration: underline; opacity: 0.8; }');
32 | });
33 |
34 | it ('should apply "&" selector to parent', function() {
35 | DICSS.putIn({
36 | "h1": {
37 | "&.active": {
38 | "color": "white"
39 | }
40 | }
41 | });
42 | var rules = stylesheet.sheet.cssRules;
43 | expect(rules[rules.length - 1].cssText).to.equal('h1.active { color: white; }');
44 | });
45 |
46 | });
47 |
48 |
--------------------------------------------------------------------------------
/tests/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | tests : plus
4 |
5 |
6 |
7 |
8 |
9 |
10 |
14 |
15 |
16 |
23 |
24 |
25 |
--------------------------------------------------------------------------------