Have ideas to improve npm?Join in the discussion! »

    postcss-skin

    1.0.3 • Public • Published

    postcss-skin

    Dynamically create different skin/theme style with data.

    Kind of Demo

    For Sass

    skin-loader, base on Sass, Webpack

    Installation

    npm install --save-dev postcss-skin

    Plugin Options

    prefix

    For avoid the conflict of name.

    • Type: String
    • Default: '$'
    • Required: false
    require('postcss-skin')({
      prefix: '$',
    })

    How To Use

    App.jsx

    import React, { Component } from 'react';
     
    import temp from 'postcss-skin/lib/temp';
     
    temp({
      color: 'red',
      background: 'green',
      array: ['blue', 'purple'],
      obj: {
        attr: 'yellow',
      },
    });
     
    class App extends Component {
      render() {...}
    }
     
    export default App;

    App.scss

    .cus-skin-part {
      margin: 100px;
      padding: 100px;
      border-radius: 3px;
      color: '$obj.$attr';
      animation: 1s ani infinite;
    }
     
    @supports (display: block) {
      @media (max-width: 3000px) {
        .cus-skin-part {
          border: 3px solid '$background';
          text-shadow: 0 5px '$background';
        }
      }
    }
     
    @keyframes ani {
      0% {
        background: '$color';
      }
      20% {
        background: '$array[0]';
      }
      60% {
        background: '$array[1]';
      }
      80% {
        background: '$obj.$attr';
      }
      100% {
        background: '$background';
      }
    }

    webpack.config.js

    {
      module: {
        rules: [
          {
            test: /\.scss$/,
            use: [
              'style-loader',
              'css-loader?minimize',
              'resolve-url-loader',
              {
                loader: 'postcss-loader',
                options: {
                  plugins: [
                    require('postcss-skin'),
                  ],
                },
              },
              'sass-loader',
            ],
          },
        ],
      },
    }

    Install

    npm i postcss-skin

    DownloadsWeekly Downloads

    0

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    11.2 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar
    • avatar