Skip to content

Commit b708778

Browse files
author
Erasmo Marín
committed
first commit
0 parents  commit b708778

File tree

8 files changed

+320
-0
lines changed

8 files changed

+320
-0
lines changed

‎.gitignore‎

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

‎.travis.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
language: node_js
2+
sudo: false
3+
node_js:
4+
- "6"
5+
- "8"

‎README.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# styled-jsx-plugin-sass
2+
3+
[![Build Status](https://travis-ci.org/giuseppeg/styled-jsx-plugin-sass.svg?branch=master)](https://travis-ci.org/giuseppeg/styled-jsx-plugin-sass)
4+
[![npm](https://img.shields.io/npm/v/styled-jsx-plugin-sass.svg)](https://www.npmjs.com/package/styled-jsx-plugin-sass)
5+
6+
Use [less](http://lesscss.org/) with [styled-jsx](https://github.com/zeit/styled-jsx) 💥
7+
8+
## Usage
9+
10+
Install the package first.
11+
12+
```bash
13+
npm install --save-dev styled-jsx-plugin-less
14+
```
15+
16+
Install `less` (it is a peer dependency).
17+
18+
```bash
19+
npm install --save-dev less
20+
```
21+
22+
Next, add `styled-jsx-plugin-less` to the `styled-jsx`'s `plugins` in your babel configuration:
23+
24+
```json
25+
{
26+
"plugins": [
27+
[
28+
"styled-jsx/babel",
29+
{ "plugins": ["styled-jsx-plugin-less"] }
30+
]
31+
]
32+
}
33+
```
34+
35+
#### Notes
36+
37+
`styled-jsx-plugin-less` uses `styled-jsx`'s plugin system which is supported from version 2.
38+
39+
Read more on their repository for further info.
40+
41+
## License
42+
43+
MIT

‎fixture.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
div { color: red; }

‎index.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
const less = require("less");
2+
const loopWhile = require("deasync").loopWhile;
3+
4+
module.exports = (css, settings) => {
5+
const cssWithPlaceholders = css
6+
.replace(
7+
/\:\s*%%styled-jsx-expression-(\d+)%%/g,
8+
(_, id) => `: styled-jsx-expression-${id}()`
9+
)
10+
.replace(
11+
/%%styled-jsx-expression-(\d+)%%/g,
12+
(_, id) => `/*%%styled-jsx-expression-${id}%%*/`
13+
);
14+
15+
let wait = true;
16+
let preprocessed = "";
17+
18+
function resolved(result) {
19+
preprocessed = result;
20+
wait = false;
21+
}
22+
23+
less.render(cssWithPlaceholders, settings).then(function(output) {
24+
resolved(output.css);
25+
});
26+
27+
loopWhile(() => wait);
28+
29+
return preprocessed
30+
.replace(
31+
/\:\s*styled-jsx-expression-(\d+)\(\)/g,
32+
(_, id) => `: %%styled-jsx-expression-${id}%%`
33+
)
34+
.replace(
35+
/\/\*%%styled-jsx-expression-(\d+)%%\*\//g,
36+
(_, id) => `%%styled-jsx-expression-${id}%%`
37+
);
38+
};

‎package.json‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "styled-jsx-plugin-less",
3+
"version": "0.0.1",
4+
"description": "Plugin to add Less support to styled-jsx",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "mocha test.js"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/erasmo-marin/styled-jsx-plugin-less.git"
12+
},
13+
"keywords": [
14+
"styled-jsx-plugin",
15+
"styled-jsx",
16+
"less"
17+
],
18+
"author": "Erasmo Marín",
19+
"license": "MIT",
20+
"bugs": {
21+
"url": "https://github.com/erasmo-marin/styled-jsx-plugin-less/issues"
22+
},
23+
"homepage": "https://github.com/erasmo-marin/styled-jsx-plugin-less#readme",
24+
"peerDependencies": {
25+
"less": "^2.3.1"
26+
},
27+
"devDependencies": {
28+
"mocha": "^4.0.1",
29+
"strip-indent": "^2.0.0"
30+
},
31+
"dependencies": {
32+
"deasync": "^0.1.10"
33+
}
34+
}

‎test.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
const assert = require('assert')
2+
const stripIndent = require('strip-indent')
3+
const plugin = require('./')
4+
5+
const cleanup = str => stripIndent(str).trim()
6+
7+
describe('styled-jsx-plugin-sass', () => {
8+
it('applies plugins', () => {
9+
assert.equal(
10+
plugin('p { img { display: block} color: color(red a(90%)) }').trim(),
11+
cleanup(`
12+
p {
13+
color: color(red a(90%)); }
14+
p img {
15+
display: block; }
16+
`)
17+
)
18+
})
19+
20+
it('works with expressions placeholders', () => {
21+
assert.equal(
22+
plugin('p { img { display: block } color: %%styled-jsx-expression-1%%; } %%styled-jsx-expression-1%%').trim(),
23+
cleanup(`
24+
p {
25+
color: %%styled-jsx-expression-1%%; }
26+
p img {
27+
display: block; }
28+
29+
%%styled-jsx-expression-1%%
30+
`)
31+
)
32+
})
33+
34+
it('works with @import', () => {
35+
assert.equal(
36+
plugin('@import "fixture"; p { color: red }').trim(),
37+
cleanup(`
38+
div {
39+
color: red; }
40+
41+
p {
42+
color: red; }
43+
`)
44+
)
45+
})
46+
})

‎yarn.lock‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2+
# yarn lockfile v1
3+
4+
5+
balanced-match@^1.0.0:
6+
version "1.0.0"
7+
resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
8+
9+
bindings@~1.2.1:
10+
version "1.2.1"
11+
resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.2.1.tgz#14ad6113812d2d37d72e67b4cacb4bb726505f11"
12+
13+
brace-expansion@^1.1.7:
14+
version "1.1.8"
15+
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
16+
dependencies:
17+
balanced-match "^1.0.0"
18+
concat-map "0.0.1"
19+
20+
[email protected]:
21+
version "1.3.0"
22+
resolved "https://registry.yarnpkg.com/browser-stdout/-/browser-stdout-1.3.0.tgz#f351d32969d32fa5d7a5567154263d928ae3bd1f"
23+
24+
[email protected]:
25+
version "2.11.0"
26+
resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
27+
28+
[email protected]:
29+
version "0.0.1"
30+
resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
31+
32+
deasync@^0.1.10:
33+
version "0.1.10"
34+
resolved "https://registry.yarnpkg.com/deasync/-/deasync-0.1.10.tgz#4e4a6836fbe0477bd5f908308bd2a96557d5d7fe"
35+
dependencies:
36+
bindings "~1.2.1"
37+
nan "^2.0.7"
38+
39+
[email protected]:
40+
version "3.1.0"
41+
resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
42+
dependencies:
43+
ms "2.0.0"
44+
45+
[email protected]:
46+
version "3.3.1"
47+
resolved "https://registry.yarnpkg.com/diff/-/diff-3.3.1.tgz#aa8567a6eed03c531fc89d3f711cd0e5259dec75"
48+
49+
[email protected]:
50+
version "1.0.5"
51+
resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
52+
53+
fs.realpath@^1.0.0:
54+
version "1.0.0"
55+
resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
56+
57+
[email protected]:
58+
version "7.1.2"
59+
resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
60+
dependencies:
61+
fs.realpath "^1.0.0"
62+
inflight "^1.0.4"
63+
inherits "2"
64+
minimatch "^3.0.4"
65+
once "^1.3.0"
66+
path-is-absolute "^1.0.0"
67+
68+
[email protected]:
69+
version "1.10.3"
70+
resolved "https://registry.yarnpkg.com/growl/-/growl-1.10.3.tgz#1926ba90cf3edfe2adb4927f5880bc22c66c790f"
71+
72+
has-flag@^2.0.0:
73+
version "2.0.0"
74+
resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
75+
76+
[email protected]:
77+
version "1.1.1"
78+
resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
79+
80+
inflight@^1.0.4:
81+
version "1.0.6"
82+
resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
83+
dependencies:
84+
once "^1.3.0"
85+
wrappy "1"
86+
87+
inherits@2:
88+
version "2.0.3"
89+
resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
90+
91+
minimatch@^3.0.4:
92+
version "3.0.4"
93+
resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
94+
dependencies:
95+
brace-expansion "^1.1.7"
96+
97+
[email protected]:
98+
version "0.0.8"
99+
resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
100+
101+
[email protected]:
102+
version "0.5.1"
103+
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
104+
dependencies:
105+
minimist "0.0.8"
106+
107+
mocha@^4.0.1:
108+
version "4.0.1"
109+
resolved "https://registry.yarnpkg.com/mocha/-/mocha-4.0.1.tgz#0aee5a95cf69a4618820f5e51fa31717117daf1b"
110+
dependencies:
111+
browser-stdout "1.3.0"
112+
commander "2.11.0"
113+
debug "3.1.0"
114+
diff "3.3.1"
115+
escape-string-regexp "1.0.5"
116+
glob "7.1.2"
117+
growl "1.10.3"
118+
he "1.1.1"
119+
mkdirp "0.5.1"
120+
supports-color "4.4.0"
121+
122+
[email protected]:
123+
version "2.0.0"
124+
resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
125+
126+
nan@^2.0.7:
127+
version "2.7.0"
128+
resolved "https://registry.yarnpkg.com/nan/-/nan-2.7.0.tgz#d95bf721ec877e08db276ed3fc6eb78f9083ad46"
129+
130+
once@^1.3.0:
131+
version "1.4.0"
132+
resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
133+
dependencies:
134+
wrappy "1"
135+
136+
path-is-absolute@^1.0.0:
137+
version "1.0.1"
138+
resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
139+
140+
strip-indent@^2.0.0:
141+
version "2.0.0"
142+
resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68"
143+
144+
[email protected]:
145+
version "4.4.0"
146+
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.4.0.tgz#883f7ddabc165142b2a61427f3352ded195d1a3e"
147+
dependencies:
148+
has-flag "^2.0.0"
149+
150+
wrappy@1:
151+
version "1.0.2"
152+
resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"

0 commit comments

Comments
 (0)