babel-plugin-app-decorators-style-precompile

babel-plugin-app-decorators-style-precompile

Babel Plugin for auto generating code

Installation

$ npm install babel-plugin-app-decorators-style-precompile --save

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["app-decorators-style-precompile"]
}

.babelrc options

"plugins": [
    ["app-decorators-style-precompile", {
        autoprefixer: "last 2 versions",
        minify: true
    }]
]

Via CLI

$ babel --plugins app-decorators-style-precompile script.js

Via Node API

require('babel').transform('code', {
  plugins: ['app-decorators-style-precompile']
});

The goal of this babel-plugin is precompile precomplie the stylesheet inside of @style:

Example

Input:

@view(`
    // this will be loaded async on load event
    @on load {
        @fetch my/async/styles1.css;
        @fetch my/async/styles2.css;
    }
    // this applied immediately
    .my-critical-path-selector {
        width: 100px;
        height: 100px;
    }
`)
class Foo {
 
}

Output:

@view([
    {
        attachOn: "load",
        imports: [
            "my/async/styles1.css",
            "my/async/styles1.css"
        ],
        styles: "",
        type: "on",
    },
    {
        attachOn: "immediately",
        imports: [],
        styles: ".my-critical-path-selector { width: 100px; height: 100px; }",
        type: "default",
    },
])
class Foo {
 
}

Tests

git clone https://github.com/SerkanSipahi/app-decorators.git
cd app-decorators/packages/babel-plugin-app-decorators-style-precompile
make install
make test