Tạo kiểu đối tượng thành chuỗi css

const options = [{
  selector: '.base',
  declarations: [{
    property: 'background',
    value: 'red',
   },{
    property: 'color',
    value: 'white',
   }],
  pseudoStates:[{
    selector: ':hover',
    declarations: [{
      property: 'background',
      value: 'green'
     },{
      property: 'color',
      value: 'orange'
     },{
      property: 'cursor',
      value: 'pointer'
     }]
  }]
}, {
  selector: '#extra',
  declarations: [{
    property: 'background',
    value: 'aqua',
   },{
    property: 'color',
    value: 'black',
   }],
  pseudoStates:[{
    selector: ':hover',
    declarations: [{
      property: 'background',
      value: 'blue'
     },{
      property: 'color',
      value: 'white'
     }]
  }]
}]

options.forEach(function(option){
 createStyleRule(option.selector, option.declarations);
 option.pseudoStates.forEach(function(pS){
   createStyleRule(option.selector + pS.selector, pS.declarations);
 })
});

function createStyleRule(selector, declarations){
  let styleDeclarations = [];
  declarations.forEach(function(dec){
    styleDeclarations.push( dec.property +": " + dec.value);
  })
  let styleRule = selector + " {" + styleDeclarations.join("; ") + "}";
  document.styleSheets[0].insertRule(styleRule, 0);
}

This is the base element
 Nội dung chính Show
 
Cách sử dụng
Sử dụng cơ bản
Sử dụng nâng cao
Đóng góp
Bắt đầu
 
This is the extra element

Trong một tiếp theo. dự án dựa trên js Tôi đang làm việc Tôi nhận thấy tệp theme.js này chứa đối tượng JavaScript chứa mã thông báo thiết kế, xác định màu sắc sẽ sử dụng và những thứ tương tự. Vì chúng tôi chỉ sử dụng các giá trị này trong CSS (thông qua Thành phần được tạo kiểu), chúng tôi quyết định di chuyển khỏi nó và thay thế nó bằng Thuộc tính tùy chỉnh CSS. Đối với điều này, tôi đã tạo ra một công cụ trợ giúp nhỏ

Nội dung của theme.js trông như thế này (đơn giản hóa)

const theme = {
    borderRadius: '15px',
    cardSpacing: {
        horizontal: '20px',
        vertical: '85px',
    },
    colors: {
        primaryBackground: '#FAFAF2',
        primaryButton: '#FFFFFF',
        primaryCard: '#FFFFFF',

        accent: '#2ea7a4',
        text: '#2f2f2f',
        textSecondary: '#707070',
        placeholder: '##959595',

        title: '#000',
        subTitle: 'rgba(255, 255, 244, 0.5)',
    },
};

export default theme;

Đã chuyển đổi thành Thuộc tính tùy chỉnh, tôi muốn cái này

--border-radius: 15px;
--card-spacing-horizontal: 20px;
--card-spacing-vertical: 85px;
--colors-primary-background: #FAFAF2;
--colors-primary-button: #FFFFFF;
--colors-primary-card: #FFFFFF;
--colors-accent: #2ea7a4;
--colors-text: #2f2f2f;
--colors-text-secondary: #707070;
--colors-placeholder: ##959595;
--colors-title: #000;
--colors-sub-title: rgba(255, 255, 244, 0.5);

~

Để dịch các mục như

This is the base element
This is the extra element

0 sang

This is the base element
This is the extra element

1, tôi quyết định tạo một công cụ trợ giúp nhỏ. Nó tự động thêm tiền tố

This is the base element




This is the extra element

2 cần thiết, điều chỉnh tất cả các lần xuất hiện của camelCase thành trường hợp kebab và hoạt động tốt với các đối tượng lồng nhau và mảng (đơn giản)

Có lẽ công cụ này cũng có thể hữu ích cho bạn 🙂

~

Điều này có giúp ích gì cho bạn không? .
Thank me with a coffee.

Tôi không làm điều này vì lợi nhuận nhưng một khoản quyên góp nhỏ một lần chắc chắn sẽ khiến tôi mỉm cười. Cảm ơn

Dự án này được lấy cảm hứng từ một số công việc với thư viện 💅styled components. Khi tạo một thành phần mà tôi sẽ không bao giờ sử dụng, tôi cần cung cấp cho người tiêu dùng cách truyền lại các kiểu mà sau đó tôi có thể hợp nhất thành các định nghĩa thành phần khác nhau cùng với các quy tắc css của riêng tôi

Để đề phòng, gói này cũng cho thấy khả năng truy cập hoặc tạo các trình phân tích cú pháp bổ sung mà sau đó có thể được sử dụng với chức năng xuất chính hoặc dưới dạng các hàm phân tích cú pháp chuỗi độc lập

