npmpackage.info

Gathering detailed insights and metrics for free-style

Other packages similar to free-style

react-free-style

11.1.0

Make React components easier and more maintainable by using JavaScript with Free Style

stylin

5.1.3

Javascript to CSS: A convenience wrapper around free-style

@asd14/m

8.1.0

Point free style, functional Javascript library with focus on object arrays

material-inline-operation-table

3.2.3

An extension for mui table with add,update and delete features, allowing free style inline form

Gathering detailed insights and metrics for free-style

free-style

Make CSS easier and more maintainable by using JavaScript

5.0.1

706

MIT

TypeScript

18,591,462 3.6

Installations

npm install free-style

Pull Requests

Open

0

Total

58

Closed

7

Merged

51

Issues

Open

2

Total

45

Closed

43

Releases

ES2015 Set and Map

v5.0.1

Published on 18 Jan 2024

ESM only

v5.0.0

Published on 18 Jan 2024

Allow null and undefined in `PropertyValue`

v4.1.0

Published on 24 Jan 2021

Remove `register*` Methods

v4.0.0

Published on 02 May 2020

Fix Nested Selector Hashing

v3.2.4

Published on 29 Apr 2020

Remove \0 From Strings

v3.2.3

Published on 25 Apr 2020

View all 36 releases

Developer

blakeembrey

Developer Guide

BETA

Module System

ESM

Min. Node Version

Typescript Support

No

Node Version

21.0.0

NPM Version

10.2.0 Statistics

706 Stars

284 Commits

29 Forks

14 Watching

5 Branches

11 Contributors

Updated on 27 Nov 2024

Languages

TypeScript (100%)

Total Downloads

Cumulative downloads

Total Downloads

18,591,462

Last day

11.9%

13,573

Compared to previous day

Last week

6.7%

65,662

Compared to previous week

Last month

12.4%

266,158

Compared to previous month

Last year

-0.4%

3,681,586

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

@borderless/ts-scripts @size-limit/preset-small-lib @types/node @vitest/coverage-v8 just-css-properties size-limit tsx typescript vitest

Versions

Free-Style

Free-Style is designed to make CSS easier and more maintainable by using JavaScript.

Installation

npm install free-style --save

Why?

There's a great presentation by Christopher Chedeau you should check out.

Solved by using CSS in JS

No global variables (What and where is .button? Why is it conflicting?)
Defined dependency systems (CommonJS, Require.js, <script />)
Dead code elimination automatically removes unused styles
Minification through JavaScript tooling
Shared constants and reusable styles
Every style is isolated, tested and namespaced to the JS component
Extensible - everything from Math to color manipulation already exists!

Also solved with Free-Style

Works with third-party DOM components (You can nest regular .class-name in your styles)
Deterministically generates styles and class names, and automatically merges duplicate styles
Develop components alongside the style (No more hunting CSS files for estranged ul > li > a)
Create universal applications and serve styles for only the components rendered (see React Free-Style)
Write the CSS you already know ({ '&:hover': { ... } })
Automatically namespace @-rule styles ({ '@media (min-width: 500px)': { ... } })
Overload CSS properties using arrays ({ backgroundColor: ['red', 'linear-gradient(to right, red 0%, blue 100%)'] })
Small and powerful API that works with any ecosystem (~360 SLOC)

But How?

Free-Style generates a hash from the style 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. Styles should usually be created outside of the application run loop (e.g. render()) so the CSS string and hashes are only generated once.

Ways to Use

typestyle - Popular type-safe interface for working with CSS
react-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 sync
ethcss - Library for writing CSS with literal objects
This module! - Manually create, compose and manipulate style instances

Usage

1import { create } from "free-style";
2
3// Create a stylesheet instance.
4const sheet = create();
5
6// Register a new style, returning a class name to use.
7const backgroundStyle = sheet.registerStyle({
8  backgroundColor: "red",
9}); //=> "f14svl5e"
10
11// Inject `<style>` into the `<head>`.
12const styleElement = document.createElement("style");
13styleElement.textContent = sheet.getStyles();
14document.head.appendChild(styleElement);
15
16// Render the style by using the class name.
17React.render(
18  <div className={backgroundStyle}>Hello world!</div>,
19  document.body,
20);

Style

1const buttonStyle = sheet.registerStyle({
2  $displayName: "button",
3  backgroundColor: "red",
4  padding: 10,
5});
6
7console.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').

Overload CSS properties

