free-style
Advanced tools
Free-Style is designed to make CSS easier and more maintainable by using JavaScript.
npm install free-style --save
There's a great presentation by Christopher Chedeau you should check out.
.button? Why is it conflicting?)<script />).class-name in your styles)ul > li > a){ '&:hover': { ... } })@-rule styles ({ '@media (min-width: 500px)': { ... } }){ backgroundColor: ['red', 'linear-gradient(to right, red 0%, blue 100%)'] })Free-Style generates a consistent hash from the style, after alphabetical property ordering and formatting, to use as the class name. This allows duplicate styles to automatically be merged on duplicate hashes. Every style is "registered" and assigned to a variable, which gets the most out of linters that will warn on unused variables and features like dead code minification. Using "register" returns the class name used for the Style instance and style instances (returned by create()) can be merged together at runtime to output only the styles on page (e.g. React Free-Style). Styles should usually be created outside of the application run loop (e.g. render()) so the CSS string and hashes are only generated once.
typestyle - Popular type-safe interface for working with CSSreact-free-style - React implementation that renders styles on the current page (for universal apps)stylin - Simplest abstraction for creating styles, rules, and keyframes, and keeps <style /> in syncethcss - Library for writing CSS with literal objectsvar FreeStyle = require("free-style");
// Create a stylesheet instance.
var Style = FreeStyle.create();
// Register a new style, returning a class name to use.
var backgroundStyle = Style.registerStyle({
backgroundColor: "red",
}); //=> "f14svl5e"
// Inject `<style>` into the `<head>`.
var styleElement = document.createElement("style");
styleElement.textContent = Style.getStyles();
document.head.appendChild(styleElement);
// Render the style by using the class name.
React.render(
<div className={backgroundStyle}>Hello world!</div>,
document.body
);
var buttonStyle = Style.registerStyle({
$displayName: "button",
backgroundColor: "red",
padding: 10,
});
console.log(buttonStyle); //=> "button_f65pi0b"
Tip: The string returned by registerStyle is a unique hash of the content and used as the HTML class name. The $displayName is only used during development, and stripped in production (process.env.NODE_ENV === 'production').
Style.registerStyle({
background: [
"red",
"-moz-linear-gradient(left, red 0%, blue 100%)",
"-webkit-linear-gradient(left, red 0%, blue 100%)",
"-o-linear-gradient(left, red 0%, blue 100%)",
"-ms-linear-gradient(left, red 0%, blue 100%)",
"linear-gradient(to right, red 0%, blue 100%)",
],
}); //=> "f1n85iiq"
Style.registerStyle({
color: "red",
"@media (min-width: 500px)": {
//=> "@media (min-width: 500px){.fk9tfor{color:blue}}"
color: "blue",
},
}); //=> "fk9tfor"
Style.registerStyle({
color: "red",
".classy": {
//=> ".fc1zv17 .classy"
color: "blue",
},
}); //=> "fc1zv17"
Style.registerStyle({
color: "red",
"&:hover": {
//=> ".f1h42yg6:hover"
color: "blue",
},
}); //=> "f1h42yg6"
Tip: The ampersand (&) will be replaced by the parent selector at runtime.
const ellipsisStyle = {
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
};
const redEllipsisStyle = Style.registerStyle({
color: "red",
...ellipsisStyle,
}); //=> "fvxl8qs"
// Share rule between styles using computed properties.
const mediaQuery = "@media (min-width: 400px)";
const style = Style.registerStyle({
backgroundColor: "red",
[mediaQuery]: {
backgroundColor: "pink",
},
});
Sometimes you need to skip the de-duping behavior of free-style. Use $unique to force separate styles:
Style.registerStyle({
color: "blue",
"&::-webkit-input-placeholder": {
color: `rgba(0, 0, 0, 0)`,
$unique: true,
},
"&::-moz-placeholder": {
color: `rgba(0, 0, 0, 0)`,
$unique: true,
},
"&::-ms-input-placeholder": {
color: `rgba(0, 0, 0, 0)`,
$unique: true,
},
}); //=> "f13byakl"
Style.getStyles(); //=> ".f13byakl{color:blue}.f13byakl::-webkit-input-placeholder{color:rgba(0, 0, 0, 0)}.f13byakl::-moz-placeholder{color:rgba(0, 0, 0, 0)}.f13byakl::-ms-input-placeholder{color:rgba(0, 0, 0, 0)}"
const colorAnimation = Style.registerStyle({
$global: true,
"@keyframes &": {
from: { color: "red" },
to: { color: "blue" },
},
}); //=> "h1j3ughx"
const style = Style.registerStyle({
animationName: colorAnimation,
animationDuration: "1s",
}); //=> "fibanyf"
Style.registerStyle({
$global: true,
"@font-face": {
fontFamily: '"Bitstream Vera Serif Bold"',
src: 'url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf")',
},
});
Style.registerStyle({
$global: true,
"@media print": {
body: {
color: "red",
},
},
});
Style.registerStyle({
$global: true,
body: {
margin: 0,
padding: 0,
},
});
Style.registerStyle({
$global: true,
body: {
margin: 0,
padding: 0,
"@print": {
color: "#000",
},
},
h1: {
fontSize: "2em",
},
});
Style.getStyles(); //=> ".f65pi0b{background-color:red;padding:10px}"
Display names will automatically be removed when process.env.NODE_ENV === "production".
The only argument to create() is a map of change function handlers. All functions are required:
add(style: Container<any>, index: number)change(style: Container<any>, oldIndex: number, newIndex: number)remove(style: Container<any>, index: number)All classes implement Container, so you can call getStyles(), clone() or get id.
var OtherStyle = Style.create();
Style.merge(OtherStyle); // Merge the current styles of `OtherStyle` into `Style`.
Style.unmerge(OtherStyle); // Remove the current styles of `OtherStyle` from `Style`.
Version 3 requires support for class, see #82. As of April 2020, that's 95% of browsers. You can import from free-style/dist.es5 for a version compatible with ES5 (IE 11).
MIT
FAQs
Make CSS easier and more maintainable by using JavaScript
The npm package free-style receives a total of 12,852 weekly downloads. As such, free-style popularity was classified as popular.
We found that free-style 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
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.