diff --git a/package-lock.json b/package-lock.json index 33b4b7ab2..066330980 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17648,7 +17648,7 @@ }, "packages/vite": { "name": "@modular-css/vite", - "version": "30.1.0", + "version": "30.1.1", "license": "MIT", "dependencies": { "@modular-css/css-to-js": "^29.0.6", @@ -17696,7 +17696,7 @@ "unified": "^11.0.3", "unist-builder": "^3.0.0", "unist-util-visit": "^5.0.0", - "vite": "^6.0.7" + "vite": "^6.0.11" } }, "packages/www/node_modules/@sveltejs/adapter-static": { @@ -19734,7 +19734,7 @@ "unified": "^11.0.3", "unist-builder": "^3.0.0", "unist-util-visit": "^5.0.0", - "vite": "^6.0.7" + "vite": "^6.0.11" }, "dependencies": { "@sveltejs/adapter-static": { diff --git a/packages/vscode/custom-data.mjs b/packages/vscode/custom-data.mjs new file mode 100644 index 000000000..e1ad7b845 --- /dev/null +++ b/packages/vscode/custom-data.mjs @@ -0,0 +1,24 @@ +import { vscode } from "#vscode"; + +import Processor from "@modular-css/processor"; + +/** + * @param {vscode.ExtensionContext} context + */ +function activate(context) { + // The command has been defined in the package.json file + // Now provide the implementation of the command with registerCommand + // The commandId parameter must match the command field in package.json + const disposable = vscode.commands.registerCommand("extension.helloWorld", () => { + // The code you place here will be executed every time your command is executed + + // Display a message box to the user + vscode.window.showInformationMessage("HI DICKHEAD!"); + }); + + context.subscriptions.push(disposable); +} + +export { + activate, +}; diff --git a/packages/vscode/data/m-css.css-data.json b/packages/vscode/data/m-css.css-data.json new file mode 100644 index 000000000..bf0d39bad --- /dev/null +++ b/packages/vscode/data/m-css.css-data.json @@ -0,0 +1,40 @@ +{ + "version": 1.1, + "properties": [ + { + "name": "composes", + "description": "Compose from another class", + "values": [ + { + "name": "Foo", + "description": "FOOOOOOOOO" + } + ] + }, + { + "name": "Foo", + "description": "FOO FOO", + "atRule": "@value", + "values": [ + { + "name": "aooga" + }, + { + "name": "booga" + } + ] + } + ], + "atDirectives": [ + { + "name": "@value", + "description": "Define a build-time value", + "values": [ + { + "name": "Foo", + "description": "FOOOOOOOOO" + } + ] + } + ] +} \ No newline at end of file diff --git a/packages/vscode/extension.js b/packages/vscode/extension.js new file mode 100644 index 000000000..211af398f --- /dev/null +++ b/packages/vscode/extension.js @@ -0,0 +1,19 @@ +// The module 'vscode' contains the VS Code extensibility API +// Import the module and reference it with the alias vscode in your code below +const vscode = require("vscode"); + +// this method is called when your extension is activated +// your extension is activated the very first time the command is executed + + +/** + * @param {import('vscode').ExtensionContext} context - The context. + */ +async function activate(context) { + (await import("./custom-data.mjs")).activate(context); +} + + +module.exports = { + activate, +}; diff --git a/packages/vscode/package.json b/packages/vscode/package.json new file mode 100644 index 000000000..95d6f74d1 --- /dev/null +++ b/packages/vscode/package.json @@ -0,0 +1,35 @@ +{ + "name": "@modular-css/vscode", + "description": "VS Code extension to provide custom CSS data", + "version": "0.0.1", + "publisher": "modular-css", + "repository": "https://github.com/tivac/modular-css/packages/vscode", + "engines": { + "vscode": "^1.74.0" + }, + "activationEvents": [], + "main": "./extension.js", + "contributes": { + "commands": [ + { + "command": "extension.helloWorld", + "title": "Hello World" + } + ], + "css": { + "customData": [ + "./data/m-css.css-data.json" + ] + } + }, + "scripts": {}, + "devDependencies": { + "@types/vscode": "^1.73.0" + }, + "peerDependencies": { + "@modular-css/processor": "^29" + }, + "imports": { + "#vscode": "./vscode.mjs" + } +} \ No newline at end of file diff --git a/packages/vscode/vscode.mjs b/packages/vscode/vscode.mjs new file mode 100644 index 000000000..77d7c1749 --- /dev/null +++ b/packages/vscode/vscode.mjs @@ -0,0 +1,5 @@ +import { createRequire } from "node:module"; + +const require = createRequire(import.meta.url); + +export const vscode = require("vscode"); diff --git a/packages/www/src/lib/site.mcss b/packages/www/src/lib/site.mcss index 29abaeb17..18567c96e 100644 --- a/packages/www/src/lib/site.mcss +++ b/packages/www/src/lib/site.mcss @@ -9,16 +9,20 @@ @value hoverInTime: 100ms; @value hoverOutTime: 250ms; +@page { + marks: +} + @value bigSize: screen and (min-width: 768px); @import "codemirror/lib/codemirror.css"; @import "codemirror/theme/nord.css"; -html { +@value @value html { box-sizing: border-box; - + font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - + width: 100%; height: 100%; @@ -33,6 +37,7 @@ html { } body { + composes: Foo; width: 100%; min-height: 100%; @@ -75,7 +80,7 @@ a:hover { } .button { - background-color: rgba(0,0,0,0); + background-color: rgba(0, 0, 0, 0); border-color: rgb(0, 0, 238); border-style: none; box-sizing: content-box; @@ -96,13 +101,13 @@ a:hover { -webkit-logical-height: 1em; -webkit-logical-width: auto; } - + @supports (-moz-appearance:none) { .button::-moz-focus-inner { border: none; padding: 0; } - + .button:focus { outline-style: dotted; outline-width: 1px; @@ -122,7 +127,7 @@ h6 { scroll-margin-top: 0.5rem; } -h3 { +h3 { font-size: 1.4rem; } @@ -144,24 +149,24 @@ h6 { :global(.anchor) { position: absolute; - + display: block; text-decoration: none; - + opacity: 0.2; transition: opacity 150ms; - + transform: translateX(-130%); &:hover { opacity: 1; - + text-decoration: none; } } } -p + ul { +p+ul { margin-top: 0; } @@ -212,4 +217,4 @@ p img { /* Nord's comment color is hard to read, this is a lightly-lightened version of it */ :global(.cm-s-nord span.cm-comment) { color: hsl(220, 16%, 46%); -} +} \ No newline at end of file