postcss-classes-to-mixins

    3.0.1 • Public • Published

    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:

    /* style.css */
    .red-btn {
        background: red;
        color: white;
    }

    Output:

    /* style.scss */
    @mixin red-btn() {
        background: red;
        color: white;
    }

    Usage

    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:

    /* 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.

    Install

    npm i postcss-classes-to-mixins

    DownloadsWeekly Downloads

    58

    Version

    3.0.1

    License

    MIT

    Unpacked Size

    9.72 kB

    Total Files

    5

    Last publish

    Collaborators

    • suxiang
    • norasv
    • eschoien
    • unaons
    • trulsl
    • syndrol
    • henit
    • mslhm
    • cbjerkan
    • hermangudesen
    • andreeldareide
    • henningkoller
    • davhu
    • oleob
    • meisen
    • espenhalstensen
    • hakonknutzen2
    • danjohnrk
    • olapeter
    • teodor-elstad
    • michaelpande
    • lysebraate
    • yngvar-nrk
    • lorecaster
    • wwalmnes
    • nrk-ps-teamcity
    • vincent.andersson
    • swla
    • nrk-midas-jenkins
    • andorpandor
    • jarlelin
    • aevare
    • nrkrichard
    • gesi
    • gundelsby-nrk
    • jonstalecarlsen
    • machineboy
    • vagifabilov
    • nrk-sofie-ci
    • nytamin
    • jesperstarkar
    • loftum
    • emte123
    • skjalgepalg
    • eirikhalvard
    • astokke
    • n640071
    • n07073
    • kristian.rosenvold
    • henrik-mattsson
    • eirikbacker
    • haavardm
    • popeindustries
    • yr
    • nrk-kurator-jenkins
    • toshb
    • torgeilo
    • nrk-user-sync
    • dhdeploy
    • janerikbr
    • espenwa
    • rogerhmar
    • ovstetun
    • eivind
    • stianlj
    • haraldkj
    • mariusu
    • spesialsnorre
    • cristobal
    • knuthaug
    • thohalv
    • johnarne
    • nrk-sup-jenkins
    • eshaswini
    • morrow
    • oyvindeh
    • laat
    • toggu
    • nrk-jenkins
    • plomma
    • evjand
    • moltubakk
    • ingridguren
    • lu-lux
    • andersli
    • silje
    • stiandg
    • sjurlur
    • anderscan
    • andipodnrk
    • pkej
    • yosrimti
    • zenangst
    • morten.nyhaug
    • ingvildcath
    • erlend.jones
    • brneirik
    • mollerse
    • eriksalhus
    • frdrks
    • tbnrk
    • nordanke
    • balte
    • mikaelrss
    • simonmitternacht
    • christiankarlsson9
    • martintorgersen
    • rebchr
    • steipal
    • discobus
    • ingvesund
    • martingundersen
    • tinkajts
    • hallvardlid
    • tomivar
    • ajaco
    • tobinus
    • mortenok
    • nrk-ark-deploy
    • jeangilbertlouis
    • heidimork
    • ingriddraagen
    • fridajalborg
    • bruusi
    • rosvoll
    • christianeide
    • enordby
    • artzag
    • glen_imrie
    • mia.aasbakken
    • elathamna
    • evjjan17
    • olatoft
    • kongsrud
    • chrpeter
    • ingvildforseth
    • esseb
    • talepre
    • haraldk76
    • stigok
    • dagfinno
    • johannesodland
    • anders993
    • vildefj
    • vildepk
    • malinaandahl
    • andreakn
    • rolerboler
    • meloygutt
    • anders.baggethun
    • htor