Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"impliedStrict": true
}
},
"env": {
"node": true
},
"rules": {
"semi": [2, "always"],
"indent": [1, "tab", {"SwitchCase": 1}],
"brace-style": [2, "stroustrup"],
"no-array-constructor": [2],
"space-before-function-paren": [2, "always"],
"no-eq-null": 2,
}
}
12 changes: 6 additions & 6 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
node_modules
test
.DS_Store
LICENSE-MIT
Gruntfile.js
npm-debug.log
node_modules
test
.DS_Store
LICENSE*
npm-debug.log
.tern-project
60 changes: 60 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
# CSS to LESS
Convert css to less

```shell
npm install -g css2less
```

## Usage:
>+ `$ css2less [options] <input.css...>`

### CLI Options ###
#### --indent-size
Type: `number`
Default value: `1`
Desc: Indent size.

#### --indent-symbol
Type: `string`
Default value: `\t`
Desc: Indent symbol.

#### --selector-separator
Type: `string`
Default value: `,\n`
Desc: Selector separator.

#### --block-separator
Type: `string`
Default value: `\n`
Desc: Separator between blocks.

#### --block-on-newline
Type: `boolean`
Default value: `false`
Desc: Start first '{' from the new line

#### --update-colors
Type: `boolean`
Default value: `true`
Desc: Use variables for colors.

#### --vendor-mixins
Type: `boolean`
Default value: `true`
Desc: Create function for vendor styles.

#### --variables-path
Type: `string`
Desc: Path to 'variables.less' file where will be all colors stored.
Defaultly was colors stored on the top of each file, but with this given path will be generated with name prepended by relative path where 'variables.less' was stored.

## Pure JavaScript usage example:
```javascript
var fs = require('fs');
var css2less = require('css2less');

fs.createReadStream(cssFilePath)
.pipe(new css2less(options))
.pipe(fs.createWriteStream(lessFilePath));
```
109 changes: 109 additions & 0 deletions cli.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
#!/usr/bin/env node
/**
* css2less - entry point - command line interface
*
* Converter of pure CSS into the structured LESS keeping all the imports & comments
* and optionally extracting all the colors into variables.
* Original code by Serhey Shmyg, continued and extended by Martin Bórik.
*/

const appname = 'css2less';

const fs = require('fs');
const path = require('path');
const meow = require('meow');
const promisePipe = require("promisepipe");

const css2less = require('./index.js');
const utils = require('./utils.js');

let cli = meow(`
Usage:
$ ${appname} [options] <input.css...>

Options:
--indent-size Indent size (default 1)
--indent-symbol Indentation symbol (default: tab character)
--selector-separator String separator between selectors (default: comma and newline)
--block-separator Separator between blocks (default: newline character)
--block-on-newline Start first '{' from the newline after selector.
--update-colors Create variables for colors.
--vendor-mixins Create function for vendor styles.
-var, --variables-path Path to 'variables.less' file where will be all colors stored.
Defaultly was colors stored on the top of each file, but with
this given path will be generated with name prepended by
relative path where 'variables.less' was stored.

-h, --help Show help
-v, --version Version number
`, {
string: [ 'variables-path', 'indent-symbol', 'selector-separator', 'block-separator' ],
boolean: [ 'update-colors', 'vendor-mixins' ],
default: {
updateColors: true,
vendorMixins: false
},
stopEarly: true,
alias: {
var: 'variables-path',
h: 'help',
v: 'version'
}
});

if (!cli.input.length)
cli.showHelp();

