babel-plugin-pre-style
npm install --save babel-plugin-pre-style
This is the Babel Plugin for Pre-Style. Refer to the root project for configuration options and general information. Note: This plugin does not work with the command line options of the original tool. You must use and specify a config file.
To use with Babel, add the following to your .babelrc
file:
{
"plugins": [
["pre-style", { "config": "path/to/PreStyleConfig.js" }]
]
}
Examples
Simple Button example
- This example features a simple setup where we're simply spitting out a styled button. Pre-Style sets the styles for the button in the button.js file. We're using Webpack and Babel to easily build our
bundle.js
file. To see the example, download the example folder and do anpm install
inside of thebutton
folder. Once all the dependencies have loaded, simply runnpm run build
to build thebundle.js
file. To view, use any static http-server on thebutton
folder. The source for this example is here.
With React, Webpack, and Hot Module Reloading:
- This example features a simple "Hello World" React application. We use Pre-Style in the wrapper.jsx file to set the base styles for a
<h1>
tag and then change the color once a second. To see the example, download the example folder and do anpm install
inside of theReactWebpackHMR
folder. Once all the dependencies have loaded, simply runnpm start
. The example features Hot Module Reloading so you can play with the markup and Pre-Style live. The source for this example is here.