1.0.1 • Published 4 years ago
niceui-build v1.0.1
NiceUI Build JS
Helpers for NiceUI framework.
Install
npm i -D niceui-build
Usage
Use Case 1: PostCSS stylesheet in Rust WASM Component. Stylesheet supports CSS Modules
In your Rust project create package.json
, postcss.config.js
, css/styles.module.css
and build.rs
and modify lib.rs
.
package.json
{
"scripts": {
"build": "postcss css --dir $OUT_DIR"
},
"devDependencies": {
"niceui-build": "^1.0.0",
"autoprefixer": "^9.8.0",
"cssnano": "^4.1.10",
"lost": "^8.3.1",
"postcss-cli": "^7.1.1",
"postcss-modules": "^2.0.0",
"postcss-preset-env": "^6.7.0"
}
}
postcss.config.js
module.exports = (ctx) => ({
plugins: [
require("autoprefixer")({ grid: false }),
require("postcss-preset-env")({ stage: 1 }),
require("lost")({}),
require("postcss-modules")({
getJSON: require('niceui-build').postCssPluginJsonToRustStruct,
}),
require("cssnano")({}),
],
});
css/styles.module.css
.example {
border: 1px solid green;
}
build.rs
use std::process::Command;
fn main() {
Command::new("npm").args(&["run", "build"]).status().unwrap();
println!("cargo:rerun-if-changed=css/styles.module.css");
println!("cargo:rerun-if-changed=package-lock.json");
println!("cargo:rerun-if-changed=package.json");
println!("cargo:rerun-if-changed=postcss.config.js");
println!("cargo:rerun-if-changed=build.rs");
}
lib.rs
include!(concat!(env!("OUT_DIR"), "/styles.module.rs"));
pub(crate) const STYLES_MODULE_CSS: &str =
include_str!(concat!(env!("OUT_DIR"), "/styles.module.css"));
pub(crate) fn test() {
eprintln!("{:?}", STYLES_MODULE_DEFAULT);
eprintln!("{}", STYLES_MODULE_DEFAULT.example);
eprintln!("{}", STYLES_MODULE_CSS);
}
Now you have type safe and modular css in Rust, congratulations!