// file processor...
utils.processFiles(cli.input, file => {
const filePath = path.resolve(process.cwd(), file);
const opt = Object.assign({ filePathway: [] }, cli.flags);

try {
if (!fs.statSync(filePath).isFile()) {
throw new Error('ENOTFILE');
}
}
catch (err) {
return Promise.reject(
new Error(`Invalid file: '${file}' (${err.message || err.code})`)
);
}

const ext = path.extname(file);
if (ext.toLowerCase() !== '.css') {
return Promise.reject(
new Error(`Invalid file: '${file}': Not a proper extension!`)
);
}

const fileDir = path.dirname(filePath);
const fileBaseName = path.basename(file, ext);
const lessFile = path.join(fileDir, fileBaseName + '.less');

opt.absFilePath = opt.absBasePath = utils.path2posix(path.resolve(fileDir));

if (opt.variablesPath) {
const varDir = path.dirname(opt.variablesPath);
const varRelPath = path.relative(varDir, fileDir);

if (varRelPath.length > 0) {
opt.filePathway = varRelPath.split(path.sep);
}

opt.filePathway.push(fileBaseName);
opt.absBasePath = utils.path2posix(path.resolve(varDir));
}

console.log(`Converting '${file}'...`);
return promisePipe(
fs.createReadStream(filePath),
new css2less(opt),
fs.createWriteStream(lessFile)
).then(stream => {
console.log(`> stored into '${lessFile}'.`);
}, err => {
console.error("> error: ", err.originalError);
fs.unlinkSync(lessFile);
});
});
150 changes: 150 additions & 0 deletions csscolors.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
{
"aliceblue": "#f0f8ff",
"antiquewhite": "#faebd7",
"aqua": "#00ffff",
"aquamarine": "#7fffd4",
"azure": "#f0ffff",
"beige": "#f5f5dc",
"bisque": "#ffe4c4",
"black": "#000000",
"blanchedalmond": "#ffebcd",
"blue": "#0000ff",
"blueviolet": "#8a2be2",
"brown": "#a52a2a",
"burlywood": "#deb887",
"cadetblue": "#5f9ea0",
"chartreuse": "#7fff00",
"chocolate": "#d2691e",
"coral": "#ff7f50",
"cornflowerblue": "#6495ed",
"cornsilk": "#fff8dc",
"crimson": "#dc143c",
"cyan": "#00ffff",
"darkblue": "#00008b",
"darkcyan": "#008b8b",
"darkgoldenrod": "#b8860b",
"darkgray": "#a9a9a9",
"darkgrey": "#a9a9a9",
"darkgreen": "#006400",
"darkkhaki": "#bdb76b",
"darkmagenta": "#8b008b",
"darkolivegreen": "#556b2f",
"darkorange": "#ff8c00",
"darkorchid": "#9932cc",
"darkred": "#8b0000",
"darksalmon": "#e9967a",
"darkseagreen": "#8fbc8f",
"darkslateblue": "#483d8b",
"darkslategray": "#2f4f4f",
"darkslategrey": "#2f4f4f",
"darkturquoise": "#00ced1",
"darkviolet": "#9400d3",
"deeppink": "#ff1493",
"deepskyblue": "#00bfff",
"dimgray": "#696969",
"dimgrey": "#696969",
"dodgerblue": "#1e90ff",
"firebrick": "#b22222",
"floralwhite": "#fffaf0",
"forestgreen": "#228b22",
"fuchsia": "#ff00ff",
"gainsboro": "#dcdcdc",
"ghostwhite": "#f8f8ff",
"gold": "#ffd700",
"goldenrod": "#daa520",
"gray": "#808080",
"grey": "#808080",
"green": "#008000",
"greenyellow": "#adff2f",
"honeydew": "#f0fff0",
"hotpink": "#ff69b4",
"indianred": "#cd5c5c",
"indigo": "#4b0082",
"ivory": "#fffff0",
"khaki": "#f0e68c",
"lavender": "#e6e6fa",
"lavenderblush": "#fff0f5",
"lawngreen": "#7cfc00",
"lemonchiffon": "#fffacd",
"lightblue": "#add8e6",
"lightcoral": "#f08080",
"lightcyan": "#e0ffff",
"lightgoldenrodyellow": "#fafad2",
"lightgray": "#d3d3d3",
"lightgrey": "#d3d3d3",
"lightgreen": "#90ee90",
"lightpink": "#ffb6c1",
"lightsalmon": "#ffa07a",
"lightseagreen": "#20b2aa",
"lightskyblue": "#87cefa",
"lightslategray": "#778899",
"lightslategrey": "#778899",
"lightsteelblue": "#b0c4de",
"lightyellow": "#ffffe0",
"lime": "#00ff00",
"limegreen": "#32cd32",
"linen": "#faf0e6",
"magenta": "#ff00ff",
"maroon": "#800000",
"mediumaquamarine": "#66cdaa",
"mediumblue": "#0000cd",
"mediumorchid": "#ba55d3",
"mediumpurple": "#9370db",
"mediumseagreen": "#3cb371",
"mediumslateblue": "#7b68ee",
"mediumspringgreen": "#00fa9a",
"mediumturquoise": "#48d1cc",
"mediumvioletred": "#c71585",
"midnightblue": "#191970",
"mintcream": "#f5fffa",
"mistyrose": "#ffe4e1",
"moccasin": "#ffe4b5",
"navajowhite": "#ffdead",
"navy": "#000080",
"oldlace": "#fdf5e6",
"olive": "#808000",
"olivedrab": "#6b8e23",
"orange": "#ffa500",
"orangered": "#ff4500",
"orchid": "#da70d6",
"palegoldenrod": "#eee8aa",
"palegreen": "#98fb98",
"paleturquoise": "#afeeee",
"palevioletred": "#db7093",
"papayawhip": "#ffefd5",
"peachpuff": "#ffdab9",
"peru": "#cd853f",
"pink": "#ffc0cb",
"plum": "#dda0dd",
"powderblue": "#b0e0e6",
"purple": "#800080",
"rebeccapurple": "#663399",
"red": "#ff0000",
"rosybrown": "#bc8f8f",
"royalblue": "#4169e1",
"saddlebrown": "#8b4513",
"salmon": "#fa8072",
"sandybrown": "#f4a460",
"seagreen": "#2e8b57",
"seashell": "#fff5ee",
"sienna": "#a0522d",
"silver": "#c0c0c0",
"skyblue": "#87ceeb",
"slateblue": "#6a5acd",
"slategray": "#708090",
"slategrey": "#708090",
"snow": "#fffafa",
"springgreen": "#00ff7f",
"steelblue": "#4682b4",
"tan": "#d2b48c",
"teal": "#008080",
"thistle": "#d8bfd8",
"tomato": "#ff6347",
"turquoise": "#40e0d0",
"violet": "#ee82ee",
"wheat": "#f5deb3",
"white": "#ffffff",
"whitesmoke": "#f5f5f5",
"yellow": "#ffff00",
"yellowgreen": "#9acd32"
}
1 change: 1 addition & 0 deletions cssprops.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
["align-content:", "align-items:", "align-self:", "animation:", "animation-delay:", "animation-direction:", "animation-duration:", "animation-fill-mode:", "animation-iteration-count:", "animation-name:", "animation-play-state:", "animation-timing-function:", "backface-visibility:", "background:", "background-attachment:", "background-blend-mode:", "background-clip:", "background-color:", "background-image:", "background-origin:", "background-position:", "background-repeat:", "background-size:", "border:", "border-bottom:", "border-bottom-color:", "border-bottom-left-radius:", "border-bottom-right-radius:", "border-bottom-style:", "border-bottom-width:", "border-collapse:", "border-color:", "border-image:", "border-image-outset:", "border-image-repeat:", "border-image-slice:", "border-image-source:", "border-image-width:", "border-left:", "border-left-color:", "border-left-style:", "border-left-width:", "border-radius:", "border-right:", "border-right-color:", "border-right-style:", "border-right-width:", "border-spacing:", "border-style:", "border-top:", "border-top-color:", "border-top-left-radius:", "border-top-right-radius:", "border-top-style:", "border-top-width:", "border-width:", "bottom:", "box-shadow:", "box-sizing:", "caption-side:", "clear:", "clip:", "color:", "column-count:", "column-fill:", "column-gap:", "column-rule:", "column-rule-color:", "column-rule-style:", "column-rule-width:", "column-span:", "column-width:", "columns:", "content:", "counter-increment:", "counter-reset:", "cursor:", "direction:", "display:", "empty-cells:", "filter:", "flex:", "flex-basis:", "flex-direction:", "flex-flow:", "flex-grow:", "flex-shrink:", "flex-wrap:", "float:", "font:", "@font-face:", "font-family:", "font-size:", "font-size-adjust:", "font-stretch:", "font-style:", "font-variant:", "font-weight:", "hanging-punctuation:", "height:", "justify-content:", "@keyframes:", "left:", "letter-spacing:", "line-height:", "list-style:", "list-style-image:", "list-style-position:", "list-style-type:", "margin:", "margin-bottom:", "margin-left:", "margin-right:", "margin-top:", "max-height:", "max-width:", "@media:", "min-height:", "min-width:", "nav-down:", "nav-index:", "nav-left:", "nav-right:", "nav-up:", "opacity:", "order:", "outline:", "outline-color:", "outline-offset:", "outline-style:", "outline-width:", "overflow:", "overflow-x:", "overflow-y:", "padding:", "padding-bottom:", "padding-left:", "padding-right:", "padding-top:", "page-break-after:", "page-break-before:", "page-break-inside:", "perspective:", "perspective-origin:", "position:", "quotes:", "resize:", "right:", "tab-size:", "table-layout:", "text-align:", "text-align-last:", "text-decoration:", "text-decoration-color:", "text-decoration-line:", "text-decoration-style:", "text-indent:", "text-justify:", "text-overflow:", "text-shadow:", "text-transform:", "top:", "transform:", "transform-origin:", "transform-style:", "transition:", "transition-delay:", "transition-duration:", "transition-property:", "transition-timing-function:", "unicode-bidi:", "vertical-align:", "visibility:", "white-space:", "width:", "word-break:", "word-spacing:", "word-wrap:", "z-index:"]
Loading