diff --git a/README.md b/README.md index 4f7262b..006c736 100644 --- a/README.md +++ b/README.md @@ -4,10 +4,10 @@ Stylance is a library and cli tool for working with scoped CSS in rust. **Features:** -- Import hashed class names from css files into your rust code as string constants. Trying to use a class name that doesn't exist in the css file becomes an error in rust. -- Bundle your css module files into a single output css file with all the class names transformed to include a hash (by using stylance cli). -- Class name hashes are deterministic and based on the relative path between the css file and your crate's manifest dir (where the Cargo.toml resides) -- CSS Bundle generation is independent of the rust build process, allowing for blazingly fast iteration when modifying the contents of a css style rule. +- Import hashed class names from css files into your rust code as string constants. Trying to use a class name that doesn't exist in the css file becomes an error in rust. +- Bundle your css module files into a single output css file with all the class names transformed to include a hash (by using stylance cli). +- Class name hashes are deterministic and based on the relative path between the css file and your crate's manifest dir (where the Cargo.toml resides) +- CSS Bundle generation is independent of the rust build process, allowing for blazingly fast iteration when modifying the contents of a css style rule. ## Usage @@ -30,7 +30,7 @@ Then use the import_crate_style proc macro to read a css/scss file and bring the ```css .header { - background-color: red; + background-color: red; } ``` @@ -56,7 +56,7 @@ Sometimes you might want to target classnames that are defined globally and outs ```css .my_scoped_class :global(.paragraph) { - color: red; + color: red; } ``` @@ -64,7 +64,7 @@ this will transform to: ```css .my_scoped_class-f45126d .paragraph { - color: red; + color: red; } ``` @@ -110,7 +110,7 @@ Resulting `./bundled.scss`: ```css .header-f45126d { - background-color: red; + background-color: red; } ``` @@ -181,6 +181,20 @@ extensions = [".module.scss", ".module.css"] # When generating an scss file stylance-cli will prepend this string # Useful to include a @use statement to all scss modules. scss_prelude = '@use "../path/to/prelude" as *;' + +# hash_len +# Controls how long the hash name used in scoped classes should be. +# It is safe to lower this as much as you want, stylance cli will produce an +# error if two files end up with colliding hashes. +# defaults to 7 +hash_len = 7 + +# class_name_pattern +# Controls the shape of the transformed scoped class names. +# [name] will be replaced with the original class name +# [hash] will be replaced with the hash of css module file path. +# defaults to "[name]-[hash]" +class_name_pattern = "my-project-[name]-[hash]" ``` ## Rust analyzer completion issues diff --git a/stylance-cli/README.md b/stylance-cli/README.md index 6cde4d1..f508214 100644 --- a/stylance-cli/README.md +++ b/stylance-cli/README.md @@ -4,8 +4,8 @@ Stylance-cli is the build tool for [Stylance](https://github.com/basro/stylance- It reads your css module files and transforms them in the following way: -- Adds a hash as suffix to every classname found. (`.class` will become `.class-63gi2cY`) -- Removes any instance of `:global(contents)` while leaving contents intact. +- Adds a hash as suffix to every classname found. (`.class` will become `.class-63gi2cY`) +- Removes any instance of `:global(contents)` while leaving contents intact. ## Installation @@ -31,7 +31,7 @@ Resulting `./bundled.scss`: ```css .header-f45126d { - background-color: red; + background-color: red; } ``` @@ -102,4 +102,18 @@ extensions = [".module.scss", ".module.css"] # When generating an scss file stylance-cli will prepend this string # Useful to include a @use statement to all scss modules. scss_prelude = '@use "../path/to/prelude" as *;' + +# hash_len +# Controls how long the hash name used in scoped classes should be. +# It is safe to lower this as much as you want, stylance cli will produce an +# error if two files end up with colliding hashes. +# defaults to 7 +hash_len = 7 + +# class_name_pattern +# Controls the shape of the transformed scoped class names. +# [name] will be replaced with the original class name +# [hash] will be replaced with the hash of css module file path. +# defaults to "[name]-[hash]" +class_name_pattern = "my-project-[name]-[hash]" ```