https://github.com/nrkno/postcss-classes-to-mixins

Intelligently convert CSS classes to SASS, Less and Stylus mixins
https://github.com/nrkno/postcss-classes-to-mixins

Last synced: about 1 month ago
JSON representation

Intelligently convert CSS classes to SASS, Less and Stylus mixins

• Host: GitHub
• URL: https://github.com/nrkno/postcss-classes-to-mixins
• Owner: nrkno
• License: mit
• Created: 2019-01-14T12:38:34.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-06-22T09:19:56.000Z (about 2 years ago)
• Last Synced: 2024-07-18T12:11:59.235Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 571 KB
• Stars: 13
• Watchers: 6
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# postcss-classes-to-mixins

> [PostCSS] plugin to intelligently convert CSS classes to SASS, Less and Stylus mixins.

## Installation

```

npm install --save-dev postcss postcss-classes-to-mixins

```

## Example

Input:

```css

/* style.css */

.red-btn {

    background: red;

    color: white;

}

```

Output:

```scss

/* style.scss */

@mixin red-btn() {

    background: red;

    color: white;

}

```

## Usage

```js

import postcss from 'postcss'

import classesToMixins from 'postcss-classes-to-mixins'

import fs from 'fs'

const css = fs.readFileSync('style.css')

postcss([

  classesToMixins({     // Object: options

    scss: 'style.scss', // String: sass output

    less: 'style.less',  // String: less output

    styl: 'style.styl', // String: stylus output

    mixinsOnly: false // Defaults to false. true strips all non-classname selectors (like `body` etc.)

  })

]).process(css, {from: 'undefined'})

.then((done) => console.log('done!'))

```

This will write the output to the file paths specified.

See [PostCSS] docs for examples for your environment.

Now, import the exported stylesheet and start using the mixins:

```scss

/* my.scss */

@import 'style.scss'

.red-green-btn {

  @include red-button;

  color: green;

}

```

## Why?

When sharing CSS between projects you often want to distribute it so people can consume it in Sass, Less and Stylus.

This can be tricky without maintaining separate versions of the code written in each of these languages. Also,

when loading different versions of the same stylesheet globally (by widgets on the same page) name space collisions

will eventually occur, resulting in styling errors.

This plugin will solve that:

- Versioning: Class names from the exported CSS are no longer global and won't collide with each other.

Instead they are built into your own classes by extending them. This also makes your HTML more clean, as you don't need to use several

classes (`class="standard-btn red-btn my-btn"`) to style one thing.

- Three shaking: Using mixins you only include the styles that you actually use in your project, which is nice

for load. Loading the entire stylesheet globally (several times for each widget) is wasteful and not nice.

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