Skip to content

Commit 7a16fd8

Browse files
notlmnnotlmn
committed
Initial commit
0 parents  commit 7a16fd8

14 files changed

+311
-0
lines changed

‎.editorconfig

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
root = true
2+
3+
[*]
4+
indent_style = tab
5+
end_of_line = lf
6+
charset = utf-8
7+
trim_trailing_whitespace = true
8+
insert_final_newline = true
9+
10+
[*.yml]
11+
indent_style = space
12+
indent_size = 2

‎.github/funding.yml

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
custom: https://paypal.me/bytemode

‎.github/workflows/test.yml

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
name: Test
2+
3+
on:
4+
- pull_request
5+
- push
6+
7+
jobs:
8+
test:
9+
runs-on: ubuntu-latest
10+
steps:
11+
- uses: actions/checkout@v2
12+
- run: npm install
13+
- run: npm test

‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.DS_Store
2+
.nyc_output
3+
node_modules/
4+
build/

‎.npmignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.DS_Store
2+
.nyc_output
3+
node_modules/
4+
build/
5+
.github/

‎.npmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
package-lock=false

‎cjs/index.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
"use strict";
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
exports.default = minifyTaggedCSSTemplate;
7+
8+
var _rollupPluginTransformTaggedTemplate = require("rollup-plugin-transform-tagged-template");
9+
10+
function minifyPartialCSS(css) {
11+
// Spaces before and after these characters
12+
// +, -, *, / can be used in calc(), so avoid breaking them
13+
css = css.replace(/\s*([{}>~|=^$:!;])\s*/gm, '$1'); // Spaces only after these characters
14+
15+
css = css.replace(/([",\[\]\()])\s+/gm, '$1'); // CSS comments
16+
17+
css = css.replace(/\s*(\/\*|\*\/)\s*/gm, '$1'); // You only need one consequent spaces in CSS
18+
19+
css = css.replace(/\s{2,}/gm, ' ');
20+
return css.trim();
21+
}
22+
23+
function minifyTaggedCSSTemplate(options = {}) {
24+
const {
25+
tags = ['css']
26+
} = options;
27+
return {
28+
name: 'minify-tagged-css-template',
29+
30+
transform(content) {
31+
return (0, _rollupPluginTransformTaggedTemplate.transformTaggedContent)(content, {
32+
tagsToProcess: tags,
33+
transformer: minifyPartialCSS
34+
});
35+
}
36+
37+
};
38+
}

‎cjs/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"type":"commonjs"}

‎esm/index.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { transformTaggedContent } from 'rollup-plugin-transform-tagged-template';
2+
3+
function minifyPartialCSS(css) {
4+
// Spaces before and after these characters
5+
// +, -, *, / can be used in calc(), so avoid breaking them
6+
css = css.replace(/\s*([{}>~|=^$:!;])\s*/gm, '$1');
7+
8+
// Spaces only after these characters
9+
css = css.replace(/([",\[\]\()])\s+/gm, '$1');
10+
11+
// CSS comments
12+
css = css.replace(/\s*(\/\*|\*\/)\s*/gm, '$1');
13+
14+
// You only need one consequent spaces in CSS
15+
css = css.replace(/\s{2,}/gm, ' ');
16+
17+
return css.trim();
18+
}
19+
20+
export default function minifyTaggedCSSTemplate(options = {}) {
21+
const {
22+
tags = ['css'],
23+
} = options;
24+
25+
return {
26+
name: 'minify-tagged-css-template',
27+
transform(content) {
28+
return transformTaggedContent(content, {
29+
tagsToProcess: tags,
30+
transformer: minifyPartialCSS
31+
});
32+
}
33+
};
34+
}

‎license

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2020 Laxman Damera
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎package.json

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"name": "rollup-plugin-minify-tagged-css-template",
3+
"version": "0.0.1",
4+
"description": "Plugin to minify CSS content of tagged template string literals",
5+
"homepage": "https://github.com/notlmn/rollup-plugin-minify-tagged-css-template#readme",
6+
"repository": {
7+
"type": "git",
8+
"url": "https://github.com/notlmn/rollup-plugin-minify-tagged-css-template.git"
9+
},
10+
"main": "./cjs/index.js",
11+
"scripts": {
12+
"build": "npm run cjs",
13+
"cjs": "ucjs esm cjs",
14+
"lint": "xo rollup.config.js",
15+
"test": "npm run lint && npm run build && rollup -c test/rollup.config.js"
16+
},
17+
"keywords": [
18+
"rollup",
19+
"plugin",
20+
"template string",
21+
"template literal",
22+
"tagged template string literal",
23+
"css",
24+
"minify"
25+
],
26+
"author": "Laxman Damera",
27+
"license": "MIT",
28+
"devDependencies": {
29+
"rollup": "^2.18.0",
30+
"ucjs": "^0.1.1",
31+
"xo": "^0.32.0"
32+
},
33+
"module": "./esm/index.js",
34+
"type": "module",
35+
"exports": {
36+
"import": "./esm/index.js",
37+
"default": "./cjs/index.js"
38+
},
39+
"dependencies": {
40+
"rollup-plugin-transform-tagged-template": "0.0.1"
41+
}
42+
}

‎readme.md

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
# rollup-plugin-minify-tagged-css-template
2+
3+
> Plugin to minify CSS content of [tagged template string literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals), aka. template strings aka. template literals.
4+
5+
[![npm](https://img.shields.io/npm/v/rollup-plugin-minify-tagged-css-template)](https://www.npmjs.com/package/rollup-plugin-minify-tagged-css-template)
6+
7+
## Usage
8+
9+
``` js
10+
// rollup.config.js
11+
import minifyTaggedCSSTemplate from 'rollup-plugin-minify-tagged-css-template';
12+
13+
export default {
14+
input: 'test/index.js',
15+
plugins: [
16+
minifyTaggedCSSTemplate({ tags: ['css'] })
17+
],
18+
output: {
19+
file: 'build/index.js'
20+
},
21+
};
22+
```
23+
24+
> **Note**: This plugin does not use AST based minification of CSS, because the content it receives is only partial.
25+
>
26+
> Instead we aim to minify CSS with Regex based whitespace removal, and no optimization (deduping selectors, declaration, etc).
27+
28+
## API
29+
30+
### `tags: string[] = ['css']`
31+
32+
Refers to the tag names that are to be handled. Only static content of the template content is processed, any child template expressions are left unchanged. Refer to example below.
33+
34+
Example: `tags: ['handleCSS']` would target the following template literal.
35+
36+
``` js
37+
// component.js
38+
const decl = 'color: red;';
39+
const result = handleCSS`
40+
:host {
41+
display: block;
42+
${decl}
43+
}
44+
`;
45+
46+
// output
47+
const result = handleCSS`:host{display:block;${decl}}`;
48+
```
49+
50+
## License
51+
52+
[MIT](license) © Laxman Damera

‎test/index.js

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
function css() {}
2+
3+
const textColor = '#212121';
4+
const declaration = css`display: flex;`;
5+
const otherStyles = css`
6+
a {
7+
color: red;
8+
}
9+
`;
10+
11+
const x = css`
12+
:host {
13+
--padding: 1rem;
14+
15+
color: ${textColor};
16+
display: block;
17+
height: calc(4rem * 4);
18+
padding: var(--padding);
19+
width: calc(100vw - calc(var(--padding) * 2));
20+
}
21+
22+
/* comment */
23+
.parent .child {
24+
${declaration}
25+
}
26+
27+
${otherStyles}
28+
`;
29+
30+
const slectors = css`
31+
* {}
32+
E {}
33+
E[foo] {}
34+
E[foo = "bar"] {}
35+
E[foo~="bar"] {}
36+
E[foo^="bar"] {}
37+
E[foo$="bar"] {}
38+
E[foo*="bar"] {}
39+
E[foo|="en"] {}
40+
E:root {}
41+
E:nth-child(n) {}
42+
E:nth-last-child(n) {}
43+
E:nth-of-type(n) {}
44+
E:nth-last-of-type(n) {}
45+
E:first-child {}
46+
E:last-child {}
47+
E:first-of-type {}
48+
E:last-of-type {}
49+
E:only-child {}
50+
E:only-of-type {}
51+
E:empty {}
52+
E:link {}
53+
E:visited {}
54+
E:active {}
55+
E:hover {}
56+
E:focus {}
57+
E:target {}
58+
E:lang(fr) {}
59+
E:enabled {}
60+
E:disabled {}
61+
E:checked {}
62+
E::first-line {}
63+
E::first-letter {}
64+
E::before {}
65+
E::after {}
66+
E.warning {}
67+
E#myid {}
68+
E:not(s) {}
69+
E F {}
70+
E > F {}
71+
E + F {}
72+
E ~ F {}
73+
`;
74+
75+
window.x = x;
76+
window.slectors = slectors;

‎test/rollup.config.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import minifyTaggedCSSTemplate from '../esm/index.js';
2+
3+
export default {
4+
input: 'test/index.js',
5+
plugins: [
6+
minifyTaggedCSSTemplate({ tags: ['css'] })
7+
],
8+
output: {
9+
file: 'build/index.js'
10+
},
11+
};

0 commit comments

Comments
 (0)