pax_global_header 0000666 0000000 0000000 00000000064 14003340453 0014506 g ustar 00root root 0000000 0000000 52 comment=2ffed7e32efe50997027e2e260c3bc4dbdb38ba7
free-style-4.1.0/ 0000775 0000000 0000000 00000000000 14003340453 0013567 5 ustar 00root root 0000000 0000000 free-style-4.1.0/.editorconfig 0000664 0000000 0000000 00000000307 14003340453 0016244 0 ustar 00root root 0000000 0000000 # EditorConfig is awesome: http://EditorConfig.org
root = true
[*]
indent_size = 2
indent_style = space
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
free-style-4.1.0/.eslintrc.js 0000664 0000000 0000000 00000000565 14003340453 0016034 0 ustar 00root root 0000000 0000000 module.exports = {
parser: "@typescript-eslint/parser",
extends: [
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended-requiring-type-checking",
"prettier/@typescript-eslint",
"plugin:prettier/recommended",
],
parserOptions: {
ecmaVersion: 2018,
sourceType: "module",
project: "tsconfig.json",
},
};
free-style-4.1.0/.gitignore 0000664 0000000 0000000 00000000115 14003340453 0015554 0 ustar 00root root 0000000 0000000 node_modules/
coverage/
.DS_Store
npm-debug.log
dist/
dist.es5/
dist.module/
free-style-4.1.0/.travis.yml 0000664 0000000 0000000 00000000327 14003340453 0015702 0 ustar 00root root 0000000 0000000 sudo: false
language: node_js
notifications:
email:
on_success: never
on_failure: change
node_js:
- "10"
- stable
after_script:
- npm install coveralls@2
- cat ./coverage/lcov.info | coveralls
free-style-4.1.0/LICENSE 0000664 0000000 0000000 00000002117 14003340453 0014575 0 ustar 00root root 0000000 0000000 The MIT License (MIT)
Copyright (c) 2014 Blake Embrey (hello@blakeembrey.com)
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.
free-style-4.1.0/README.md 0000664 0000000 0000000 00000023066 14003340453 0015055 0 ustar 00root root 0000000 0000000 # Free-Style
[![NPM version][npm-image]][npm-url]
[![NPM downloads][downloads-image]][downloads-url]
[![Build status][travis-image]][travis-url]
[![Test coverage][coveralls-image]][coveralls-url]
[![Bundle size][bundlephobia-image]][bundlephobia-url]
> **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](https://speakerdeck.com/vjeux/react-css-in-js) 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, ``)
- 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math) to [color manipulation](https://github.com/MoOx/color) already exists!
### Also solved with Free-Style
- Works with third-party DOM components (You can nest regular `.class-name` in your styles)
- Consistently generates styles and class names, and will automatically merge 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](http://github.com/blakeembrey/react-free-style))
- Use 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 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](http://github.com/blakeembrey/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.
### Ways to Use
- [`typestyle`](https://github.com/typestyle/typestyle) - Popular type-safe interface for working with CSS
- [`react-free-style`](https://github.com/blakeembrey/react-free-style) - React implementation that renders styles on the current page (for universal apps)
- [`stylin`](https://github.com/ajoslin/stylin) - Simplest abstraction for creating styles, rules, and keyframes, and keeps `` in sync
- [`ethcss`](https://github.com/ethorz/ethcss) - Library for writing CSS with literal objects
- **This module!** - Manually create, compose and manipulate style instances
## Usage
```js
var 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 `