Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/css-george/postcss-george

A plugin for PostCSS to allow runtime manipulation of variables.
https://github.com/css-george/postcss-george

css-variables hacktoberfest postcss

Last synced: about 1 month ago
JSON representation

A plugin for PostCSS to allow runtime manipulation of variables.

Host: GitHub
URL: https://github.com/css-george/postcss-george
Owner: css-george
License: mit
Created: 2020-10-21T15:30:46.000Z (about 4 years ago)
Default Branch: main
Last Pushed: 2024-11-11T22:36:52.000Z (about 2 months ago)
Last Synced: 2024-11-11T23:28:36.795Z (about 2 months ago)
Topics: css-variables, hacktoberfest, postcss
Language: JavaScript
Size: 424 KB
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 1
Metadata Files:
- Readme: README.md
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

postcss-george
==============

A plugin for [PostCSS](https://postcss.org/) to allow runtime manipulation of
variables.

This plugin will take CSS variables marked with a comment, and add an
annotation to the resulting CSS file so that the values can be edited at
runtime using the CSS George editor. This is intended as a tool for designers
working with theming systems to experiment with colour palettes at a variable
level, which is often more broad than individual style rules as edited in the
browser developer tools.

Installation
------------

Installation is easy via npm:

```
npm install --save-dev postcss-george
```

Usage
-----

### Marking variables for export

In your .css files, you can add special comments to flag variables to be
exported as runtime-editable CSS variables. The special comment syntax is the
word `@export` preceeding the variable declaration.

All of the following examples are accepted:

```css
/* @export */ --header-bg: #ffffff;

/* @export */
--navbar-text: #333333;

/*@export*/ --navbar-height: 56px;
```

### Compiling with Exported Variables

Once you've installed the css-george plugin, you need to add the plugin to your
PostCSS configuration and it will generate an output .css file with the
exported variables defined as CSS variables.

Example `postcss.config.js`:

```javascript
module.exports = {
plugins: [
require('postcss-george')
]
}
```

Contributing
------------

Contributions of bug reports, feature requests, and pull requests are greatly
appreciated!

Please note that this project is released with a [Contributor Code of
Conduct](https://github.com/css-george/postcss-george/blob/main/CODE_OF_CONDUCT.md).
By participating in this project you agree to abide by its terms.

Licence
-------