Skip to content

Commit 3e232b6

Browse files
okikiookikio
authored
update: add support for postcss 8 & update dependencies (#27)
* refactor: 🎨 add support for postcss 8 support postcss 8; fix bugs in tests; upate deps; update build process postcss-import@latest doesn't seem to import without .scss * ci: 🐛 fix travis & appveyor crash postcss 8 & rollup prefers node v12+ * refactor: 🎨 install postcss as a peerDependency * docs: 🎨 update installation docs to those recommended by postcss 8
1 parent e8a4942 commit 3e232b6

File tree

8 files changed

+176
-152
lines changed

8 files changed

+176
-152
lines changed

‎.appveyor.yml‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
# https://www.appveyor.com/docs/appveyor-yml
22

33
environment:
4-
matrix:
5-
- nodejs_version: 8
4+
matrix:
5+
- nodejs_version: 12
66

77
version: "{build}"
88
build: off
99
deploy: off
1010

1111
install:
12-
- ps: Install-Product node $env:nodejs_version
13-
- npm install
12+
- ps: Install-Product node $env:nodejs_version
13+
- npm install
1414

1515
test_script:
16-
- node --version
17-
- npm --version
18-
- cmd: "npm test"
16+
- node --version
17+
- npm --version
18+
- cmd: "npm test"

‎.rollup.js‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
1-
import babel from 'rollup-plugin-babel';
1+
import babel from "@rollup/plugin-babel";
22

33
export default {
4-
input: 'index.js',
5-
output: [
6-
{ file: 'index.cjs.js', format: 'cjs' },
7-
{ file: 'index.es.mjs', format: 'es' }
8-
],
9-
plugins: [
10-
babel({
11-
presets: [
12-
['@babel/env', { modules: false, targets: { node: 6 } }]
13-
]
14-
})
15-
]
4+
input: "index.js",
5+
output: [
6+
{ file: "index.cjs.js", format: "cjs" },
7+
{ file: "index.es.mjs", format: "es" },
8+
],
9+
plugins: [
10+
babel({
11+
babelHelpers: "bundled",
12+
presets: [
13+
["@babel/preset-env", { modules: false, targets: { node: 6 } }],
14+
],
15+
}),
16+
],
1617
};

‎.tape.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ module.exports = {
2424
'basic:mixed': {
2525
message: 'supports mixed (postcss-unroot, postcss-sass) usage',
2626
plugin: require('postcss')([
27+
// In the previous test, unroot wouldn't do anything.
28+
// I'm pretty sure that is a bug, so I changed the expected css file
2729
require('postcss-unroot'),
2830
require('.')
2931
]),
@@ -39,10 +41,11 @@ module.exports = {
3941
source: 'imports.scss'
4042
},
4143
'postcss-imports': {
42-
message: 'supports imports (postcss-import, postcss-sass) usage',
44+
message: 'supports imports (postcss-sass, postcss-import) usage',
4345
plugin: require('postcss')(
44-
require('postcss-import'),
45-
require('.')
46+
// Unsure what happened to postcss-import but it no longer imports without .scss at the end
47+
require('.'),
48+
require('postcss-import')
4649
),
4750
processOptions: Object.assign({}, processOptions, {
4851
syntax: require('postcss-scss')

‎.travis.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
language: node_js
44

55
node_js:
6-
- 8
6+
- 12
77

88
install:
9-
- npm install
9+
- npm install

‎README.md‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ after Sass, watching for changes to Sass imports, and preserving source maps.
3232
Add [PostCSS Sass] to your build tool:
3333

3434
```sh
35-
npm install @csstools/postcss-sass --save-dev
35+
npm install postcss @csstools/postcss-sass --save-dev
3636
```
3737

3838
#### Node
@@ -45,12 +45,6 @@ require('@csstools/postcss-sass').process(YOUR_CSS);
4545

4646
#### PostCSS
4747

48-
Add [PostCSS] to your build tool:
49-
50-
```sh
51-
npm install postcss --save-dev
52-
```
53-
5448
Use [PostCSS Sass] as a plugin:
5549

5650
```js

‎index.js‎

Lines changed: 129 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,136 @@
11
// tooling
2-
import mergeSourceMaps from './lib/merge-source-maps';
3-
import postcss from 'postcss';
4-
import sassResolve from '@csstools/sass-import-resolve';
5-
import sass from 'sass';
6-
import { dirname, resolve as pathResolve } from 'path';
7-
8-
// transform css with sass
9-
export default postcss.plugin('postcss-sass', opts => (root, result) => {
10-
// postcss configuration
11-
const postConfig = Object.assign({}, result.opts, requiredPostConfig);
12-
13-
// postcss results
14-
const { css: postCSS, map: postMap } = root.toResult(postConfig);
15-
16-
// include paths
17-
const includePaths = [].concat(opts && opts.includePaths || []);
18-
19-
// sass engine to use
20-
const sassEngine = opts && opts.sass || sass
21-
22-
// sass resolve cache
23-
const cache = {};
24-
25-
// replication of the default sass file importer
26-
const defaultSassImporter = (id, parentId, done) => {
27-
// resolve the absolute parent
28-
const parent = pathResolve(parentId);
29-
30-
// cwds is the list of all directories to search
31-
const cwds = [dirname(parent)].concat(includePaths).map(includePath => pathResolve(includePath));
32-
33-
cwds.reduce(
34-
// resolve the first available files
35-
(promise, cwd) => promise.catch(
36-
() => sassResolve(id, { cwd, cache, readFile: true })
37-
),
38-
Promise.reject()
39-
).then(
40-
({ file, contents }) => {
41-
// pass the file and contents back to sass
42-
done({ file, contents });
43-
},
44-
importerError => {
45-
// otherwise, pass the error
46-
done(importerError);
47-
}
48-
);
49-
}
50-
51-
// sass importer
52-
const sassImporter = opts && opts.importer || defaultSassImporter
53-
54-
return new Promise(
55-
// promise sass results
56-
(resolve, reject) => sassEngine.render(
57-
// pass options directly into node-sass
58-
Object.assign({}, opts, requiredSassConfig, {
59-
file: `${postConfig.from}#sass`,
60-
outFile: postConfig.from,
61-
data: postCSS,
62-
importer(id, parentId, done) {
63-
const doneWrap = (importerResult) => {
64-
const file = importerResult && importerResult.file
65-
if (file) {
66-
const parent = pathResolve(parentId);
67-
68-
// push the dependency to watch tasks
69-
result.messages.push({ type: 'dependency', file, parent });
70-
}
71-
72-
done(importerResult)
73-
}
74-
75-
// strip the #sass suffix we added
76-
const prev = parentId.replace(/#sass$/, '')
77-
78-
// call the sass importer and catch its output
79-
sassImporter.call(this, id, prev, doneWrap)
80-
}
81-
}),
82-
(sassError, sassResult) => sassError ? reject(sassError) : resolve(sassResult)
83-
)
84-
).then(
85-
({ css: sassCSS, map: sassMap }) => mergeSourceMaps(
86-
postMap.toJSON(),
87-
JSON.parse(sassMap)
88-
).then(prev => {
89-
// update root to post-node-sass ast
90-
result.root = postcss.parse(
91-
sassCSS.toString(),
92-
Object.assign({}, postConfig, {
93-
map: { prev }
94-
})
95-
);
96-
})
97-
);
98-
});
2+
import mergeSourceMaps from "./lib/merge-source-maps";
3+
// import postcss from 'postcss';
4+
import sassResolve from "@csstools/sass-import-resolve";
5+
import sass from "sass";
6+
import { dirname, resolve as pathResolve } from "path";
997

1008
const requiredPostConfig = {
101-
map: {
102-
annotation: false,
103-
inline: false,
104-
sourcesContent: true
105-
}
9+
map: {
10+
annotation: false,
11+
inline: false,
12+
sourcesContent: true,
13+
},
10614
};
10715

10816
const requiredSassConfig = {
109-
omitSourceMapUrl: true,
110-
sourceMap: true,
111-
sourceMapContents: true
17+
omitSourceMapUrl: true,
18+
sourceMap: true,
19+
sourceMapContents: true,
20+
};
21+
22+
// transform css with sass
23+
const plugin = (opts = {}) => {
24+
return {
25+
postcssPlugin: "postcss-sass",
26+
Once (root, { result, parse }) {
27+
// postcss configuration
28+
const postConfig = Object.assign(
29+
{},
30+
result.opts,
31+
requiredPostConfig
32+
);
33+
34+
// postcss results
35+
const { css: postCSS, map: postMap } = root.toResult(postConfig);
36+
37+
// include paths
38+
const includePaths = [].concat(opts && opts.includePaths || []);
39+
40+
// sass engine to use
41+
const sassEngine = opts && opts.sass || sass;
42+
43+
// sass resolve cache
44+
const cache = {};
45+
46+
// replication of the default sass file importer
47+
const defaultSassImporter = (id, parentId, done) => {
48+
// resolve the absolute parent
49+
const parent = pathResolve(parentId);
50+
51+
// cwds is the list of all directories to search
52+
const cwds = [dirname(parent)]
53+
.concat(includePaths)
54+
.map((includePath) => pathResolve(includePath));
55+
56+
cwds.reduce(
57+
// resolve the first available files
58+
(promise, cwd) =>
59+
promise.catch(() =>
60+
sassResolve(id, {
61+
cwd,
62+
cache,
63+
readFile: true,
64+
})
65+
),
66+
Promise.reject()
67+
).then(
68+
({ file, contents }) => {
69+
// pass the file and contents back to sass
70+
done({ file, contents });
71+
},
72+
(importerError) => {
73+
// otherwise, pass the error
74+
done(importerError);
75+
}
76+
);
77+
};
78+
79+
// sass importer
80+
const sassImporter = opts && opts.importer || defaultSassImporter;
81+
82+
return new Promise(
83+
// promise sass results
84+
(resolve, reject) =>
85+
sassEngine.render(
86+
// pass options directly into node-sass
87+
Object.assign({}, opts, requiredSassConfig, {
88+
file: `${postConfig.from}#sass`,
89+
outFile: postConfig.from,
90+
data: postCSS,
91+
importer(id, parentId, done) {
92+
const doneWrap = (importerResult) => {
93+
const file =
94+
importerResult && importerResult.file;
95+
if (file) {
96+
const parent = pathResolve(parentId);
97+
98+
// push the dependency to watch tasks
99+
result.messages.push({
100+
type: "dependency",
101+
file,
102+
parent,
103+
});
104+
}
105+
106+
done(importerResult);
107+
};
108+
109+
// strip the #sass suffix we added
110+
const prev = parentId.replace(/#sass$/, "");
111+
112+
// call the sass importer and catch its output
113+
sassImporter.call(this, id, prev, doneWrap);
114+
},
115+
}),
116+
(sassError, sassResult) =>
117+
sassError ? reject(sassError) : resolve(sassResult)
118+
)
119+
).then(({ css: sassCSS, map: sassMap }) =>
120+
mergeSourceMaps(postMap.toJSON(), JSON.parse(sassMap)).then(
121+
(prev) => {
122+
// update root to post-node-sass ast
123+
result.root = parse(
124+
sassCSS.toString(),
125+
Object.assign({}, postConfig, {
126+
map: { prev },
127+
})
128+
);
129+
}
130+
)
131+
);
132+
},
133+
};
112134
};
135+
plugin.postcss = true;
136+
export default plugin;

0 commit comments

Comments
 (0)