Neurotic Pumpkin Murderer

    rx-css-loader

    0.1.13 • Public • Published

    rx-css-loader

    0.1.11

    fix border-width 0px bug

    0.1.9

    fix border-width =>borderWidth

    0.1.8

    fix border-width less than 1px will parse to 1px

    0.1.7

    fix border-width 1px will not parse to 2rem

    0.1.3

    fix: opacity translate to rem

    fix: flex bug:flex-grow && flex-basis && flex-shrink

    fix: ignnore css prefix info

    feature:add notValidate argument to hide warning

    rx-css-loader?notValidate=true

    **feature: add unit test

    • inspired by react-native-css-loader

    Installation

    $ npm install rx-css-loader --save-dev

    Usage

    within the webpack config:

    // only css:
    module: {
      loaders: [{
        test: /\.css$/,
        loader: 'rx-css-loader'
      }]
    }
     
    // use sass:
    module: {
      loaders: [{
        test: /\.rxscss$/,
        loader: 'rx-css-loader!sass-loader'
      }]
    }
     
    // use less:
    module: {
      loaders: [{
        test: /\.rxless$/,
        loader: 'rx-css-loader!less-loader'
      }]
    }
     

    Properties supported

    Any property found in your CSS will be camelCased. By default, this plugin will always output values as JavaScript Number or Boolean objects when appropriate. Values with units attached, including "em" and "px," will be output without their unit suffixes.

    Special-case properties

    The following properties output different keys to satisfy React Native's requirements. Unless otherwise noted, the values for each correspond with CSS3.

    Property Example Values Notes
    margin 2px

    2px 4px
    3px 1px 5px
    1px 3px 2px 6px | padding | 2px
    2px 4px
    3px 1px 5px
    1px 3px 2px 6px | box-shadow | none
    0 2px 4px rgba(52, 21, 23, 0.32) | Inset shadows and spread values are not supported. flex | 1
    1 30px
    1 2 10% | Only the first value will be output and the rest will be ignored, as React Native does not support flex-basis or flex-shrink. transform | perspective(90)
    rotate(10deg)
    rotateX(5deg)
    rotateY(10deg)
    rotateZ(15deg)
    rotate3d(5deg, 10deg, 15deg)
    scale(1.2)
    scaleX(1.5)
    scaleY(0.5)
    scale2d(1.5, 0.5) or scale3d(1.5, 0.5)
    translateX(5px)
    translateY(10px)
    translate2d(5px, 10px) or translate3d(5px, 10px) | You may chain multiple transformations together with a space delimiter, like in CSS3 (see example above).

    Contributing

    • Fork this Repo first
    • Clone your Repo
    • Install dependencies by $ npm install
    • Checkout a feature branch
    • Feel free to add your features
    • Make sure your features are fully tested
    • Publish your local branch, Open a pull request
    • Enjoy hacking <3

    Install

    npm i rx-css-loader

    DownloadsWeekly Downloads

    20

    Version

    0.1.13

    License

    MIT

    Last publish

    Collaborators

    • doub
    • fnatic
    • leanhunter