Node js css path

Node js css path

a fast nodejs css pre-processor that lets you use javascript to create css

css-node is a zero dependency highly extendable object oriented css pre-processor that uses valid javascript to construct css.

The goal of css-node is to create a nodejs based css pre-processor that is only limited by the capabilities of the nodejs javascript implementation and not confined to the limitations of it’s own api.

$ git clone https://github.com/angeal185/css-node.git

const  init > = require('css-node')
 
// build initial project setup ~ should only be called once
init()
 

const  build, watch > = require('css-node')
 
// watch files listed at config.watch.files
watch(function(file, stats)
 console.log(file); // log change detected file path
 console.log(stats); // log file stats
 
 // watch files listed at config.watch.files
 build(function(err, css)
 if(err)return console.log(err)>
 console.log(css) // compiled css
 >)
 
>)
 

commands valid within css-node dir

watch files and build on change

css-node starters are css files that have been converted to js for use in includes.

the starters could also be used as a basic reference for code format

css-node currently has starter include files for the following frameworks:

• the config file should be named ncss and be within your working dir
• the config file can be in the format of either .js or .json
• config values are constant throughout the execution of css-node

// ./ncss.json
 "dest": "/ncss/dist/app.min.css", //
 "globals": "/ncss/globals", // false || globals require path relative to cwd
 "mixins": "/ncss/mixins", // false || mixins require path relative to cwd
 "helpers": "/ncss/helpers", // false || helpers require path relative to cwd
 "sort_order": false, // sort css entries
 "sort_properties": false, // sort css entries properties
 "write_file": false, // callback css only if false
 "verbose": false, // print result to console
 "imports": [ // imports prepended to css file and in order of output
 "imported.css"
 ],
 "includes": [ // css imports path relative to cwd and in order of output
 "/ncss/includes/index.js"
 ],
 "watch": 
 "delay": 0, // watch delay response in ms
 "interval": 5007, // watch interval
 "files": [ // files to watch
 "/ncss/includes/index.js"
 ]
 >
>

// ./ncss.js
const config = 
 "dest": "/ncss/dist/app.min.css", // build file
 "globals": "/ncss/globals", // false || globals require path relative to cwd
 "mixins": "/ncss/mixins", // false || mixins require path relative to cwd
 "helpers": "/ncss/helpers", // false || helpers require path relative to cwd
 "sort_order": false, // sort css entries
 "sort_properties": false, // sort css entries properties
 "write_file": false, // callback css only if false
 "verbose": false, // print result to console
 "imports": [ // imports prepended to css file and in order of output
 "imported.css"
 ],
 "includes": [ // css imports path relative to cwd and in order of output
 "/ncss/includes/index.js"
 ],
 "watch": 
 "delay": 0, // watch delay response in ms
 "interval": 5007, // watch interval
 "files": [ // files to watch
 "/ncss/includes/index.js"
 ]
 >
>
 
module.exports = config
 

• imports inclided in your config file at config.imports will automatically be included in your final build.

/* imports:["example.css","example2.css"] */
 
@import "example.css";@import "example2.css";
 

within your includes is where your css is constructed. There is no limitation to what you can or cannot do using javascript to build your css, so long as the object exported, once executed, can be stringified into valid json.

• includes files have global access to globals, helpers and mixins
• you can require and use external modules from within any includes file

// include ~ "/ncss/includes/index.js"
 
let css = 
 body: 
 background: function()
 return "black"
 >,
 color: "#fff",
 "line-height": 0
 >
>
 
let arr = [];
for (let i = 1; i  13; i++) 
 arr.push(".col-"+ i);
 css[".col-"+ i] = 
 "width": ((i/12) * 100).toString().slice(0,7) + "%"
 >
>
 
css[arr.toString()] = 
 "-ms-flex": "none",
 flex: "none"
>
 
module.exports = css;
 

body 
 background: black;
 color: #fff;
 line-height: 0
>
 
.col-1 
 width: 8.33333%
>
 
.col-2 
 width: 16.6666%
>
 
