https://github.com/uniho/babel-plugin-stylis-css-in-js
Minify CSS in tagged template literals with stylis!
https://github.com/uniho/babel-plugin-stylis-css-in-js
babel babel-plugin css-in-js javascript
Last synced: about 2 months ago
JSON representation
Minify CSS in tagged template literals with stylis!
- Host: GitHub
- URL: https://github.com/uniho/babel-plugin-stylis-css-in-js
- Owner: uniho
- License: mit
- Created: 2021-07-07T18:54:22.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-07-12T09:08:09.000Z (almost 5 years ago)
- Last Synced: 2025-10-19T20:51:55.851Z (8 months ago)
- Topics: babel, babel-plugin, css-in-js, javascript
- Language: JavaScript
- Homepage:
- Size: 23.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# babel-plugin-stylis-css-in-js
[![NPM Version][npm-image]][npm-url]
[![NPM Downloads][downloads-image]][downloads-url]
[![MIT][license-image]](LICENSE)
Minify CSS in tagged template literals with [stylis](https://github.com/thysultan/stylis.js)!
## Install
```bash
npm install --save-dev babel-plugin-stylis-css-in-js
```
## Usage
### Via config file, .babelrc, etc.
```json
{
"plugins": ["stylis-css-in-js"]
}
```
### Via babel CLI
```bash
babel --plugins=stylis-css-in-js your.js
```
### Via Node API
```js
require('babel-core').transform(yourCode, {
plugins: ['stylis-css-in-js']
});
```
## Example
If you have sources or sausages...
index.html:
```html
Test
```
index.js:
```js
//
window.css = String.raw;
// like the emotion(https://emotion.sh/docs/@emotion/css#global-styles)
const injectGlobal = source => {
const bin = stylis.compile(source);
const plugins = [stylis.stringify];
const text = stylis.serialize(bin, stylis.middleware(plugins));
const nodes = document.querySelectorAll('style[data-stylis]');
let css = Array.prototype.find.call(nodes, node => node.getAttribute('data-stylis') === '0'); //
if (!css) {
const css = document.createElement('style');
css.setAttribute('type', 'text/css');
css.setAttribute('data-stylis', '0'); //
css.appendChild(document.createTextNode(text));
document.head.appendChild(css);
return;
}
const textNode = css.firstChild;
textNode.data += text + "\n\n";
}
//
const isTouchDevice =
('ontouchstart' in window.document.documentElement)
|| window.navigator.maxTouchPoints > 0
|| window.navigator.msMaxTouchPoints > 0;
//
const buttonBackgroundColor = "rgb(100,100,100)";
const buttonColor = "white";
const margin = '10rem';
//
const myCSS = css`
/* your comment */
.my-page {
margin: ${margin}; // your comment
button {
cursor: pointer;
/*text-transform: uppercase;*/
/*margin-bottom: 10px;*/
background-image: none;
background-size: 0;
background-repeat: no-repeat;
background-position: 50% 50%;
padding: 10px 20px;
//display: inline-block;
font-family: Roboto;
border: 0;
border-radius: 2px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.14),0 2px 10px 0 rgba(0,0,0,.1);
background-color: ${buttonBackgroundColor};
color: ${buttonColor};
transition: background-color .3s ease-out;
will-change: background-color;
&:hover {
${isTouchDevice ? '' : css`
background-color: black;
color: red;
`}
}
&:active, &:active:hover {
box-shadow: none;
}
}
}
`;
//
injectGlobal(myCSS);
//
const MyApp = props =>
React.createElement('div', {className: 'my-page'},
React.createElement('button', {}, 'Click Me')
);
//
ReactDOM.render(React.createElement(MyApp), document.getElementById('app'));
```
Let's babel index.js...
```js
︙
const myCSS = css`.my-page{margin:${margin};}.my-page button{cursor:pointer;background-image:none;background-size:0;background-repeat:no-repeat;background-position:50% 50%;padding:10px 20px;font-family:Roboto;border:0;border-radius:2px;box-shadow:0 2px 5px 0 rgba(0,0,0,.14),0 2px 10px 0 rgba(0,0,0,.1);background-color:${buttonBackgroundColor};color:${buttonColor};transition:background-color .3s ease-out;will-change:background-color;}.my-page button:hover{${isTouchDevice ? '' : css`background-color:black;color:red;`}}.my-page button:active,.my-page button:active:hover{box-shadow:none;}`;
︙
```
Awosame🦈? Awesome!
## Options
In `.babelrc`, etc. :
```json
{
"plugins": [
["stylis-css-in-js", {
"tags": ["css", "raw"]
}]
]
}
```
| Option | Default |Description |
|----------------------|--------------------------|--------------------------------------|
| `tags` | `["css"]` | The name used for detecting css tag. |
## Contribution
1. Fork it
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create new Pull Request
## License
MIT
[npm-image]: https://img.shields.io/npm/v/babel-plugin-stylis-css-in-js.svg
[npm-url]: https://npmjs.org/package/babel-plugin-stylis-css-in-js
[downloads-image]: https://img.shields.io/npm/dm/babel-plugin-stylis-css-in-js.svg
[downloads-url]: https://npmjs.org/package/babel-plugin-stylis-css-in-js
[license-image]: https://badgen.net/badge/license/MIT/blue