1Style.registerStyle({
2  background: [
3    "red",
4    "-moz-linear-gradient(left, red 0%, blue 100%)",
5    "-webkit-linear-gradient(left, red 0%, blue 100%)",
6    "-o-linear-gradient(left, red 0%, blue 100%)",
7    "-ms-linear-gradient(left, red 0%, blue 100%)",
8    "linear-gradient(to right, red 0%, blue 100%)",
9  ],
10}); //=> "f1n85iiq"

Nested rules

1Style.registerStyle({
2  color: "red",
3  "@media (min-width: 500px)": {
4    //=> "@media (min-width: 500px){.fk9tfor{color:blue}}"
5    color: "blue",
6  },
7}); //=> "fk9tfor"

Nested selectors

1Style.registerStyle({
2  color: "red",
3  ".classy": {
4    //=> ".fc1zv17 .classy"
5    color: "blue",
6  },
7}); //=> "fc1zv17"

Parent selector

1Style.registerStyle({
2  color: "red",
3  "&:hover": {
4    //=> ".f1h42yg6:hover"
5    color: "blue",
6  },
7}); //=> "f1h42yg6"

Tip: The ampersand (&) will be replaced by the parent selector at runtime.

Use JavaScript

1const ellipsisStyle = {
2  whiteSpace: "nowrap",
3  overflow: "hidden",
4  textOverflow: "ellipsis",
5};
6
7const redEllipsisStyle = Style.registerStyle({
8  color: "red",
9  ...ellipsisStyle,
10}); //=> "fvxl8qs"
11
12// Share rule between styles using computed properties.
13const mediaQuery = "@media (min-width: 400px)";
14
15const style = Style.registerStyle({
16  backgroundColor: "red",
17  [mediaQuery]: {
18    backgroundColor: "pink",
19  },
20});

Unique style output

Sometimes you need to skip the de-duping behavior of free-style. Use $unique to force separate styles:

1Style.registerStyle({
2  color: "blue",
3  "&::-webkit-input-placeholder": {
4    color: `rgba(0, 0, 0, 0)`,
5    $unique: true,
6  },
7  "&::-moz-placeholder": {
8    color: `rgba(0, 0, 0, 0)`,
9    $unique: true,
10  },
11  "&::-ms-input-placeholder": {
12    color: `rgba(0, 0, 0, 0)`,
13    $unique: true,
14  },
15}); //=> "f13byakl"
16
17Style.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)}"

Rules

1const colorAnimation = Style.registerStyle({
2  $global: true,
3  "@keyframes &": {
4    from: { color: "red" },
5    to: { color: "blue" },
6  },
7}); //=> "h1j3ughx"
8
9const style = Style.registerStyle({
10  animationName: colorAnimation,
11  animationDuration: "1s",
12}); //=> "fibanyf"

Global rules and styles

1Style.registerStyle({
2  $global: true,
3  "@font-face": {
4    fontFamily: '"Bitstream Vera Serif Bold"',
5    src: 'url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf")',
6  },
7});
8
9Style.registerStyle({
10  $global: true,
11  "@media print": {
12    body: {
13      color: "red",
14    },
15  },
16});
17
18Style.registerStyle({
19  $global: true,
20  body: {
21    margin: 0,
22    padding: 0,
23  },
24});
25
26Style.registerStyle({
27  $global: true,
28  body: {
29    margin: 0,
30    padding: 0,
31    "@print": {
32      color: "#000",
33    },
34  },
35  h1: {
36    fontSize: "2em",
37  },
38});

CSS string

1Style.getStyles(); //=> ".f65pi0b{background-color:red;padding:10px}"

TypeScript and ESM

This package is a pure ESM package and ships with TypeScript definitions. It cannot be require'd or used with CommonJS module resolution in TypeScript.

Useful libraries

Implementation details

Debugging

Display names will automatically be removed when process.env.NODE_ENV === "production".

Changes

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>, index: number)
remove(style: Container<any>, index: number)

All styles implement Container, so you can call getStyles() or clone().

Merging

Sheet, Style, and Rule have the ability to be merged.

1const otherSheet = create();
2
3sheet.merge(otherSheet); // Merge the current styles of `otherSheet` into `sheet`.
4sheet.unmerge(otherSheet); // Remove the current styles of `otherSheet` from `sheet`.

Pre-process styles

If you plan to re-use styles across Sheets, it will be more efficient to use compile once and register many times instead of registerStyle.

License

MIT

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Security-Policy

Determines if the project has published a security policy.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

4

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

2

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

Score

3.6

/10

Last Scanned on 2024-11-25

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More