fix: First working prototype.

.babelrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+    presets: [
+        [
+            '@babel/env',
+            {
+                useBuiltIns: 'usage',
+                shippedProposals: true,
+                targets: {
+                    node: 8,
+                },
+            },
+        ],
+        '@babel/typescript',
+        [
+            '@babel/stage-0',
+            {
+                decoratorsLegacy: true,
+            },
+        ],
+    ],
+};

.gitignore

@@ -0,0 +1,40 @@
+#############
+# IDE trash #
+#############
+
+# IntelliJ IDEA
+
+.idea/
+
+*.iml
+
+# Visual Studio Code
+
+.vscode/
+
+# Cloud9
+
+.c9/
+
+###################
+# Ecosystem trash #
+###################
+
+# NodeJS
+
+node_modules/
+
+# Various
+
+*.log
+
+#################
+# Project trash #
+#################
+
+build/
+cache/
+coverage/
+dist/
+temp/
+var/

.npmignore

@@ -0,0 +1,54 @@
+#############
+# IDE trash #
+#############
+
+# IntelliJ IDEA
+
+.idea/
+
+*.iml
+
+# Visual Studio Code
+
+.vscode/
+
+# Cloud9
+
+.c9/
+
+###################
+# Ecosystem trash #
+###################
+
+# Babel
+
+.babelrc.js
+
+# Git
+
+.gitignore
+
+# Prettier
+
+prettier.config.js
+
+# webpack
+
+serve.config.js
+webpack.config.js
+
+# Various
+
+*.log
+
+#################
+# Project trash #
+#################
+
+build/
+cache/
+coverage/
+src/
+temp/
+typings/
+var/

LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2018 Marina Miyaoka <[email protected]>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,3 +1,87 @@
 # postcss-managed-media
 
 > Really custom media in CSS
+
+Transpiles CSS with managed media queries to standard CSS.
+
+## Install
+
+```bash
+$ yarn add -D postcss-managed-media
+$ yarn add css-managed-media
+```
+
+## Usage
+
+### `postcss.config.js`
+
+```javascript
+const managedMedia = require('postcss-managed-media').default;
+
+module.exports = {
+    plugins: [managedMedia],
+};
+```
+
+### `styles.less`
+
+```less
+// Assuming you use both `less-loader` and `postcss-loader`.
+// Also assuming you transpile LESS vars to CSS vars.
+
+@managed-media --light;
+
+@bg: #000;
+@fg: #fff;
+
+.page {
+    background-color: @bg;
+    color: @fg;
+}
+
+@media (--light) {
+    @bg: #fff;
+    @fg: #000;
+}
+```
+
+### `media.js`
+
+```javascript
+import { setMedia } from 'css-managed-media';
+import { store } from './store';
+
+let { theme: current } = store.getState();
+const setLight = setMedia('light', current === 'light');
+
+setLight();
+
+store.subscribe(() => {
+    const { theme: next } = store.getState();
+
+    if (current !== next) {
+        current = next;
+        setLight();
+    }
+});
+```
+
+## Roadmap
+
+*   Discrete features (`--theme: light`, `--theme: dark`).
+*   Integration with `postcss-custom-media`.
+    *   Discrete custom media:
+        ```css
+        @custom-media --size {
+            s: (max-width: 599px);
+            m: (min-width: 600px) and (max-width: 1199px);
+            l: (min-width: 1200px);
+        }
+        ```
+*   `matchMedia` support.
+*   Future-proof `setMedia` API. (E.g. on `CSS` global.)
+*   Parametrized managed media (`--min-scrollbar-width: 10px`).
+
+# License
+
+MIT

package.json

@@ -1,9 +1,36 @@
 {
     "name": "postcss-managed-media",
-    "version": "0.0.1",
+    "version": "0.0.2-alpha.0",
     "description": "Really custom media in CSS",
     "main": "dist/index.js",
     "repository": "https://github.com/miyamarisubs/postcss-custom-media",
     "author": "Marina Miyaoka <[email protected]> (https://t.me/miyaokamarina)",
-    "license": "MIT"
+    "license": "MIT",
+    "scripts": {
+        "watch": "webpack-serve ./serve.config.js",
+        "build": "babel -o ./dist/index.js ./src/plugin.ts",
+        "postinstall": "mkdirp build coverage cache dist temp var build",
+        "clean": "rimraf build coverage cache dist temp var build",
+        "postclean": "yarn run postinstall",
+        "clean-dist": "rimraf \"dist/**/*\""
+    },
+    "dependencies": {
+        "@babel/polyfill": "^7.0.0-beta.46",
+        "postcss": "^6.0.22",
+        "postcss-value-parser": "^3.3.0"
+    },
+    "devDependencies": {
+        "@babel/cli": "^7.0.0-beta.46",
+        "@babel/core": "^7.0.0-beta.46",
+        "@babel/preset-env": "^7.0.0-beta.46",
+        "@babel/preset-stage-0": "^7.0.0-beta.46",
+        "@babel/preset-typescript": "^7.0.0-beta.46",
+        "babel-loader": "^8.0.0-beta.2",
+        "html-webpack-plugin": "^3.2.0",
+        "prettier": "^1.12.1",
+        "typescript": "^2.8.3",
+        "webpack": "^4.8.1",
+        "webpack-cli": "^2.1.3",
+        "webpack-serve": "^0.3.2"
+    }
 }

prettier.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    bracketSpacing: true,
+    jsxBracketSameLine: false,
+    printWidth: 160,
+    semi: true,
+    singleQuote: true,
+    tabWidth: 4,
+    trailingComma: 'all',
+    useTabs: false,
+};

serve.config.js

@@ -0,0 +1,18 @@
+const config = require('./webpack.config');
+
+module.exports = {
+    config,
+    dev: {
+        stats: 'minimal',
+        logTime: true,
+    },
+    port: 1488,
+    host: '0.0.0.0',
+    hot: {
+        port: 1337,
+        logTime: true,
+    },
+    content: './dist/',
+    logTime: true,
+    clipboard: false,
+};

src/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+
+<html lang='en'>
+
+<head>
+    <title>postcss-managed-media</title>
+</head>
+
+<body />
+
+</html>

src/index.ts

@@ -0,0 +1,18 @@
+import * as postcss from 'postcss';
+
+import plugin from './plugin';
+
+/* language=PostCSS */
+const code = String.raw`
+    @managed-media --touch;
+    @managed-media --light;
+    @managed-media --dark;
+
+    @media (--touch) {
+        .touch {}
+    }
+`;
+
+(async () => {
+    console.log((await postcss([plugin]).process(code, { from: undefined })).css);
+})();