.col-3 
 width: 25%
>
 
.col-4 
 width: 33.3333%
>
 
.col-5 
 width: 41.6666%
>
 
.col-6 
 width: 50%
>
 
.col-7 
 width: 58.3333%
>
 
.col-8 
 width: 66.6666%
>
 
.col-9 
 width: 75%
>
 
.col-10 
 width: 83.3333%
>
 
.col-11 
 width: 91.6666%
>
 
.col-12 
 width: 100%
>
 
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 
 -ms-flex: none;
 flex: none
>
 

the globals object is where you keep an object congaing variables that are available globally throughout css-node

• the g character is reserved for calling globals
• includes files, helpers and mixins have access to globals
• the globals file can be in the format of either .js or .json
• the globals file path can be edited at config.globals
• you can require and use external modules from within your globals file

// /ncss/globals/index.js
 
module.exports = 
 primary: "#333",
 font_family: "-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
 extend: require('some/extra/globals')
>

// include ~ /ncss/includes/index.js
 
let css = 
 "body": 
 "color": "#3b4351",
 "background": g.primary,
 "font-family": g.font_family,
 >
>
 
module.exports = css;

body 
 color: #3b4351;
 background: #333;
 font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif
>

• the m character is reserved for calling mixins
• mixins can be called from within includes files
• mixins can called from within mixins
• mixins have access to helpers and globals (h,g)
• the mixins file path can be edited at config.mixins
• set config.mixins to false to disable a mixins file
• set config.mixins to a require /file/path relative to your cwd to enable your mixins
• you can require and use external modules from within your mixins file
• you can require and use other mixin files from within your mixins file

// /ncss/mixins/index.js
 
module.exports = 
 text_size: function(obj, x)
 return Object.assign(obj, 
 "-webkit-text-size-adjust": x +"%",
 "-ms-text-size-adjust": x +"%"
 >)
 >
>

// include ~ /ncss/includes/index.js
 
let css = 
 html: m.text_size("font-family": "sans-serif">, 100)
>
 
module.exports = css;
 

html 
 font-family:sans-serif;
 -ms-text-size-adjust:100%;
 -webkit-text-size-adjust:100%
>

• the h character is reserved for calling helpers
• css-node has a built in list of helpers that is easily extendable.
• helpers can be called from within includes files and mixins
• helpers have access to globals (g)
• the helpers extend file path can be edited/disabled at config.helpers
• set config.helpers to false to disable a custom helpers file
• set config.helpers to a require /file/path relative to your cwd to enable your custom helpers
• you can require and use external modules from within your custom helpers file
• you can require and use extra helper files from within your custom helpers file
• you can replace any existing css-node base helper from within your custom helpers file

extra helpers can be added to the config.helpers file like so

// /ncss/helpers/index.js
 
module.exports = 
 rgb2hex(rgb) 
 let sep = rgb.indexOf(",") > -1 ? "," : " ";
 rgb = rgb.substr(4).split(")")[0].split(sep);
 
 let rh = (+rgb[0]).toString(16),
 gh = (+rgb[1]).toString(16),
 bh = (+rgb[2]).toString(16);
 
 if (rh.length == 1)
 rh = "0" + rh;
 >
 if (gh.length == 1)
 gh = "0" + gh;
 >
 if (bh.length == 1)
 bh = "0" + bh;
 >
 return "#" + rh + gh + bh;
 >
>

// include ~ base.js
 
let css = 
 body: 
 color: h.rgb2hex("rgb(255, 255, 255)"),
 background: h.rgba2hex("rgba(103, 58, 183, 0.91)")
 >
>
 
module.exports = css;

body: 
 color: #ffffff;
 background: #673ab7e8
>

// calculate
body: 
 "height": h.calc("2 * 6", "px"), // 12px
 "height": h.calc("6 / 2", "px") // 3px
 "height": h.calc("6 - 2", "em") // 4em
 "height": h.calc("6 + 2", "rem") //8rem
>
 

// plus
body: 
 "height": h.add(2, 4, "px") // 6px
>
 