Cách sử dụng

Sử dụng cơ bản

Không có thành phần kiểu dáng

import styleToCss from 'style-obj-to-css-string';
// I now regret my choice in package name

const styles = {
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
};

const styleString = styleToCss(styles);
/**
 * Generates all values as a single semicolon separated string
 * "display: flex;flex-direction: column;align-items: center;justify-content: center;"
 */

Với💅styled-thành phần

import styled from 'styled-components';
import styleToCss from 'style-obj-to-css-string';

const StyledThingy = styled.p`
  ${/* Place properties that you will allow to be overwritten here - typically stylistic properties */}
  color: meduimaquamarine;
  font-size: 1rem;
  background-color: thistle;
  ${props => props.styles && styleToCss(props.styles) /* we check for styles to avoid an invocation with undefined.  may be fixed with future pull requests. */}
  ${/* Place properties that you will not allow to change here - typically structural properties */}
  display: block;
  margin: 1rem;
  grid-column: 1 / -1;
`;

Sử dụng nâng cao

Thư viện này cũng có thể hữu ích trong việc phân tích cú pháp JSON từ các máy chủ có thể sử dụng các quy ước chữ hoa chữ thường khác. Chỉ cần đưa vào danh sách

This is the base element




This is the extra element

3 của chúng tôi trong quá trình nhập của bạn hoặc tạo danh sách của riêng bạn với chức năng

This is the base element
This is the extra element

4 của chúng tôi

trình phân tích cú pháp - Một đối tượng chứa nhiều phương thức phân tích cú pháp

• trình phân tích cú pháp. rắnToKebab( str. chuỗi ). chuỗi - chuyển đổi solid_case thành kebab-case
• trình phân tích cú pháp. lạc đàToKebab( str. chuỗi ). chuỗi - chuyển đổi camelCase thành kebab-case

createParser - Hàm trả về hàm phân tích cú pháp

• createParser(đối sánh. chuỗi. RegExp, thay thế. Chức năng). Hàm - tạo hàm phân tích cú pháp như đã thấy trong trình phân tích cú pháp. Ghi chú. trình thay thế sử dụng cú pháp giống như tham số thứ hai cho (đối số đầu tiên là giá trị phù hợp)

import styleToCss, { parsers, createParser } from 'style-to-css-string';
import axios from 'axios';

const kebabToCamel = createParser(/-[a-z]/, match => match.split('')[1].toUpperCase());

async function getStyleObj(path) {
  const style = await axios.get(path);
  const styleString = styleToCss(style, parsers.snakeToKebab);
}

Đóng góp

Là gói mã nguồn mở đầu tiên của tôi, kho lưu trữ này được trang bị quá công cụ ở mức tối đa chỉ để xem những gì có thể - vui lòng tạo các sự cố cụ thể xung quanh các công cụ mà tôi đang sử dụng và cấu hình của chúng

Bắt đầu

Dự án này được viết bằng Node phiên bản 10 và npm phiên bản 6 - trong khi hoạt động bên ngoài các ràng buộc này vẫn ổn, bạn có thể thử sử dụng các phiên bản này để có sự đồng nhất. Với nvm được cài đặt, chỉ cần chạy

This is the base element
This is the extra element

5 để đọc từ. tập tin nvmrc

Bắt đầu rất đơn giản, chỉ cần rẽ nhánh và sao chép kho lưu trữ, sau đó chạy các lệnh sau trong thiết bị đầu cuối của bạn. Tập lệnh xác thực sẽ chạy bản dựng, thử nghiệm và kẻ nói dối và là tập lệnh sẽ chạy trước khi bạn cam kết và đẩy

$ cd style-object-to-css-string
$ npm run install
$ npm run validate
# will show a slew of commands that are being run
# will show the current test coverage report for the repository

cam kết

Tôi sử dụng commitlint để lint git cam kết theo nhật ký thay đổi thông thường. Nếu bạn lười biếng như tôi, vui lòng sử dụng commitizen cli với cài đặt của riêng bạn hoặc với

This is the base element
This is the extra element

6 - nếu cam kết của bạn vẫn không tuân theo các quy tắc của cam kết, bạn có thể chạy

This is the base element
This is the extra element

7

🔥Trong trường hợp khẩn cấp🔥

Đề phòng trường hợp có điều gì đó xảy ra buộc bạn phải la hét chạy khỏi máy tính, chỉ cần chạy

This is the base element
This is the extra element

8, thao tác này sẽ tạo một nhánh mới gọi là "khẩn cấp", cam kết tất cả các thay đổi hiện tại của bạn, sau đó đẩy chúng sang một nhánh mới trên điều khiển gốc của bạn. 🚒