https://github.com/autopaideia/postcss-flextype

PostCSS plugin that converts --flextype CSS variables into ::before pseudo content for use with flextype.js.
https://github.com/autopaideia/postcss-flextype

postcss postcss-plugin responsive

Last synced: 2 months ago
JSON representation

PostCSS plugin that converts --flextype CSS variables into ::before pseudo content for use with flextype.js.

• Host: GitHub
• URL: https://github.com/autopaideia/postcss-flextype
• Owner: autopaideia
• License: mit
• Created: 2017-03-07T23:48:07.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-03-12T01:55:28.000Z (over 9 years ago)
• Last Synced: 2025-08-24T01:36:03.200Z (10 months ago)
• Topics: postcss, postcss-plugin, responsive
• Language: JavaScript
• Size: 7.81 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# postcss-flextype

[![Build Status](https://img.shields.io/travis/autopaideia/postcss-flextype.svg)](https://travis-ci.org/autopaideia/postcss-flextype) [![Codecov](https://img.shields.io/codecov/c/github/autopaideia/postcss-flextype.svg)](https://codecov.io/github/autopaideia/postcss-flextype?branch=master) [![npm version](https://badge.fury.io/js/postcss-flextype.svg)](https://badge.fury.io/js/postcss-flextype) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

[PostCSS](https://github.com/postcss/postcss) plugin for use with [flextype](https://github.com/autopaideia/flextype) that converts `--flextype` declarations into hidden `::before` pseudo-content to work with browsers that don't yet support CSS variables.

## Example

### Input:

```css

.foo {

  --flextype: 5%;

}

.bar {

  --flextype: '{"100": 12, "500+": 18}';

}

```

### Output:

```css

.foo::before {

  content: '5%';

  display: none;

}

.bar::before {

  content: '{"100": 12, "500+": 18}';

  display: none;

}

```

## Install

```bash

npm install postcss-flextype --save

```

## Usage

```javascript

const postcss = require('postcss');

const flextype = require('postcss-flextype');

postcss([flextype]);

```

### Options

#### `replace` (type: `Boolean`, default: `true`)

If set to `false` postcss-flextype will leave the `--flextype` declarations in your CSS in addition to adding them as `::before` content.