├── .gitignore
├── .npmignore
├── .travis.yml
├── LICENSE
├── README.md
├── cjs
    ├── index.js
    └── package.json
├── es.js
├── esm
    └── index.js
├── index.js
├── min.js
├── package.json
├── rollup
    ├── babel.config.js
    └── es.config.js
└── test
    ├── index.html
    ├── index.js
    └── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | .nyc_output/
2 | node_modules/
3 | package-lock.json
4 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .nyc_output/
2 | node_modules/
3 | rollup/
4 | test/
5 | package-lock.json
6 | .travis.yml
7 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | node_js:
 3 |   - stable
 4 | git:
 5 |   depth: 1
 6 | branches:
 7 |   only:
 8 |     - master
 9 | after_success:
10 |   - "npm run coveralls"
11 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | ISC License
 2 | 
 3 | Copyright (c) 2020, Andrea Giammarchi, @WebReflection
 4 | 
 5 | Permission to use, copy, modify, and/or distribute this software for any
 6 | purpose with or without fee is hereby granted, provided that the above
 7 | copyright notice and this permission notice appear in all copies.
 8 | 
 9 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
10 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
11 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
12 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
13 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
14 | OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
15 | PERFORMANCE OF THIS SOFTWARE.
16 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # <em>µ</em>styler
 2 | 
 3 | [![Build Status](https://travis-ci.com/WebReflection/ustyler.svg?branch=master)](https://travis-ci.com/WebReflection/ustyler) [![Coverage Status](https://coveralls.io/repos/github/WebReflection/ustyler/badge.svg?branch=master)](https://coveralls.io/github/WebReflection/ustyler?branch=master)
 4 | 
 5 | A minimalistic CSS style injector, usable either as function or as template literal tag.
 6 | 
 7 | ```js
 8 | import css from 'ustyler';
 9 | // const css = require('ustyler');
10 | 
11 | const style = css`
12 |   body {
13 |     font-family: sans-serif;
14 |   }
15 | `;
16 | 
17 | setTimeout(() => style.remove(), 1000);
18 | ```
19 | 


--------------------------------------------------------------------------------
/cjs/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | /**
 3 |  * Create, append, and return, a style node with the passed CSS content.
 4 |  * @param {string|string[]} template the CSS text or a template literal array.
 5 |  * @param {...any} values the template literal interpolations.
 6 |  * @return {HTMLStyleElement} the node appended as head last child.
 7 |  */
 8 | function ustyler(template) {
 9 |   const text = typeof template == 'string' ? [template] : [template[0]];
10 |   for (let i = 1, {length} = arguments; i < length; i++)
11 |     text.push(arguments[i], template[i]);
12 |   const style = document.createElement('style');
13 |   style.type = 'text/css';
14 |   style.appendChild(document.createTextNode(text.join('')));
15 |   return document.head.appendChild(style);
16 | }
17 | module.exports = ustyler;
18 | 


--------------------------------------------------------------------------------
/cjs/package.json:
--------------------------------------------------------------------------------
1 | {"type":"commonjs"}


--------------------------------------------------------------------------------
/es.js:
--------------------------------------------------------------------------------
1 | var ustyle=function(e){"use strict";return e.default=function(e){const t="string"==typeof e?[e]:[e[0]];for(let n=1,{length:c}=arguments;n<c;n++)t.push(arguments[n],e[n]);const n=document.createElement("style");return n.type="text/css",n.appendChild(document.createTextNode(t.join(""))),document.head.appendChild(n)},e}({}).default;
2 | 


--------------------------------------------------------------------------------
/esm/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Create, append, and return, a style node with the passed CSS content.
 3 |  * @param {string|string[]} template the CSS text or a template literal array.
 4 |  * @param {...any} values the template literal interpolations.
 5 |  * @return {HTMLStyleElement} the node appended as head last child.
 6 |  */
 7 | export default function ustyler(template) {
 8 |   const text = typeof template == 'string' ? [template] : [template[0]];
 9 |   for (let i = 1, {length} = arguments; i < length; i++)
10 |     text.push(arguments[i], template[i]);
11 |   const style = document.createElement('style');
12 |   style.type = 'text/css';
13 |   style.appendChild(document.createTextNode(text.join('')));
14 |   return document.head.appendChild(style);
15 | };
16 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | var ustyle = (function (exports) {
 2 |   'use strict';
 3 | 
 4 |   /**
 5 |    * Create, append, and return, a style node with the passed CSS content.
 6 |    * @param {string|string[]} template the CSS text or a template literal array.
 7 |    * @param {...any} values the template literal interpolations.
 8 |    * @return {HTMLStyleElement} the node appended as head last child.
 9 |    */
10 |   function ustyler(template) {
11 |     var text = typeof template == 'string' ? [template] : [template[0]];
12 | 
13 |     for (var i = 1, length = arguments.length; i < length; i++) {
14 |       text.push(arguments[i], template[i]);
15 |     }
16 | 
17 |     var style = document.createElement('style');
18 |     style.type = 'text/css';
19 |     style.appendChild(document.createTextNode(text.join('')));
20 |     return document.head.appendChild(style);
21 |   }
22 | 
23 |   exports.default = ustyler;
24 | 
25 |   return exports;
26 | 
27 | }({}).default);
28 | 


--------------------------------------------------------------------------------
/min.js:
--------------------------------------------------------------------------------
1 | var ustyle=function(e){"use strict";return e.default=function(e){for(var t="string"==typeof e?[e]:[e[0]],n=1,r=arguments.length;n<r;n++)t.push(arguments[n],e[n]);var u=document.createElement("style");return u.type="text/css",u.appendChild(document.createTextNode(t.join(""))),document.head.appendChild(u)},e}({}).default;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ustyler",
 3 |   "version": "1.0.1",
 4 |   "description": "A minimalistic CSS style injector",
 5 |   "main": "./cjs/index.js",
 6 |   "scripts": {
 7 |     "build": "npm run cjs && npm run rollup:es && npm run rollup:babel && npm run min && npm run fix:default && npm run test",
 8 |     "cjs": "ascjs --no-default esm cjs",
 9 |     "rollup:es": "rollup --config rollup/es.config.js",
10 |     "rollup:babel": "rollup --config rollup/babel.config.js",
11 |     "min": "uglifyjs index.js --support-ie8 --comments=/^!/ -c -m -o min.js",
12 |     "fix:default": "sed -i 's/({})/({}).default/' index.js && sed -i 's/({})/({}).default/' es.js && sed -i 's/({})/({}).default/' min.js",
13 |     "coveralls": "nyc report --reporter=text-lcov | coveralls",
14 |     "test": "nyc node test/index.js"
15 |   },
16 |   "keywords": [
17 |     "css",
18 |     "style",
19 |     "inject"
20 |   ],
21 |   "author": "Andrea Giammarchi",
22 |   "license": "ISC",
23 |   "devDependencies": {
24 |     "@babel/core": "^7.8.7",
25 |     "@babel/preset-env": "^7.8.7",
26 |     "ascjs": "^3.1.2",
27 |     "coveralls": "^3.0.9",
28 |     "nyc": "^15.0.0",
29 |     "rollup": "^2.1.0",
30 |     "rollup-plugin-babel": "^4.4.0",
31 |     "rollup-plugin-node-resolve": "^5.2.0",
32 |     "rollup-plugin-terser": "^5.3.0",
33 |     "uglify-js": "^3.8.0"
34 |   },
35 |   "module": "./esm/index.js",
36 |   "type": "module",
37 |   "exports": {
38 |     "import": "./esm/index.js",
39 |     "default": "./cjs/index.js"
40 |   },
41 |   "unpkg": "min.js",
42 |   "repository": {
43 |     "type": "git",
44 |     "url": "git+https://github.com/WebReflection/ustyler.git"
45 |   },
46 |   "bugs": {
47 |     "url": "https://github.com/WebReflection/ustyler/issues"
48 |   },
49 |   "homepage": "https://github.com/WebReflection/ustyler#readme"
50 | }
51 | 


--------------------------------------------------------------------------------
/rollup/babel.config.js:
--------------------------------------------------------------------------------
 1 | import resolve from 'rollup-plugin-node-resolve';
 2 | import babel from 'rollup-plugin-babel';
 3 | 
 4 | export default {
 5 |   input: './esm/index.js',
 6 |   plugins: [
 7 |     
 8 |     resolve({module: true}),
 9 |     babel({presets: ['@babel/preset-env']})
10 |   ],
11 |   
12 |   output: {
13 |     exports: 'named',
14 |     file: './index.js',
15 |     format: 'iife',
16 |     name: 'ustyle'
17 |   }
18 | };
19 | 


--------------------------------------------------------------------------------
/rollup/es.config.js:
--------------------------------------------------------------------------------
 1 | import resolve from 'rollup-plugin-node-resolve';
 2 | import {terser} from 'rollup-plugin-terser';
 3 | 
 4 | export default {
 5 |   input: './esm/index.js',
 6 |   plugins: [
 7 |     
 8 |     resolve({module: true}),
 9 |     terser()
10 |   ],
11 |   
12 |   output: {
13 |     exports: 'named',
14 |     file: './es.js',
15 |     format: 'iife',
16 |     name: 'ustyle'
17 |   }
18 | };
19 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 |   <meta charset="UTF-8">
5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 |   <script src="../index.js"></script>
7 |   <script>ustyle('html{background:#000;color:#FFF;}body::before{content:"it works"}')</script>
8 | </head>
9 | </html>


--------------------------------------------------------------------------------
/test/index.js:
--------------------------------------------------------------------------------
 1 | global.document = {
 2 |   createElement: name => ({
 3 |     name,
 4 |     appendChild(child) {
 5 |       return (this.child = child);
 6 |     }
 7 |   }),
 8 |   createTextNode(text) {
 9 |     return {name: '#text', text};
10 |   }
11 | };
12 | 
13 | document.head = document.createElement('head');
14 | 
15 | const css = require('../cjs');
16 | 
17 | const style = css('body{color:green}');
18 | 
19 | console.assert(document.head.child === style);
20 | console.assert(style.name === 'style', 'correct name');
21 | console.assert(style.type === 'text/css', 'correct type');
22 | console.assert(style.child.name === '#text', 'correct text node');
23 | console.assert(style.child.text === 'body{color:green}', 'correct css text');
24 | 
25 | const tpl = css`body{color:${'red'}}`;
26 | 
27 | console.assert(document.head.child === tpl);
28 | console.assert(tpl.name === 'style', 'correct name');
29 | console.assert(tpl.type === 'text/css', 'correct type');
30 | console.assert(tpl.child.name === '#text', 'correct text node');
31 | console.assert(tpl.child.text === 'body{color:red}', 'correct css text');
32 | 


--------------------------------------------------------------------------------
/test/package.json:
--------------------------------------------------------------------------------
1 | {"type":"commonjs"}


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