CSSType——模具行业从业者必备知识手册

system 2

<h2>CSSType</h2>

<p>TypeScript and Flow definitions for CSS, generated by <a href="https://github.com/mdn/data">data from MDN</a>. It provides autocompletion and type checking for CSS properties and values.</p>

<p><strong>TypeScript</strong></p>

<pre><code>
import type * as CSS from 'csstype';

const style: CSS.Properties = {
colour: 'white', // Type error on property
textAlign: 'middle', // Type error on value
};
</code></pre>

<pre><code>
// @flow strict
import * as CSS from 'csstype';

const style: CSS.Properties<> = {
colour: 'white', // Type error on property
textAlign: 'middle', // Type error on value
};
</code></pre>

<p>Further examples below will be in TypeScript!</p>

<h3>Getting started</h3>

<pre><code>
$ npm install csstype
</code></pre>

<h3>Table of content</h3>

<ul>
<li><a href="#style-types">Style types</a></li>
<li><a href="#at-rule-types">At-rule types</a></li>
<li><a href="#pseudo-types">Pseudo types</a></li>
<li><a href="#generics">Generics</a></li>
<li><a href="#usage">Usage</a></li>
<li><a href="#what-should-i-do-when-i-get-type-errors">What should I do when I get type errors?</a></li>
<li><a href="#version-30">Version 3.0</a></li>
<li><a href="#contributing">Contributing</a></li>
</ul>

<h3>Style types</h3>

<p>Properties are categorized in different uses and in several technical variations to provide typings that suits as many as possible.</p>

<table>
<tr><td></td><td>Default</td><td>Hyphen</td><td>Fallback</td><td>HyphenFallback</td></tr>
<tr><td>All</td><td>Properties</td><td>PropertiesHyphen</td><td>PropertiesFallback</td><td>PropertiesHyphenFallback</td></tr>
<tr><td>Standard</td><td>StandardProperties</td><td>StandardPropertiesHyphen</td><td>StandardPropertiesFallback</td><td>StandardPropertiesHyphenFallback</td></tr>
<tr><td>Vendor</td><td>VendorProperties</td><td>VendorPropertiesHyphen</td><td>VendorPropertiesFallback</td><td>VendorPropertiesHyphenFallback</td></tr>
<tr><td>Obsolete</td><td>ObsoleteProperties</td><td>ObsoletePropertiesHyphen</td><td>ObsoletePropertiesFallback</td><td>ObsoletePropertiesHyphenFallback</td></tr>
<tr><td>Svg</td><td>SvgProperties</td><td>SvgPropertiesHyphen</td><td>SvgPropertiesFallback</td><td>SvgPropertiesHyphenFallback</td></tr>
</table>

<p>Categories:</p>

<ul>
<li><strong>All</strong> - Includes <code>Standard</code>, <code>Vendor</code>, <code>Obsolete</code> and <code>Svg</code></li>
<li><strong><code>Standard</code></strong> - Current properties and extends subcategories <code>StandardLonghand</code> and <code>StandardShorthand</code> (e.g. <code>StandardShorthandProperties</code>)</li>
<li><strong><code>Vendor</code></strong> - Vendor prefixed properties and extends subcategories <code>VendorLonghand</code> and <code>VendorShorthand</code> (e.g. <code>VendorShorthandProperties</code>)</li>
<li><strong><code>Obsolete</code></strong> - Removed or deprecated properties</li>
<li><strong><code>Svg</code></strong> - SVG-specific properties</li>
</ul>

<p>Variations:</p>

<ul>
<li><strong>Default</strong> - JavaScript (camel) cased property names</li>
<li><strong><code>Hyphen</code></strong> - CSS (kebab) cased property names</li>
<li><strong><code>Fallback</code></strong> - Also accepts array of values e.g. <code>string | string[]</code></li>
</ul>

<h3>At-rule types</h3>

<p>At-rule interfaces with descriptors.</p>

<p><strong>TypeScript</strong>: These will be found in the <code>AtRule</code> namespace, e.g. <code>AtRule.Viewport</code>. </p>
<p><strong>Flow</strong>: These will be prefixed with <code>AtRule$</code>, e.g. <code>AtRule$Viewport</code>.</p>

<table>
<tr><td></td><td>Default</td><td>Hyphen</td><td>Fallback</td><td>HyphenFallback</td></tr>
<tr><td>@counter-style</td><td>CounterStyle</td><td>CounterStyleHyphen</td><td>CounterStyleFallback</td><td>CounterStyleHyphenFallback</td></tr>
<tr><td>@font-face</td><td>FontFace</td><td>FontFaceHyphen</td></tr>
</table>

<hr>
<p>还有什么补充参数吗？一起完善。</p>