New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

@silksofthesoul/css-corn

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@silksofthesoul/css-corn

Css utility to quickly insert css styles

1.0.4
latest
Source
npm

Version published: last year

Weekly downloads: 1; decreased by-92.86%

Maintainers: 1

Weekly downloads

Created: 5 years ago

Source

css-corn

Ru

Css-corn — Утилита для быстрой вставки css стилей непосредственно в документ через тег <style>

Установка:

npm:

  npm i -s @silksofthesoul/css-corn

git:

  git clone https://github.com/Silksofthesoul/css-corn.git
  cd css-corn
  npm install && npm run build:js

Подключение через тег script:

Вы можете подключить библиотеку скачав скрипт самостоятельно, и подключив его к проекту с помощью тега <script>

  <script type="text/javascript" src="/css-corn/index.js"></script>

...и использовать так:

  let cssCorn = new $CssCorn();

Подключение через тег import-require:

Вы можете подключить библиотеку установив пакет через npm и использовать конструкцию import/require

  import CssCorn from '@silksofthesoul/css-corn';

или:

  const CssCorn = require('@silksofthesoul/css-corn');

...и использовать так:

  let cssCorn = new CssCorn();

Как использовать:

Подключите библиотеку. Например в теге 😃 <head> 😉

  ...
      <script type="text/javascript" src="path/to/css-corn/index.js"></script>
    </head>
  <body>
  ...

Создайте объект используя шаблон класса 🦄 CssCorn 🌽

<script>
  // Создайте объект
  const css = new $CssCorn({// или new CssCorn -- если вы импортируете модуль
    id: 'my-id', // id тега <style> | Необязательный параметр
    willRender: true // Параметр отвечает, за перманентный рендер вносимых стилей | Не обязательный параметр, по умолчанию – false
  });
</script>

Теперь вы можете ➕ добавлять, ➖ удалять и 📝переименовывать стили

<script>
  import {CssCorn as MyAwesomeCssUnicorn} from '@silksofthesoul/css-corn';
  const css1 = new MyAwesomeCssUnicorn();

  // По шагу на строку
  css1.add('body','opacity: 0; font-family: Arial, sans-serif;');
  css1.add('body h2','font-size: 2em').add('body h1', 'color: red;');
  css1.render();

  // chaining style
  css1
    .del('body','opacity') // удалить свойство opacity из body
    .del('body h1') // удалить правило body h1
    .render()
    .add('.magic', 'border: 2px solid red;')
    .rename('.magic', '.magic * p .magic > .magic + p .magic')
    .render();


  // вариант использования. Но возможно -- не лучшая практика
  new CssCorn({id:'Test'}).add('.test', 'color: green').render();

  // Еще один пример, когда описанные стили, будут сразу же применены
  let css2 = new CssCorn({id:'wow', willRender})
    css2
      .add('.msg': 'color: red')
      .add('.msg': 'font-weight: bold')
      .add('.msg span': 'background: blue; font-weight: bold')
      .del('body');
</script>

En

Css-corn - A utility for quickly inserting css styles directly into the document via the <style> tag

Install:

npm:

  npm i @silksofthesoul/css-corn

git:

  git clone https://github.com/Silksofthesoul/css-corn.git
  cd css-corn
  npm install && npm run build:js

script:

You can connect the library by downloading the script yourself, and connecting it to the project using the <script> tag

  <script type="text/javascript" src="/css-corn/index.js"></script>

...and use it:

  let cssCorn = new $CssCorn();

import-require:

You can connect the library by installing the package via npm and use the import / require construct

  import CssCorn from '@silksofthesoul/css-corn';

or:

  const CssCorn = require('@silksofthesoul/css-corn');

...and use it:

  let cssCorn = new $CssCorn();

How to use:

Connect the library. For example, in the tag 😃 <head> 😉

  ...
      <script type="text/javascript" src="path/to/css-corn/index.js"></script>
    </head>
  <body>
  ...

Create an object using the class template 🦄 CssCorn 🌽

<script>
  // Create an object
  const css = new CssCorn({ // or 'new CssCorn' if you import/require a module
    id: 'my-id', // id of <style> tag | Optional parameter
    willRender: true // The parameter is responsible for the permanent rendering of insertion styles | Optional parameter, false by default
  });
</script>

Now you can ➕ add, ➖ delete and 📝 rename styles

<script>
  import {CssCorn as MyAwesomeCssUnicorn} from '@silksofthesoul/css-corn';
  const css1 = new MyAwesomeCssUnicorn();

  // Step By Line
  css1.add('body','opacity: 0; font-family: Arial, sans-serif;');
  css1.add('body h2','font-size: 2em').add('body h1', 'color: red;');
  css1.render();

  // chaining style
  css1
    .del('body','opacity') // remove the opacity property from body
    .del('body h1') // remove the rule body h1
    .render()
    .add('.magic', 'border: 2px solid red;')
    .rename('.magic', '.magic * p .magic > .magic + p .magic')
    .render();


  // use case. But maybe not the best practice
  new CssCorn({id:'Test'}).add('.test', 'color: green').render();

  // Another example where the described styles will be applied immediately
  let css2 = new CssCorn({id:'wow', willRender})
    css2
      .add('.msg': 'color: red')
      .add('.msg': 'font-weight: bold')
      .add('.msg span': 'background: blue; font-weight: bold')
      .del('body');

</script>

Keywords

FAQs

What is @silksofthesoul/css-corn?

Is @silksofthesoul/css-corn popular?

Is @silksofthesoul/css-corn well maintained?

Package last updated on 23 Oct 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install