Build

Learn how to configure and compile the Rotala resources.

File structure of the source#

As a Monorepo project, Rotala locate all the resources together with official packages in the same Github repository.

FolderDescription
/docContains this document site sources.
/packages Contains Rotala core style set and official packages.


As for each official package under the source folder, all the source files are comipled into dist folder.

FolderDescription
/styleContains all style related sources.
/distContains Compiled Rotala core css files.


Postcss#

Rotala core only uses PostCSS and its plugins to compile the source.

plugins#

The following PostCSS plugins are already dependencies by default. By installing Rotala via a package manager yarn or npm, you'll have them in your project.

NameDescription
postcss-import Enables @import keyword
@import "rotala";
postcss-nested Enables nesting classes
.tab {
  .tab-item {
    ...
  }
}
postcss-simple-vars Enables custom variables
$my-component: a-beautiful-component;
autoprefixer Apply prefixes based on target browsers
cssnano Minimize your CSS stylesheet
Tailwindcss Utility first CSS framework


configurations#

Here is the default PostCSS configuration for Rotala core styles sets.

// postcss.config.js

module.exports = {
  map: false,
  plugins: [
    require('postcss-import'),
    require('postcss-nested'),
    require('postcss-simple-vars')({
      variables: {
        prefix: ''
      }
    }),
    require('tailwindcss'),
    require('autoprefixer'),
    ...process.env.NODE_ENV === 'production'
      ? [
          require('postcss-banner')({
            important: true,
            inline: true,
            banner: 'Rotala.css v0.1 @copyright 2020 by Daiyanze'
          }),
          require('cssnano')
        ]
      : []
  ]
}

Import#

It's recommended to customize your own build by introduing the source files into your project. In this way, you can easily extend the styles with the Rotala "blank design" components for theming purposes.

default#

Extend the class easily with Tailwindcss utilities.

/* import the rotala core */
@import "rotala";

/* style up component */
/* you can also write pure css within the block */
.button {
  @apply text-gray-700;
  @apply hover:bg-gray-300;
  @apply rounded-full;
}

on demand#

Only need what you want for the project? Simply import the required components to minimize the import size of the package.

/* required styles */
@import "rotala/style/components/tab.pcss";

.tab {
  @apply inline-flex;
  @apply text-gray-700;
  @apply border border-solid border-gray-300;
  @apply rounded-full;

  &-item {
    @apply px-4;
    @apply rounded-full;

    &.active {
      @apply bg-gray-300;
    }
  }
}

Prefix#

Rotala keeps all of its classes without prefixes by default. To Avoid class name collisions while introducing Rotala to your project, it is preferable to add a custom prefix to the existing classes. Prefix is enabled by a PostCSS plugin postcss-simple-vars.

/* Prefix */
$link: $(prefix)link;
$button: $(prefix)button;
$checkbox: $(prefix)checkbox;
$form-group: $(prefix)form-group;
$hr: $(prefix)hr;
$input: $(prefix)input;
$radio: $(prefix)radio;
$select: $(prefix)select;
...

Utilize the postcss-simple-vars plugin to add your prefix.

// postcss.config.js

module.exports = {
  plugins: [
    ...,
    require('postcss-simple-vars')({
      variables: {
        prefix: 'rotala-'
      }
    }),
    ...
  ]
}

Then your component classes will turn into the following output after compiling.

/* Before */
.button {
  ...
}

.input {
  ...
}

/* After */
.rotala-button {
  ...
}

.rotala-input {
  ...
}