Tiny, composable atomic CSS engine

Related tags

CSS mapcss
Overview

mapcss

Tiny, composable atomic CSS engine

🚧 This project is currently in beta release. All interfaces are subject to change.

What

mapcss is an Atomic-oriented CSS generator.

It is strongly influenced by tailwindcss and unocss, but with the following differences.

  • There are no dependencies like postcss.
  • There are no large classes, and it is written with functional types in mind. As a result, there are no unnecessary bundles, and the browser can be used comfortably.
  • Deno is fully supported.

Usage

mapcss provides several preset.

tailwind classes

import { generate, presetTw } from "https://deno.land/x/mapcss@$VERSION/mod.ts";

const classes = "relative flex text-red-500/20";
const tokens = new Set(classes.trim().split(/\s+/g));

const result = generate({ presets: [presetTw()] }, tokens);
console.log(result.css);
/*
  .relative{position:relative;}
  .flex{display:flex;}
  .text-red-500\/20{color:rgba(239,68,68,0.2);}
*/

License

Copyright © 2021-present TomokiMiyauci.

Released under the MIT license

Comments
  • Change core to asynchronous code

    Change core to asynchronous code

    Assuming asynchronous has the following advantages

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

    Breaking Change

    • generate
    • transform
    enhancement released on @beta 
    opened by TomokiMiyauci 1
  • content with bracket should emit class

    content with bracket should emit class

    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

    opened by TomokiMiyauci 1
  • build docs is never-ending

    build docs is never-ending

    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.

    https://github.com/denoland/deno/issues/7087

    bug 
    opened by TomokiMiyauci 1
  • custom variable with empty string is invalid

    custom variable with empty string is invalid

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

    custom variable of empty string is invalid data type.

    bug released on @beta 
    opened by TomokiMiyauci 1
  • named types export should not yet

    named types export should not yet

    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.

    bug released on @beta 
    opened by TomokiMiyauci 1
  • Checking Node in instanceof is dangerous

    Checking Node in instanceof is dangerous

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

    Therefore, equivalence checking by instanceof may produce unexpected results.

    bug released on @beta 
    opened by TomokiMiyauci 1
Releases(1.0.0-beta.58)
Owner
Satoshi
Satoshi
GitHub mapcss.vercel.app
Tiny CSS framework with almost no classes and some pure CSS effects

no.css INTERACTIVE DEMO I am tired of adding classes to style my HTML. I just want to include a .css file and I expect it to style the HTML for me. no

null 96 Dec 10, 2022
A tiny modern CSS reset

minireset.css A tiny modern CSS reset that covers the basics: resets the font sizes: so that using semantic markup doesn't affect the styling resets t

Jeremy Thomas 2.6k Dec 29, 2022
CSS animations engine

Animatic With Animatic it's easy to animate over a hundred objects at a time. Each item can have it's mass and viscosity to emulate realistic objects!

Yehor Lvivski 1.4k Nov 20, 2022
Apply CSS based on your browser's text rendering engine

Type Rendering Mix Type Rendering Mix website Type Rendering Mix detects your browser’s text rasterizer and antialiasing method by parsing the user ag

Bram Stein 496 Dec 6, 2022
Reseter.css - A Futuristic CSS Reset / CSS Normalizer

Reseter.css A CSS Reset/Normalizer Reseter.css is an awesome CSS reset for a website. It is a great tool for any web designer. Reseter.css resets all

Krish Dev DB 1.1k Jan 2, 2023
[ON HOLD] Living Style Guides Engine and Maintenance Environment for Front-end Components. Core repository.

[ON HOLD] SourceJS - Living Style Guide Platform The project been stale for a while and currently is in the [ON HOLD] state until we find new maintain

SourceJS 552 Nov 8, 2022
Express js webserver integration with edgejs templating engine using webpack assets manager and hot reloading

Express js webserver integration with edgejs templating engine using webpack assets manager and hot reloading

Aria Khoshnood 4 Feb 12, 2022
Spectre.css - A Lightweight, Responsive and Modern CSS Framework

Spectre.css Spectre.css is a lightweight, responsive and modern CSS framework. Lightweight (~10KB gzipped) starting point for your projects Flexbox-ba

Yan Zhu 11.1k Jan 8, 2023
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

Khan Academy 5.3k Jan 1, 2023
CSS Boilerplate / Starter Kit: Collection of best-practice CSS selectors

Natural Selection Natural Selection is a CSS framework without any styling at all. It is just a collection of selectors that can be used to define glo

FrontAid CMS 104 Dec 8, 2022
Source code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less & Sass)

Live editor for CSS, Less & Sass (Magic CSS) Extension Live editor for CSS, Less & Sass (Magic CSS) for Google Chrome, Microsoft Edge, Mozilla Firefox

null 210 Dec 13, 2022
Easily create css variables without the need for a css file!

Tailwind CSS Variables This plugin allows you to configure CSS variables in the tailwind.config.js Similar to the tailwindcss configurations you are u

Mert AÅŸan 111 Dec 22, 2022
Cooltipz.css - A highly customisable, minimal, pure CSS tooltip library

Cooltipz.css - Cool tooltips Cool customisable tooltips made from pure CSS Lightweight • Accessible • Customisable • Simple Cooltipz.css is a pure CSS

Jack Domleo 110 Dec 24, 2022
micro-library for CSS Flexbox and CSS Grid

SpeedGrid micro-library for CSS Flexbox and CSS Grid Overview SpeedGrid dynamically generates inline CSS by specifying the class name. Easy maintenanc

Toshihide Miyake 7 Mar 26, 2022
Data-tip.css - Wow, such tooltip, with pure css!

Notice: hint.css has been much better since I complained about it months ago, so try out its new features instead of this one! data-tip.css Wow, such

EGOIST 117 May 26, 2021
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development. Explore Bootstrap docs » Report bug · Request feat

Bootstrap 161k Jan 1, 2023
Modern CSS framework based on Flexbox

Bulma Bulma is a modern CSS framework based on Flexbox. Quick install Bulma is constantly in development! Try it out now: NPM npm install bulma or Yar

Jeremy Thomas 46.6k Dec 31, 2022
A utility-first CSS framework for rapid UI development.

A utility-first CSS framework for rapidly building custom user interfaces. Documentation For full documentation, visit tailwindcss.com. Community For

Tailwind Labs 63.5k Dec 30, 2022
Materialize, a CSS Framework based on Material Design

MaterializeCSS Materialize, a CSS Framework based on material design. -- Browse the docs -- Table of Contents Quickstart Documentation Supported Brows

Alvin Wang 38.8k Jan 2, 2023