// subtract
body: 
 "height": h.sub(4, 2, "px") // 2px
>
 

// multiply
body: 
 "height": h.mul(4, 2, "em") // 8em
>
 

// divide
body: 
 "height": h.div(4, 2, "em") // 2em
>
 

// Math.floor
body: 
 "height": h.floor(1.6, "em") // 1em
>
 

// Math.ceil
body: 
 "height": h.ceil(.95, "em") // 1em
>
 

// Math.abs
body: 
 "height": h.abs(-5, "em") // 5em
>
 

// Math.round
body: 
 "height": h.round(1.6, "em") // 2em
>
 

// return percentage
body: 
 "height": h.percent(10,200) // 5%
>
 

h.inRange(3, 2, 4); // true
 
h.inRange(30, 2, 4); // false
 
h.inRange(-3, -2, -6); // true
 

h.path.base("path/to/img.png") // 'img.png'
 
h.path.base("path/to/img.png", ".png") // 'img'
 

h.path.base("path/to/img.png") // 'path/to'
 

h.path.ext("path/to/img.png") // .'png'
 

h.path.join("/foo", "bar", "baz/asdf", "quux", ".."); // '/foo/bar/baz/asdf'
 

h.path.norm("/foo/bar//baz/asdf/quux/.."); // '/foo/bar/baz/asdf'
 

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how to import css file in node not express #1771

how to import css file in node not express #1771

Comments

hi, I build up http server,
I setting up a router and provide html file and css, js

. head> script> link href=". " script> head>

wrote each above, but, I couldn’t import css and js
how to using external css

The text was updated successfully, but these errors were encountered:

@alipiry
Hello,
first, I really aprociate response
here’s my answer

var exec = require("child_process").exec; var fs = require('fs'); function start(res)  console.log("Request handler 'start' was called."); var body = fs.readFileSync('./html/index.html', 'utf8'); res.writeHead(200, "Content-Type": "text/html">); res.write(body); console.log(body); res.end(); > function upload(res)  console.log("Request handler 'upload' was called."); res.writeHead(200, "Content-Type": "text/plain">); res.write("Hello Upload"); res.end(); > exports.start = start; exports.upload = upload;

html> head> meta charset pl-s">UTF-8"> style>(./css/index.css)style> head> body> div class pl-s">main"> div class pl-s">main_section_items"> div class pl-s">main_section_item"> h2>환영합니다.h2> p> 공고생의 블로그입니다. p> div> div class pl-s">main_section_item"> div> div> div> body> html>

now, I want to add import external css file on index.html file
I had a lot thing for.
npm install import-css and add
«

» on index.html file
but, there a page except css file..
I want to a personal webpage : )

Источник

Styling html pages in Node.js

We can add inline css styles as well in html directly.

Generally css is separated from the html code. Third option add css is to include a css file .

How to serve static files in Node.js?

Generally css files are added with below tag −

Express js provides a middleware to seve static file. This middleware gives read access to given folder.

path: its our core module in node.js

__dirname: Actual path to root folder of project

Public: Folder name which has read access fom node server

Css files will be stored in public folder.

Example usage of css file −

const http = require('http'); const path = require('path'); const express = require('express'); const bodyParser = require('body-parser'); const route = require('./routes'); const app = express(); app.use(bodyParser.urlencoded()); app.use(express.static(path.join(__dirname, 'public'))); app.use('/test',route); app.use((req, res,next)=> < res.status(404).send('
Page not found
 '); >); const server = http.createServer(app); server.listen(3000);

create a public folder in main project folder and store a main.css file under css folder in it.

const path = require('path'); const express = require('express'); const router = express.Router(); router.get('/add-username', (req, res,next)=> < // res.send('
  Send 
'); res.sendFile(path.join(__dirname, 'views', 'add-user.html')); >); router.post('/post-username', (req, res, next)=>< console.log('data: ', req.body.username); res.send('
'+req.body.username+'
'); >); module.exports = router;

Browse: localhost:3000/test/add-username and we will updated css for input field from css file.

Источник