master-co / css Goto Github PK

Description

Currently, the rules for applying a background color do not support rgba, only rgb.

Description

Currently, Master can create very long classes so it'd be nice if the extension supporting inline folding and also expose a regex option for this to support non-mainstream frameworks and languages too.

As shown in the picture, highlight error when encountering `` bracket :

After probing further, the problem was caused by syntaxes like this:
${object.property}all_text_after_the_propert_are_not_properly_interpreted!
As in the example below:

Seems to be a mistake or oversight in reg expression. :P

Description

Currently there are several approaches to conditionally rendering the CSS classes with:

• Breakpoints
• Media Queries

While this allows for a lot of flexibility, this is still limited to the device type and screen size. This doesn't cover all use cases for example wearables, more specifically AR / VR devices like Oculus or the Hololens; where for instance a AR/VR experience is possible but the user is on a desktop based browser, thus one cannot conditionally render CSS without involving their UI library.

Proposed API

Style.extend('conditionals', {
    'xr': navigator.xr.isSessionSupported('immersive-ar').then(v => v);
});

Which then allows you to write classes conditionally i.e.

f:bold bg:white {f:medium bg:transparent}@xr

Limitations

AOT can be a bit of a hindrance, while I'm not exactly sure on the specifics of the AOT approach, if the objective is to generate a bundled CSS then perhaps multiple bundles can be generated with variations on the conditions i.e. default.css with no conditionals, and xr.css for XR mode, of course where there are multiple conditionals, a combination have to be generated - while this is not ideal I cannot think of a better approach currently. (Open to ideas).

Description

It would be awesome if there was documentation about how to integrate with sveltekit

Remix actually suggests to check for document instead of window due to deno supporting window
see the official docs
I've noticed the window check in the docs, not sure whether its also an issue in the code itself. (Coincidentally the latest commit also mentions a typeof window check 😛)

Description

Hi!

I'm seeing a pretty big slowdown of JS Intellisense with this extension enabled.

With the extension enabled:

With the extension disabled:

Reproduction

1. Enable the extension.

2. Type fun.
   Result: Intellisense is slow.

3. Disable the extension and reload the window.

4. Type fun.
   Result: Intellisense is fast.

Expected result: Intellisense should be as fast with the extention enabled as it is disabled.

System Informations

Win10 64
VSCode 1.72.2

Description

From Tdyi:

Thanks for taking the time to answer and look into this!
Also, I tried the Group Feature, and got this error in Sveltekit, as curly braces are used to pass JS data, it expects no colon :

/src/routes/+layout.svelte:8:16 Expected }
8 | <ul class="{my:0;list-style:none}>li">
                  ^

I've managed to get around it like so :

<script>
  let liClasse = '{my:0;list-style:none}';
</script>
...
<ul class="{liClasse}>li my:0 pl:0 fg:white gap:15 flex">

but I'd rather not rely on this workaround, using script tags just to style seems not viable

Some of the non-standard properties are supported by generating vendor prefixes, e.g., -webkit-font-smoothing, -moz-osx-font-smoothing; while some others are not supported yet, e.g., -webkit-text-stroke.
In order to support features like -webkit-text-stroke, we may either enable keywords transpilation of vendor prefixes, or create corresponding classes for all available non-standard properties. The former may still be a fail-safe solution even if the latter approach is preferred.

Discussed in #48

html {
    font-size: 62.5%;
}

Reference: https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

Description

I want to use a CSS variable defined outside :root, eg:

:root {
    --gyan-100: #00FF75;
}

.theme-dark {
    --text-tertiary: #8B98AC;
}

It works if I use a global variable:

<p className="font-color:$(gyan-100)">...</p>

But not with this one:

<p className="font-color:$(text-tertiary)">...</p> // Fail!

.theme-dark is correctly applied btw, and changing the value through developer tools returns the expected color.

