<commit_before># styled-classnames
Use [`styled-components`](https://github.com/styled-components/styled-components) without the components!

...it's a short hack that still uses `styled-components` under the hood, so all the credit for this goes to [<NAME>](https://twitter.com/glenmaddern), [<NAME>](https://twitter.com/mxstbr), and the `styled-components` community.

## Javascript Usage
```javascript
import React from "react";
import Link from "react-router/Link";
import styled from "styled-classnames";

const linkClassName = styled`
  color: ${props => props.color};
  margin: 3px;
  padding: 3px 7px;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 3px;

  &:hover { border-color: rgba(175, 47, 47, 0.1); }
`;

const activeClassName = styled`
  border-color: rgba(175, 47, 47, 0.2);
`;

const FilterLink = (props) => {
  return (
    <Link
      {...props}
      className={linkClassName(props)}
      activeClassName={activeClassName(props)}
    />
  );
};

export default FilterLink;
```

## ClojureScript Usage (Experimental)
```clojure
(def font-family (atom "Baskerville"))

(def header-class (js/styled "
  font-size: 72px;
  font-family: " @font-family ";
  font-style: italic;
  color: " #(:color %) ";
"))

(defn hello-world []
  [:h1 {:class (header-class {:color "rebeccapurple"})}
    "Hello world!"])
```

## Details
Helper methods from `styled-components` are also exposed:
```javascript
import styled, { css, keyframes, injectGlobal } from "styled-classnames";
```

Note that `ThemeProvider` and `withTheme` are React-specific and are not included in this library. If you need them, you can still import them from `styled-components`, or if you know how context works in React, you could write them yourself.<commit_msg>updating README<commit_after># styled-classnames
Use [`styled-components`](https://github.com/styled-components/styled-components) without the components!

...it's a short hack that still uses `styled-components` under the hood, so all the credit for this goes to [<NAME>](https://twitter.com/glenmaddern), [<NAME>](https://twitter.com/mxstbr), and the `styled-components` community.

Be aware that including `styled-components` adds a significant amount to your final JS bundle size. (The upcoming v2 of `styled-components` should use a much smaller parser.)

## Javascript

```
npm install --save-dev styled-classnames
```

```javascript
import React from "react";
import Link from "react-router/Link";
import styled from "styled-classnames";

const linkClassName = styled`
  color: ${props => props.color};
  margin: 3px;
  padding: 3px 7px;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 3px;

  &:hover { border-color: rgba(175, 47, 47, 0.1); }
`;

const activeClassName = styled`
  border-color: rgba(175, 47, 47, 0.2);
`;

const FilterLink = (props) => {
  return (
    <Link
      {...props}
      className={linkClassName(props)}
      activeClassName={activeClassName(props)}
    />
  );
};

export default FilterLink;
```

## ClojureScript

[![Clojars Project](https://img.shields.io/clojars/v/cljsjs/styled-classnames.svg)](https://clojars.org/cljsjs/styled-classnames)

```clojure
(def font-family (atom "Baskerville"))

(def header-class (js/styled "
  font-size: 72px;
  font-family: " @font-family ";
  font-style: italic;
  color: " #(:color %) ";
"))

(defn hello-world []
  [:h1 {:class (header-class {:color "rebeccapurple"})}
    "Hello world!"])
```

## Details
Helper methods from `styled-components` are also exposed:
```javascript
import styled, { css, keyframes, injectGlobal } from "styled-classnames";
```

Note that `ThemeProvider` and `withTheme` are React-specific and are not included in this library. If you need them, you can still import them from `styled-components`, or if you know how context works in React, you could write them yourself.
{'fraction_non_alphanumeric': 0.1457688338493292, 'fraction_numerical': 0.013673890608875128, 'mean_word_length': 4.414804469273743, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 13, 'https://': 8, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '550826', 'n_tokens_mistral': 1311, 'n_tokens_neox': 1213, 'n_words': 377}