Skip to content

Commit 3f817b7

Browse files
dvanscottdvanscott
committed
Initial commit
0 parents  commit 3f817b7

File tree

8 files changed

+4121
-0
lines changed

8 files changed

+4121
-0
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/node_modules

‎CHANGELOG.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Changelog
2+
3+
All notable changes to this project will be documented in this file.
4+
5+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7+
8+
## [1.0.0] - 2019-07-01
9+
10+
Initial release

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2015 Kirschbaum Development Group
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.

‎README.md

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# Scale Utilities Plugin for Tailwind CSS
2+
3+
![](https://image.ibb.co/hgnwNx/logo.jpg)
4+
5+
[![npm](https://img.shields.io/npm/v/@kirschbaum-development/tailwindcss-scale-utilities.svg)](https://www.npmjs.com/package/@kirschbaum-development/tailwindcss-scale-utilities)
6+
[![npm](https://img.shields.io/npm/dt/@kirschbaum-development/tailwindcss-scale-utilities.svg)](https://www.npmjs.com/package/@kirschbaum-development/tailwindcss-scale-utilities)
7+
[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://www.npmjs.com/package/@kirschbaum-development/tailwindcss-scale-utilities)
8+
[![tests](https://travis-ci.org/kirschbaum-development/tailwindcss-scale-utilities.svg?branch=master)](https://travis-ci.org/kirschbaum-development/tailwindcss-scale-utilities)
9+
10+
## Installation
11+
12+
```bash
13+
$ yarn add @kirschbaum-development/tailwindcss-scale-utilities --dev
14+
```
15+
16+
or
17+
18+
```bash
19+
$ npm install @kirschbaum-development/tailwindcss-scale-utilities --save-dev
20+
```
21+
22+
## Usage
23+
24+
```js
25+
// tailwind.config.js
26+
{
27+
theme: {
28+
scale: { // defaults to { 0: 0, 25: '.25', 50: '.5', 75: '.75', 100: 1 }
29+
'90': '0.9',
30+
'100': '1',
31+
'110': '1.1'
32+
}
33+
},
34+
variants: { // defaults to ['responsive', 'hover', 'focus']
35+
scale: ['responsive']
36+
},
37+
plugins: [
38+
require('tailwindcss-scale-utilities')()
39+
],
40+
}
41+
```
42+
43+
This plugin generates the following utilities:
44+
45+
```css
46+
/* configurable with the "scale" theme object */
47+
.scale-[key] {
48+
transform: scale([value]);
49+
}
50+
```

‎index.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
const map = require('lodash/map');
2+
const fromPairs = require('lodash/fromPairs');
3+
4+
module.exports = function () {
5+
return ({ addUtilities, e, theme, variants }) => {
6+
const scales = theme('scale', {
7+
0: '0',
8+
25: '.25',
9+
50: '.5',
10+
75: '.75',
11+
100: '1'
12+
});
13+
14+
const utilities = fromPairs(
15+
map(scales, (value, modifier) => {
16+
return [
17+
`.${e(`scale-${modifier}`)}`,
18+
{
19+
transform: `scale(${value})`
20+
}
21+
];
22+
})
23+
);
24+
25+
addUtilities(
26+
utilities,
27+
variants('scale', ['responsive', 'hover', 'focus'])
28+
);
29+
};
30+
}

‎package.json

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"name": "@kirschbaum-development/tailwindcss-scale-utilities",
3+
"version": "1.0.0",
4+
"description": "Tailwind CSS plugin to generate scale utilities",
5+
"author": {
6+
"name": "Kirschbaum Development"
7+
},
8+
"licenses": [
9+
{
10+
"type": "MIT",
11+
"url": "http://www.opensource.org/licenses/mit-license.php"
12+
}
13+
],
14+
"keywords": [
15+
"tailwindcss",
16+
"scale",
17+
"css"
18+
],
19+
"repository": {
20+
"type": "git",
21+
"url": "https://github.com/kirschbaum-development/tailwindcss-scale-utilities.git"
22+
},
23+
"bugs": "https://github.com/kirschbaum-development/tailwindcss-scale-utilities/issues",
24+
"homepage": "https://github.com/kirschbaum-development/tailwindcss-scale-utilities",
25+
"maintainers": [
26+
{
27+
"name": "David VanScott",
28+
"email": "david@kirschbaumdevelopment.com"
29+
}
30+
],
31+
"scripts": {
32+
"tests": "node_modules/.bin/jest"
33+
},
34+
"devDependencies": {
35+
"jest": "^24.8.0",
36+
"jest-matcher-css": "^1.1.0",
37+
"lodash": "^4.17.11",
38+
"postcss": "^7.0.17",
39+
"tailwindcss": "^1.0.5"
40+
}
41+
}

‎tests/scale-utilities.spec.js

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
const merge = require('lodash/merge');
2+
const cssMatcher = require('jest-matcher-css');
3+
const postcss = require('postcss');
4+
const tailwindcss = require('tailwindcss');
5+
const scalePlugin = require('../index.js');
6+
7+
const generatePluginCss = (config) => {
8+
return postcss(
9+
tailwindcss(
10+
merge({
11+
theme: {
12+
screens: {
13+
'sm': '640px',
14+
},
15+
},
16+
corePlugins: false,
17+
plugins: [
18+
scalePlugin(),
19+
],
20+
}, config)
21+
)
22+
)
23+
.process('@tailwind utilities', {
24+
from: undefined,
25+
})
26+
.then(result => {
27+
return result.css;
28+
});
29+
};
30+
31+
expect.extend({
32+
toMatchCss: cssMatcher,
33+
});
34+
35+
test('default scale utilities and variants are generated', () => {
36+
return generatePluginCss().then(css => {
37+
expect(css).toMatchCss(`
38+
.scale-0 {
39+
transform: scale(0);
40+
}
41+
.scale-25 {
42+
transform: scale(.25);
43+
}
44+
.scale-50 {
45+
transform: scale(.5);
46+
}
47+
.scale-75 {
48+
transform: scale(.75);
49+
}
50+
.scale-100 {
51+
transform: scale(1);
52+
}
53+
.hover\\:scale-0:hover {
54+
transform: scale(0);
55+
}
56+
.hover\\:scale-25:hover {
57+
transform: scale(.25);
58+
}
59+
.hover\\:scale-50:hover {
60+
transform: scale(.5);
61+
}
62+
.hover\\:scale-75:hover {
63+
transform: scale(.75);
64+
}
65+
.hover\\:scale-100:hover {
66+
transform: scale(1);
67+
}
68+
.focus\\:scale-0:focus {
69+
transform: scale(0);
70+
}
71+
.focus\\:scale-25:focus {
72+
transform: scale(.25);
73+
}
74+
.focus\\:scale-50:focus {
75+
transform: scale(.5);
76+
}
77+
.focus\\:scale-75:focus {
78+
transform: scale(.75);
79+
}
80+
.focus\\:scale-100:focus {
81+
transform: scale(1);
82+
}
83+
@media (min-width: 640px) {
84+
.sm\\:scale-0 {
85+
transform: scale(0);
86+
}
87+
.sm\\:scale-25 {
88+
transform: scale(.25);
89+
}
90+
.sm\\:scale-50 {
91+
transform: scale(.5);
92+
}
93+
.sm\\:scale-75 {
94+
transform: scale(.75);
95+
}
96+
.sm\\:scale-100 {
97+
transform: scale(1);
98+
}
99+
.sm\\:hover\\:scale-0:hover {
100+
transform: scale(0);
101+
}
102+
.sm\\:hover\\:scale-25:hover {
103+
transform: scale(.25);
104+
}
105+
.sm\\:hover\\:scale-50:hover {
106+
transform: scale(.5);
107+
}
108+
.sm\\:hover\\:scale-75:hover {
109+
transform: scale(.75);
110+
}
111+
.sm\\:hover\\:scale-100:hover {
112+
transform: scale(1);
113+
}
114+
.sm\\:focus\\:scale-0:focus {
115+
transform: scale(0);
116+
}
117+
.sm\\:focus\\:scale-25:focus {
118+
transform: scale(.25);
119+
}
120+
.sm\\:focus\\:scale-50:focus {
121+
transform: scale(.5);
122+
}
123+
.sm\\:focus\\:scale-75:focus {
124+
transform: scale(.75);
125+
}
126+
.sm\\:focus\\:scale-100:focus {
127+
transform: scale(1);
128+
}
129+
}
130+
`);
131+
});
132+
});
133+
134+
test('scale utilities can be customized', () => {
135+
return generatePluginCss({
136+
theme: {
137+
scale: {
138+
'90': '0.9',
139+
'100': '1',
140+
'110': '1.1',
141+
}
142+
},
143+
variants: {
144+
scale: []
145+
},
146+
}).then(css => {
147+
expect(css).toMatchCss(`
148+
.scale-90 {
149+
transform: scale(0.9);
150+
}
151+
.scale-100 {
152+
transform: scale(1);
153+
}
154+
.scale-110 {
155+
transform: scale(1.1);
156+
}
157+
`);
158+
});
159+
});
160+
161+
test('scale variants can be customized', () => {
162+
return generatePluginCss({
163+
theme: {},
164+
variants: {
165+
scale: ['group-hover']
166+
},
167+
}).then(css => {
168+
expect(css).toMatchCss(`
169+
.scale-0 {
170+
transform: scale(0);
171+
}
172+
.scale-25 {
173+
transform: scale(.25);
174+
}
175+
.scale-50 {
176+
transform: scale(.5);
177+
}
178+
.scale-75 {
179+
transform: scale(.75);
180+
}
181+
.scale-100 {
182+
transform: scale(1);
183+
}
184+
.group:hover .group-hover\\:scale-0 {
185+
transform: scale(0);
186+
}
187+
.group:hover .group-hover\\:scale-25 {
188+
transform: scale(.25);
189+
}
190+
.group:hover .group-hover\\:scale-50 {
191+
transform: scale(.5);
192+
}
193+
.group:hover .group-hover\\:scale-75 {
194+
transform: scale(.75);
195+
}
196+
.group:hover .group-hover\\:scale-100 {
197+
transform: scale(1);
198+
}
199+
`);
200+
});
201+
});

0 commit comments

Comments
 (0)