# css-initials

> Initial CSS values for `all: initial` polyfills.

Latest version **0.3.1** (published 2019-02-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install css-initials
pnpm add css-initials
yarn add css-initials
bun add css-initials
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.1 |
| Published | 2019-02-10 |
| First published | 2017-08-25 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 32.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 70 |
| Maintainers | iamstarkov, kof |
| Keywords | CSS, initial, values, all: initial |

## Links

- npm: https://www.npmjs.com/package/css-initials
- Repository: git@github.com:iamstarkov/initize
- npm.io page: https://npm.io/package/css-initials

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.3.1 (latest) — 2019-02-10
- 0.3.0 — 2019-02-06
- 0.2.0 — 2017-12-27
- 0.1.1 — 2017-08-25
- 0.1.0 — 2017-08-25

## README

# css-initials

Initial CSS values for `all: initial` polyfills.

## Table of Contents

* [Usage](#usage)
  * [vanilla css](#vanilla-css)
  * [css-modules](#css-modules)
  * [jss](#jss)
  * [styled-components](#styled-components)
* [FAQ](#faq)

## Usage

### Vanilla css

Import `all.css` or `inherited.css` file and add the class `initials-all` or `initials-inherited` to an element you want to have initial values.

```css
/**
 * On the very top of your ./styles/main.css
 */
 @import './css/css-initials.css';

/*
 * Those properties depend on a browser and user settings. You can reset them manually
 * if you want them to behave consistently.
 */
.initials-all {
  font-family: Arial, "sans-serif";
  text-align: left;
  quotes: "“" "”" "‘" "’";
  color: black;
  outline-color: black;
}

/* user styles here */

.button {
  /* …more user styles here…*/
}
```

In HTML, just add css-initials class in the start

```html
<button class="initials-all button">Submit</button>
```

### css-modules

```css
/**
 * Once in your project, specify your
 * ./src/components/app-css-initials/index.css
 */
.app-css-initials {
  composes: css-initials from 'css-initials/index.css';

  font-family: Arial, "sans-serif";
  text-align: left;
  quotes: "“" "”" "‘" "’";
  color: black;
  outline-color: black;
}

/**
 *  Anywhere after in your components
 *  ./src/components/button/index.css
 */
.button {
  composes: app-css-initials from './app-css-initials.css';
  /* …more user styles here…*/
}

```

### css-in-js

#### JSS

```js
import cssInitials from 'css-initials';
import jss from 'jss';
import preset from 'jss-preset-default';

jss.setup(preset());

const myCssInitials = Object.assign({}, cssInitials, {
  fontFamily: 'Arial, sans-serif',
  textAlign: 'left',
  quotes: '"“" "”" "‘" "’"',
  color: 'black',
  outlineColor: 'black',
});

const sheet = jss.createStyleSheet({ initials: myCssInitials }).attach();

const {classes} = jss.createStyleSheet({
  button: {
    composes: sheet.classes.initials,
    background: 'blue',
  }
}).attach();

document.body.innerHTML = `
  <button class="${classes.button}">Button</button>
`;

```
#### styled-components

```js
// Once in your project, specify your
// ./src/components/app-css-initials/index.js
import cssInitials from 'css-initials';

const toCSS = obj => Object.keys(obj).map(key => `${key}: ${obj[key]};`).join('\n');

export default `
  ${toCSS(cssInitials)}
  font-family: Arial, 'sans-serif';
  text-align: left;
  quotes: "“" "”" "‘" "’";
  color: black;
  outline-color: black;
`;

// Anywhere after in your components
// ./src/components/button/index.js
import React from 'react';
import styled from 'styled-components';
import initials from '../app-css-initials';

const Button = styled.button`
  ${initials}
  display: inline-block;
  border-radius: 5px;
  /* …more styles here…*/
`;

export default Button;
```

## FAQ

—**What is wrong with the usual `all: initial`?**  
—It's [not supported in IE, Edge, Mobile android][IEEDGE].

—**What do you mean by cross-browser?**  
—I took all properties and combined 'em with their initial values, so it works in every browser, because its essentially `all: initial`, but expanded.

—**What do you mean by thoughtful?**  
—There are several caveats about `all: initial` as it is now, and I have built this package with those caveats in mind.

—**What are the caveats?**  
— 1) Initial values of `font-family`, `quotes` and `color` depend on the browser  
— 2) 14 properties depend on `currentColor`, which is a reference to the `color` property, which varies from browser to browser (hence prev point), and these properties are: `-webkit-border-before-color`, `-webkit-text-fill-color`, `-webkit-text-stroke-color`, `border-block-end-color`, `border-block-start-color`, `border-bottom-color`, `border-inline-end-color`, `border-inline-start-color`, `border-left-color`, `border-right-color`, `border-top-color`, `column-rule-color`, `text-decoration-color`, `text-emphasis-color`.  
— 3) Initial value of `outline-color` is either `invert` if the browser supports it, or `currentColor` otherwise.

—**Is this all?**  
—It depends. If you want military grade CSS cascade defense, then no, otherwise hold on. Thing is that according to the spec, `all: initial` doesn't apply initial values to `unicode-bidi` and `direction`.

—**I've never heard of `unicode-bidi`.**  
—To be honest, me neither. It is quite complicated and I don't know why one would need it. But as long as this property is not inherited it's safe to leave it untouched.

—**What's up with `direction`?**  
—Good question. Firstly, `direction` deals with the `ltr/rtl` problem. Secondly, it is inheritable, so it will definitely affect your components. It can have a negative impact on your components' isolation, so it also doesn't make sense to allow your components to inherit `direction` from the outside world. Your components should be optimised for `ltr` anyway, and `direction: rtl` wont make 'em automatically look good in arabic or hebrew. To fix `ltr/rtl` problem properly you would need a solution like [rtlcss][], because you not only want to change direction, but you want to adjust `text-align`, `margin`, `padding`, `border-width`, etc.

—**Is this all?**  
—yes, thanks for your attention.

[IEEDGE]: http://caniuse.com/#feat=css-all
[rtlcss]: https://github.com/MohammadYounes/rtlcss

---
_Source: https://npm.io/package/css-initials · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._