Any ideas of what is happening? (:

Reproduction

No response

System Informations

Browser: Microsoft Edge (Chromium) 103.0.1264.51
OS: Zorin OS (x64)
Node.js: 18.5.0
Package Manager: npm 8.12.1

Description

How should I make this vscode plugin support .res files?

ReScript is an alternative to TypeScript.

Description

Currently there is no type support for element's properties.

For example:

// Props has no type hinting
const Button = el.button`
    inline-flex
    font:14
    ${(props) => (props.color ? 'font:white bg:' + props.color : '')}
`

What I'd like to have:

interface Props {
  color?: string;
}

const Button = el.button<Props>`
    inline-flex
    font:14
    ${(props) => (props.color ? 'font:white bg:' + props.color : '')}
`

The syntax isn't necessarily accurate, but the idea being is that you should get type hints from the props interface passed.

Description

For better configuration experience, breakpoints, colors, selectors, semantics, and values are expected to enable limitless nested configurations.

master.css.js draft about those:

export default {
    colors: {
        // layer 1
        primary: '#ebbb40',
        code: {
            // layer 2
            silence: 'slate-70', // ✅ supported: fg:code-silence
            gold: 'gold-70', // ✅ supported: bg:code-gold
            js: {
                // layer 3
                pink: 'pink-70' // 🚧 unsupported: fg:code-js-pinkt
            }
        }
    },
    values: {
        Height: {
            // layer 1
            'btn-xs': '3rem', // ✅ supported: h:btn-xs
            'btn-sm': '4rem', // ✅ supported: h:btn-sm
            btn: {
                // layer 2
                xs: '3rem', // 🚧 unsupported: h:btn-xs
                sm: '4rem' // 🚧 unsupported: h:btn-sm
            }
        },
        // global token values
        xs: '1rem'
    }
}

Thanks @mockingjet, @itsezc

Description

In Sveltekit at least there's a FOUC when loading the page so it would be nice if you could compile the results of master CSS when building since you're doing that with Svelte anyway.

Maybe there's a way to avoid this even now but I don't know how to.

Related: sveltejs/kit#6227

Description

This won't work: w:50%@sm>div

Edited: w:50%>div@sm This is working...The order is so confusing, there is no official documentation about how we should order them...

Reproduction

No response

System Informations

Browser: Firefox Developer

Description

Unexpected result when parsing \' in content

Reproduction

Case 1

<div class="content:'foo\'s'"></div>

Expected

.content\:\'foo\\\'s\' {
    content:"foo's";
}

Current Result

.content\:\'foo\\\'s\' {
    content: "foo' s";
}

Case 2

<div class="content:'foo\'s':after"></div>

Expected

.content\:\'foo\\\'s\'\:after {
    content:"foo's";
}

Current Result

.content\:\'foo\\\'s\'\:after {
}

System Informations

All platforms

Description

Add inline MDN docs support for classes, highlighting browser support, issues and description of the feature

What is the improvement or update you wish to see?

vertical-align

Is there any context that might help us understand?

Does the docs page already exist? Please link to it.

No response

Description

It will be very useful if master-css can allow passing parameters to custom classes.

For example

Style.extend('classes', 
    {
        btn: (size,blue) => `font:${size}rem text:center h:40 bg:${blue}`
    },
);

<div class="btn(1,blue)">

Description

Thank you for this wonderful library. While experimenting with svelte, I have realised that the group syntax conflicts with svelte's dynamic attribute value syntax. Is there a way to override curly braces to some other character such as [] or {{ }}?

Reproduction

https://svelte.dev/repl/454c3434d7e1455da49e90813b16b4e0?version=3.49.0

System Informations

Browser: Chrome (102)
OS: OSX 15

Description

There are grid-column-gap and grid-row-gap for grid layout. But currently, we only can use the general gap property.

We often only need the gap for either column or row instead of both of them together.

Description

A feature like Transient props in styled-components, to avoid the error Warning: Received `false` for a non-boolean attribute when we pass boolean value props to a style element.

Description

e.g.:

https://docs.master.co/styles/setup/react
says:

pnpm install @master/styles @master/style @master/normal.css

output:

dependencies:
+ @master/normal.css 1.9.3
+ @master/style 1.6.0 deprecated
+ @master/styles 1.14.0 deprecated

deprecated???
Oh, it seems I should try pnpm install @master/css

And can we link the doc src to to bottom of the doc page? Then we can easily address and fix it while reading.

Reproduction

No response

System Informations

irrelevant

Description

Master CSS is expected to be the best design system tool for some developers (at least me). And CSS variables play an important role to build tokens and switch themes. It would be nice if you provide js-functions to add/modify css variables. It can also combine language service to get autocompletion when coding class="$var:value". With typescript's help, provide an generic interface to define css tokens like

interface CssVarScheme {
    primary: string;
    secondary?: string;
}

