https://github.com/ramasilveyra/templatize-css

Templatize CSS files
https://github.com/ramasilveyra/templatize-css

css cssnext postcss templates

Last synced: 6 days ago
JSON representation

Templatize CSS files

• Host: GitHub
• URL: https://github.com/ramasilveyra/templatize-css
• Owner: ramasilveyra
• License: mit
• Created: 2018-08-07T14:46:06.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T03:19:53.000Z (almost 2 years ago)
• Last Synced: 2024-04-13T23:46:10.800Z (7 months ago)
• Topics: css, cssnext, postcss, templates
• Language: JavaScript
• Size: 880 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        


  

    

  

  

    

  

  

    

  



Templatize CSS files


> Do you want to generate dynamic CSS and you can't use CSS in JS?

Input


```css

:root {

  --main-primary-color: brown; /* templatize-css: track */

  --main-mobile-primary-color: brown; /* templatize-css: track */

  --main-text-color: #fff; /* templatize-css: track */

  --main-link-color: #000;

}

.btn {

  background-color: var(--main-primary-color);

  color: var(--main-text-color);

  border: 0;

  padding: 10px 40px;

}

.btn-link {

  background-color: var(--main-link-color);

  border: 0;

  padding: 10px 40px;

}

@media (min-width: 992px) {

  .btn::after {

    background-color: var(--main-mobile-primary-color);

    padding: 5px 10px;

  }

}

```

Output


```js

const defaults = {

  mainPrimaryColor: 'brown',

  mainMobilePrimaryColor: 'brown',

  mainTextColor: '#fff'

};

const templatize = locals => `.btn {

  background-color: ${locals.mainPrimaryColor || defaults.mainPrimaryColor};

  color: ${locals.mainTextColor || defaults.mainTextColor}

}

@media (min-width: 992px) {

  .btn::after {

    background-color: ${locals.mainMobilePrimaryColor || defaults.mainMobilePrimaryColor}

  }

}`;

module.exports = { defaults, templatize };

```

Table of Contents


- [Install](#install)

- [Usage](#usage)

- [Contribute](#contribute)

- [License](#license)

Install


**Node.js v8 or newer** is required.

Via the yarn client:

```bash

$ yarn add --dev templatize-css

```

Via the npm client:

```bash

$ npm install --save-dev templatize-css

```

Usage


API


#### Compile

```js

import { compile } from 'templatize-css';

const css = `:root {

  --main-bg-color: brown; /* templatize-css: track */

}

.btn {

  background-color: var(--main-bg-color);

}

`;

const template = compile(css);

```

#### Compile File

```js

import path from 'path';

import { compileFile } from 'templatize-css';

const cssFilePath = path.resolve(__dirname, 'input.css');

const templateFilePath = path.resolve(__dirname, 'template.js');

compileFile(cssFilePath, templateFilePath).then(() => {

  console.log('File Compiled! 🍕');

});

```

CLI


#### Compile File (`--out-file`/`-o`)

```bash

templatize-css src/main.css --out-file src/template-main-css.js

```

Contribute


Feel free to dive in! [Open an issue](https://github.com/ramasilveyra/templatize-css/issues/new) or submit PRs.

templatize-css follows the [Contributor Covenant](https://contributor-covenant.org/version/1/4/) Code of Conduct.

License


[MIT](LICENSE.md)