https://github.com/lukaskoeller/postcss-flexbox-gap

A polyfill for single line flexbox gap
https://github.com/lukaskoeller/postcss-flexbox-gap

Last synced: 6 days ago
JSON representation

A polyfill for single line flexbox gap

• Host: GitHub
• URL: https://github.com/lukaskoeller/postcss-flexbox-gap
• Owner: lukaskoeller
• License: mit
• Created: 2022-02-07T11:32:00.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-02-08T13:41:28.000Z (almost 3 years ago)
• Last Synced: 2024-01-24T04:11:29.981Z (10 months ago)
• Language: JavaScript
• Size: 984 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# postcss-flexbox-gap

> ⚠️ Not production ready. Can still include several bugs.

[PostCSS] plugin for single line flexbox gap.

[PostCSS]: https://github.com/postcss/postcss

```css

.foo {

  --gap: 24px;

  display: flex;

  gap: var(--gap);

}

```

```css

.foo {

  --gap: 24px;

  display: flex;

  gap: var(--gap);

  --pfg-gap: var(--gap);

}

.foo > * + * {

  margin-left: var(--pfg-gap);

}

```

## Usage

**Step 1:** Install plugin:

```sh

npm install --save-dev postcss postcss-flexbox-gap

```

**Step 2:** Check you project for existed PostCSS config: `postcss.config.js`

in the project root, `"postcss"` section in `package.json`

or `postcss` in bundle config.

If you do not use PostCSS, add it according to [official docs]

and set this plugin in settings.

**Step 3:** Add the plugin to plugins list:

```diff

module.exports = {

  plugins: [

+   require('postcss-flexbox-gap'),

    require('autoprefixer')

  ]

}

```

[official docs]: https://github.com/postcss/postcss#usage