feat: Add stylis for css

website/package.json

@@ -147,6 +147,7 @@
  "solidity-parser-diligence": "^0.4.18",
  "source-map": "^0.6.1",
  "sqlite-parser": "^1.0.0-rc3",
+ "stylis": "^4.0.10",
  "svelte": "^3.4.1",
  "tenko": "^1.0.6",
  "tern": "^0.24.3",

website/src/parsers/css/stylis.js

@@ -0,0 +1,61 @@
+import defaultParserInterface from '../utils/defaultParserInterface';
+import pkg from 'stylis/package.json';
+
+const ID = 'stylis';
+
+function removeLength(node, lineLengths) {
+ if (!node || typeof node !== 'object') return;
+ if (Array.isArray(node.children)) {
+ node.children.forEach((child) => removeLength(child, lineLengths));
+ }
+ if ('line' in node && 'column' in node) {
+ delete(node.length);
+ if (Array.isArray(node.children)) {
+ node.length = node.children.length;
+ }
+ }
+}
+
+export default {
+ ...defaultParserInterface,
+
+ id: ID,
+ displayName: ID,
+ version: pkg.version,
+ homepage: pkg.homepage || 'https://stylis.js.org/',
+ locationProps: new Set(['line', 'column']),
+
+ loadParser(callback) {
+ require(['stylis'], callback);
+ },
+
+ parse(stylis, code) {
+ const ast = stylis.compile(code);
+ const rootNode = {
+ type: 'Stylesheet',
+ line:0,
+ column:0,
+ length: ast.length,
+ children: ast,
+ };
+ removeLength(rootNode);
+ return rootNode;
+ },
+
+ nodeToRange() { 
+ // Return void until the stylis provides the correct position
+ // @see https://github.com/thysultan/stylis.js/issues/269
+ },
+
+ _ignoredProperties: new Set(['parent', 'root']),
+
+ opensByDefault(node, key) {
+ return key === 'children' && typeof node[key] !== 'string';
+ },
+
+ getDefaultOptions() {
+ return {
+ };
+ },
+
+};

website/src/parsers/css/transformers/stylis/codeExample.txt

@@ -0,0 +1,10 @@
+import { prefixer } from "stylis";
+
+export default [
+ (element, index, children, callback) => {
+ if (element.type === "decl" && element.props === "border") {
+ element.return = element.value.replace(/^border/, "outline");
+ }
+ },
+ prefixer,
+];

website/src/parsers/css/transformers/stylis/index.js

@@ -0,0 +1,35 @@
+import compileModule from '../../../utils/compileModule';
+import pkg from 'stylis/package.json';
+
+const ID = 'stylis';
+
+export default {
+ id: ID,
+ displayName: ID,
+ version: pkg.version,
+ homepage: pkg.homepage,
+
+ defaultParserID: 'stylis',
+
+ loadTransformer(callback) {
+ require(['../../../transpilers/babel', 'stylis'], (transpile, stylis) => {
+ callback({ transpile: transpile.default, stylis });
+ });
+ },
+
+ transform({ transpile, stylis }, transformCode, code) {
+ transformCode = transpile( transformCode);
+ let transform = compileModule( // eslint-disable-line no-shadow
+ transformCode,
+ {
+ require(name) {
+ switch (name) {
+ case 'stylis': return stylis;
+ default: throw new Error(`Cannot find module '${name}'`);
+ }
+ },
+ },
+ );
+ return stylis.serialize(stylis.compile(code), stylis.middleware([].concat(transform.default || transform).concat(stylis.stringify)));
+ },
+};

website/yarn.lock

@@ -10550,6 +10550,11 @@ style-to-object@^0.2.1:
  dependencies:
  inline-style-parser "0.1.1"
 
+stylis@^4.0.10:
+ version "4.0.10"
+ resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"
+ integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
+
 [email protected], supports-color@^6.1.0:
  version "6.1.0"
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"