Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/trevorblades/transform-css
🐠 Transforms CSS into beautifully formatted styles ready to use with a preprocessor
https://github.com/trevorblades/transform-css
css less sass stylus transform
Last synced: 3 months ago
JSON representation
🐠 Transforms CSS into beautifully formatted styles ready to use with a preprocessor
- Host: GitHub
- URL: https://github.com/trevorblades/transform-css
- Owner: trevorblades
- Created: 2014-08-24T20:22:53.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2023-01-13T22:19:18.000Z (about 2 years ago)
- Last Synced: 2024-04-14T21:45:54.694Z (9 months ago)
- Topics: css, less, sass, stylus, transform
- Language: JavaScript
- Homepage: https://transform-css.trevorblades.com
- Size: 16.4 MB
- Stars: 12
- Watchers: 3
- Forks: 4
- Open Issues: 34
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Transform CSS
[](https://github.com/trevorblades/transform-css/actions)
This library transforms CSS into beautifully formatted styles ready to use with a preprocessor like [LESS](http://lesscss.org/), [SASS](https://sass-lang.com/), or [Stylus](http://stylus-lang.com/). Check out a working example [here](http://transform-css.trevorblades.com)!
## Installation
```shell
$ npm install transform-css
```
## Usage
### transformCss(css, options)
Takes a string of CSS as input and returns a string of LESS/SASS. Descendant selectors, subclasses, and pseudo-classes will be nested where it makes sense. Sets of rules will be spaced out for increased readability. Pass `options` as a second argument to customize the format of the returned styles.
```js
import transformCss from 'transform-css';
const css = `
#id {
width: 420px;
color: green;
}
#id .child-class {
overflow: hidden;
}
#id .child-class p {
margin: 0 1em;
}
#id .child-class p:last-child {
margin-bottom: 0;
}
`;
transformCss(css);
```
This will produce the following output:
```less
#id {
width: 420px;
color: green;
.child-class {
overflow: hidden;
p {
margin: 0 1em;
&:last-child {
margin-bottom: 0;
}
}
}
}
```
## Options
### spaces
By default, two spaces will be used as indentation for the transformed styles. Use the `spaces` option to change this behaviour.
Specify a number to control the number of spaces used, or `false` to use tabs.
### omitBracketsAndSemicolons
By default, `transform-css` will produce code that follows LESS or SCSS syntax, which use brackets to separate selectors from rule declarations and semicolons to separate declarations from one another.
```less
#container {
height: 50px;
color: red;
.header {
position: sticky;
top: 24px;
}
}
```
On the other hand, SASS and Stylus use newlines and tabs to separate stylesheet elements from one another. Set the `omitBracketsAndSemicolons` option to `true` to use this syntax.
```js
transformCss(css, {omitBracketsAndSemicolons: true})
```
Turns into...
```stylus
#container
height: 50px
color: red
.header
position: sticky
top: 24px
```