[wip] @snowpack/plugin-sass & @snowpack/plugin-postcss

packages/plugin-postcss/README.md

@@ -0,0 +1,45 @@
+# @snowpack/plugin-postcss
+
+Use PostCSS to process CSS in Snowpack. Good for autoprefixing, minification, and anything else.
+
+```
+npm install --save-dev @snowpack/plugin-postcss
+```
+
+Add `@snowpack/plugin-postcss` to your `snowpack.config.json`:
+
+```json
+{
+  "plugins": ["@snowpack/plugin-postcss"]
+}
+```
+
+Also create a `postcss.config.js` file in your project root:
+
+```bash
+npm i autoprefixer cssnano
+```
+
+```js
+const autoprefixer = require("autoprefixer");
+const cssnano = require("cssnano");
+
+module.exports = {
+  plugins: [
+    autoprefixer("last 2 versions"),
+    ...(process.env.NODE_ENV === "production" ? [cssnano()] : []), // minify for build but not dev (for speed)
+    // add more PostCSS plugins here
+  ],
+};
+```
+
+See [the PostCSS documentation](https://github.com/postcss/postcss) on what all can be added here.
+
+### Plugin Options
+
+| Name     | Default               | Description                                                                                                                       |
+| :------- | :-------------------- | :-------------------------------------------------------------------------------------------------------------------------------- |
+| `config` | `./postcss.config.js` | Where to load PostCSS config (set this if your config file isn’t named `postcss.config.js`).                                      |
+| `sass`   | `false`               | Set to `true` to run `.scss` and `.sass` files through PostCSS after compiling (requires [@snowpack/plugin-sass](../plugin-sass)) |
+
+### Configuring PostCSS

packages/plugin-postcss/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@snowpack/plugin-postcss",
+  "version": "1.0.0",
+  "main": "plugin.js",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {},
+  "dependencies": {
+    "node-sass": "^4.14.1"
+  }
+}

packages/plugin-postcss/plugin.js

@@ -0,0 +1,23 @@
+const path = require("path");
+const postcss = require("postcss");
+
+module.exports = (config, options = {}) => ({
+  input: [".css", ...(options.sass ? [".sass", ".scss"] : [])],
+  output: [".css"],
+  async build({ contents, filePath }) {
+    const postCSSConfigPath = path.resolve(
+      process.cwd(),
+      options.config || "postcss.config.js"
+    );
+    const postCSSConfig = require(postCSSConfigPath);
+    let output = "";
+
+    try {
+      output = await postcss(postCSSConfig.plugins || []).process(contents);
+    } catch (err) {
+      throw new Error(`[${filePath}]: ${err}`);
+    }
+
+    return { ".css": output };
+  },
+});

packages/plugin-sass/README.md

@@ -0,0 +1,32 @@
+# @snowpack/plugin-sass
+
+Use Sass to transform `.sass` and `.scss` files.
+
+```
+npm install --save-dev @snowpack/plugin-sass
+```
+
+#### `snowpack.config.json`
+
+```json
+{
+  "plugins": ["@snowpack/plugin-sass"]
+}
+```
+
+### Using with PostCSS
+
+If you need autoprefixing and/or minification, pair this with the [@snowpack/plugin-postcss](../plugin-postcss) plugin with `sass: true` enabled (otherwise, `.sass` and `.scss` files will be ignored by PostCSS):
+
+```json
+{
+  "plugins": [
+    "@snowpack/plugin-sass",
+    ["@snowpack/plugin-postcss", { "sass": true }]
+  ]
+}
+```
+
+### Plugin Options
+
+None

packages/plugin-sass/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@snowpack/plugin-sass",
+  "version": "1.0.0",
+  "main": "plugin.js",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {},
+  "dependencies": {
+    "autoprefixer": "^9.8.4",
+    "cssnano": "^4.1.10",
+    "node-sass": "^4.14.1"
+  }
+}

packages/plugin-sass/plugin.js

@@ -0,0 +1,23 @@
+const path = require("path");
+const sass = require("node-sass");
+
+module.exports = () => ({
+  input: [".scss", ".sass"],
+  output: [".css"],
+  async build({ contents, filePath }) {
+    if (contents.indexOf("@use ") !== -1) {
+      console.warn(
+        "node-sass doesn’t support @use yet. Using @import is preferred. See https://github.com/sass/node-sass/issues/2886."
+      );
+    }
+
+    const includePaths = [path.resolve(process.cwd(), path.dirname(filePath))];
+
+    const out = sass.renderSync({
+      data: contents,
+      includePaths,
+    });
+    const { css } = out;
+    return { ".css": css.toString() };
+  },
+});