[](https://badge.fury.io/js/inline-css-modules-react)
npm install inline-css-modules-reactinline-css-modules-react
Write css-in-js using template literals, css modules, and React.
This library uses react, and requires it
as a peer dependency.
``shell`
yarn add react inline-css-modules-reactor
npm install react inline-css-modules-react
This library also requires your css template literals to be converted to css
modules using
the babel-plugin-css-to-module:
`shell`
yarn add -D postcss babel-plugin-css-to-moduleor
npm install -D postcss babel-plugin-css-to-module
Follow the installation instructions to
here: babel-plugin-css-to-module
`typescript jsx
import { cssModules, useCssModules } from "inline-css-modules-react";
function MyComponent() {
useCssModules(css);
return (
// the
const { s, css } = cssModules
.test {
background-color: red;
};`
cssModules(TemplateStringsArray, ...args: unknown[])
Returns:
``
{
s: Record
style: Record
styles: Record
css: { styles: string, id: string }
}
This is where the babel plugin babel-plugin-css-to-module comes in. BycssModules
default, the plugin will target all tagged template literals
named , will transform your css during the build process, and
returns a new string.
`typescript jsx
const { s, css } = cssModules
.test {
background-color: red;
};`
If the babel plugin _is_ installed: the returned object from this function
will
be properly populated.
if the babel plugin _is not_ installed: the returned object will contain
empty
properties (and we'll shout at you with a console error 😉).
The s property is a collection of all your defined css class names:
`jsx`Hello, World!
We also offer some aliases for those that prefer some flexibility: s, style,styles
or .
The css property should be passed to your useCssModules hook.
useCssModules({ styles: string; id: string })
Returns: void
`jsx`
useCssModules(css);
useCssModules will automatically mount/unmount your newly transformed css
inside your
. If your component is already mounted, and you render
another one, the hook will not duplicate your css - it only gets added to the
head once.Syntax highlighting & intellisense
There are currently no IDE plugins to handle this right now - your template
literals will be just plain strings 😞... however intellij (or webstorm) offers
language injection and can easily be setup to give you full syntax highlighting
& intellisense.
1. Go to intellij's
Settings, and choose Editor > Language Injections
2. Press the + button and choose JS Tagged Literal Injection
3. Name your new injection setting to something memorable, like cssModules
4. Set your "Language ID" to CSS (or SASS if you're using that)
5. Set "Places Patterns" to + taggedString("cssModules")`Copyright (c) 2023 Tony Lefler
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.