inline-css-modules-react v0.1.1
inline-css-modules-react
Write css-in-js using template literals, css modules, and React.
Install
This library uses react, and requires it as a peer dependency.
yarn add react inline-css-modules-react
# or
npm install react inline-css-modules-reactThis library also requires your css template literals to be converted to css
modules using
the babel-plugin-css-to-module:
yarn add -D postcss babel-plugin-css-to-module
# or
npm install -D postcss babel-plugin-css-to-moduleFollow the installation instructions to here: babel-plugin-css-to-module
Usage
import { cssModules, useCssModules } from "inline-css-modules-react";
function MyComponent() {
useCssModules(css);
return (
<div className={s.test}>Hello, World!</div>
);
}
// the
const { s, css } = cssModules`
.test {
background-color: red;
}
`;API
cssModules
cssModules(TemplateStringsArray, ...args: unknown[])
Returns:
{
s: Record<string, string>;
style: Record<string, string>; // alias of s
styles: Record<string, string>; // alias of s
css: { styles: string, id: string }
}This is where the babel plugin babel-plugin-css-to-module comes in. By
default, the plugin will target all tagged template literals
named cssModules, will transform your css during the build process, and
returns a new string.
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:
<div {s.test}>Hello, World!</div>We also offer some aliases for those that prefer some flexibility: s, style,
or styles.
The css property should be passed to your useCssModules hook.
useCssModules
useCssModules({ styles: string; id: string })
Returns: void
useCssModules(css);useCssModules will automatically mount/unmount your newly transformed css
inside your <head>. 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.
- Go to intellij's
Settings, and chooseEditor>Language Injections - Press the
+button and chooseJS Tagged Literal Injection - Name your new injection setting to something memorable, like
cssModules - Set your "Language ID" to
CSS(orSASSif you're using that) - Set "Places Patterns" to
+ taggedString("cssModules") - Leave all other options empty and click "OK"
- Enjoy css-in-js like a boss
MIT License
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.