Style.defineCssVars<CssVarScheme>({
    light: { 
        primary: '...',
        secondary: '...',
    },
    dark: { 
        secondary: '...',
    }, // property 'primary' is missing
    anotherTheme: {
        primary: '...',
        warning: '...' // 'warning' doesn't exist in type 'CssVarScheme'
    },
})

And speaking of Style.extend api, It is not so distinct. Maybe use Style.defineSomething like above can be more straightforward and provide better DX with typescript.

Style.defineValues({
    width: { ... },
    heiight: { ... } // property 'heiight' doesnt exist
})

Style.defineColorSchemes(['light', 'dark', 'anotherTheme', 123 // type '123' is not assignable to parameter of type 'String' ])

Description

Given that the support for :has pseudo class and container queries is becoming main stream with the release of chrome 105 (safari 15.4 already has support for :has and Safari 16 will have support for container queries).

Is there any plan to support them?

🚨 The automated release from the beta branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the beta branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing name property in package.json.

The package.json's name property is required in order to publish a package to the npm registry.

Please make sure to add a valid name for your package in your package.json.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Description

Add support for "Can I Use" (https://caniuse.com/) with inline documentation for classes highlighting the following:

• Description of the feature
• % of Global population
• Notes and issues

Description

CVA (class authority variance) is a popular library for handling classes (with Master) as such it should be supported out of the box by the CSS language service.

The following regex (as listed on CVA's README for Tailwind) should be covered for Master:

"cva\\(([^)]*)\\)", 
"[\"'`]([^\"'`]*).*?[\"'`]"

Description

https://cdn.master.co/css is currently redirected to https://cdn.jsdelivr.net/npm/@master/css.

cdnjs offers a better compression (brotli) than jsDelivr (gzip).

Comparison of the usage statistics of cdnjs vs. jsDelivr
https://w3techs.com/technologies/comparison/cd-cdnjs,cd-jsdelivr

Description

In v1 I was using template string to use group styles like

<h1 class="{`{color:red;f:1rem}`}">Hi with grouped class</h1>

This used to work out fine.

However with latest 2.0.0-beta.54, This is not working.

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-ae7aok?file=src%2Froutes%2F%2Bpage.svelte

System Informations

No response

Discussed in #4

Description

Pressing Command + S triggers save-as functionality on MacOS on chrome.

Description

.h:xs is generated as:

.h\:xs {
    height: 37.5rem;
}

Thanks @mockingjet

Reproduction

No response

System Informations

MacOS, M2 Air, Chrome

What is the improvement or update you wish to see?

incorrect: 3xl | @media (min-width: 1600px) { }

correct: 3xl | @media (min-width: 1920px) { }

as indicated in breakpoints.js

Is there any context that might help us understand?

https://github.com/master-co/css/blob/main/src/breakpoints.js

Does the docs page already exist? Please link to it.

https://docs.master.co/css/breakpoints

Description

Global token are important for building a design system but currently its not possible to define a global token using Styles.extend. We should be able to use Styles.extend for defining a global token.

Styles.extend('global', { 
size: {10: '10px},
'border-sm': '1px'

})

Description

It would be great If we can use color tokens in Style/Styles.extend.

Description

I have some code like that:

It has an type error on ref

Type 'ForwardedRef<HTMLDivElement>' is not assignable to type 'Ref<"div"> | undefined'.
  Type '(instance: HTMLDivElement | null) => void' is not assignable to type 'Ref<"div"> | undefined'.
    Type '(instance: HTMLDivElement | null) => void' is not assignable to type '(instance: "div" | null) => void'.
      Types of parameters 'instance' and 'instance' are incompatible.
        Type '"div" | null' is not assignable to type 'HTMLDivElement | null'.
          Type 'string' is not assignable to type 'HTMLDivElement'.ts(2322)
index.d.ts(134, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & Omit<HTMLAttributes<HTMLDivElement> & Partial<{}>, "className" | "ref"> & extraType & RefAttributes<...>'

Did i missed some thing?

Reproduction

No response

System Informations

@master/style-element.react: "^1.1.4
typescript: 4.5.5

Description

Very excited for master, but for now there's only a vscode extension. If you can make a Language Server Protocol (LSP), then master can be supported across multiple IDEs like Neovim, etc.

Discussed in #23

<div class="[counter-increment: count]">
  ...
</div>

Description

Expected SSR generates a rendered (styles included) HTML content.
But it seems that it only parses the html and outputs the generated CSS.

confusing returnings:

1. html in the output is the same as the input one and useless.
2. stylesCss should contain color variables used in HTML.
3. colorsCss is always about 20 kb in size without any tree-shaking, no matter what the input is.
4. colorsMetaContent is useless, I don't know in which case it will be used.

That is, developers need to inject the uncompleted (without color variables) or unused (too many color variables) CSS into HTML manually, which is not good for DX and performance.

BTW, the SSR example on the document is outdated.

Reproduction

Run the test on StackBlitz

import { render } from "@master/css/render";
import { StyleSheet, Style } from "@master/css";

const target: string[] = [
    `<div class="p:12"></div>`,
    `<div class="font:24 font:56@2xl font:48@lg font:32@md bg:blue-54:hover bg:blue-47 bg:blue-68:active color:orange"></div>`,
];

for (const html of target) {
    test(html);
}

function test(html: string) {
    const key = `render \x1b[93m${html}\x1b[m`;

    console.time(key);
    const result = render(html, { StyleSheet, Style });
    console.timeEnd(key);

    console.log("html:", `\x1b[92m${result.html}\x1b[m`);
    console.log("stylesCss:", `\x1b[96m${result.stylesCss}\x1b[m`);
    console.log("colorsMetaContent:", `\x1b[94m${result.colorsMetaContent}\x1b[m`);
    console.log("length of colorsCss:", `\x1b[95m${result.colorsCss.length}\x1b[m`);
}

System Informations

@master/css: 1.17.2

Description

Automatic initialization should be disabled by default when we use @master/css package from npm. Its ok to enable Automatic initialization by default when we use CDN.

Hi,
I hope you're doing well.

I've faced an issue, if I put a variable in :root and use it in class:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Some</title>
    <link href="https://unpkg.com/@master/normal.css" rel="stylesheet" />
    <script src="https://unpkg.com/@master/style"></script>
    <script src="https://unpkg.com/@master/styles"></script>

    <style>
      html,
      body {
        height: 100%;
      }
      :root {
        --light-grey: hsl(217, 12%, 63%);
      }
    </style>
  </head>
  <body>
    <p class="font-color:$(light-grey)">Hey man!</p>
  </body>
</html>

This would work perfect. However if I change p tag to:

<p class="f:$(light-grey)">Hey man!</p>

it will not work as expected.
Official doc here: https://docs.master.co/styles/font-color
says I can use f as a shorthand of font-color, Not sure if f:$(light-grey) is illegal or this is a bug.

Description

The hide isn't adding the class display: none; on ::before, instead the content won't be generated at all with class hide.

This makes me to unable to use JavaScript to select the element::before. My use case is to remove the hide after the button is clicked but now the element::before isn't generated so this is impossible,

Reproduction

No response

System Informations

Browser: Firefox Developer

First of all, thanks to you guys for creating this amazing on-demand CSS engine.

When I am browsing the document, the interactive style editors work great, but newlines will break the layout even if it has been deleted. I think that will be nice if we ignore it.

By the way, I cannot find the repository of the document, will it be open to everyone soon?

Description

This issue takes into account issues raised on:

• #52
• #54
• #55
• #56
• #60

Introduction

Theming is a crucial part of web applications, it has been around for decades now and only expected to grow as apps become more complex, increase in scopes and the types of devices increase.

It is important that we address themes and provide flexibility for users so that they can build powerful, accessible and immersive UI and UX for it's users.

There are multiple types of themes:

• Standard - A configuration of key / values that could be replaced (as seen on Tailwind)
• Runtime - JIT focused, changed on demand on the runtime

A (fairly) new standard has emerged from the Design Tokens Community Group (DTCG) that introduces a new specification for design tokens to unify and standardize how they are consumed. This isolates design tokens from a "theme", where these work separately from each other and a theme becomes a semantic feature.

Design tokens in Master

Currently Master does provide a lot of configuration for styling, while this is starting point, it can be expanded upon greatly. I propose that we incorporate design tokens directly into Master (please refer to design token specification for further documentation / information about it).

Demonstration

design.tokens

{
  "majestic magenta": {
    "$type": "color",
    "$value": "#ff00ff",
    "$description": "The background color for buttons in their normal state."
  },
  "brand": {
    "color": {
      "$type": "color",
      "acid green": {
        "$value": "#00ff66"
      },
      "hot pink": {
        "$value": "#dd22cc"
      }
    },
    "typeface": {
      "$type": "fontFamily",
      "primary": {
        "$value": "Comic Sans MS"
      },
      "secondary": {
        "$value": "Times New Roman"
      }
    }
  },
  "shadow-token": {
    "$type": "shadow",
    "$value": {
      "color": "#00000088",
      "offsetX": "0.5rem",
      "offsetY": "0.5rem",
      "blur": "1.5rem",
      "spread": "0rem"
    }
  }
}

master.css.js or master.css.ts

import { transformDesignTokens } from '@master/css';
import tokens from './design.tokens';

const config = {
  tokens: transformDesignTokens(tokens),
  // Other config
};

export default config;

The transformed JSON would look similar to:

const tokens = {
  "majestic-magenta": "#ff00ff",
  brand: {
    color: {
      "acid-green": "#00ff66",
      "hot-pink": "#dd22cc",
    },
    typeface: {
      primary: "Comic Sans MS",
      secondary: "Times New Roman",
    },
  },
  // Semantic Class in Master
  "shadow-token": "0.5rem|0.5rem|1.5rem|0|#00000088",
};

Usage without Themes

<div class='bg:majestic-magenta'>Block 1</div>
<div class='bg:brand-color-acid-green'>Block 2</div>

This issue is open for comments should anyone have any concerns or ideas on how this maybe improved.

Currently, I'm working with @1aron to create a suitable API to bring “theming” into scope with the design tokens, as more thought needs to go into that.

Description

I'm making configurations directly in the HTML as described here: https://docs.master.co/css/customization#other-directly-in-index-html

It's working for Style.extend('classes',{}) but Style.extend('semantics',{}) wont work.
Below is the full code:

<!DOCTYPE html>
<html lang="en">
<head>
   <link href="https://unpkg.com/@master/normal.css" rel="stylesheet">
   <script>
      /* 1. Prevent @master/css from initializing automatically */
      window.MasterCSSManual = true;
   </script>
   <script src="https://cdn.master.co/css"></script>
   <script >
      /* 2. Configure your initial options here ... */
      const Style = window.MasterStyle;
      Style.extend('semantics', {
         fontFamily: {
            customFont: 'Roboto Slab', serif
         }
      });
      /* 3. Manually initialize */
      window.initMasterCSS();
   </script>
</head>
<body>
   <button class="btn">Ok</button>
</body>
</html>

Reproduction

No response

System Informations

Browser: Firefox Developer

When I am using pnpm to install @master/styles, the warning shows up.

 WARN  Issues with peer dependencies found
.
├─┬ @master/styles
│ └── ✕ missing peer @master/style@^1.0.0

After digging into the source code, I found that in package.json, the package states @master/style as its peer dependency:

"peerDependencies": {
    "@master/style": "^1.0.0"
},

I don't know if it is necessary to do so? Is @master/style bundled in @master/styles?

I think the document of pnpm setup instruction should be:

pnpm install @master/styles @master/style @master/normal.css

because pnpm won't automatically install peer dependencies by default.

Node: 16.13.1
PNPM: 6.32.3
@master/styles: 1.3.1

Description

I'm using the descendant selector _ to select all the child elements. For example, if there is a div containing three <a></a>, and I wanna add full width to all the a tags, I then add the CSS as such to the div: w:full_a, so I don't have to add w:full to all of the three a tag.

But if I wanna add empty content to the a tag, it won't work: content:' '::before_a. I don't want to use the 'Reusing Design' just for three elements with such a simple rule...Please help.

Reproduction

No response

System Informations

Browser: Firefox Developer Edition

Description

As you all know, Master CSS has different unit conversion behavior for each CSS property like w:48 generates CSS rule as width: 3rem.

To make your DX more consistent, we'll enable the same behavior in master.css.js.

export default {
    values: {
        Height: {
-          xs: '2rem',
+          xs: 32,
-          sm: '3rem',
+          sm: 48
        },
-      '1x': '1rem',
+      '1x': 16,
-      '2x': '2rem',
+      '2x': 32
    }
}

⚠️ The lines removed is still supported.

Because unset unit global values are converted to rem, it cannot be applied to unitless CSS properties such as line-height: 1.5 and font-weight: 600.

Yes, this is the only constraint of the feature, however in most circumstances, you will need to adjust values.LineHeight and values.FontWeight independently, rather than globally.