Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
reason-css-modules-loader
Advanced tools
Readme
Webpack loader for ReasonML fans who want to use CSS Modules in their projects.
It's a drop-in replacement for css-loader. In other words, when you replace 'css-loader'
in your webpack.config.js
to 'reason-css-modules-loader'
. It'll work without any problem.
Install via npm npm install --save-dev reason-css-modules-loader
Just change 'css-loader'
with 'reason-css-modules-loader'
.
Example:
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'reason-css-modules-loader',
query: {
sourceMap: !isProduction,
importLoaders: 1,
localIdentName: isProduction ? '[hash:base64:5]' : '[local]__[hash:base64:5]'
}
},
]
}
]
}
}
Then, style definition files will be created under ./src/styles
directory. (You can change this with destDir
option.)
To include a CSS Module file to a Reason code, write code like below on the top of your ReasonML code:
let styles = [%raw {| require("./Component.css") |}]
Change the Component
above with your component name. If you're new to [$raw]
syntax. Click here.
Then, you can call CSS-Module-ized styles in your ReasonReact codes:
<div className=styles##isRead>
</div>
However, this code isn't type-safe. You can just use any class names that don't exist. So, let's add the type definition.
let styles: ComponentStyles.definition = [%raw {| require("./Component.css") |}]
NOTE: You cannot add the type definition in the beginning. Because *Styles.re
file doesn't exist becaust it is created by the reason-css-modules-loader.
So,
.bs.js
file.*Styles.re
file.Like original CSS Modules, you can use re-classnames.
<div className=Cn.make([styles##isRead, styles##blue])>
</div>
Some of you are wondering why ##
is used instead of .
or #
. It's because the compiled type is Js.t(object)
. Check this doc to learn more about this syntax.
You can just set options like any other loaders.
If it is an option that css-loader supports, you can use it.
NOTE: Unlike the default css-loader settings, modules
and camelCase
are forced to true
. And you cannot change them to false
.
It's not a bad decision because you don't need to use this loader if you don't want to use CSS Modules. And camel case is the naming convention of ReasonML.
destDir
optionBy default, CSS Modules type definition files are created under ./src/styles
folder to prevent clutter.
However, for some reason, you might want to change this location. Then, you can change it with destDir
option.
Example 1: Change it to ./src/css
folder.
{
loader: 'reason-css-modules-loader',
query: {
destDir: './src/css',
}
}
You can even create *Styles.re
files side-by-side to their relevant componants.
Example 2: Add Styles.re
file right next to .css
file.
{
loader: 'reason-css-modules-loader',
query: {
destDir: 'current',
}
}
NOTE: As ReasonML creates a compiled JavaScript version of each .re
file, I personally don't recommend creating Styles.re
files next to .css
. File tree becomes too cluttered.
Component.bs.js
Component.css
Component.re
ComponentStyles.bs.js
ComponentStyles.re
Don't you think it's too much?
If there wasn't typings-for-css-modules-loader, I couldn't make reason-css-modules-loader.
This module inspired and guided me.
FAQs
Webpack CSS Modules loader for ReasonML
We found that reason-css-modules-loader demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).