├── .gitattributes
├── test.html
├── package.json
├── index.js
├── LICENSE
├── .gitignore
└── README.md
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/test.html:
--------------------------------------------------------------------------------
1 |
2 |
10 |
11 |
12 |
13 |
17 |
18 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "js-in-css-rt",
3 | "version": "0.0.2",
4 | "description": "\"cursed css-in-js runtime\"",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git+ssh://git@github.com/walaura/css-in-js-rt.git"
12 | },
13 | "author": "walaura",
14 | "license": "MIT",
15 | "bugs": {
16 | "url": "https://github.com/walaura/css-in-js-rt/issues"
17 | },
18 | "homepage": "https://github.com/walaura/css-in-js-rt#readme"
19 | }
20 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | const defaultConfig = {
2 | variable: 'eval',
3 | };
4 |
5 | const getStylesWithEval = variable => {
6 | const allStyles = [...document.styleSheets]
7 | .map(({ rules }) => rules)
8 | .reduce((cur, acc) => [...cur, ...acc], []);
9 |
10 | return allStyles.filter(
11 | s => s.style.getPropertyValue(`--${variable}`).length > 1
12 | );
13 | };
14 |
15 | const process = (stylesWithEval, variable) =>
16 | stylesWithEval.forEach(style => {
17 | try {
18 | const evalable = JSON.parse(
19 | style.style.getPropertyValue(`--${variable}`)
20 | );
21 | const fn = new Function([], evalable);
22 | [...document.querySelectorAll(style.selectorText)].forEach(el => {
23 | fn.bind(el)();
24 | });
25 | } catch (err) {
26 | console.error(err);
27 | console.error('Failed to parse CSS block:');
28 | console.error(style);
29 | }
30 | });
31 |
32 | const init = userConfig => {
33 | const { variable } = { ...defaultConfig, ...userConfig };
34 |
35 | const stylesWithEval = getStylesWithEval(variable);
36 | process(stylesWithEval, variable);
37 | };
38 |
39 | export const runtime = {
40 | init,
41 | };
42 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 Lau Skeeter
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.
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # TypeScript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # Yarn Integrity file
55 | .yarn-integrity
56 |
57 | # dotenv environment variables file
58 | .env
59 |
60 | # parcel-bundler cache (https://parceljs.org/)
61 | .cache
62 |
63 | # next.js build output
64 | .next
65 |
66 | # nuxt.js build output
67 | .nuxt
68 |
69 | # vuepress build output
70 | .vuepress/dist
71 |
72 | # Serverless directories
73 | .serverless
74 |
75 | # FuseBox cache
76 | .fusebox/
77 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # js-in-css-runtime
2 |
3 | Redistributable runtime for running JS-in-CSS in your own website
4 |
5 |
6 | 
7 |
8 |
9 | ## How to use
10 |
11 | Link the runtime to your page like this
12 |
13 | ```es6
14 | import { runtime } from 'js-in-css-rt';
15 |
16 | /* after your dom has loaded */
17 | runtime.init();
18 | ```
19 |
20 | This won't do much at first because you need some JS-in-CSS to get it going. In your stylesheet, add a `--eval` variable containing the JS you want to run. `this` will be mapped to the `Element` that matches the selector. For example this will make your footer both stylish and always be up to date with the current year:
21 |
22 | ```css
23 | footer {
24 | border: 3px solid red;
25 | color: white;
26 | background: blue;
27 | --eval: 'this.innerText = `©${(new Date).getFullYear()} My Web Site`';
28 | }
29 | ```
30 |
31 | ## FAQs
32 |
33 | ### Does this work with CSS processors such as SASS/Less/PostCSS
34 |
35 | Yes! The runtime targets compiled CSS at the last stage. Just make sure your compiler understands CSS variables and doesn't strip them out.
36 |
37 | ### Can I use this with native browser modules
38 |
39 | Yes! try `import { runtime } from 'node_modules/js-in-css-rt/index.js'`. You might want to invest in some tooling to not expose your entire `node_modules` folder.
40 |
41 | ### I'm unsure if this is an elaborate trolling attempt or a legitimate library
42 |
43 | Follow your heart and you will never go wrong
44 |
45 | ### Wait what
46 |
47 | Yeah no dont use this dont ever use this
48 |
49 | ### Does this work with CSS-in-JS solutions such as Emotion
50 |
51 | There's no reason it shouldn'd. Please let me know if you set that up it's been a somber month for me personally and I need a chuckle
52 |
53 | ### There's a typo in the previous answer
54 |
55 | Happy little accidents
56 |
--------------------------------------------------------------------------------