tomokimiyauci / mapcss Goto Github PK

Assuming asynchronous has the following advantages

• dynamic map

{
  cssMap: {
    dynamic:
    (async () => import("source.json", { assert: { type: "json" } }));
  }
}

• async postcss plugin

Breaking Change

• generate
• transform

Redesign cssMap to be only object literals, which are easier to declare.

Treat "" (empty) and $DEFAULT properties as special keys

• As a familiar interface, input is the first argument.
• Flatten properties in config

When I build a certain component, it hangs.

Probably occurs when using global variables, and occur memory leak.
Since it is not possible to deploy automatically by CI/CD, substitute the component in question.

denoland/deno#7087

use mini-svg-data-uri

It must convert number/length css data type only

preset_tw includes injecting custom property.
if in production, the minifier compress " " string to empty.

custom variable of empty string is invalid data type.

The build process to npm may distribute the deps source to multiple sources.

Therefore, equivalence checking by instanceof may produce unexpected results.

Although named type export has been supported since Deno 14, it may be too early to use it.

Since it is not available in Aleph.js, it is temporarily refactored.

generate function should accept user defined extract function

presetSvg, presetTw

Expected:

1..i-mdi-icon
2..w-4

preset_svg mapped unmatched token

avoid duplication of property, remove vendor prefix from preset css definition

Refer to semver, v prefix is invalid versioning.

pure postcss module is not universal.

• Replace processor

Describe the bug

content with quote does not work

Input

<div class="content-['']"></div>

Config

import {  presetTw } from "https://esm.sh/@mapcss/preset-tw@beta";
import { presetTypography } from "https://esm.sh/@mapcss/preset-typography@beta";
import { simpleExtractor } from "https://esm.sh/@mapcss/config@beta";
import type { Config } from "config";

/** You can try the following features:
 * - Chrome 80+
 * - iOS Safari 15+
 * - Other browsers that support module workers
 */
// import { presetSVG, iconifyJSON } from "https://esm.sh/@mapcss/preset-svg@beta"
// import mdi from "https://esm.sh/@iconify-json/mdi/icons.json" assert {
// type: "json",
// };
// import autoprefixer from "https://esm.sh/autoprefixer"

export default <Config> {
  separator: "-",
  variablePrefix: "map-",
  extractor: simpleExtractor,
  preset: [
    presetTw({
      darkMode: "class",
    }),
    presetTypography({
      css: {
        p: false,
        a: {
          textDecoration: false,
          color: false,
        },
      },
    }),
    // presetSVG({
    //   mdi: iconifyJSON(mdi)
    // })
  ],
  minify: false,
  // postcssPlugin: [autoprefixer]
};

Playground link

https://mapcss.miyauchi.dev/playground?input=PGRpdiBjbGFzcz0iY29udGVudC1bJyddIj48L2Rpdj4&config=aW1wb3J0IHsgIHByZXNldFR3IH0gZnJvbSAiaHR0cHM6Ly9lc20uc2gvQG1hcGNzcy9wcmVzZXQtdHdAYmV0YSI7CmltcG9ydCB7IHByZXNldFR5cG9ncmFwaHkgfSBmcm9tICJodHRwczovL2VzbS5zaC9AbWFwY3NzL3ByZXNldC10eXBvZ3JhcGh5QGJldGEiOwppbXBvcnQgeyBzaW1wbGVFeHRyYWN0b3IgfSBmcm9tICJodHRwczovL2VzbS5zaC9AbWFwY3NzL2NvbmZpZ0BiZXRhIjsKaW1wb3J0IHR5cGUgeyBDb25maWcgfSBmcm9tICJjb25maWciOwoKLyoqIFlvdSBjYW4gdHJ5IHRoZSBmb2xsb3dpbmcgZmVhdHVyZXM6CiAqIC0gQ2hyb21lIDgwKwogKiAtIGlPUyBTYWZhcmkgMTUrCiAqIC0gT3RoZXIgYnJvd3NlcnMgdGhhdCBzdXBwb3J0IG1vZHVsZSB3b3JrZXJzCiAqLwovLyBpbXBvcnQgeyBwcmVzZXRTVkcsIGljb25pZnlKU09OIH0gZnJvbSAiaHR0cHM6Ly9lc20uc2gvQG1hcGNzcy9wcmVzZXQtc3ZnQGJldGEiCi8vIGltcG9ydCBtZGkgZnJvbSAiaHR0cHM6Ly9lc20uc2gvQGljb25pZnktanNvbi9tZGkvaWNvbnMuanNvbiIgYXNzZXJ0IHsKLy8gdHlwZTogImpzb24iLAovLyB9OwovLyBpbXBvcnQgYXV0b3ByZWZpeGVyIGZyb20gImh0dHBzOi8vZXNtLnNoL2F1dG9wcmVmaXhlciIKCmV4cG9ydCBkZWZhdWx0IDxDb25maWc-IHsKICBzZXBhcmF0b3I6ICItIiwKICB2YXJpYWJsZVByZWZpeDogIm1hcC0iLAogIGV4dHJhY3Rvcjogc2ltcGxlRXh0cmFjdG9yLAogIHByZXNldDogWwogICAgcHJlc2V0VHcoewogICAgICBkYXJrTW9kZTogImNsYXNzIiwKICAgIH0pLAogICAgcHJlc2V0VHlwb2dyYXBoeSh7CiAgICAgIGNzczogewogICAgICAgIHA6IGZhbHNlLAogICAgICAgIGE6IHsKICAgICAgICAgIHRleHREZWNvcmF0aW9uOiBmYWxzZSwKICAgICAgICAgIGNvbG9yOiBmYWxzZSwKICAgICAgICB9LAogICAgICB9LAogICAgfSksCiAgICAvLyBwcmVzZXRTVkcoewogICAgLy8gICBtZGk6IGljb25pZnlKU09OKG1kaSkKICAgIC8vIH0pCiAgXSwKICBtaW5pZnk6IGZhbHNlLAogIC8vIHBvc3Rjc3NQbHVnaW46IFthdXRvcHJlZml4ZXJdCn07Cg&version=djEuMC4wLWJldGEuNTA

Expected behavior

.content-\[\'\'\]{
    --map-content: '';
    content: var(--map-content);
}

Actual behavior

no emit

Version

v1.0.0-beta.50

Registry

npm

Runtime

Chrome 99.0.4844.74

Additional context

No response

Injected CSS should not be subject to the default orderStatement.

Reordering should only be applied to uncontrollable mapped CSS.

generate function accept token only

From the standpoint of compatibility and versatility, the role of mapcss is to be the interface for conversion to AST.

mapping rule -> plain object -> AST -> CSS

The order is preset CSS, user defined CSS, mapped CSS

mapcss is monorepo. as monorepo, remove single entry point