search

rogerxu / rogerxu.github.io

Roger Xu's Blog
2 stars 2 forks source link

PostCSS #38

Open rogerxu opened 7 years ago

rogerxu commented 7 years ago

PostCSS - a tool for transforming CSS with JavaScript

postcss-cssnext features

rogerxu commented 7 years ago

cssnext features

PostCSS-cssnext is a plug-in pack.

Get Started on the CSS of the Future with PostCSS-cssnext

Automatic Vendor Prefixes

autoprefixer

Custom Properties & var()

Similar to Sass variables.

:root {
  --mainColor: red;
}

a {
  color: var(--mainColor);
}

Custom Properties Set & @apply

Similar to Sass mixins.

:root {
  --error-message: {
    color: white;
    background-color: red;
  };
}

.error-text {
  @apply --error-message;
}

Reduced calc()

Similar to Sass operations.

:root {
  --fontSize: 1rem;
}

h1 {
  font-size: calc(var(--fontSize) * 2);
}

Custom Media Queries

Similar to Sass @import.

@custom-media --small-viewport (max-width: 30em);

@media (--small-viewport) {
  /* styles for small viewport */
}

Media Queries Ranges

Allows to replace min-/max- with <= & >= (syntax easier to read).

@media (width >= 500px) and (width <= 1200px) {
  /* your styles */
}

@custom-media --only-medium-screen (width >= 500px) and (width <= 1200px);

@media (--only-medium-screen) {
  /* your styles */
}

Custom Selectors

Allows you to create your own selectors.

@custom-selector :--button button, .button;
@custom-selector :--enter :hover, :focus;

:--button {
}

:--button:--enter {
  /* hover/focus styles for your button */
}

Nesting

Similar to Sass nesting.

a {
  /* direct nesting (& must be the first part of selector) */
  & span {
    color: white;
  }

  /* @nest rule (for complex nesting) */
  @nest span & {
    color: blue;
  }

  /* media query automatic nesting */
  @media (min-width: 30em) {
    color: yellow;
  }
}

Color Functions

color() function

Similar to Sass color operations and functions.

a {
  color: color(red alpha(-10%));
}

a:hover {
  color: color(red blackness(80%));
}

hsl() function

Allows you to use its new syntax consisting of space-separated arguments and an optional slash-separated opacity.

div {
  color: hsl(90deg, 90% 70%);
  background-color: hsl(300grad 25% 15% / 70%);
}

hwb() function

Similar to hsl() but easier for humans to work with.

body {
  color: hwb(90, 0%, 0%, 0.5);
}

gray() function

Allows you to use more than 50 shades of gray.

.foo {
  color: gray(85);
}

.bar {
  color: gray(10%, 50%);
}

#rrggbbaa colors

body {
  background: #9d9c;
}

rgb function

Allows you to use its new syntax consisting of space-separated arguments and an optional slash-separated opacity.

div {
  background-color: rgb（100 222.2 100.9 / 30%）；
}

rgba function

body {
  background: rgba(153, 221, 153, 0.8);
}

rebeccapurple color

The new color keyword as a homage to Eric Meyer's daughter.

body {
  color: rebeccapurple; /* #663399 */
}

font-variant Property

Shorthand for font-feature-settings.

h2 {
  font-variant-caps: small-caps;
}

table {
  font-variant-numeric: lining-nums;
}

filter Property

The W3C filters are only transformed as svg filter using the url(data:*) trick for Firefox < 35.

.blur {
  filter: blur(4px);
}

initial Value

Allow you to use initial value for any value. This value represents the value specified as the property's initial value. It does not mean browser default.

For example, for the display property, initial always means inline.

div {
  display: initial; /* inline */
}

div {
  all: initial; /* use initial for ALL PROPERTIES in one shot */
}

rem unit

rem fallback to px (if your browser scope cover old browsers, eg: IE8).

h1 {
  font-size: 1.5rem;
}

overflow-wrap Property

Converts overflow-wrap to word-wrap.

body {
  overflow-wrap: break-word;
}

Attribute Case Insensitive

Allows you to use case insensitive attributes.

[frame=hsides i] {
  border-style: solid none;
}

Pseudo Classes

:any-link pseudo-class

nav :any-link {
  background-color: yellow;
}

:matches pseudo-class

p:matches(:first-child, .special) {
  color: red;
}

:not pseudo-class

p:not(:first-child, .special) {
  color: red;
}

:: pseudo syntax

a::before {
}
rogerxu commented 7 years ago

CSS Modules

css-modules/css-modules: Documentation about css-modules

Resources

Examples

Webpack

{
  test: /\.css$/,
  loaders: [
    'style',
    'css?modules'
  ],
}

Concept

Local Scope

CSS Modules need to be piped in a build step, which means they do not work by themselves.

When you import a CSS file inside a JavaScript module, CSS Modules will define an object mapping class names from the file to dynamically scoped/namespaced class names that can be used as strings in JavaScript.

.base {
  color: deeppink;
}
import styles from './styles.css';

element.innerHTML = `<div class="${styles.base}">CSS Modules</div>`;

Global Scope

:global()

:global(.clearfix::after) {
  content: '';
  clear: both;
  display: table;
}

Composition

.className {
  color: green;
  background: red;
}

.otherClassName {
  composes: className;
  color: yellow;
}

Output class attribute will contain both classes.

<div class="output-class-1 output-class-2">hello world</div>